Webサイトのレイアウトには法則があります。レイアウトとはWebサイト上の情報をどこにどのように配置するかのことを指します。
この記事では主なレイアウトを８種類紹介します。
Webサイト制作においては基本はこのパターンに当てはまりますので覚えておくと製作がしやすくなります。
主なWebサイトのレイアウト
主なレイアウトを８パターン参考サイトとともに紹介します。
製作の目的を明確にしたうえでWebサイトのレイアウトを決めるので、参考サイトを見ながら何故こういうレイアウトが選ばれたのか覚えていくと分かりやすいと思います。
① グリッドレイアウト
雑誌などにもよく使われているレイアウトです。きちんと整列して見えるので、整然として安定感のある印象を持たせます。ファーストビューやバナー、サムネイルなどでも使えるレイアウトです。
参考サイト
海外のサイトです。1ページ完結のサイトで情報が視覚的に分かりやすく表示されていて分かりやすいです。
TOPページが1ページ完結のサイトです。情報の優先度によりグリッドの大きさを変えています。
TOPページでスクロールする手間がなく下層ページにいけるので迷いにくいサイトになっています。
こちらはレイアウトとしてグリッドを使用している訳ではありませんが、紹介します。
ファーストビューがグリッドを意識して作られています。細いラインのグリッドで表示することで洗練された感じと高級感が表現されています。デザインのヒントにしてください。
② カード・タイル型レイアウト
情報が区切られていて、探しやすいです。PrimeVideoなどの動画配信サービスや製品紹介ページ、ギャラリーサイトなどに使われています。この形にレイアウトされているブログサイトもよく見かけます。
また、サイト製作がしやすく、レスポンシブの対応が容易でもあります。一度に大量の情報を画面上に表示できるため、情報量が多いサイトに向いています。
参考サイト
１） ギャラリーサイト
どちらもオシャレなデザインのWebサイトギャラリーです。これからデザインのヒントにすると思いますので紹介しました。
リンクを貼っておきます。
▼MUUUUU.ORG▼
▼Web Design Clip▼
２） 動画配信サイト
PrimeVideoなどの動画配信サイトはこのレイアウトが基本です。多い情報量を視覚的にみせることが目的です。
③ 1カラムレイアウト
視線の誘導が少ないので、サイトの掲載掲載内容に集中できます。よってストーリー性を持たせることに特化しています。
その特性を生かしてLP（ランディングページ）に使用されることが多いです。
参考サイト
LPサイト
LPは情報量が少ない分1カラムレイアウトになることが多いです。その分、商品の写真やキャッチコピーで購買意欲を掻き立てます。
④ ２カラムレイアウト
メインエリアとサブエリアに分けられる。メインの情報を見てもらいながら、カテゴリーや他の記事へと誘導できる特徴があります。
よってブログサイトやニュースサイトに向いています。またコーポレートサイトやECサイト、まとめサイトにも使われることが多く、目にする事が多いサイトの形ではないでしょうか。
参考サイト
1） ECサイト
有名な楽天通販サイトがこのレイアウトで組まれています。情報量が多いサイトのカテゴリー分けに左側のカラムが使われていますね。
2) まとめサイト
LPadvance
LP製作やWeb広告の参考になるデザイン集をまとめたサイトです。デザインのインスピレーションになるので是非活用していみてください。
▼以下リンク▼
⑤ ３カラムレイアウト
２カラムレイアウトよりも情報量を増やすことができます。
サイドバーいからの誘導がしやすく、多くの情報を提供して回遊率を上げたいサイトに使わあれます。ポータルサイトやまとめサイトに向いています。
参考サイト
まとめサイトやポータルサイトなど情報が多い場合に使われます。他にもyahooのトップページなどもそれにあたります。
⑥ フルスクリーンレイアウト
ビジュアル要素が全面的に押し出されるので
インパクトのある演出が可能です。ブランディングをしたいサイトによく使われます。
参考サイト
ブランディングサイトやサービスサイト、LPに使われます。写真やイラストを全面に出したり、動きを付けて、視覚的にユーザーの体験を楽しませるサイトがそれにあたります。
１カラムレイアウトとほとんど変わりません。
⑦ ブロークングリッドレイアウト
あえてレイアウトを無視して配置することによって遊び心を持たせながら洗練した印象を与えられます。
写真やアート画像を押し出したい、ビジュアルメインなサイトで使用されます。
各デバイス対応のレスポンシブデザインでの製作の難易度が高いです。
参考サイト
サントリー 白州
サービスサイトでは使いづらいレイアウトを見事に表現しています。統一されたカラーの素敵な写真とそれに対するテキストの配置の遊び心がマッチしています。
⑧ フリーレイアウト
キャンパスに絵を描くように自由に要素を配置していくレイアウトです。
ビジュアルの世界観を全面的に押し出して表現する際に有効的です。
参考サイト
横にスライドしていくページです。
ページをキャンパスのように使い、アニメーションを付けています。遊び心のあるサイトですね！
作成時の注意点
１） 目的を明確にする
製作の目的、誰がどのターゲットに対してどういった内容を発信してどのような効果を得たいかを明確にする。またコーポレートサイトかブランドサイトなのか、ランディングページなのかなど設計前に明確にして、それからレイアウトを組んでいきます。
極論ですが、情報量が多いECサイトなのにブロークンレイアウトを選んで組んでしまったらユーザーが疲れてすぐに離脱してしまいます。
２） コンセプトの設計
誰が何を伝えたいのか明確にしたらそれに合わせてコンセプトを設計していきます。
３） 目標の数値化
目的を曖昧にするのではなくて数値化すると分かりやすいです。
まとめ
如何でしたでしょうか。
レイアウトありきでWebサイトを作成するのではなく、作成前に目的によって情報を整理しながらレイアウトを絞って設計していくのが基本となります。
製作依頼があったら競合のサイトを数社調べて、どのような見せ方をしているのか調べてみるのも必須です。
