Webサイトの目的は様々あります。
サービスの認知度向上や広告での売上獲得などあらゆる目的が存在し、それぞれに応じた最適なレイアウトがあります。
今回は、目的別に代表的なレイアウトを、最新トレンドも交えながらご紹介します。
これからWebサイトを制作する方はもちろん、現状のWebサイトが目的に対して最適なレイアウトになっているかという観点からも参考にしてみましょう。
1.商品やサービスの認知度を向上させたい
いわゆるプロモーションのためのWebサイトです。広告では、表示回数（露出数）を主に狙っていきます。よりユーザーの記憶に残るように、サービス・商品の名前や特徴を印象付けるデザイン・レイアウトが必要になってきます。
よりビジュアルに特徴をもたせたものが多いです。最近では画面いっぱいに写真や動画を配するデザインが流行しており、Bootstrapのテンプレートを使用すれば簡単に導入できるのでオススメです。
参考例
・ジャパンビューティーエキシビジョン2016
・東京銭湯
・ぼーっと沖縄
注意点として、伝えたいことが多すぎてテキスト過多にならないようにしましょう。また、ビジュアルの印象がしっかり商品・サービスと連動したものか、ちゃんとブランド想起につながるファクターで構成されているか、確認することが重要です。
あらかじめ制作前にプロモーション効果をどこに置くか、KPIを設定しておくと、作品の方向性もブレずに済むでしょう。
2. 商品やサービスの売り上げを伸ばしたい
いわゆるECサイトです。「商品購入」や「会員登録」がコンバージョン（目標達成）地点として設けられています。売りたい商品とコンテンツを連動させて、広告やメルマガからの遷移先としても利用されます。
UI/UXという言葉をよく耳にしますが、ユーザーのWebサイト内でのエクスペリエンス（経験）・インターフェース（接点）を改善し、目標達成へとよりスムーズにユーザーを移行させることを目指す点が特徴的です。
参考例
・メガネ通販のZoff
・楽天
・ファッション通販ZOZOTOWN
注意点としては顧客側でも、同じページ内で売りたい商品を管轄する部署が違っていて、どちらを優先すべきか迷われているケースが多いです。Webサイト全体のバランスをこちらが把握して、うまく目的を達成させるべくビジョンを持つことが重要です。Google Analyticsを利用してRPAをもとに再構成を進めていく改善方法が主流かと思います。
また、在庫がない商品をサイト内でレコメンドさせたり、広告を配信し続けてしまわないようにするのも注意が必要です。
3.ブランドイメージを向上させたい
サービス購入や露出度をアップさせることよりも、ブランドイメージをコントロールすることを主目的としたWebサイトです。新しさを演出したり、社会貢献をリリースしたり、その企業のシーンにおいて、取りたいイメージに寄せて作成するWebサイトがこちらです。
レイアウト自体はそれぞれであるものの、共通する特徴としては、より多くの関連イメージを持ってもらうべく、動的な画像（カルーセル）や動画を複数配しているものが主流です。
参考例
注意点としては、ついつい、あれもこれもと盛り込みたくなりますが、目的に沿わないコンテンツは掲載しないことです。あらかじめワイヤーフレームで意思統一をしっかり図ってから進めないと、制作途中で齟齬が生まれるなども起こりがちなので要注意です。
4.商品・サービスを売りたい
いわゆるランディングページ（LP）です。Web広告やメルマガの遷移先に設定されるものです。
商品購入へと促すためには多くの説得材料が必要となるケースも多く、購入までの不安や好奇心を前提としたストーリーで、縦型に長い仕様を取っているものが昔から主流です。最近では、レスポンシブなテンプレートも豊富になってきており、古くからの手法を継承しながらも、洗練されたページを構築しているケースが豊富です。
参考例
・DHCスーパーコラーゲン
・プレシャス加圧トレーニングスタジオ
・TECH::CAMP(テックキャンプ)
注意点として、伝えたいストーリーが長すぎてWebサイトの読み込みが重くなると表示までに時間がかかり、ユーザーに離脱されてしまいます。それでは本末転倒になってしまうので、ファイルサイズはなるべく軽く、また伝えるべき内容を絞って構成することが重要です。
また、商品が複数ある場合には、広告効果や目標到達効率も下がってしまうので分けてページを作ることをオススメします。
5.情報を発信したい
ブログも含めた、情報発信で集客を行ない、広告掲載で売上を獲得するサイトです。最近では、企業がコーポレートサイトとは別にオウンドメディアを構築することが多くなりました。
大手メディアと同じように横長に並べるものが多い傾向ですが、洗練された印象を与えるため、カード型にするものも出てきています（WordPressのテーマも揃っています）。関連記事の呼び出しや、新着記事の上方掲出を滞りなく行うことが重要です。
参考例
・Unyoo.jp
・まだ東京で消耗してるの？
・株式会社LIG
注意点としては、テーマやコンセプトといった軸を設けることが重要です。レイアウトがせっかく情報メディアのようでも、自社商品が強調されるばかりでは目的とレイアウトの意義が異なってしまいます。
まとめ
これから制作される方にも、すでに運営されているWebサイトをお持ちの方にも、参考になった点があったのではないでしょうか。
俯瞰してどのカテゴリーに属するWebサイトかを把握して、事例なども参考に見直せる部分はきっとあると思います。ぜひ競合のWebサイトなどもチェックして、今後の制作に活かしてみてください。
このニュースを読んだあなたにオススメ
HTMLの基本構造を学ぼう
意外とわからない？読みづらいHTMLタグ・属性20個の読み方まとめ
ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選