Webデザインのレイアウトはまず基本パターンから！目的に合った最適なレイアウトは？

Webサイトにおけるレイアウトの基礎知識　

Webサイトにおいてレイアウトとは、整理した情報を効果的に伝えるために配置することをいいます。　

キャッチコピーや画像、文章といった要素を優先順位や目的に沿って配置しましょう。　

レイアウトを決めるときの2つのポイント　

レイアウトを決めるときに意識したい大切なポイントが2つあります。　

デザインの基礎ともいえる要素ですので、チェックしておきましょう。　

【デザインの4大原則】　

近接・整列・強弱・反復というデザインの4大原則をレイアウトでも意識することによって、情報が伝わりやすいデザインになります。　

【視線の動き】　

人間の視線は大きく分けるとZ型・F型・N型という3種類の移動の仕方をしています。　

横書きならZ型、縦書きならN型、パソコンやスマホで閲覧する際にはF型がもっとも用いられている視線誘導の型です。　

レイアウトを構成する5つの基本パーツ　

Webサイトのレイアウトは以下の5つのパーツを組み合わせて構成します。　

• ヘッダー
• ナビゲーション
• メインコンテンツ
• サイドバー
• フッター　

【ヘッダー】　

サイト最上部のエリアであり、全ページ共通で使用します。　

サイトにアクセスして最初に目に入るエリアのため、ロゴや問い合わせ・購入といったコンバージョンにつながるボタンを配置しましょう。　

【グローバルナビゲーション】　

サイト内の重要なページへのリンクを集めた、ナビゲーションのエリアです。　

全ページ共通で使用します。　

【メインコンテンツ】　

ページの主題を伝える、重要なエリアです。　

文章や画像の優先順位を整理し、ユーザーがストレスなく情報を得られるレイアウトにしましょう。　

【サイドバー】　

2カラム以上の横並びのレイアウトにおいて、メインコンテンツの横に配置されるエリアです。　

レイアウトによっては必須ではありません。　

【フッター】　

サイト最下部のエリアであり、全ページ共通で使用します。　

コピーライトや、利用規約・運営会社について・プライバシーポリシー・ お問い合わせといったページへのリンクを配置することが多いエリアです。　

レイアウトの基本パターン3つをご紹介　

Webサイトにおけるレイアウトには基本パターンがあり、そこから派生したレイアウトも多数あります。　

レイアウト作りに慣れていない方は、種類がありすぎてどんなレイアウトにしたらいいのか迷ってしまうかもしれません。　

そこでまずはレイアウトの基本パターンを使い、レイアウトを構成する5つの基本パーツを組み合わせてみましょう。　

ここではレイアウトの基本パターンを3つご紹介します。　

1.シングルカラム（1カラム）　

Webサイトのレイアウトにおける段組みをカラムといいます。　

シングルカラムとは、1つのカラムを縦に積むようなイメージのレイアウトです。　

画面の横幅いっぱいに広げて情報を見せられるレイアウトのため、インパクトのある表現ができます。　

パソコンでの表示とスマホやパッドといった小さい画面での表示のギャップが少なく、レスポンシブデザインと相性のいいレイアウトです。　

コンテンツ内の視線誘導がしやすく、ランディングページやキャンペーンサイトでよく使われます。　

シングルカラムのひとつといわれるレイアウトが、画面の横幅いっぱいにコンテンツを広げるフルスクリーンレイアウトです。　

左右の余白がなく、よりインパクトのあるダイナミックなデザインになります。　

【シングルカラムレイアウトのメリット】　

• 横幅いっぱいに使ってインパクトを出せる
• コンテンツ内の視線誘導がしやすい
• パソコンとスマホ・パッドでギャップが少ない　

【シングルカラムレイアウトのデメリット】　

• 縦のスクロール量が増える
• ページ内のコンテンツを探しにくい　

2.マルチカラム　

マルチカラムとは、カラムを横に複数並べて列を分けるレイアウトです。　

2つのカラムが並ぶものを2カラム、3つのカラムが並ぶものを3カラムといいます。　

主にメインコンテンツ＋サイドバー（＋サイドバー）の構成であり、Yahoo! JAPANのサイトをはじめ、昔から見慣れた安心感のあるレイアウトです。　

サイドバーにナビゲーションを設置してサイト内を回遊しやすくし、情報をすっきりと見せられます。　

情報量の多いメディアサイトやポータルサイト、ネットショップといったサイトにおすすめです。　

スマホやパッドでは複数のカラムが横に並ぶと情報が読み取りにくいため、シングルカラムに変更するといった対応が必要になります。　

【マルチカラムレイアウトのメリット】　

• サイドバーがナビゲーションの役目を果たす
• 情報の強弱がつけやすい
• 昔からあるレイアウトで安心感を与えられる
• 大量の情報をすっきりとまとめられる　

【マルチカラムレイアウトのデメリット】　

• スマホやパッドではレイアウトを変更する必要がある
• 一度に目に入る情報量が多く、視線誘導がしにくい
• シンプルなイメージにはマッチしない　

3.グリッドレイアウト　

ページ内を格子状に分割し、コンテンツをカードのように配置するレイアウトをグリッドレイアウトといいます。　

狭いスペースに情報を整然と並べられ、レスポンシブデザインとも非常に相性がいいのが特徴です。　

適度に余白を入れることにより、すっきりとした印象を与えられます。　

ECサイトやメディアサイト、ギャラリーサイトにおすすめです。　

グリッドレイアウトのひとつに、カード・タイルレイアウトがあります。　

タイルレイアウトはブロックの大きさに変化を与え、敷き詰めるようなレイアウトです。　

大きさの変化によってリズムが生まれ、賑やかさ・楽しさ・躍動感が表現できます。　

グリッドレイアウトは似通った印象になりやすく、差別化を狙いたいサイトでは適していません。　

差別化を狙ったオリジナリティのあるサイトの場合は、あえてグリッドレイアウトを無視したブロークングリッドレイアウト（ノングリッドレイアウト）がおすすめです。　

【グリッドレイアウトのメリット】　

• 大量の情報を整然と見せられる
• コンテンツの統一感が出る
• すっきりした印象を与える
• レスポンシブと相性がいい　

 【グリッドレイアウトのデメリット】　

• コンテンツの優先順位がわかりにくい
• サイトの差別化がしにくい　

スクロールした際の見せ方も考えてレイアウトしましょう　

スマホやパッドは画面サイズが小さく、パソコンと比べると一度に見えるコンテンツの量が限られます。　

ページ内をスクロールしたときに大切なコンテンツが目に入りやすい仕組みを考えてレイアウトしましょう。　

ここでは、スクロール時に見せ方の代表的なアイデアを3つご紹介します。　

ヘッダーを固定する　

ページをスクロールした際に、ページ上部にヘッダーを固定で表示されるレイアウトです。　

ロゴやメニューが常に表示されることにより、ストレスなくサイト内の回遊ができます。　

パソコンと比べてスクロール量が多いスマホサイトでよく見られるレイアウトです。　

サイドバーを固定する　

ページをスクロールした際にサイドバーが固定され、メインコンテンツのみがスクロールするレイアウトです。　

サイドバーが常に表示されているため、常にナビゲーションや見せたいコンテンツを提供できます。　

スマホやパッドといった横幅が小さい画面では、マルチカラムのレイアウトは読みづらいため向いていません。　

そのためパソコンでの表示のみで使える手法になります。　

チャットボタン（問い合わせボタン）を固定表示する　

スマホサイトにおいて、画面の右下にリンクボタンが固定で表示されるのを見たことがあるのではないでしょうか。　

スマホの小さな画面の中で、スクロールをして探し出す必要なくサイトの目的にたどり着きやすくするための仕組みです。　

Webサイトの目的に合わせて、問い合わせチャットや問い合わせページへのリンクボタン、カートボタンなどボタンの内容を検討してください。　

サイトの目的と使い方を考えてレイアウトしましょう　

ユーザーがサイトを見やすく、使いやすいようにレイアウトすることが重要です。　

制作するサイトの目的や使い方に合った、効果的に見せられるレイアウトを選びましょう。　

基本のレイアウトパターンを活かし、あなたのサイト制作に取り組んでみてください！