89A9DC2D-3E85-435E-A982-C8E19E35C336
ランディングページをデザインする時に必要なのは、きれいな画像だけではありません。
サイト訪問者を購入ボタンへ導くために、
ページの構成をよく考えることが重要です。
上記の写真はFlickr社のBaldiriより転載したものです。

この記事は、Landing Page and Conversion Optimization Blog | Unbounceに掲載された「6 Articles on Design Theory to Help You Create Beautiful Landing Pages」を翻訳した内容です。

社内に優秀なウェブ・デザイナーがいる会社はいいでしょう。
でもたいていの場合は、そんな優秀なウェブ・デザイナーなんていません。

苦労して作り上げたウェブページのデザインが、かえってコンバージョン達成の邪魔に
なってしまっているケースが多く見られるのです。

大切なのは、ページの見た目だけではありません。
コンバージョン率の高いランディングページに必要な、全ての要素に着目する必要があります。

矢印などのウェブ素材やフォントの活用方法、色の使い方、レイアウトのコツなど。

デザインが不得意という人にこそ、この記事は大いに役立つでしょう。
私はその手のブログを読み漁り、ついに最高のものを見つけました。

それは、”ランディングページのコンバージョン率を高めるデザイン手法”について
書かれたもので、色心理学からタイポグラフィ、目の錯覚の活用方法まで教えてくれます。

さあ、始めましょう!

1. 色心理学(Quick  Sprout社著)

AFB4D6B7-A0E1-4C9E-BE53-4DF597439D09
消費者心理を理解するための完全ガイド 第四章:色心理学
著者:Quick Sprout社のNeil Patel、Ritika Puri

これから、 Quick Sprout社の”消費者心理を理解するための
完全ガイド 第四章”を紹介します。

その内容は”配色”の方法から始まります。

色彩調和のみならず、それぞれの原色が与える
心理的な影響から、色影、淡色まで教えてくれます。

そもそも”色”とは、社会文化的な意味合いを持っています。

そして、この完全ガイドは、異なる社会集団において、
”色がどのような意味合いを持ってくるのかを教えてくれます。
(例えば、同じ色でも、北アメリカで使われるのと、インドで使われるのとでは、
意味合いが変わってくるのです。)

この完全ガイドでは次のようなことも教えてくれます。

  • 性別によって好きな色が変わってくる、その関係性
  • 色の使い方でコンバージョン率をアップさせる方法
  • お体の不自由な方にも分かりやすいデザインの作り方

上級者ポイント!

多くのデザイナーは、同じページに沢山の色を使い過ぎて
逆効果になってしまっているのが現状です。

色は影響力を持っているので、一度に沢山使い過ぎると、
それを見た人の感情が入り乱れ、混乱を招くことになり兼ねません。

ですので、メインとなる色を一つ決めて、補助的に白やグレー、
黒といった無彩色を使うことをお勧めします。

2. 最適な色遣い:消費者心理を掴み、コンバージョン率をアップさせる4つの秘訣

BDB2E6A5-6198-4CFF-9C1E-676F48F7671C
最適な色遣い:消費者心理を掴み、コンバージョン率をアップさせる4つの秘訣
著者:Three Deep Marketing社のAngie Schottmuller

色遣いとコンバージョン率の関連性について書かれている資料を読むと、
そのほとんどが色心理学に焦点を当てていることが分かります。

それは、感情とその強さが、色の種類によって左右されることを意味しています。

そこで、Three Deep Marketing社のAngie Schottmullerさんは、
人間という生き物がどのように色情報を処理するのかに焦点を当て、
そこから”コンバージョン率をアップさせるシステム”を考案しました。

つまり、人間の目が色を認識する際にどのように反応するのか、
そしてサイト訪問者の行動にどのような影響を与えるのか、
ということに着目したのです。

詳しくは、Angie Schottmullerさんのサイトを読んでいただくと、
以下のポイントが分かります。

  • ”機械的にコンバージョン率をアップさせる色モデル”をベースとした、
    補色を使ってコンバージョン率をアップさせるテクニック
  • 科学的に裏付けされた、色モデルの4大原則と、ランディングページへの活かし方

上級者ポイント!

CTAボタンには原色を使います。

それ以外の部分には、白やグレー、黒といった
無彩色を混ぜた色を使って、CTAボタンを目立たせましょう。

その結果、”原色を使い過ぎて目がチカチカする”というような
残念なパターンを、避けることができます。

3. 正しいフォントを選ぼう:タイポグラフィとUX入門

8F33E41D-5EF6-409F-9A89-FD11CE4B9F05
正しいフォントを選ぼう:タイポグラフィとUX入門
著者:UserTesting社のHannah Alvarez

タイポグラフィにはたくさんの種類がありますが、
ウェブサイトに最適なのは一体どれなのか、物議を醸しています。

しかし、答えはそのサイトのデザインによって変わってきます。

あなたのランディングページではどのタイポグラフィを使うべきなのか
それを知りたい人は、 UserTesting社のガイドラインを読みましょう。

必要な知識を全て習得し、正しい判断ができるようになるでしょう。
以下のポイントについて学ぶことができます。

  • パソコンとスマートフォン、それぞれ一行ごとに最適な文字数はどの位か
  • 文章と背景のコントラストは、どのように設定したらよいか
  • セリフ付きのフォント、サンセリフのフォント、それぞれに対するユーザの反応の違い

上級者ポイント!

ページに掲載する全ての文章は、”購入ボタンのクリック”というゴールに向けて、
サイト訪問者を導くためのものです。

あなたのランディングページ用にフォントを選ぶ際にも、
このことを決して忘れないで下さい。

自分自身に、こう問いかけてみましょう。

  • ユーザは何を期待して、私のランディングページに来ているのだろう?
  • パソコンやスマートフォンなど、どの機器をユーザは使っているだろうか?
  • 私のランディングページに訪れるユーザの目的は何だろう?
    (ショッピング?何か知りたい情報があるから?それともただ楽しみたいだけ?)

その答えが、あなたのページに最適なタイポグラフィや色遣いを選ぶのに役立つのです。
その時、決して自分の勘だけに頼ってはいけません。

優秀なウェブ・デザイナー達もそうしているように、繰り返しテストを実行するのです。

4. 初心者向け!書体&レイアウトの活用術

132C3E50-F267-43F9-BA42-F405CF3352A7
初心者向け!書体&レイアウトの活用術
著者:Lifehacker社のAdam Dachis

色とフォントを選んだら、今度はウェブ・ページ上でそれを表示させる番です。

どうすれば魅力的なページになるでしょうか?

Lifehacker社のAdam Dachis さんが、その答えを分かりやすく説明してくれています。
彼のサイトを読むと、書体やレイアウトの上手な活用術が分かることでしょう。

  • 色や大きさ、スペースをうまく使って、大事な部分をいくつか強調するには?
  • なぜ、書体は2種類までしか使ってはいけないのか?
    (そして、このルールを破っていいのはどんな場合か?)
  • サイト訪問者に自分のメッセージをもっと伝えて、コンバージョン率を
    アップさせるためには、文字や画像をどのように配置したらよいか?

上級者ポイント!

色の組み合わせを間違えると、見栄えの悪いページになってしまい、
サイト訪問者がなかなか増えなくなってしまいます。

では、色遣いに自信のない人はどうすればよいでしょうか?

そんな皆さんのために、Dachis さんは、
とっても便利な”Adobe Kuler”というツールを紹介してくれました。
これを使えば、最適な色の組み合わせが分かります。
(もう自分のセンスだけに頼らなくてもいいのです。)

5. 知っておかなきゃ損: 効果抜群! ウェブデザインの8大原則

D07FD2B8-1EFF-4C22-92F0-8BB722DB8324
知っておかなきゃ損:効果抜群!ウェブデザインの8大原則
著者:ConversionXL社のPeep Laja

コンバージョン率アップの専門家として、Peep Lajaさんはこう語っています。

デザインとは、デザイナーが作るものではない。デザインとは、
マーケティングそのものなのだ。

もしあなたがウェブ・マーケティングを専門としていて、
”デザインなんて、できなくてもいい”と考えていたのなら、
驚いて冷や汗を掻いたことでしょう。

そんなあなたのために、Peepさんは魅力的なウェブページを
デザインするために役立てて欲しいと思い、8大原則を噛み砕いて説明したのです。

彼が紹介しているサンプルの多くはランディングページ向けというよりは、
普通のウェブサイト用のものではありますが、是非読んでみて要点を掴んで下さい。

次のことを習得できるでしょう。

  • 比率や数列を使って、数学面から目に優しいウェブサイトをデザインする方法
  • 画像集から気になるページを持ってきた後、”三分割ルール”に則って、あなたのランディングページに適した画像を選ぶ方法
  • サイト訪問者を引き寄せるための、心理科学的なポイント多数

6. なぜ、こんな見栄えの悪いサイトのコンバージョン率が高いのか?

28EC253D-C804-4495-B633-1A62C7AFB2E5
なぜ、こんな見栄えの悪いサイトのコンバージョン率が高いのか?
著者:Unbounce社の Mattias Guilotte

デザインについて一通り学んで、どうすれば見栄えの良いページを
作ることができるのか、分かったところで、一旦その内容を忘れてしまいましょう。
そして、逆に”きれいなサイトは三日で飽きる”と謡っている記事を見てみましょう。

”美人は三日で飽きる”とはよく言うものですが、Mattias Guilotteさんは、
決して見栄えの良くないランディングページが、
すばらしいコンバージョン率を達成している例を三つ挙げています。

見た目の悪いランディングページが、
なぜ驚きのコンバージョン率を達成しているのか、その理由を彼は推測しています。

そのことは、”盲目的にデザイン・ルールに従う前に、
なぜテストを実施するべきなのか”という教訓を教えてくれます。
彼も言っていることですが、テストは必ず実施しましょう。

さいごに

今回ご紹介したサイトには、すばらしい情報が沢山載っているので、
しばらくの間は読むのに没頭することになるでしょう。

ざっと目を通して、あなたのランディングページに
足りないものは何か、そのヒントを見つけて。

そして、その推測が正しかったのかどうか、検証するためにテストを実施しましょう。

最後に、”内容の濃いコピー文章”こそ、魅力的で分かりやすい
ランディングページには必要不可欠であることを、決して忘れないで下さい。