店舗の顔となるファーストビューは
同じような商材を扱う他店との差別化を図る上で重要な要素です。
今回は全画面を大胆に使ったヒーローヘッダーで
インパクトのある訴求に挑戦してみましょう。
■ワクワク感を刺激する
ECサイトにおけるファーストビューは、主にスクロールを促すという観点から
メインとなる画像の下に商品画像等をあえて見切れた状態にして配置することが多いでしょう。
しかし定番とも言えるこの構成は、買い物慣れした消費者からすると
テンプレートのように感じ、メインとなる画像をスルーしてしまいがちです。
そこで採用したいのが、1枚画像を画面全体に表示させる
フルスクリーンレイアウト「ヒーローヘッダー」です。
ヘッダーいっぱいに配置した巨大な画像は圧倒的な存在感を放ちます。
サイトを訪問した消費者は、ある種の心地よい違和感を覚え
店舗や商品に対して強い興味を持ち、その興味が持続した状態でスクロールするでしょう。
特に食品やアパレル等、シーン提案がカギを握る商材との相性が抜群ですが、
ここで注意したいのが、用意する画像の大きさです。
フルスクリーンで表示されるよう制作したつもりが
別のPCでは写真が見切れたり余白が出たり…という事が起こる可能性があるからです。
しかし全てのディスプレイサイズに合わせるという事は基本的に不可能なので
一番シェアの多いモニターの解像度で書き出した画像をCSSで調整しましょう。
近年はW1,920px×H1,080pxのワイド型モニターのシェアが大半を占めているため
こちらの数値が現時点では最適な解像度と言えるでしょう。
■視覚的な構図で訴求力アップ
ヒーローヘッダーは画像の大きさも重要ですが
使用する写真素材のクオリティに大きく左右される手法と言えます。
ここで注目したいのが「余白の多い構図」です。
例えば、ステンレスの鍋を扱っているとしましょう。
商品を撮影する際、基本的に商品を中央に配置することがほとんどですが
ファーストビューでのインパクト訴求を考えた場合
商品の全貌ではなくイメージを印象付けることが肝心です。
上記を鑑みた場合、商品を中央以外の場所に配置し
両サイドのどちらかに余白を多く残した構図にすることで
消費者の視線をまずデザイン密度の薄い余白に集め
そこから自然な形でデザイン密度の濃い商品に誘導することが可能です。
余白の多い構図の特性については、写真画像だけではなく
文字のみで構成された場合にも同様のことが言えます。
例えば文字の周りに余白が多い構図の場合も
消費者の視線は余白からデザイン密度の濃い文字の要素に誘導されます。
余白の多い構図は、消費者の想像力を掻き立て
店舗や商品にストーリー性を持たせます。
意図的に作り上げた構図で消費者に注意を促し
視線の動きをコントロールすることで
販売者側が伝えたいことを視覚的に表現することができるのです。
インパクトヘッダーで差別化を図ろう！
