あなたはランディングページをデザインする際に、以下のようなことを考えていませんか？
- 「ランディングページのデザイン経験がないので成果が出せるか不安だ･･･。」
- 「まとめサイトに載っていたランディングページを真似して作ったけど、成果が出なかった･･･。」
- 「最低限のデザインの知識を身につけておかないと恥ずかしいな･･･。」
ランディングページをデザインする上で、あなたに知っておいて欲しいのは、基本的なデザイン法則です。
デザイン法則とは、「ここをこうすれば、必ず成果が出るよ！」という方程式のことです。
もしもあなたが成果を出すための法則を知らない場合、まとめサイトに掲載されているランディングページをどれだけ真似しても成果が出ることはありません。
一方、最低限の知識を身につけ、「なぜその部分が、そのデザインなのか？」を知っておくことで、同じように真似したランディングページでも成果を出せるようになります。
この記事では、そんなランディングページのデザインで成果を出すための基本的な法則をお伝えします。
ランディングページを作る前に、チェックリスト的な感覚で使ってもらえると幸いです。
目次
ランディングページをデザインするときに心がけること
あなたは以下のような質問をされたとき、どのような答えを返しますか？
「ランディングページとホームページのデザインの違いはなんですか？」
もしもあなたがランディングページとホームページのデザインの違いを理解しないまま業務を進めてしまうと、成果の出ないランディングページが仕上がってしまいます。
ランディングページのデザインの知識を身につける前に、この両者の違いを明白にしておきましょう。
そうすることで、このあとお伝えするランディングページのデザインのコツがスムーズに理解できるでしょう。
ランディングページとホームページのデザインの違い
ランディングページとホームページのデザインの違いを把握する上で、はじめに知っておきたいのが、「両者のユーザーの動きの違い」です。
以下の図は、ランディングページとホームページのユーザーの動きの違いを表しています。
ホームページやブログでは、ユーザーはトップページからいくつかのページをまたぎ目的のページに到達します。
一方でランディングページは縦長のページ内にとどまり、下までスクロールします。
つまり、それぞれの目的として、以下のような違いがあります。
| ページ | 目的 | デザインをする際のポイント |
| ホームページ ブログ | サイト内のあらゆるページを見てもらう 別ページへの誘導がメイン | メニューやサイドバー、サイトマップなどの内部リンクを使い、サイト内のあらゆるページにアクセスしやすくする ページを量産する必要があるので、見出しやレイアウト、カラーやフォントなどのルールを統一 |
| ランディングページ | 単一ページでユーザーのアクションを促す 下まで読んでもらう | ユーザーがアクションを起こす上で必要な情報を順番で伝えていき、アクションを起こしてもらう 下までスクロールしてもらうための情報の配置や飽きないデザインを心がける |
まとめサイトのランディングページを真似しても成果が出ない理由
ランディングページを作るときに、何を気にすればいいのか分かっていても、実際にどのようなデザインをすればいいのか、アイデアは浮かばないものです。
そこで、多くのデザイナーの方は以下のような、ランディングページまとめサイトからアイデアを発見します。
しかし、上記のサイトからアイデアをもらい、いい感じのランディングページを作ったとしても、成果は出ません。
なぜランディングページまとめサイトの掲載ページを真似しても、成果が出ないのでしょうか？
それは、まとめサイトに掲載されているページが、どのような意図でそのデザインになっているかを把握していないからです。
そのような状態では、成果の出るランディングページを作ることはできません。
また、今後もまとめサイトのページの真似をし続けなければならず、どこかで見たようなページばかりを作ることになってしまいます。
もしもあなたが、「なぜこのページはこのようなデザインになっているのか？」という意図の部分を知ることができれば、応用が利くようになるので、アイデアをもとに成果の出る目新しいページを作ることができるでしょう。
ユーザーを引きつけるファーストビューのデザイン
ランディングページにアクセスしたユーザーの目に、はじめに飛び込んでくるのが、ファーストビューの部分です。
▲ファーストビュー事例
ユーザーはファーストビューをパッと見た上で、続きを読むか判断します。
特に情報過多のこの時代、人間は余計な情報を取り入れないよう、脳によって制限をかけられています。
ファーストビューでユーザーの心をぐっと掴むことができなければ、そもそもランディングページは読んでもらえないのです。
そこで、ランディングページのファーストビューでは、以下の三つのデザインを心がけます。
- キャッチコピー
- メインビジュアル
- そのほかのパーツ
上記の三つのデザインポイントを抑えることで、続きを読んでもらえるファーストビューが仕上がります。
この章では、その三つのデザイン方法を解説していきます。
キャッチコピー
ひとつ目はキャッチコピーです。
キャッチコピーとは、以下の部分のことです。
キャッチコピーでは、こちら側が言いたいことが相手に伝わらなければなりません。
そこで、ごちゃごちゃとした装飾ではなく、ダイレクトにユーザーに伝わるデザインを心がけましょう。
また、キャッチコピーでは検索キーワードを意識するとなお良しです。
ユーザーはファーストビューのメインキーワードをよく見ています。
そこに、自分が普段検索するような検索キーワードが含まれていると、自分に関連のあるページとして続きを読んでくれます。
メインビジュアル
次に、メインビジュアルです。
メインビジュアルとは、以下の部分のことです。
ユーザーはキャッチコピーだけでなく、メインビジュアルも続きを読むかどうかの判別要因としています。
特に、自分に関係のある写真が使われていると、続きを読みやすくなる傾向があります。
女性の向けの商材なら、女性の写真を使うのがベストですし、男性向けならターゲットとしている年代の男性の写真を使いましょう。
常にターゲットが誰かわかるビジュアルを設定してください。
そのほかのパーツのデザイン
ファーストビューの部分には、他にも様々なパーツがあります。
例えば、以下のようなゴールドバッジもその例です。
このバッジがあることで、実績やお客様の声を目立たせることができます。
特にこのようなパーツはファーストビューの目立つ部分に配置しましょう。
クリックされやすいボタンのデザイン方法
次にボタンのデザイン方法について解説します。
「ボタンのデザインなんて地味だな･･･？」
あなたはこのように思うかもしれません。
しかし、それは大きな間違いで、ボタンのデザインはランディングページのデザインの中で重要な部分のひとつです。
ランディングページの目的はコンバージョンをすること（アクションしてもらうこと）です。
つまり、遅かれ早かれボタンをクリックしてもらわなければなりません。
しかし、以下の⑤のように目立たないボタンが含まれていたらでどうでしょう？
クリックしてもらえず、売り上げを作る機会の損失にもつながります。
そこで、この章ではボタンのデザイン方法を以下のふたつに分けて解説していきます。
- ボタンの形状
- ボタンの色
ボタンの形状
ボタンをデザインするときに気になるのが、どんな形状にすればいいかです。
ひとつだけ言えることは、「ボタンだとわかるデザインであること」です。
以下の図をご覧ください。
あなたがこの図の中で最初にボタンらしさを感じるのは何番でしょうか？
おそらく、③ではないでしょうか？
ボタンをデザインをする際は、以下のポイントを押さえ、ボタンらしさを加えることを意識してみてください。
- 立体感
- グラデーション
- ドロップシャドウ（影）
また、ボタンの形状はできるだけ角丸の長方形を使うようにしましょう。
以下はビジュアル認知の権威であるJürg Nänni教授の言葉を引用したものです。
人間の目は鋭角のものより、円形のものを先に認知する。
人間の目は円形のものをより速く捉えることができる。ビジュアル認知の権威：Jürg Nänni教授
つまり、角が尖った図形よりも、丸い方が目に入りやすいので、ボタンとしても捉えてもらいやすいということです。
また、角の尖ったボタンは「鋭さ」をイメージさせるため、以下のようなことを連想してしまいます。
- 触るな
- 危険
- 禁止
- 引っ掻く
このような要因から、できるだけボタンは角丸の長方形を選びましょう。
ボタンの色
次にボタンの色について解説します。
ボタンは基本的に緑色が推奨されています。
その理由は、緑色が持つイメージがボタンにぴったりだからです。
| 色 | 色が与えるイメージ |
| 赤 | 情熱的、目立つ、危険、怒り、興奮、 |
|---|---|
| オレンジ | 活気、明るい、陽気、健康 |
| 黄色 | 元気、明るい、希望、若い、子供っぽい |
| 緑 | 安全安心、健康的、自然、無難 |
| 青 | 知的、リラックス、男性的、クール、ネガティブ、冷酷 |
| 紫 | 高貴、大人っぽい、上品、不思議 |
| ピンク | 可愛い、愛、ロマン、女性的、弱々しい |
| グレー | 落ち着き、無機質、暗い |
| 黒 | 高級感、支配、男性的、暗い、悪 |
| 白 | 始まり、シンプル、潔白、個性がない |
緑色は他の色に比べ、ユーザーに対して安心感や安全性を訴えかけることができます。
そこで、一般的にランディングページのボタンの色は緑色が推奨されています。
しかし、もちろん例外もあります。
以下の図をご覧ください。
ボタンが設置されているページの背景が緑色になっています。
このような場合、緑色のボタンでは視認性が悪くなり、気づかれづらいです。
そこで、黄色や青のボタンを使うことで、視認性を高めることができます。
目的はあくまでも、クリックをしてもらうことです。
「いつもこの色にすべき！」という明確なルールはありませんので、背景色やページの雰囲気、文字の色を考慮しボタンのカラーを変更してみてください。
以下の記事では、成果の出るランディングページのデザインのNG集を解説しています。
ボタンの事例なども詳細に解説しているので、ぜひご覧ください。
入力フォームのデザイン
ボタンに続き、入力フォームも重要な部分です。
あなたも経験があるように、入力フォームに名前や住所、電話番号などを入力するのは、面倒くさい作業です。
ユーザーの我慢の限界点を超えてしまうような、面倒くさい入力フォームでは、ランディングページの反応率を低下させてしまいます。
そこで、この章ではランディングページの入力フォームをデザインする際に気をつけるべきこととデザイン例を解説していきます。
入力フォームをデザインする際に気をつけるべき3つのポイント
入力フォームをデザインするときに気をつけるべきポイントは以下の三つです。
- 必要事項だけを入力させる
- 論理的な順番で入力を促す
- 関連する入力項目をグループ化しておく
それぞれ解説していきます。
必要事項だけを入力させる
フォームの入力項目は増えれば増えるほど面倒くさくなります。
フォームがひとつ増えるごとに、コンバージョン率は大きく低下します。
そこで、ユーザーに入力してもらう項目は最小限に抑えましょう。
必要がなければ、名前の入力もさせるべきではありません。
論理的な順番で入力を促す
フォームの入力項目には、論理的な順序を設けましょう。
例えば、いきなり住所の入力をさせ、次にメールアドレス･･･こんな入力フォームはありえませんよね？
イメージとしては、自己紹介と同じような順番で項目を並べると良いでしょう。
関連する入力項目をグループ化しておく
論理的に順序が整理されていても、違和感がある場合があります。
それは、項目をグループ化できるときです。
例えばあなたは以下の項目をどのようにグループ化しますか？
- 名前
- メールアドレス
- 住所
- 電話番号
- 会員ID
- パスワード
あくまでも事例ですが、次のようにグループ化することができます。
| 個人情報 | アカウント情報 |
| 名前 | メールアドレス |
| 住所 | 会員ID |
| 電話番号 | パスワード |
入力する際も、上記のようにまとめておくと、入力が違和感なくスムーズに行えるでしょう。
入力フォームの5つのデザイン方法
前節の三つのポイントを踏まえた上で、入力フォームをデザインする際の事例をお伝えします。
入力フォームの項目を最小限にする
入力フォームを分けてしまうと、余計な操作が増えてしまいます。
必要でないフォームは削除し、余計な分割は無くしましょう。
必須か任意かわかるようにする
特に、（任意）やアスタリスク＊などを用いて、必須か任意かどうかがわかるようにしておきます。
記入例を明記しておく
プレースホルダーという記述で、入力フィールド内に記入例を表示させることができます。
チェックボックスは垂直に並べる
チェックボックスを横に並べると、左右どちらの選択肢のチェックボックスかがわかりにくいです。
そこで、縦に並べておくことで、視認性をたかめます。
ボタンのテキストは意思表示にする
ボタンは行動を喚起するものなので、ユーザーが行動する際の意思に見合ったテキストにすることをオススメします。
素人感をなくすための4つのレイアウトテクニック
ランディングページをデザインする場合だけでなく、ホームページやプレゼン資料を作成する際、「なんで私が作ったものは素人感が出てしまうんだろう・・？」と思うことはありませんか？
素人感が出てしまう理由のひとつに、レイアウトがうまくできていないことがあります。
レイアウトとは、ランディングページ内に掲載したい情報をどのように配置するのかを考えることを言います。
この、レイアウトには以下の4つの基本原則があります。
| 近接 | 関連する項目・情報をまとめてグループ化すること |
|---|---|
| 整列 | 各項目・情報を意図を持って並べること |
| コントラスト | 異なる要素において区別がつくようにすること |
| 反復 | 一定のルールを設けて、そのルールを繰り返すこと |
これら4つを知っておくことで、デザインの素人感がなくなり、より見やすいランディングページが出来上がります。
この章では、そんなランディングページの情報のレイアウトテクニックについて解説します。
近接
人間は位置的に近いものを関連する項目だと認識します。
つまり、位置関係を調整するだけで、それぞれが関連する項目であると認識させることができます。
例えば、ランディングページ内の見出しと本文の行間のサイズを揃えるのではなく、見出しと本文の行間は比較的大きくし、本文同士は狭くするなどの工夫をすることで見やすくなります。
ポイントとしては、関連項目同士の余白を均等にするということです。
余白のひとつひとつに意味合いを持たせるようにしましょう。
整列
項目や情報を意図的に並べることを整列といいます。
整列のポイントとしては、見えない線を基準に項目を並べるということです。
ランディングページでも無造作にコンテンツが並べられているものを見かけますが、見えない線を意識することで、すっきりとした見やすいデザインが仕上がります。
コントラスト
要素が違うものをはっきりと区別することをコントラストといいます。
もしあなたが要素の違いをわかっていたとしても、きっちりと違いを生み出せていなければ、ユーザーは気づいてくれません。
例えば、見出しと本文の違いは文字のサイズや背景などで調整することができます。
半端な違いではなく、誰が見ても認識できる違いを作りましょう。
反復
最後に反復です。
反復とは、一定のルールを用いて、一貫性を持たせることを言います。
色や線などを同じデザインの中で継続的に使うことで、全体に一貫性が生まれます。
例えば、WEBサイトなどではサイト内の別ページへ移動した時に、全くデザインの違うページになっていると、ユーザーは外部サイトに移動したと勘違いしてしまいます。
そこで、リズム感を意識し、同じ要素を反復して使うことで、一貫性を持たせることができます。
ランディングページでも、あまりにたくさんの色を使うのではなく、「メインカラー+サブカラー」など、配色を絞ってデザインすることをオススメします。
印象を左右する！フォント（書体）のデザイン方法
ランディングページでは性質上、様々な情報を伝えることが必要になります。
その際、どうしても写真や動画だけでなく、文字による情報伝達は必須です。
では、あなたがこれから読もうとしている本文が以下のようなフォントだとどのように感じるでしょうか？
おそらく、暑苦しい感じがしますよね？
その理由はフォントと太さにあります。
一般的にランディングページの文章は、「本文」と「見出し」に分かれています。
特徴は以下の通りです。
| 文字の種類 | 特徴 | 使うべき書体や太さ |
| 見出し | ・全体の内容を把握してもらう部分 ・中身について興味を持ってもらう部分 ・はじめに見て欲しい部分 | ・視認性がよい書体 ・太い書体 ・大きいサイズ |
| 本文 | ・じっくりと長い時間読まれる ・いかに持続力を高めるかがポイント | ・じっくりと長い時間読んでも疲れない書体 ・圧迫感や緊張感のない細い書体 ・比較的小さなサイズ |
本文にはどのような文字を使うべきなのか？見出しにはどのような文字を使うべきなのか？状況に応じて使い分けることが大切です。
まとめ
以上がランディングページのデザインのコツでした。
ランディングページをデザインする際に特に意識的にデザインして欲しいのが、以下の5つの部分です。
- ファーストビュー
- ボタン
- フォーム
- レイアウト
- 書体
この部分を意識的にデザインすることで、必ず反応の取れるデザインに仕上がります。
ぜひ、この記事を参考にデザインをしてみてくださいね。
