KATAOKA DESIGN MARKETING 公式ブログ

ランディングページにとって、「ヘッダー画像のファーストビュー」は命そのものであり、ユーザーがそのページを見てくれるかくれないかの分岐点となります。

ファーストビューとは、ユーザーがページを開いた瞬間に目に飛び込んでくる画像やイメージ、そしてそれに付随する情報のことです。

開いた瞬間の印象が悪ければ、ユーザーは即刻離脱しますし、もし感覚的に肌に合えば、そのままページを下にスクロールしてくれます。要するに、ヘッダー画像をいかにインパクトのあるものに仕上げるのかは、デザイナーとしての勝負どころであり、最も力を入れなければいけない部分です。

ですが、Webデザイナーである私の立場からすると、この一番重要なファーストビューについてあまり重要視していなかったり、たとえ重要性を理解していても結局のところどのように構築していけばいいのかわからない人が非常に目立ちます。

そこで今回は、普段私自身がクライアントのランディングページをデザインする上で、どのような法則に基づいてファーストビューを構築&デザインしているのかについて、以下の3つのポイントを通じてお伝えしてみました。

ぜひ、自分でも身近な例を探しながら、ランディングページのファーストビューについて深く考えるきっかけになればと思います。

「ホラーヴァキュイ(空間恐怖)」は、ヘッダーの構成要素を考える上で重要なデザイン法則である

一般的に知られているデザインの法則の中に、「ホラーヴァキュイ(空間恐怖)」というものがあります。

少し見慣れない言葉かもしれませんが、ランディングページのファーストビューを考える際に、この法則を知っておくことは非常に重要です。

ホラーヴァキュイとは、ラテン語で「虚無に対する恐怖」を意味し、余白や空白を空っぽのまま残さず、何らかの物体や要素で埋めようとする傾向のことを指します。

そしてホラーヴァキュイの傾向が強まれば強まるほど、人間の知覚価値は低くなるということが研究によって明らかになっています。

・・・・と書いてもよくわからないかと思いますので、ものすごく簡単に言うと、

・空白を埋めれば埋めるほど、人はそれを安っぽく感じる。

・空白があればあるほど、人はそれを高級なものと感じる。

ということです。

ヘッダーデザインを考える前提として、この法則があることをまずは知っておきましょう。

身近な場所に沢山存在するホラーヴァキュイ(空間恐怖)

たとえば、以下の画像を見比べてみてください。

上記は極端な例ですが、左のスーパーのチラシと、右側のブランドの広告では、どちらがより高級感を感じるでしょうか？

きっと誰が見ても、左側だと答えると思います。

要するに、左側のチラシの方が「ホラーヴァキュイが強い」と言うことができ、結果的にユーザーに自然と「安価で親しみやすい」といった印象を与えています。

逆に右側のブランドの広告は、「ホラーヴァキュイが弱い」ため、高価格帯の商品であることが直感的に見た人に伝わるデザインになっています。

また、たとえば以下の料理を見てみてください。

これも普通にみて、どちらが高級感を感じるかといえば、多くの人はお皿の中に沢山の余白がある右側だと答えるはずです。

このように、料理の盛り付けひとつ取ってみても、ホラーヴァキュイの法則を発見することができるのです。

この法則を元にすると、

・低価格帯の商品であれば、デザインの余白を少なくする

・高価格帯の商品であれば、デザインの余白を多くする

ということになり、あとは両者のバランスを取ることが重要になってきます。

※ただ、高額な情報商材を販売するセールスレターはまた例外ですので、必ずしもこの法則は当てはまりません。

以上を踏まえてヘッダーのデザインを考えるためのヒントは？

よって、ヘッダー画像のデザインについて考える時、私は以下のような方向で進めていくのが、しっかりとした印象のファーストビューを作るために効果的だと思います。

手順1: キャッチコピー・サブコピーを用意する(コピーライティング)

手順2: 商品のターゲット・価格帯に応じて、ホラーヴァキュイの法則に基づいてデザイナーと相談しながらヘッダー部分に含まれる言葉の数を調整する。

手順3: 実際にヘッダーに施されたデザインを見て、ターゲットと価格のバランスに問題かないかを考える
※もしデザインとして違和感が拭えない場合、文言自体の変更も必要となる

よくA/Bテストを実施するクライアントの方が沢山いますが、単に文字を変更するという視点だけではなく、見た目のデザイン自体の微調整を考える上でも、このホラーヴァキュイの法則は非常に役立ちます。

一番残念なのは、低価格の商品なのにまるでブランド品の広告のように情報量が少なかったり、高価格の商品なのに文字が多すぎて洗練感を失っている場合などです。

自分が扱っている商品に対して、どのようなデザイン(女性に例えるとお化粧)を施してあげるかで、その商品の魅力や印象は大きく変わってしまいます。

デザインは決してセンスありきといった感覚的なものではなく、心理学や色彩学など理論に基づいたものです。

デザインにはこの他にも数多くの理論が存在していますが、それを知れば知る程効果の高いランディングページを生み出せることも可能になるので、ぜひ色々と学んでみましょう。