ヤフージャパンプレミアム広告賞受賞

自社書籍

新卒採用情報

長期インターンシップ募集

採用情報

Bigmac 社長ブログ

スタッフ厳選!!おすすめ情報

ITAL株式会社

twitter
@Bigmac_work
google+
rss
rss
a
follow us in feedly
hatena.bookmark
このエントリーをはてなブックマークに追加

おすすめ情報

おすすめ情報

2016年11月6日

Webサイトのレイアウト

layout-of-website

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

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

商品やサービスの認知度を向上させたい!という
プロモーションのためのWebサイトでは、
サービス・商品の名前や特徴などを
インパクトづけるデザイン・レイアウトが必要です。
具体的には1カラムのレイアウトが
当てはまります。
最近の主流では
ビジュアルに特徴をもたせるため、
画面いっぱいに写真や動画をおくような
デザインが多くなっています。
こういったデザインの場合は
情報が多すぎるとインパクトが
弱くなってしまうので、
できるだけテキストはシンプルに、
伝えたいことを最小限に
まとめていく方がより効果的です。
また、最近ではこういったデザインに
プラスして、
パララックスや動画を入れ込んで
動的効果を適用しているものも
多くなっています。
デメリットとしては、
他のページへの誘導がしにくいため、
直帰率が上がりやすいことですが、
メインコンテンツに集中してもらえるためアピールポイントが伝わりやすく、
ターゲットにアピールしやすいという点では
問い合わせや商品購入などのコンバージョンに
つながりやすいとされています。
回遊率を重視するサイトには向いていませんが、
コンバージョン重視のサイトには1カラムの強みが活きます。
また、画像や動画を多く使用していくと
サイト全体が重くなってしまうので
構築時、そういった点も工夫が必要となります。
他にも、
フルスクリーンで1コンテンツを表示するような
フルスクリーンレイアウトも
最近では多く見られるようになりました。
スクロールでコンテンツを切り替えるなど
動的に繊維させることで
ユーザーに新鮮な体験をさせることができます。

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

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

ランディングページ(LP)

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

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

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

ブランディングサイト

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

コーポレートサイト

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

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

主に記事がコンテンツとなっており、
その数が多い場合には
ブロック状(タイル)のコンテンツを
縦横に積んでいくようなレイアウトが
好まれます。
ウィンドウサイズに合わせて、
横に並んでいるコンテンツの表示数を
変えることができるので、
幅広いサイズのデバイスに
対応することが可能です。
また、オートロードなどによって
無限スクロールで表示ができるので
スマホで見てもストレスなく
見続けられることが
メリットとしてあげられます。
ただ各コンテンツが
さらっと読みながされてしまうので
画像などで目を引かせるような
工夫が必要となってきます。

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

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

固定サイドバー

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

固定ヘッダー

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

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

このエントリーをはてなブックマークに追加
メルマガ登録