どうも、ダイチです。
Webサイトのデザインにはパターンが存在します。今回はその見た目別のパターンをまとめてみました。
Webサイトの作成依頼を考えている方も、是非参考にしていただければと思います。
※レイアウト手法をまとめた記事もあるので、Web制作勉強中の方はよかったらこちらもご覧ください。
- ナビゲーションやサイドメニューのレイアウト
- メインコンテンツのレイアウト
今回は紹介する便宜上、上記をそれぞれ分けてまとめています。
ナビゲーション・サイドメニュー位置別
ページ内にどんな情報があるのか、分かりやすい位置に明示することはユーザーにとって重要なことです。
そのため、ホームページには各コンテンツへのリンクが設定されているナビゲーションが設定されていることがほとんどです。
また、メインのコンテンツとは別に補助的なサイドメニューが配置されていることもあります。
上部ナビゲーション型
最も多く見られる王道のパターンかと思います。
見た目的にもメインコンテンツのレイアウトに影響が少ないため汎用性が高いです。
サイドナビゲーション型
ナビゲーションがサイドに配置されているレイアウトです。
人の視線は左から右に流れますので、ナビゲーションは左に配置されることが多いです。
視線の起点にナビゲーションを配置するというのは、ユーザビリティ的にも適したレイアウトといえますが、横幅の狭いデバイスではレイアウトが難しいため、PCページ向けではあります。
実際のサイトでは、左側のナビゲーション部分は固定で、右側のコンテンツはスクロールで表示される、といったような構成も多くあります。
逆L字型
これは上部のヘッダー部分にナビゲーションを配置し、サイドにサブメニューを配置する形です。
ブログサイトなどに多く見られるパターンで、これもまた王道なレイアウトかと思います。
逆U字型
情報量の多いECサイトやキュレーションサイトなどで採用されることが多いレイアウトです。
ヘッダー部分と左右にサイドメニューが配置されており、Webサイト内の回遊率が高くなるレイアウトです。
コンテンツ部分レイアウト別
上記のナビゲーションや、サイドメニューがサイトの補助部分だとすると、ユーザーに見せたい内容を表示しているのがメインコンテンツ部分です。
カラムレイアウト
ブロック単位でページを構成するようなレイアウトになります。
縦方向のブロックをカラムとし、このブロック数が一つか、複数あるのかで分けられています。
シングルカラムレイアウト
カラム一つで構成されているレイアウトです。
視線が左右に振れず、コンテンツの内容に集中できるレイアウトのため、途中や下部にコンバージョン誘導をさせるような縦長のLP（広告ページ）などで採用されていることも多いです。
また、横幅の狭いスマホサイズのページでは、このシングルカラムでレイアウトされていることが多くあります。
2カラムレイアウト
カラム二つで構成されているレイアウトです。
サイドにグローバルナビゲーションが配置されていることもあります。
もしくはスプリットスクリーンと言われる手法で、画面を二分割してコンテンツを見せるお洒落なサイトもあります。
3カラムレイアウト
カラム３つで構成されているレイアウトです。
PC向けのレイアウトではありますが、情報量が多いECサイトなどでは多く取り入れられています。
メインコンテンツ部分のスペースを広めにとることで、逆に視線を集めることもできます。
また、上部はシングルカラムで、途中から3カラムになるような組み合わせのサイトも多くあります。
フルスクリーンレイアウト
左右に余白を持たせず、デバイス幅に関わらず画面いっぱいに表示させるレイアウトです。
構成はシングルカラムレイアウトと重複していることが多いですが、印象的な画像などを画面いっぱいに表示させることでインパクトを与えることができます。
トップにはヒーローイメージとして、写真や動画を全画面表示させるデザインも多く取り入れられています。
グリッドレイアウト
このような格子状に設けられた軸に沿ってコンテンツを乗せるようなレイアウトです。
レイアウトに規則性が生まれるので、整理されスッキリした印象を与えられる汎用性の高いパターンです。
カード型レイアウト
カードを並べたような配列のレイアウトです。
グリッドレイアウトをベースに、全体的に整頓されたレイアウトを組むことを目的としています。
ECサイトでの商品一覧やブログサイトの記事一覧など、一つ一つ見せたい情報が多い場合に適しています。
カードの表示枚数を調整するだけでもよいため、レスポンシブデザインとも相性が良いです。
ただ、掲載するコンテンツの数が少ないと画面が寂しい仕上がりになるため、掲載可能な内容とのバランスを見て採用すべきレイアウトになります。
ノングリッドレイアウト
「あえて規則性を外す」といった考えで要素をレイアウトする最近流行りのレイアウト手法です。
スクロールにあわせてアニメーションを発動させたり、パララックス（視差効果）を取り入れるなど、遊び心のあるデザインと相性がいいです。
洗練された印象を与えられますが、情報を整頓させて表示させたいECサイトや、お堅いコーポレートサイトには向いてないかもしれません。
まとめ
いかがでしたでしょうか？
それぞれの特徴を組み合わせることで、レイアウトのヒントが見えてきます。
下記にその例をまとめてみます。
サイトの回遊率を上げることでコンテンツをしっかり読ませるサイトにしたい
ナビ・サイドメニューは上部・逆L字・逆U字に配置、コンテンツはマルチカラム
広告用ページを作ってWebサイトから売上を上げたい
ナビ・サイドメニューは上部に配置、コンテンツはシングルカラム
写真や動画などの美しいビジュアルで見る人に商品の印象を残したい。
ナビ・サイドメニューは上部・サイドに配置、コンテンツはフルスクリーン・シングルカラム
モダンなレイアウトでお洒落な雰囲気にしたい。
ナビ・サイドメニューはサイドに配置、コンテンツはノングリッドレイアウト・グリッドレイアウト
作品展示用のポートフォリオサイトを作りたい
ナビ・サイドメニューは上部・サイドに配置、コンテンツはシングルカラム・カード型レイアウト
デザインに正解はないと思いますが、闇雲にカッコいいと思うデザインだけを追い求めるのではなく、目的に沿ったレイアウトを採用することがWebサイト制作には重要となります。
それでは今回はこのへんで！
コメント