この章では、レイアウトの基本を学びます。
レイアウトとは、情報を画面上にどう配置するかを決めることです。
同じ情報でも、配置が整っているかどうかで、読みやすさや信頼感が大きく変わります。
レイアウトの役割
レイアウトの役割は、情報を見やすく整理することです。
ただ要素を並べるだけではなく、読む人が自然に情報を追えるように配置します。
レイアウトでは、次のことを考えます。
- どこから読み始めるか
- 何を先に見せるか
- 関連する情報をどうまとめるか
- どこに余白を作るか
- どこを横並びにするか
- どこを縦並びにするか
- スマホではどう並べ替えるか
レイアウトが整うと、ページ全体が読みやすくなります。
整列
レイアウトで最初に意識したいのは整列です。
整列とは、要素の端や中心をそろえることです。
たとえば、見出し、本文、ボタンの左端がそろっていると、まとまりが出ます。
逆に、要素ごとに少しずつ位置がずれていると、雑な印象になりやすくなります。
整列で確認したいことは次の通りです。
- 左端がそろっているか
- 画像とテキストの位置が合っているか
- カードの高さや余白が極端にばらついていないか
- ボタンの位置がそろっているか
- セクション内の基準線が見えるか
細かな装飾よりも、まず整列を整えるだけで見た目はかなり改善します。
グリッド
グリッドとは、画面を一定の列や幅に分けて配置を考える仕組みです。
Webデザインでは、すべての要素を自由に置くのではなく、見えない線に沿って配置すると整いやすくなります。
たとえば、次のような考え方があります。
- コンテンツ幅を決める
- 左右の余白をそろえる
- 2カラムや3カラムで分ける
- カードの幅をそろえる
- セクション内の開始位置をそろえる
グリッドを使うと、ページ全体に一貫性が出ます。
コンテンツ幅
Webページでは、本文が横に長くなりすぎると読みにくくなります。
そのため、コンテンツの最大幅を決めます。
たとえば、本文中心のページでは、幅を広げすぎない方が読みやすくなります。
一方で、カード一覧やギャラリーでは、ある程度広い幅を使うこともあります。
確認したい項目は次の通りです。
- 本文の1行が長すぎないか
- 画像が不自然に大きくなっていないか
- セクションごとの幅がばらばらすぎないか
- スマホで左右余白が狭すぎないか
コンテンツ幅は、読みやすさに直結します。
カラムレイアウト
カラムレイアウトとは、情報を横に分けて配置する方法です。
Webページでは、次のような場面でよく使います。
- 画像とテキストを左右に並べる
- 特徴を3つ並べる
- サービスカードを並べる
- メインコンテンツとサイドバーに分ける
横並びにすると、情報を比較しやすくなります。
ただし、画面幅が狭いスマホでは、横並びのままだと読みにくくなります。
スマホでは縦並びにする、表示順を変える、余白を調整するなどの対応が必要です。
中央揃えと左揃え
中央揃えと左揃えは、使いどころが違います。
中央揃えは、短い見出しやキャッチコピーに向いています。
一方で、長い本文は左揃えの方が読みやすいことが多いです。
| 揃え方 | 向いているもの |
|---|---|
| 中央揃え | 短い見出し、キャッチコピー、短い説明 |
| 左揃え | 本文、リスト、カード内テキスト、フォーム |
何でも中央揃えにすると、文章の開始位置が毎行変わり、読みづらくなります。
長い文章は左揃えを基本にします。
カード型レイアウト
カード型レイアウトは、情報を小さなまとまりとして見せる方法です。
サービス一覧、特徴、実績、記事一覧などでよく使います。
カードには、次のような要素が入ります。
- 画像
- アイコン
- 見出し
- 説明文
- タグ
- ボタンやリンク
カードを使う時は、カード内の余白、見出しの位置、画像比率、ボタンの位置をそろえます。
カードごとにルールが違うと、一覧全体が散らかって見えます。
視線の流れ
レイアウトでは、視線の流れも考えます。
人はページを上から下へ、左から右へ読むことが多いです。
そのため、重要な情報を上部や読み始めの位置に置くと伝わりやすくなります。
ただし、画像や強い色、太い文字があると、そこに視線が引かれます。
意図しない場所だけが目立っていないかを確認します。
よくある失敗
レイアウトでよくある失敗は、次の通りです。
- 要素の左端がそろっていない
- すべて中央揃えで本文が読みにくい
- 横幅が広すぎて1行が長い
- カードの高さや画像比率がばらばら
- スマホで横並びのままになっている
- 余白の基準がなく、配置が散らかっている
まずは、整列、幅、余白、表示順を確認します。
この章のまとめ
- レイアウトは、情報を見やすく配置するためのもの
- 整列をそろえるだけで、ページ全体の印象はかなり改善する
- 本文は横に広げすぎず、読みやすいコンテンツ幅を決める
- カード型レイアウトでは、余白、画像比率、見出し位置をそろえる
- 次の章では、読みやすさを作る余白の使い方を学ぶ