Webサイトを制作する際、情報整理をしてレイアウトを決めてからデザイン制作に進みます。
しかし、いざレイアウトを作成しようとすると「自分のサイトにはどんなレイアウトがいいの？」と迷ってしまいませんか？
Webサイトのレイアウトには、基本となるパターンがあります。
レイアウト作成に慣れていない方や、サイトに適したレイアウトがわからず迷っている方は、まず基本パターンから押さえましょう。
この記事では、レイアウトの基礎知識や3つの基本パターン、スクロール時の見せ方のアイデアをご紹介します。
最後までご覧いただき、あなたのWebサイトに最適なレイアウトを見つけてください！
Webサイトにおいてレイアウトとは、整理した情報を効果的に伝えるために配置することをいいます。
キャッチコピーや画像、文章といった要素を優先順位や目的に沿って配置しましょう。
レイアウトを決めるときに意識したい大切なポイントが2つあります。
デザインの基礎ともいえる要素ですので、チェックしておきましょう。
【デザインの4大原則】
近接・整列・強弱・反復というデザインの4大原則をレイアウトでも意識することによって、情報が伝わりやすいデザインになります。
【視線の動き】
人間の視線は大きく分けるとZ型・F型・N型という3種類の移動の仕方をしています。
横書きならZ型、縦書きならN型、パソコンやスマホで閲覧する際にはF型がもっとも用いられている視線誘導の型です。
Webサイトのレイアウトは以下の5つのパーツを組み合わせて構成します。
【ヘッダー】
サイト最上部のエリアであり、全ページ共通で使用します。
サイトにアクセスして最初に目に入るエリアのため、ロゴや問い合わせ・購入といったコンバージョンにつながるボタンを配置しましょう。
【グローバルナビゲーション】
サイト内の重要なページへのリンクを集めた、ナビゲーションのエリアです。
全ページ共通で使用します。
【メインコンテンツ】
ページの主題を伝える、重要なエリアです。
文章や画像の優先順位を整理し、ユーザーがストレスなく情報を得られるレイアウトにしましょう。
【サイドバー】
2カラム以上の横並びのレイアウトにおいて、メインコンテンツの横に配置されるエリアです。
レイアウトによっては必須ではありません。
【フッター】
サイト最下部のエリアであり、全ページ共通で使用します。
コピーライトや、利用規約・運営会社について・プライバシーポリシー・ お問い合わせといったページへのリンクを配置することが多いエリアです。
Webサイトにおけるレイアウトには基本パターンがあり、そこから派生したレイアウトも多数あります。
レイアウト作りに慣れていない方は、種類がありすぎてどんなレイアウトにしたらいいのか迷ってしまうかもしれません。
そこでまずはレイアウトの基本パターンを使い、レイアウトを構成する5つの基本パーツを組み合わせてみましょう。
ここではレイアウトの基本パターンを3つご紹介します。
Webサイトのレイアウトにおける段組みをカラムといいます。
シングルカラムとは、1つのカラムを縦に積むようなイメージのレイアウトです。
画面の横幅いっぱいに広げて情報を見せられるレイアウトのため、インパクトのある表現ができます。
パソコンでの表示とスマホやパッドといった小さい画面での表示のギャップが少なく、レスポンシブデザインと相性のいいレイアウトです。
コンテンツ内の視線誘導がしやすく、ランディングページやキャンペーンサイトでよく使われます。
シングルカラムのひとつといわれるレイアウトが、画面の横幅いっぱいにコンテンツを広げるフルスクリーンレイアウトです。
左右の余白がなく、よりインパクトのあるダイナミックなデザインになります。
【シングルカラムレイアウトのメリット】
【シングルカラムレイアウトのデメリット】
マルチカラムとは、カラムを横に複数並べて列を分けるレイアウトです。
2つのカラムが並ぶものを2カラム、3つのカラムが並ぶものを3カラムといいます。
主にメインコンテンツ＋サイドバー（＋サイドバー）の構成であり、Yahoo! JAPANのサイトをはじめ、昔から見慣れた安心感のあるレイアウトです。
サイドバーにナビゲーションを設置してサイト内を回遊しやすくし、情報をすっきりと見せられます。
情報量の多いメディアサイトやポータルサイト、ネットショップといったサイトにおすすめです。
スマホやパッドでは複数のカラムが横に並ぶと情報が読み取りにくいため、シングルカラムに変更するといった対応が必要になります。
【マルチカラムレイアウトのメリット】
【マルチカラムレイアウトのデメリット】
ページ内を格子状に分割し、コンテンツをカードのように配置するレイアウトをグリッドレイアウトといいます。
狭いスペースに情報を整然と並べられ、レスポンシブデザインとも非常に相性がいいのが特徴です。
適度に余白を入れることにより、すっきりとした印象を与えられます。
ECサイトやメディアサイト、ギャラリーサイトにおすすめです。
グリッドレイアウトのひとつに、カード・タイルレイアウトがあります。
タイルレイアウトはブロックの大きさに変化を与え、敷き詰めるようなレイアウトです。
大きさの変化によってリズムが生まれ、賑やかさ・楽しさ・躍動感が表現できます。
グリッドレイアウトは似通った印象になりやすく、差別化を狙いたいサイトでは適していません。
差別化を狙ったオリジナリティのあるサイトの場合は、あえてグリッドレイアウトを無視したブロークングリッドレイアウト（ノングリッドレイアウト）がおすすめです。
【グリッドレイアウトのメリット】
【グリッドレイアウトのデメリット】
スマホやパッドは画面サイズが小さく、パソコンと比べると一度に見えるコンテンツの量が限られます。
ページ内をスクロールしたときに大切なコンテンツが目に入りやすい仕組みを考えてレイアウトしましょう。
ここでは、スクロール時に見せ方の代表的なアイデアを3つご紹介します。
ページをスクロールした際に、ページ上部にヘッダーを固定で表示されるレイアウトです。
ロゴやメニューが常に表示されることにより、ストレスなくサイト内の回遊ができます。
パソコンと比べてスクロール量が多いスマホサイトでよく見られるレイアウトです。
ページをスクロールした際にサイドバーが固定され、メインコンテンツのみがスクロールするレイアウトです。
サイドバーが常に表示されているため、常にナビゲーションや見せたいコンテンツを提供できます。
スマホやパッドといった横幅が小さい画面では、マルチカラムのレイアウトは読みづらいため向いていません。
そのためパソコンでの表示のみで使える手法になります。
スマホサイトにおいて、画面の右下にリンクボタンが固定で表示されるのを見たことがあるのではないでしょうか。
スマホの小さな画面の中で、スクロールをして探し出す必要なくサイトの目的にたどり着きやすくするための仕組みです。
Webサイトの目的に合わせて、問い合わせチャットや問い合わせページへのリンクボタン、カートボタンなどボタンの内容を検討してください。
＼一流デザイナーのスキルが身に付く／
ユーザーがサイトを見やすく、使いやすいようにレイアウトすることが重要です。
制作するサイトの目的や使い方に合った、効果的に見せられるレイアウトを選びましょう。
基本のレイアウトパターンを活かし、あなたのサイト制作に取り組んでみてください！
