img_04

LPデザイン

魅力的なファーストビューを構築するために「ホラーヴァキュイ(空間恐怖)」の法則を知ろう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ということです。

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

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

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

Img 01

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

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

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

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

Img 02

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

Img 03

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

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

この法則を元にすると、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ピックアップ記事

  1. 【最初からやっておけばよかった】フリーランス生活の質を高めるための3つの工夫
  2. ランディングページ制作過程から見る「KATAOKA DESIGN MARKETI…
  3. ランディングページの文章が書けないたったひとつの理由とは
  4. デザイン音痴から脱却!成約率を高めるランディングページデザイン7つの法則
  5. 発注者なら知っておきたい!「レスポンシブWebデザインのランディングページ」と「…

関連記事

  1. Modern business office workplace technology concept.  Blue toned

    LPデザイン

    スマホ専用ランディングページのすべてはファーストビューで決まる

    Googleのモバイルファーストインデックスの正式導入によって、ランデ…

  2. preview8

    LPデザイン

    ランディングページ内の購入ボタンは、どの場所に設置すればいいのか?

    ランディングページの構成案を考える上で、意外と見落としていることが多い…

  3. photo-1453133451515-5ff7c1d0d63c

    LPデザイン

    デザイン音痴から脱却!成約率を高めるランディングページデザイン7つの法則

    デザインとは、8割が理論で2割が感性の世界です。どんな…

  4. photo-1470350576089-539d5a852bf7

    LPデザイン

    スマホで注文を取りたいのであれば、スマホ専用ランディングページにするべき3つの理由

    私の制作サービスはレスポンシブウェブデザインという仕組みを利用して、ス…

  5. photo-1451421924504-c52d431cdad5
  6. A businesswoman comes to success and rejoices

    LPデザイン

    自分の世界観をランディングページに反映する3つの方法について

    私が常日頃制作するランディングページのジャンルの中でも、特に多いのが「…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. 積み重ねることの意義と強さ
  2. スマホ専用ランディングページのすべてはファーストビューで決ま…
  3. Googleがモバイルファーストインデックスの導入を正式発表…
  4. 【雑感】独学でWebデザイナーのフリーランスになる3つのマイ…
  5. デザイン作業の集中力を持続させるために私が実践している3つの…
  1. fotoliacomp_99005903_qgx6klwck8emh1ynmb7ozylyvfz5eawl_nw40

    フリーランス仕事術

    デザイン作業の集中力を持続させるために私が実践している3つの工夫
  2. photo-1426024025799-8cf58f5df5a4

    フリーランス仕事術

    稼げないデザイナーは、パソコン操作が遅い
  3. Successful businessman and financial graph on the wall

    フリーランス仕事術

    積み重ねることの意義と強さ
  4. fotolia_71679057_subscription_monthly_m

    LPO

    ランディングページを修正する場合、まず考えるべきこと、見るべきポイントは何か?
  5. photo-1470350576089-539d5a852bf7

    LPデザイン

    スマホで注文を取りたいのであれば、スマホ専用ランディングページにするべき3つの理…
PAGE TOP