Webサイトのレイアウト

Webデザインをしていく上で、最初に考えなくてはいけないのはレイアウト（配置）です。
ワイヤーフレームと呼ばれるWebサイトの設計図面段階で大まかなレイアウトは決まってくるかと思います。
このレイアウトでサイト全体の印象が変わってきてしまうので、Webサイトの目的に合わせてレイアウトを考えていく必要があります。
今回は最近のトレンドも交えて各目的にオススメなレイアウトを紹介していきたいと思います。

プロモーションサイト・キャンペーンサイト

商品やサービスの認知度を向上させたい！というプロモーションのためのWebサイトでは、サービス・商品の名前や特徴などをインパクトづけるデザイン・レイアウトが必要です。
具体的には1カラムのレイアウトが当てはまります。
最近の主流ではビジュアルに特徴をもたせるため、画面いっぱいに写真や動画をおくようなデザインが多くなっています。
こういったデザインの場合は情報が多すぎるとインパクトが弱くなってしまうので、できるだけテキストはシンプルに、伝えたいことを最小限にまとめていく方がより効果的です。

また、最近ではこういったデザインにプラスして、パララックスや動画を入れ込んで動的効果を適用しているものも多くなっています。
デメリットとしては、他のページへの誘導がしにくいため、直帰率が上がりやすいことですが、メインコンテンツに集中してもらえるためアピールポイントが伝わりやすく、
ターゲットにアピールしやすいという点では問い合わせや商品購入などのコンバージョンにつながりやすいとされています。
回遊率を重視するサイトには向いていませんが、コンバージョン重視のサイトには1カラムの強みが活きます。

また、画像や動画を多く使用していくとサイト全体が重くなってしまうので構築時、そういった点も工夫が必要となります。
他にも、フルスクリーンで1コンテンツを表示するようなフルスクリーンレイアウトも最近では多く見られるようになりました。
スクロールでコンテンツを切り替えるなど動的に繊維させることでユーザーに新鮮な体験をさせることができます。

ECサイト・ニュースブログサイト

このようなサイトでは、コンテンツ・情報量が多いため、見易さを重視して2カラムが今までは主流でしたが、最近ではよりデザインを重視した1カラムなども多くなってきています。
2カラムのメリットとしては、ユーザーが自分に必要な情報をより早くメニューバーから見つけてもらうことではありますが、その分メインコンテンツのインパクトが弱くなってしまうので、
ターゲット層や、企業のブランディングを重視してレイアウトを考えた方が効果的かもしれません。
また、スマホ対応を考慮するなら、2カラムのレイアウトは、そのままだとスマホでは見にくくなってしまうので、1カラムになるようレスポンシブ化していく必要があるので1カラムと比べると構築面では工夫が必要となります。

ランディングページ（LP）

ランディングページ（LP）は、先に述べたプロモーションサイト・キャンペーンサイト同様1カラムのビジュアルにインパクトを持たせたものが主流です。
ただ、ランディングページ（LP）は、ファーストビューがとても重要視されおり、ファーストビューによりインパクトを持たせるためにテキストも多く置かれている場合が多いです。
こちらに関しては、よりキャッチコピーなども重要となってきます。
また、ファーストビュー内に「お申し込み」や「購入」の導線（ボタンなど）が置かれているものが多く見られます。
ページ内にもいくつかそのような導線を繰り返し置いたりすることも多いです。

来店客を増やす店舗サイト

こういったサイトの場合は、写真を大きく見せてインパクトを重視するレイアウトが好まれます。
コンテンツが多いサイトであればメインビジュアルを大きく持ってきてコンテンツ部分は２カラムにするようなレイアウトや、コンテンツが少ない場合は
1カラムのシングルレイアウトが多く見られます。
いずれの場合も、誘導先となる電話番号や予約機能などが目立つように配置されているのが特徴です。

ブランディングサイト

ブランドイメージを向上させることが目的のブランディングサイトでは、メニューバーは極力小さく、写真を大きく載せるものが主流です。
トップページにはその商材やサービスを表す写真を大きく起用し、ビジュアル訴求をし、メニューバーはあくまでもサブ的な役割の場合がほとんどです。
Appleのサイトが代表的ではありますが、ユーザーの興味を惹くようなキャッチコピーを写真と一緒に掲載するのがとても効果的です。

コーポレートサイト

会社の情報を伝えるコーポレートサイトでは店舗サイトと同様、レイアウトというよりもその企業のイメージとなるようなデザインが重視されます。
トップページの目立つ場所に企業理念やサービス価値を配置し、
ユーザーが求めている情報をわかりやすく伝えることが重要となります。
こちらもコンテンツが多い場合は2カラム、3カラムというレイアウトが多く見られます。

メディアサイト、画像検索サイト

主に記事がコンテンツとなっており、その数が多い場合にはブロック状（タイル）のコンテンツを縦横に積んでいくようなレイアウトが好まれます。
ウィンドウサイズに合わせて、横に並んでいるコンテンツの表示数を変えることができるので、幅広いサイズのデバイスに対応することが可能です。

また、オートロードなどによって無限スクロールで表示ができるのでスマホで見てもストレスなく見続けられることがメリットとしてあげられます。
ただ各コンテンツがさらっと読みながされてしまうので画像などで目を引かせるような工夫が必要となってきます。

固定サイドバー、固定ヘッダー

サイドバーやヘッダーを動かないように固定したレイアウトも最近はよく見られるようになりました。
メインコンテンツはスクロールできますがサイドバーやヘッダーは固定されているため常に表示された状態になります。

固定サイドバー

固定サイドバーのレイアウトはいくつかあり、最初から動かないように固定したタイプ、一定の箇所までスクロールするとサイドバーが固定されるタイプ、スクロールに合わせて追尾するタイプがあります。
いずれも、サイドバーが常に表示されているので他ページへの誘導がしやすく、サイト内を見回ってもらえるメリットがあります。
デメリットとしては、サイドバーの場合、画面の一部が常に固定されているのでその分コンテンツの表示部分が少なくなってしまい、ユーザーに伝わる情報量が少なくなってきてしまうことがあげられます。
情報量が多いサイトにはあまり向いていません。

固定ヘッダー

こちらもサイドバー同様、最初からヘッダーが固定されているタイプスクロールした後に別のヘッダーが現れて固定されるタイプなどがあります。
FacebookやtwitterなどのSNSでも固定ヘッダーが使われています。
ナビゲーションがわかりやすく、サイドバー同様に他ページへの誘導がしやすくページの途中でも別ページにいけるため直帰率改善の効果が期待できます。
特に1カラムのシングルレイアウトで長くなってしまた場合などは固定ヘッダーがあるとユーザーも便利に感じるでしょう。
ECサイトなどの場合でも固定ヘッダー内に「購入」ボタンを設置しておくことで、購入ボタンを探す手間が省け、購入意欲にすぐに応えることができます。
固定サイドバーと違って画面を圧迫しにくく、コンテンツ量が減っているような意識も感じにくいのがメリットです。
ただ、スマホの場合ですと画面領域が極端に狭くなり、ストレスを感じることがあるので、できるだけ幅を小さくしてインパクトを与えないよう心がけるか、メニューの場合にはトグルナビにして追尾させるようにするなど画面領域を小さくしない工夫が必要となってきます。

いかがでしたでしょうか？
以上Webサイトのいろいろなレイアウトパターンについてご紹介させていただきました。
デザインとのバランスを考えつつ、ユーザビリティを考慮したレイアウトを考えていくことが大変重要となります。
そのサイトの目的に適したレイアウトを選び、よりコンテンツを活かせられるようなサイトを作っていけるといいですね。

マーケティングでお悩みでしたら、
Bigmacにお任せください。