【ネットショップ 「売れる」デザイン・演出テクニック】連載73 物語るヘッダーデザイン

  • 定期購読する
  • 業界データ購入
  • デジタル版で読む

 店舗の顔となる”ファーストビュー”は、同じような商材を扱う他店との差別化を図るうえで重要な要素です。今回は、全画面を大胆に使った「ヒーローヘッダー」で、インパクトのある訴求に挑戦してみましょう。


■ワクワク感を刺激する

 ECサイトにおけるファーストビューでは、主に「スクロールをしてもらいたい」という理由から、メインとなる画像の下に、商品画像などをあえて見切れた状態で配置するといったケースが多いでしょう。しかし、定番ともいえるこの構成は、買い物慣れした消費者からすると、テンプレートのように感じ、メインとなる画像をスルーしてしまいがちなのです。
 そこで採用したいのが、1枚画像を画面全体に表示させるフルスクリーンレイアウト「ヒーローヘッダー」です。ヘッダーいっぱいに配置した巨大な画像は圧倒的な存在感を放ちます。サイトを訪問した消費者は、ある種の心地よい違和感を覚え、店舗や消費者に対して強い興味を持ち、その興味が持続した状態でスクロールするでしょう。特に食品やアパレルなど、シーン提案が鍵を握る商材との相性が抜群です。
 ここで注意したいのが、用意する画像の大きさです。フルスクリーンで表示されるように制作したつもりが、別のPCでは写真が見切れたり余白が出たりする、ということが起こりうるからです。しかし全てのディスプレイサイズに合わせるということは基本的に不可能なので、一番シェアの多いモニターの解像度で書きだしたCSS(カスケーディング・スタイル・シート、ウェブサイトのスタイルを指定する仕様)で調整しましょう。近年はW1920px×H1080pxのワイド型モニターのシェアが大半を占めているため、こちらの数値が現時点では最適な解像度と言えるでしょう。

(続きは、「日本ネット経済新聞」3月15日号で)

〈著者プロフィール〉
 長山衛(ながやま・まもる)氏
 某大手食品ECサイトで運営を手掛けた後、08年10月にECサイトの運営代行などを手掛ける株式会社ネットショップ総研を設立。
 11年11月に「食品ネットショップ『10倍』売るための教科書 リピーターを確実に増やす商品プレゼン77のテクニック」(日本実業出版社)を上梓。

記事は取材・執筆時の情報で、現在は異なる場合があります。

「売れる」デザイン・演出テクニック 連載記事
List

Page Topへ