Webサイトの目的別5パターンの鉄板レイアウト

更新日: 2018年05月29日

デザイン

マイページにお気に入り

Webサイトの目的は様々あります。
サービスの認知度向上や広告での売上獲得などあらゆる目的が存在し、それぞれに応じた最適なレイアウトがあります。
今回は、目的別に代表的なレイアウトを、最新トレンドも交えながらご紹介します。

これからWebサイトを制作する方はもちろん、現状のWebサイトが目的に対して最適なレイアウトになっているかという観点からも参考にしてみましょう。

1.商品やサービスの認知度を向上させたい

いわゆるプロモーションのためのWebサイトです。広告では、表示回数（露出数）を主に狙っていきます。よりユーザーの記憶に残るように、サービス・商品の名前や特徴を印象付けるデザイン・レイアウトが必要になってきます。

よりビジュアルに特徴をもたせたものが多いです。最近では画面いっぱいに写真や動画を配するデザインが流行しており、Bootstrapのテンプレートを使用すれば簡単に導入できるのでオススメです。

参考例

Japan_Beauty_Exhibition_ジャパンビューティーエキシビジョン2016___2016年東京の渋谷ヒカリエで開催！日本の美しさ（美容・デザイン・アパレル・食品）をメインに海外へ発信するための展示会。.png

・ジャパンビューティーエキシビジョン2016
・東京銭湯
・ぼーっと沖縄

注意点として、伝えたいことが多すぎてテキスト過多にならないようにしましょう。また、ビジュアルの印象がしっかり商品・サービスと連動したものか、ちゃんとブランド想起につながるファクターで構成されているか、確認することが重要です。

あらかじめ制作前にプロモーション効果をどこに置くか、KPIを設定しておくと、作品の方向性もブレずに済むでしょう。

2. 商品やサービスの売り上げを伸ばしたい

いわゆるECサイトです。「商品購入」や「会員登録」がコンバージョン（目標達成）地点として設けられています。売りたい商品とコンテンツを連動させて、広告やメルマガからの遷移先としても利用されます。

UI/UXという言葉をよく耳にしますが、ユーザーのWebサイト内でのエクスペリエンス（経験）・インターフェース（接点）を改善し、目標達成へとよりスムーズにユーザーを移行させることを目指す点が特徴的です。

参考例

メガネ通販のZoff_ゾフ_オンラインストア【眼鏡・めがねブランド】.png

・メガネ通販のZoff
・楽天
・ファッション通販ZOZOTOWN

注意点としては顧客側でも、同じページ内で売りたい商品を管轄する部署が違っていて、どちらを優先すべきか迷われているケースが多いです。Webサイト全体のバランスをこちらが把握して、うまく目的を達成させるべくビジョンを持つことが重要です。Google Analyticsを利用してRPAをもとに再構成を進めていく改善方法が主流かと思います。

また、在庫がない商品をサイト内でレコメンドさせたり、広告を配信し続けてしまわないようにするのも注意が必要です。

3.ブランドイメージを向上させたい

サービス購入や露出度をアップさせることよりも、ブランドイメージをコントロールすることを主目的としたWebサイトです。新しさを演出したり、社会貢献をリリースしたり、その企業のシーンにおいて、取りたいイメージに寄せて作成するWebサイトがこちらです。

レイアウト自体はそれぞれであるものの、共通する特徴としては、より多くの関連イメージを持ってもらうべく、動的な画像（カルーセル）や動画を複数配しているものが主流です。

参考例

・BMW Japan
・ジョージア
・コカ・コーラ

注意点としては、ついつい、あれもこれもと盛り込みたくなりますが、目的に沿わないコンテンツは掲載しないことです。あらかじめワイヤーフレームで意思統一をしっかり図ってから進めないと、制作途中で齟齬が生まれるなども起こりがちなので要注意です。

4.商品・サービスを売りたい

いわゆるランディングページ（LP）です。Web広告やメルマガの遷移先に設定されるものです。

商品購入へと促すためには多くの説得材料が必要となるケースも多く、購入までの不安や好奇心を前提としたストーリーで、縦型に長い仕様を取っているものが昔から主流です。最近では、レスポンシブなテンプレートも豊富になってきており、古くからの手法を継承しながらも、洗練されたページを構築しているケースが豊富です。