第9講
よく使われるレイアウトパターン
Webサイトには、よく使われる型があります。型を知っていると、見えない状態でも「このページはどの型で作るべきか」を判断しやすくなります。
1カラム
1カラムは、本文を上から下へ一直線に並べる形式です。説明ページ、規約ページ、案内ページ、講義教材に向いています。
読み上げ順と見た目の順序が一致しやすく、アクセシビリティ上も扱いやすい基本形です。
2カラム
2カラムは、本文と補足情報を左右に分ける形式です。例えば、左に本文、右に目次や関連リンクを置きます。
パソコンでは便利ですが、スマートフォンでは横幅が足りないため、縦並びに変わる必要があります。このとき、本文と補足の順序が自然かを確認します。
3カラム
3カラムは、3つの情報を横に並べる形式です。サービス紹介、特徴紹介、料金プランなどでよく使われます。
3つのカードの高さや余白がそろっていると、比較しやすく、整った印象になります。
視覚サンプル：3つのカード
カードグリッド
カードグリッドは、同じ形のカードを複数並べる形式です。お知らせ一覧、スタッフ紹介、商品一覧などで使われます。
カードの中に、見出し、短い説明、リンクやボタンを入れると、情報単位が分かりやすくなります。
フォーム
フォームは、入力欄を並べる画面です。視覚的には、ラベル、入力欄、補足説明、エラー、送信ボタンが、縦に整列していると分かりやすくなります。
入力欄が横に並びすぎると、どの説明がどの欄に対応するのか分かりにくくなります。特にスマートフォンでは、縦並びが基本です。
問い合わせ導線
問い合わせボタンや申し込みボタンは、ページの目的につながる重要な導線です。見える人には、ボタンの色、形、位置、余白によって「ここを押してほしい」という意図が伝わります。
重要なボタンが多すぎると、どれを押せばよいか分かりにくくなります。主要ボタンは原則として絞ります。