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

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


■ワクワク感を刺激する

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

（続きは、「日本ネット経済新聞」３月１５日号で）

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