デザインルール「整列レイアウト」
整列レイアウトをカンタンにまとめると、「要素の位置を揃える」または「余白の間隔を揃える」ということです。
整列のコツとしてよく言われるのが、見えないガイドラインを引くことです。見えないガイドラインとはどんなものでしょうか。それも一緒に確認していきましょう。
まずは「要素の位置を揃える」と「余白の間隔を揃える」という2大整列レイアウトについて触れていきます。
要素の位置を揃える
ウェブページには様々な要素があります。要素というのは、文字（テキスト）や、画像やリンクや表などの総称です。
次の画像を見てください。
このように、各要素の位置がバラバラだと、読みにくいと感じます。これを次の画像のように整えるだけで、読みやすそうな整った情報であると感じませんか？
これが整列の力です。言葉にすればなんてことはないのですが、だからこそ大切な概念と言えます。
余白の間隔を揃える
要素と要素の間には、ある程度の距離が必要です。この距離のことを余白と呼んでいます。この余白についても整列の力が有効です。
具体例を見ていきましょう。下のイラストを見てください。
文字と画像の余白がバラバラで、散らかった印象を受けます。これではイマイチです。
そこで、次のように間隔の調整を行います。
このとおり文字と画像の間隔を揃えてあげることで、プロフェッショナルな印象に早変わりします。
これが余白の間隔を揃える効果です。
ガイドライン、というツールを使う
ここまで「要素の位置を揃える」と「余白の間隔を揃える」という整列レイアウト手法を見てきました。位置や間隔を揃える際に、なんとなく同じになるように揃えたわけではありません。実際に揃える作業を行う際には、物差しのような役割を果たすガイドラインと呼ばれるツールを使っています。
具体的なガイドラインの引き方については、各レッスンで触れていきますので楽しみにしていてください。
その他の整列レイアウト
「要素の位置を揃える」と「余白の間隔を揃える」以外にも整列レイアウトが力を発揮する場面があります。カンタンに紹介しておきます。
高さの位置を揃える
画像と文字を配置する際に、上下の高さどちらに合わせるべきかを考えてください。
スッキリするのはどちらかを判断します。文字と画像の位置関係などによっても変わるので、状況によって判断が必要です。
とはいえ「状況によって判断が必要」というのは、初めての方には難しいですよね。この段階で大切なのは、「上下の高さを揃えることでスッキリする」という視点を持つことです。実際に適切な判断ができるかどうかは、やはり数をこなすか、その場面に出会ってみないと分からないものです。
ここでは、こういう視点がある、ということを押さえておいてください。
要素の軸を揃える
文字には「左寄せ」と「中央寄せ」と「右寄せ」があります。WordやGoogle Documentなどのドキュメント作成ツールを使ったことがある方は想像しやすいかもしれません。
寄せ方によって特徴があるので、まとめておきます。
| 左寄せ | 日本語や英語などでは、最も一般的です。長文でも短文でも読みやすく、オールマイティーな寄せ方になります。 |  |
| 中央寄せ | 左右に余白が生まれ、自ずと中心に軸ができるので、全体の構造が安定します。ただし文章が長かったり、改行を伴う文章の場合は読みにくいでしょう。 |  |
| 右寄せ | 上手に使えると技巧的ですが、使い勝手はよくありません。長文であれば確実に読みづらいでしょう。なんらかのメモや注釈や補足程度に使用するのが無難です。 |  |
02. デザインルール「近接レイアウト」
近接レイアウトをカンタンにまとめると、「関連のある情報をグループとしてまとめてあげる」ということです。似たような意味や役割を持つテキスト同士やリンク同士などを近づけて配置することで、見ている人に「この情報と情報はグループなんだな」「このあたりには○○関連のリンクがまとまっているんだな」と直感的に伝える手法のことです。
こういうと難解なテクニックのように思われがちですが、実は様々な場面で見かけている至極当然なテクニックなので安心してください。
具体的な例を見ていきましょう。
ポイント① グループに分けてまとめる
たとえば次の画像のようなウェブサイトがあったとします。
まず1つ目に、上の画像から「会社概要」ページに行くためのリンクを見つけてください。
次に、「問い合わせ」ページへのリンクを見つけてください。
そして「ブログ」ページへのリンクも見つけてください。
おそらく1つ目の会社概要のリンクを見つけた後は、探すまでもなく次のリンクが見つかったのではないでしょうか。
これは役割が同じリンク同士をグループ化して同じ場所に配置してあるからです。こういったグループは「サイトナビゲーション」や「グローバルナビゲーション」や単に「ナビゲーション」「メニュー」などと呼ばれています。
「なんだ、本当に当然だな」と思われるかもしれません。こういった当然のデザインこそが、全てのデザインの基本になっているのです。とくに「ウェブページのどこかにサイト内ナビゲーションをまとめて配置する」というのは、非常に多くのウェブサイトで採用されている近接レイアウトの具体例です。
ナビゲーションの他にも、メインコンツの横にまとめられた一連の情報はサイドバーとして有名です。ここには新着記事などがグループ化してまとめてあったり、人気の記事がまとめてあったり、広告などが配置されていたりすることが直感的に伝わります。
このように、ウェブサイトでは近接レイアウトが多く使われています。以下に有名な近接レイアウトが使われている部位を列記しておきますので、ウェブサイトを見るときに「これは近接レイアウトだな」と意識して見る際の参考にしてください。
| 名称 | 代表的な配置場所 | 役割や意味 |
|---|---|---|
| ヘッダー | ページの上部 | サイトのロゴや、ナビゲーション、電話番号や住所など、ウェブサイトを代表する情報がまとめられていることが多いです。 |
| ナビゲーション | ヘッダーやサイドバーやフッターなど | ウェブサイト内の主要なページへのリンクがまとめられていることが多いです。 |
| フッター | ページの下部 | ヘッダーと同様、ウェブサイトを代表する情報がまとめられていることが多いです。ヘッダーよりも多くの情報量を載せているサイトも多いです。その場合は、それなりの高さを有しています。 |
| メインコンテンツ | ヘッダーとフッターの間 | 記事の一覧や、記事の詳細が内包されている事が多いです。メインコンテンツの中身は、ページの役割によって千差万別です。 |
| サイドバー | メインコンテンツの横 | 新着記事一覧や、執筆者の情報や、広告や、目次など、多岐にわたります。ページの主要な役割とは異なる周辺情報がまとめられていることが多いです。また、最近ではサイドバーが存在しないウェブサイトも増えています。 |
| リスト | 主にメインコンテンツ内 | いわゆる箇条書きです。「30代女性に人気の趣味一覧は次のとおりです」といったように、関連性の高い情報を一覧化する際に使われます。また、「ハンバーグの作り方は次の5ステップです」といった順番の解説時などにもよく使われます。 |
| カード（またはボックス） | 主にメインコンテンツ内 | 記事一覧における、各記事を紹介する際などに、よく使われています。記事のサムネイル、タイトル、紹介文やボタンなどを１つのグループとしてまとめる手法です。 |
他にもたくさんの近接レイアウトが存在します。これからはウェブサイトを見ながら近接レイアウトのネタ探しもしてみてください。見つけたら自分用のメモ帳に残していくと良いでしょう。
どのようなナビゲーションの配置になっているか、どういうグループ分けをしているか、グループの中はどんな配置をしているか、などを気にしてみるようにしてください。そうすることで「近接レイアウト」に対するアンテナが育ち、いつの間にか良いデザインに対する知見も育っていきます。
ポイント② 余白でグループを際立たせる
グループに分けただけでは近接レイアウトは完成ではありません。グループの周囲に余白を設けることによって、情報がまとまっていることを視覚的に訴える必要があります。
次の画像を見てください。
グループ同士が近すぎると、「どの情報がどのグループに属しているの？」とユーザーが混乱してしまいます。どの情報がどのグループかを確実にユーザーに伝えるためにも、適切な余白を設ける必要があるのです。
最適な余白はどのくらい？
上述したとおりグループを際立たせる際には、「どのくらい余白を設ければ、どの情報がどのグループに属しているか分かるだろう」を考える必要があります。これが近接レイアウトで最も難しいポイントです。なぜなら何ピクセル、何センチくらい余白を設ければ適切かという決まりはなく、常に他のレイアウトとの兼ね合いで決めていく必要があるからです。
「余白は十分空いているか？」と自問しながらデザインしてください。
余白をどのくらいあけるべきかを研究するには、優れたサイトをたくさん見ていくことが有効な方法ですが、長期的に続けていき習慣化する必要があります。
ひとまずカリキュラムでは、どのくらい余白をあけるかを明示してあります（ときには暗に示しているだけの箇所もあります）。
近接レイアウトのポイントをまとめると、次のようになります。
- 意味や関係や役割の近い情報を1つのグループにまとめる
- 余白を設けることで、グループであることを視覚的に訴える
- どのくらい余白を設けるかは、周囲に配置されている別の要素との兼ね合いで考える
近接レイアウトはウェブデザインで重要なルールなので、カリキュラム内では要所要所で触れていきますので、今は知っているだけで問題ありません。課題などを通して手を動かすことで、次第に使えるようになります。
03. デザインルール「反復レイアウト」
反復のカンタンにまとめると、「規則性を持たせて繰り返す」ということです。
人間は規則性を持って繰り返されているものを美しいと感じる生き物です。これは脳にパターン認識を司る領域があるからです。パターン認識力は生後8ヶ月頃にはすでに確立されているという、非常に根源的な力と言えます。デザインと脳科学には密接なつながりがあるのです。
では、ウェブサイトで反復レイアウトを施す代表的な場面を紹介していきます。
ページ内の局所的な反復
- 縦や横に並べたリスト
- 見出しと本文の反復
- カードや料金プランなどのグループの反復
見出しと本文の反復の例
カードの例
ページをまたいだ反復
反復というよりは「全ページ共通で配置されるグループ」という方が伝わりやすいかもしれません。ヘッダーやフッター、サイドバーなどのことです。テクニカルには、これらも反復というデザインルールに則っています。
デザインルール「強調レイアウト」
強調レイアウトをカンタンにまとめると、「メリハリをつける」ということです。
サイズでメリハリをつける
最も分かりやすい強調の方法と言えます。
例えば、見出しを大きくして、本文は小さめにするといった基本的なことも、立派な強調になります。
文字のサイズ以外でも、画像のサイズでも強調を表現できます。
色の違いでメリハリをつける
これも分かりやすい強調です。違う色を使うことで、違いを表現します。
例えば紅組と白組などの色分けをすることで、お互いにライバルであるということを明確にしています。
学習でノートを取る際に、大切なことは赤ペンで書く人も多いのではないでしょうか。これも色による強調です。
ウェブサイトでいうと、表を組む際にヘッダーだけ色を変えたり、トップページで一部だけ背景色を変えたりして強調を使っていきます。
余白を空けてメリハリをつける
強調したい箇所だけ、他よりも大幅に余白を設けることで強調ができます。先述した近接レイアウトとは真逆の発想です。
ある文字だけ大きく余白を設けることで、とくに目立たせたりします。
