【ノンデザイナー向け】５つの秘訣で売れるランディングページをデザインする方法

インターネットで集客やセールスを成功させるには、ランディングページやセールスページと呼ばれる縦長ワンカラム構成のウェブページが必要です。
このページの目的は明確です。それは集客やセールス（販売）など、売上や成果に直接的につながることです。そのため、クリエイティブだと思われがちなウェブデザインではなく、成果を上げるためのセールスデザインが求められます。
https://presentnote.com/5-mistakes-webdesign/
このページでは、セールスデザインに基づいた、売れるランディングページ（またはセールスページ）をつくるときに押さえておきたいデザインのポイントをご紹介します。
ちなみに、ランディングページとセールスページの言葉の使い分けですが、以下のような感じです（明確な決まりはありませんが）。

1. 売れるレイアウトはワンカラム

ウェブで成約率の高いページのレイアウトは決まっています。ワンカラムの縦長 1 ページ構成です。
多くのウェブサイトはサイドバーがあり、メニューがあり、下層ページがある構成になっています。しかしセールスページの場合は全て不要な要素です。
なぜなら、訪問者にやってほしいことはただ 1 つだけ、申し込みのボタンを押してもらうことだけだからです。ですので、それ以外のリンクやメニューは一切排除し、寄り道せずに集中してコピーを読んでもらうためのシンプルなレイアウトが有効なのです。
最近ページ内リンクはよく使われるようになっていますが、以前テストしたときはページ内リンクの無いパターンの方が CVR（コンバージョン率）が高かったです。
最近はテストしてないので分かりませんが・・・。
ちょっと古い記事ですが、WordPress でランディングページを作る場合はこちらが役に立つと思います。
https://presentnote.com/create-sales-page-one-column/

2カラムのレイアウトで成果を上げるケースもある

セオリーとしてはワンカラムですが、実は 2 カラムのランディングページやセールスページもあり、成果を上げているケースもあります。
例えばオプトイン用のランディングページの場合。右サイトバーを用意して、そこに常にオプトインフォームが表示されているデザインは有効です。
一般的に右利きの人が多くマウスは右手で扱うので、マウスポインタはディスプレイの右半分にあることが多いです。なので、右サイドバーにメルアドの登録フォームを配置しておくことで、ユーザーの動作を少しでも楽にして上げることができます。
また、セールスページの場合でも右サイドバーに購入ボタンを表示させることで成約率（コンバージョン率）をアップさせたケースがあります。

左サイドバーで成約率を改善させたケースも

人間の構造的な理屈（右手でマウスだとか、視線はまず左上からだとか）に則れば、サイドバーは右に配置し、そこに登録フォームや購入ボタンを配置した方がいいと考えられます。
ですが、この購入ボタンを設置したサイドバーを右ではなく左に配置したことで。成約率が改善したケースもあります。結局のところテストしてみないと分からないというわけです。
また、見込み客が既存のレイアウトに慣れてきている場合、あえてパターンを崩して新鮮さを出す方法もあります。要するに、確実な答えはありませんので常に改善・テストを繰り返していきましょう。

ランディングページ/セールスページでサイドバーを使う場合の注意点

① 別ページへのリンクや別商品のバナーを張らない

サイドバーの役目は、あくまでも成約率を高めて訪問者を次のステップへとコンバート（＝転換する）ことです。ですので、目的は登録や決済に限られます。間違ってもメニューや下層ページへのリンク、他の商品のバナーを貼ったりしてはいけません。
これはサイドバーに限りません。ナビゲーションメニューに外部リンクを貼ったり、ページ内で別ページへのリンクを貼るのも NG です。最低限必要な外部リンクはフッターには特商法や個人情報保護方針などの記載ページくらいです。

② 無料や低価格商品はCTAをファーストビューに

また、サイドバーを配置するレイアウトが通用するのは、無料オファーや低価格商品に限られると思われます。事実、高額商品でサイドバーを設置したレイアウトでテストしたところ、成約率を下げたケースがあります。
無料オファーであれば登録の敷居も低いですし、低価格商品であれば詳しく商品内容を確認せずに、価格だけで判断して衝動的に購入をする場合もあります。なので、ページを開くとすぐに次の行動（= 登録や購入）の方法を確認できる方が成約率が高まると考えられます。
つまり、サイドバーへの登録 or 決済ボタンの配置は、

という流れがスムーズにできるレイアウトなのです。

③ 高額商品は上から順番にセールスコピーを読んでもらう構成に

一方高額商品の場合は、しっかりセールスページ内で商品の価値などをプレゼンしてから、購入の判断をしてもらう必要があります。
AIDA の法則に代表されるような、売れる広告コピーの構成通りに読み進めてもらいたいので、サイドバーは不要です。ワンカラムのレイアウトで、一切の脇道を許さず上から下へとスクロールしてもらえるようにしましょう。
つまり、ワンカラムのランディングページは、

という流れがスムーズにできるレイアウトなのです。

商品価格についても、すぐに見込み客に知られてしまってはいけません。じっくり価値を説明し、価格の妥当性を説明した上でプレゼンしないといけません。でなければ高いと思われてしまいます。
https://presentnote.com/11-technics-show-the-price/
そのため、購入ボタンは全てのプレゼンが終わったあと（主にページの最下部）に配置しましょう。

ランディングページでサイドバーを固定表示させるテクニック

これは CSS をちょっといじれば簡単に実装できます。

position: fixed;

これをサイドバーの id にでも指定すれば、指定した位置に常に固定表示されます。追尾型のサイドバーを用意するケースもありますが、そちらは jQuery などを使って実装できます。

2. ランディングページの横幅の決め方

ランディングページやセールスページの横幅はいくらがいいのか？　どのような基準で横幅を決めればいいのでしょうか？
1 つはセールスコピー本文の読みやすさです。あまりにも大きく左から右へ目線を動かさないと読めないような幅では、可読性を損ない離脱率を高めてしまうでしょう。なので、目線はできるだけ上下運動に抑えられる幅にするのがよいと思います。

そういう点では、重要なのはページの幅よりもコンテンツ部分の幅です。
実際に成約率の高いセールスページの横幅を調べてみました。

商品名	サイト（ページ）の幅	コンテンツの幅
国内の某商品NのSP	679px	580px
国内の某商品HのSP	656px	555px
国内の某商品BのSP	900px	900px
海外の某商品GのSP	992px	992px
海外の某商品FのSP	760px	760px
海外の某商品RのSP	900px	727px
海外の某商品MのSP	1140px	1100px

サイトの幅もコンテンツ部分の幅も様々ですね。
ただ、冒頭 2 つの N と H は 5 年以上前からあるセールスページです。サイトの幅もコンテンツ部分の幅も 700px を超えることのない、比較的狭いデザインでした。
一方最近のデザインに傾向があるとすれば、横幅は 900px 以上の比較的広めの構成が主流になってきているようです。
とはいえ、 A/B テストをすると横幅が狭いランディングページの方が成約率が高いという結果を出したケースもあります。横幅も迷ったらテストしましょう。
ただ、横幅をテストするより重要度の高いテスト箇所は他にありますので（ヘッドラインとか）、売れているサイトの横幅をそのまま真似すれば問題ありません。

スマホやタブレットなど、各デバイスごとの幅も考慮する

モバイル対応がウェブサイトをつくる上での必須条件となってきていますし、ユーザーがどのデバイスでページを見るのかを考えて設計する必要性はどんどん高まっています。ですので、パソコン画面だけを基準にしてサイトの幅を考えるのでは不十分です。
タブレットやスマートフォンのディスプレイサイズの場合、パソコンのディスプレイとは違いコンテンツはディスプレイいっぱいに表示されるようにした方が読みやすくなります。ディスプレイの左右に数ピクセルだけ余白を確保するレイアウトにしましょう。パソコン用に指定した余白のままだと、画面の半分以上を余白で占めてしまう場合があります。

1段落は3〜5行に収め、むやみな改行はしない

また、改行の位置にも気を付けましょう。HTML では <p> ~ </p> で囲まれた範囲を段落として扱います。<br> タグを使うと、<p> で囲まれた範囲内でも改行ができます。
読みやすさを考えるなら、パソコンブラウザ基準で 3 行 〜 5 行に 1 回は段落を変えるようにしましょう。<p> タグで囲まれた段落も改行されますので、基本的に <br> タグによる改行は使わない方がいいです。
また、パソコンでの読みやすさばかりを気にして文章の途中で改行（<br> タグによる改行）をしてしまうと、スマホなどのサイズで見たときに読みにくくなってしまいます。

基本的に読点や意味の区切りで改行するのではなく、句点のみで改行するようにした方が全デバイスでの読みやすさに対応できます。

スマホで改行を無効にする方法

レスポンシブデザインの代表的な方法である、ディスプレイサイズごとにスタイルシートを切り替える方法です。
HTML の記述

<p>改行タグにセレクタを指定すれば、<br class="sp-br">
モバイルでの改行を無効にできます。</p>

CSS の記述

@media screen and (max-width: 643px) {
	.sp-br {
		display: none;
	}
}

【ディスプレイサイズ 643px 以下のデバイスでは、class=”sp-br” と指定した要素を非表示にする】という指定方法です。どうしてもパソコン表示で改行したい箇所がある場合に使ってください。
いちいち <br> タグに class セレクタを追加するのが面倒なら、以下のように全ての <br> を非表示にすることで、スマホで改行を無効にできます。

@media screen and (max-width: 643px) {
	br {
		display: none;
	}
}

3. 配色は 3 色で構成する

配色に関しては、ベースカラー・メインカラー・アクセントカラーの 3 色構成がベターです。あまり多くの色を使いすぎると統一感が出せなくなったり、重要な箇所が分からなくなったり、広告メッセージがぼやけたりします。なので、基本は 3 色でまとめた方がいいです。

ベースカラー

背景に用いる色です。基本は白です。
白文字を使って背景に白以外を持ってくるようなパターンもありますが、セールスデザインではセールスコピーを読んでもらうことが重要なので、文字色は読みやすい黒（明度の低いグレー）にします。ですので、背景色は白に近い色がいいです。

メインカラー

サイトの印象を決める色です。これは、商品・サービス、会社のイメージ、または見込み客に与えたい印象を元に決めてください。
メインカラーはヘッダーやフッター、サブヘッドなどで使用することが多いです。
イメージに合わせた色をどのように選べばいいか分からないときは、こちらのサイトがとても参考になります。

アクセントカラー

最も目立つ色です。主にコンバージョンボタン、登録ボタンや購入ボタンなどの、クリックしてほしい部分に使用します。いわゆる CTA（Call To Action）と呼ばれる部分です。
メインカラーに対してコントラストがはっきりしており、直感的にそこが重要な部分であることを伝える役目があります。
メインカラーを決めてから、以下のようなツールを使ってアクセントカラーを決めます。

Google 推奨のマテリアルデザインが参考になるかも

Google が公開しているデザインのガイドラインがあるんですが、そこで採用されているのがマテリアルデザイン（material design）と呼ばれています。
ウェブサイトだけではなくスマホアプリのデザインにも使えるガイドラインですが（むしろスマホアプリのデザインのためのガイドラインだと思われ）、そのガイドラインの中に色のスキームも提供されています。
セールスデザイン的にはとても使いやすそうなのでぜひ参考にしてみてください。

さらにこちらのツールは、いくつかの色を選択するだけで全体の配色を提案してくれます。マテリアルデザインの配色決めがとても簡単になります。
このようなツールで決めた配色をそのままパクるのが、間違いがなくておすすめです。

4. フォントカラー・フォントサイズ・字体

文字について決めることは、文字の色と文字のサイズ、そして字体です。

フォントカラー

セールスデザインの背景は基本白ですので、ベースとなる文字色は明度を少し上げたグレーを使います。真っ黒よりもグレーの方が読みやすいです。
しかし、ベースとなる色以外にも、2 ~ 3 色パターンを用意しておきましょう。
1 つは白。これはアクセントカラーなどを使用している部分のフォントカラーに使います。
例えばメインカラーが #3399CC の場合、これを背景色にしてサブヘッドを差し込む場合、以下のようにフォントカラーを白にします。

メインカラー #3399CC を背景色にして白色フォントのサブヘッド

他には、メインカラーやアクセントカラーで採用した色を、ヘッドラインやサブヘッドなどのフォントカラーとしても使ったり、セールスコピー本文中で目立たせたい文字や文章がある場合は赤文字にして目立たせたり、というような使い方です。

フォントサイズ

フォントサイズも 3 パターンくらいにまとめます。
セールスコピー本文のサイズと、その他見出しなどで使うサイズを 2 パターンほど決めておきましょう。
文字の大きさは可読性を左右しますので、ターゲットに合わせて調整しましょう。つまり、ターゲットとなる見込み客が普段よく目にする文字の大きさが最適サイズということです。
また、ウェブ媒体と紙媒体でも読みやすい文字の大きさは異なります。ウェブだと本文のフォントサイズに 14 ~ 16px くらいを使うことが多いです。

字体（フォントファミリー）

字体は大きく 2 パターン、ゴシック体か明朝体です。
アルファベットの場合はサンセリフかセリフ体です。

これもウェブ媒体と紙媒体で読みやすさに違いがでてきます。紙媒体は基本的に明朝体を使いますが、ウェブ媒体はゴシック体を使った方が読みやすくなります。
サブヘッドなどで明朝体を使って文字にリズムをつけることはありますが、その場合はフォントサイズを本文より大きくし、さらに太文字（ボールド）にするなどして文字をはっきり見やすくする必要があります。
ワードプレスなどで制作する場合、テーマにもよりますが、基本的にはゴシック体になってると思います。そのため、明朝体にしたいと思った箇所の字体を serif 体にすれば、日本語の明朝体扱いになります。

CSS タグはこちら

<span style="font-family:serif;">明朝体にしました。</span>

5. 常に注意を引くきっかけをつくる

ウェブページを用意しても、見込み客は上から順番に読んでくれるわけではありません。ちゃんと構成に意図があるので本当は順番に読んでほしいのですが、結局は流し読みされてしまいます。
そのため、流し読みしている見込み客の注意をいたるところで引きつける工夫が必要です。

サブヘッドを使って注意を引く

セールスページはいくつかの段落でできていますが、各段落にはサブヘッドライン（サブキャッチコピー）と呼ばれる見出しをつけます。
この見出しは、ヘッドラインをつくるのと同じ要領で、流し読みしている見込み客の注意を引き、次の本文を読んでもらうためのものです。
ブラウザのサイズにもよりますが、だいたい 1 画面に 1 段落が収まる感じで、各段落の冒頭にはサブヘッドラインを挟むのが理想的です。
サブヘッドラインは他の文字よりも大きくデザインを区別して目立たせます。
またデザインとは異なりますが、このサブヘッドを上から拾い読みするだけでも、なんとなくセールスコピーの内容が伝わるようにします。

アイキャッチを使って注意を引く

見出しとは別に、アイキャッチとして写真を使い注意を引きつける方法もオススメです。
以下のタイプの写真は、人が無意識に注目してしまうため

そして、写真は人の目を引くため、その周辺には必ず読んで欲しい重要度の高いコピーを配置します。いわゆるキャプションです。アイキャッチをして、そしてどうしたいのかが大切なわけです。

パターンを崩して注意を引く

人は同じようなパターンが続くと飽きてしまいます。つまり、文章がずっと続いたり、同じようなデザインが続くと飽きられて離脱されてしまう可能性が高まります。
ですので、パターンを崩して見込み客の意識を再びコピーに引きつける工夫が必要です。サブヘッドを配置するのもこのテクニックの 1 つですが、他にも、、、

などのテクニックがあります。

図・イラスト・表で説明できないか？

文章主体のセールスコピーでは何かと軽視されている感じがありますが、文章で説明するよりも図やイラスト、表を使って説明した方が圧倒的に分かりやすい場合があります。
価格表や取引内容のまとめなどは積極的に表を使って表現しましょう。
また、商品やサービスをイメージできる写真やイラストは必須ですし、証拠を示すところではグラフを使ってみるのもいいですね。
何より、文字よりも圧倒的に見てもらえます。

まとめ

セールスコピーは “削る作業” なのですが、セールスデザインも同じです。つまり、あれもこれも詰め込みたくなるところをぐっと我慢して、削るのです。
何か物足りないな、、、と感じるくらいでちょうど良いと思います。余計なデザインをほどこして成約率が落ちることはあっても、上がることはないでしょう。
ワンカラム構成、配色は 3 つまで、フォントサイズも 3 パターンなど、これらはどれもいかに削ってシンプルにできるか、を考えた結果です。それが成約率の高いデザインだと過去の広告デザイナーたちがテストして検証してくれているので、エゴを挟まずに素直に従いましょう。
何か新しいアイデアを閃いても、まずはテスト。デザインの良し悪しは売れるかどうかが決めます。お客さんに判断してもらい、最も成約率の高いランディングページを目指してください。

参考資料・参考記事