ランディングページのデザインが浮かばない時に見直したいポイント
2022.4.21
見る人が最後まで読みたいと思えるように、ランディングページを制作する必要があります。ユーザーを惹きつけるために気を付けたいポイントは様々ありますが、「デザイン」は特に重要となります。
デザインが重要とは言っても、どのようにデザインすればよくなるのかわからない方も多いと思います。そこで以下をメインにデザインを見直すポイント、アイデアが思い浮かばないときの対処法をご紹介します。
・ランディングページにおけるデザインの重要性。
・デザインをする上での注意点やポイント。
・デザインが浮かばないときの対処法
デザインが重要とは言っても、どのようにデザインすればよくなるのかわからない方も多いと思います。そこで以下をメインにデザインを見直すポイント、アイデアが思い浮かばないときの対処法をご紹介します。
・ランディングページにおけるデザインの重要性。
・デザインをする上での注意点やポイント。
・デザインが浮かばないときの対処法
目次
デザインの重要性
デザインはランディングページの印象やコンバージョンにも大きく関わってきます。
惹きつけるようなキャッチコピーを考え、ユーザーの手間が掛からないように最適化を行うことが大切です。
ユーザーにとって第一印象である「良い」「悪い」を判断する材料の1つになります。背景色や画像の使い方、配置の仕方など、少しでも違和感を覚えると離脱してしまう可能性もあります。
また、ユーザーが初めに目にするファーストビューへ気を配って下さい。
ファーストビューはユーザーの離脱率に影響する可能性が高い箇所となります。
どんな内容であればユーザーは興味を持ってくれるのか、ファーストビューのデザインは意識して制作するよう心がけて下さい。
ほかに、デザインは文章を引き立てる役割もあります。女性をターゲットにした美容ページは、ピンク系の背景色を使うことで好感度を上げ、画像を使うことでイメージを沸かせることができます。見やすく、イメージ通りのデザインに仕上げることで、文章がより目に留まりやすくなり、最後まで積極的に見てもらえやすくなります。
惹きつけるようなキャッチコピーを考え、ユーザーの手間が掛からないように最適化を行うことが大切です。
ユーザーにとって第一印象である「良い」「悪い」を判断する材料の1つになります。背景色や画像の使い方、配置の仕方など、少しでも違和感を覚えると離脱してしまう可能性もあります。
また、ユーザーが初めに目にするファーストビューへ気を配って下さい。
ファーストビューはユーザーの離脱率に影響する可能性が高い箇所となります。
どんな内容であればユーザーは興味を持ってくれるのか、ファーストビューのデザインは意識して制作するよう心がけて下さい。
ほかに、デザインは文章を引き立てる役割もあります。女性をターゲットにした美容ページは、ピンク系の背景色を使うことで好感度を上げ、画像を使うことでイメージを沸かせることができます。見やすく、イメージ通りのデザインに仕上げることで、文章がより目に留まりやすくなり、最後まで積極的に見てもらえやすくなります。
デザインの基本要素
商品のイメージにあったランディングページのデザインを、すぐに思い浮かぶ方は少ないのはないでしょうか。作業をするなかで何度も改善を行い、納得のいくまで時間をかけて制作するものです。
今すぐに思い浮かばないからといって、焦る必要はありません。
まずは、ランディングページのデザインで必要とする主な要素を解説します。
今すぐに思い浮かばないからといって、焦る必要はありません。
まずは、ランディングページのデザインで必要とする主な要素を解説します。
カラー
フォント・背景色・オブジェクトカラーなど、様々な箇所で用いられます。
ランディングページでは、「メインカラー」「サブカラー」「コンバージョンカラー」が3つの戦略として重要視されています。
メインカラーはブランドカラーとも呼ばれ、ブランド・商品のイメージを伝える役割があります。
ビジネス関係なら真面目なイメージを与えるブルー、柔らかい雰囲気を出すならベージュなどを採用し全体の基調になるカラーを決めます。
サブカラーは、全体のデザインにメリハリをつける役割があります。
高級感、POPな印象、柔らかい雰囲気など、ランディングページの世界観に合う色を考えましょう。バランスを崩さないように、メインカラーと近い色味が望ましいでしょう。
コンバージョンカラーは、最終目的である購入や登録など、アクションを起こしてもらうための重要な役割があります。ボタンと分かること、またブランドのイメージを崩さない色味を選んで下さい。
ランディングページでは、「メインカラー」「サブカラー」「コンバージョンカラー」が3つの戦略として重要視されています。
メインカラーはブランドカラーとも呼ばれ、ブランド・商品のイメージを伝える役割があります。
ビジネス関係なら真面目なイメージを与えるブルー、柔らかい雰囲気を出すならベージュなどを採用し全体の基調になるカラーを決めます。
サブカラーは、全体のデザインにメリハリをつける役割があります。
高級感、POPな印象、柔らかい雰囲気など、ランディングページの世界観に合う色を考えましょう。バランスを崩さないように、メインカラーと近い色味が望ましいでしょう。
コンバージョンカラーは、最終目的である購入や登録など、アクションを起こしてもらうための重要な役割があります。ボタンと分かること、またブランドのイメージを崩さない色味を選んで下さい。
フォント
文字の種類やサイズ、文字数などもデザインの1つです。
簡潔に伝えることがベストのため、文字数は少ない方がおすすめです。
商品の情報や伝えたいことが多いと、文章量が増えることもあるかもしれません。
そんな時は、文字の太さ・カラー・字間などを変更し、見栄えを整えて下さい。
画像フォントやデバイスフォントを差別化して、視認性を向上させる工夫もおすすめです。
簡潔に伝えることがベストのため、文字数は少ない方がおすすめです。
商品の情報や伝えたいことが多いと、文章量が増えることもあるかもしれません。
そんな時は、文字の太さ・カラー・字間などを変更し、見栄えを整えて下さい。
画像フォントやデバイスフォントを差別化して、視認性を向上させる工夫もおすすめです。
画像
どの画像を使用するか選定し、サイズや色味、加工などをしていく作業になります。
画像を沢山使用する方が、見栄えもよくユーザーがイメージしやすいです。
読み込み速度が遅くならないように、画像の最適化を行うなど注意して下さい。
画像を沢山使用する方が、見栄えもよくユーザーがイメージしやすいです。
読み込み速度が遅くならないように、画像の最適化を行うなど注意して下さい。
客観的な検証
このように、複数の要素を掛け合わせることで、全体のデザインのイメージを仕上げていきます。デザインはイメージだけでなく、ユーザーの視点に立つことも大切です。
「分かりやすいか」「イメージと合っているか」など客観的に見て、ようやく分かることも沢山あります。
・商品やサービス、ターゲットに合ったデザインか
・読みやすいか
・CVボタンの設置場所が分かりやすいか、操作しやすいか
・ページが重くないか
・簡潔で瞬発的に理解できるか
細かくチェックしていくことで、コンバージョン率向上に繋がることもあります。
完成した後も、随時確認を行うことで、より良いデザインに仕上げて下さい。
「分かりやすいか」「イメージと合っているか」など客観的に見て、ようやく分かることも沢山あります。
・商品やサービス、ターゲットに合ったデザインか
・読みやすいか
・CVボタンの設置場所が分かりやすいか、操作しやすいか
・ページが重くないか
・簡潔で瞬発的に理解できるか
細かくチェックしていくことで、コンバージョン率向上に繋がることもあります。
完成した後も、随時確認を行うことで、より良いデザインに仕上げて下さい。
デザインが思い浮かばない時のヒント
ファーストビューのデザイン
ランディングページの中で、ファーストビューのデザイン案の優先度が高いです。
単一ページで仕上げられているため、下までスクロールして読んでもらえるかのきっかけ部分になります。
キャッチコピーのデザインは、シンプルでダイレクトに伝わるように意識して下さい。
そのため、無駄な装飾はない方がおすすめ。
次に、画像の使い方です。商品やターゲットに合った画像を選定します。
女性向けなら、女性の画像を用いるなどユーザーがすぐにターゲットを誰にしているのか読み取れることが大切です。
その他に、過去の実績やお客様の声を目立たせるバッジなども、目立つ部分に配置しておくと、ユーザーの判断材料になります。
単一ページで仕上げられているため、下までスクロールして読んでもらえるかのきっかけ部分になります。
キャッチコピーのデザインは、シンプルでダイレクトに伝わるように意識して下さい。
そのため、無駄な装飾はない方がおすすめ。
次に、画像の使い方です。商品やターゲットに合った画像を選定します。
女性向けなら、女性の画像を用いるなどユーザーがすぐにターゲットを誰にしているのか読み取れることが大切です。
その他に、過去の実績やお客様の声を目立たせるバッジなども、目立つ部分に配置しておくと、ユーザーの判断材料になります。
CVボタンのデザイン
最後までスクロールして読んでくれたユーザーに、購入・申込・登録などをしてもらうためのクリックボタン。ボタンの場所が分かりにくい場合や、デザインが地味だとクリックしてもらえない可能性があります。
ボタンと分かりやすい形状を選ぶこと、また背景色に合わせたカラーにすることがポイント。ランディングページで一般的に使われるボタンの形状は、角丸の長方形です。
目に付きやすく、クリックしやすいことが特徴。立体感やグラデーションを加えると、よりボタンらしいデザインに仕上げることができます。
カラーには、それぞれイメージがあります。例えば、赤は危険、緑は安心感を与えるなど、色彩によって違ってきます。また、白や黒、グレーなどのモノトーン色は目立ちにくいためボタンカラーには向いていません。イメージや視認性を考慮して、カラーを選ぶことが大切です。色味に決まりはないので、どのカラーを選択しても問題はありませんが、背景色と同一色ではないか注意して下さい。
ボタンと分かりやすい形状を選ぶこと、また背景色に合わせたカラーにすることがポイント。ランディングページで一般的に使われるボタンの形状は、角丸の長方形です。
目に付きやすく、クリックしやすいことが特徴。立体感やグラデーションを加えると、よりボタンらしいデザインに仕上げることができます。
カラーには、それぞれイメージがあります。例えば、赤は危険、緑は安心感を与えるなど、色彩によって違ってきます。また、白や黒、グレーなどのモノトーン色は目立ちにくいためボタンカラーには向いていません。イメージや視認性を考慮して、カラーを選ぶことが大切です。色味に決まりはないので、どのカラーを選択しても問題はありませんが、背景色と同一色ではないか注意して下さい。
入力フォームのデザイン
面倒な入力作業は、離脱の原因になります。CVボタンを押してもらっても、入力する部分が多いなど、ユーザーにとってマイナスな点が1つでもあれば、コンバージョン率を下げる可能性も。そうならないように、デザインの工夫と最適化は忘れないようにして下さい。
まず、入力フォームはできるだけ最小限なサイズに仕上げ、名と性を分けるなど、余分な分割は避けて下さい。また、記入例を表示させることや、「半角/全角」「任意/必須」などの情報も分かりやすく記載しておくことがおすすめ。
必要事項だけの入力、入力の順番など最適化も心掛けて下さい。
まず、入力フォームはできるだけ最小限なサイズに仕上げ、名と性を分けるなど、余分な分割は避けて下さい。また、記入例を表示させることや、「半角/全角」「任意/必須」などの情報も分かりやすく記載しておくことがおすすめ。
必要事項だけの入力、入力の順番など最適化も心掛けて下さい。
デザインが思い浮かばないときは
他サイトのデザインを参考にする
デザインが思い浮かばない場合は他のサイトのデザインを参考にするのも良いでしょう。
例えば、「Pinterest」というSNSを使えば、デザイン性の高いLPの画像を検索できます。
「Pinterest」は写真を投稿・検索できるSNSで、一目でぱっとたくさんのLPのデザインを閲覧、比較もできます。
また、後ほど他サイトのデザインを参考にする時のポイントや参考にできるLPサイトの探し方をご紹介していますので、ぜひ参考にしてみてくださいね。
例えば、「Pinterest」というSNSを使えば、デザイン性の高いLPの画像を検索できます。
「Pinterest」は写真を投稿・検索できるSNSで、一目でぱっとたくさんのLPのデザインを閲覧、比較もできます。
また、後ほど他サイトのデザインを参考にする時のポイントや参考にできるLPサイトの探し方をご紹介していますので、ぜひ参考にしてみてくださいね。
一から整理・調査してみる
続いて、一から再構築していくことです。
デザインに煮詰まったときは一度最初に立ち返って見るのも良いでしょう。
何を伝えたいのか、いらないデザインはないかなど思考を紙に書き出していきます。
手を動かしながら、考えを紙に書き出せば、新たな気付きが得られるはずです。
商材、伝えたいことをはじめ書き出した要素を再度調べて行くことで、新しいアイデアを見つける糸口を見つけられるかもしれません。
要素について、新しい情報を取り入れることで、その要素に関するアイデアの引き出しが増えることでしょう。
デザインに煮詰まったときは一度最初に立ち返って見るのも良いでしょう。
何を伝えたいのか、いらないデザインはないかなど思考を紙に書き出していきます。
手を動かしながら、考えを紙に書き出せば、新たな気付きが得られるはずです。
商材、伝えたいことをはじめ書き出した要素を再度調べて行くことで、新しいアイデアを見つける糸口を見つけられるかもしれません。
要素について、新しい情報を取り入れることで、その要素に関するアイデアの引き出しが増えることでしょう。
煮詰まったときは離れてみる
困ったときは一旦離れてみるのも有効です。
のめりこみすぎて、客観的にデザインを見れていなかったり、全体を俯瞰して見れていなかったりすることもあります。
その際は、一旦頭をクリアにしてデザインについて考えるのを止めましょう。
別のLPサイトのデザインに着手するのも良いでしょう。
違う情報を取り入れたり、情報を一度リセットすることで、手の止まっていたデザインも違った風に見えてくることでしょう。
新しいアイデアが浮かぶこともあるため、一旦デザインから距離を置くことは遠回りに見えて、実はかなり有効な方法なのです。
時間に余裕がある際は、ぜひとも試してみてほしい対処法です。
のめりこみすぎて、客観的にデザインを見れていなかったり、全体を俯瞰して見れていなかったりすることもあります。
その際は、一旦頭をクリアにしてデザインについて考えるのを止めましょう。
別のLPサイトのデザインに着手するのも良いでしょう。
違う情報を取り入れたり、情報を一度リセットすることで、手の止まっていたデザインも違った風に見えてくることでしょう。
新しいアイデアが浮かぶこともあるため、一旦デザインから距離を置くことは遠回りに見えて、実はかなり有効な方法なのです。
時間に余裕がある際は、ぜひとも試してみてほしい対処法です。
LP のデザインに迷ったときは他サイトに学ぶ
初めてデザインを考える、デザインのイメージが浮かびにくい、という際は、たくさんのLPのデザインに触れることがおすすめです。
参考になるLPを見つければ、ゼロから要素から考えるよりも、LP全体像を把握しやすく、アイデアの一助となるかもしれません。
いろんなLPに出会い自分の頭の中にストックを作っておくことで、アイデアの引き出しを増やしておきましょう。
その際に見るべきポイントは以下の4つです。
・このLPのターゲットは誰か
・LPの目的
・目的のために、どのような内容を掲載しているか
・その内容をデザインによってどのように表現しているか
見るべきポイントを定めておくと、ただ漠然とLPを眺めるよりもぐっと制作者の意図や工夫に気付けるでしょう。
では、どのようにして他のLPを見つければよいのでしょうか。
参考になるLPを見つければ、ゼロから要素から考えるよりも、LP全体像を把握しやすく、アイデアの一助となるかもしれません。
いろんなLPに出会い自分の頭の中にストックを作っておくことで、アイデアの引き出しを増やしておきましょう。
その際に見るべきポイントは以下の4つです。
・このLPのターゲットは誰か
・LPの目的
・目的のために、どのような内容を掲載しているか
・その内容をデザインによってどのように表現しているか
見るべきポイントを定めておくと、ただ漠然とLPを眺めるよりもぐっと制作者の意図や工夫に気付けるでしょう。
では、どのようにして他のLPを見つければよいのでしょうか。
1つ目の方法は、自分で検索して既存のLPを探すことです。
「ランディングページ デザイン」、「LP 制作実績」などと検索すると出てくるでしょう。
実際のLPを見ることでユーザーの視点に立って考えられます。
どのようなLPサイトに惹かれるのか探してみましょう。
実際のLPを見ることでユーザーの視点に立って考えられます。
どのようなLPサイトに惹かれるのか探してみましょう。
2つ目の方法は、自分がこれから扱う商材について宣伝、広告しているLPを参考にすることです。
通常の顧客の視点で検索してみましょう。
例えば、パソコン教室についてのLPを作る場合、「パソコン教室」「パソコンスクール」などと検索をかけて、出てきた実際のサイトを参考にしてみましょう。
中には、LPのデザインをまとめているサイトもあります。
こうしたサイトでは、色や業種、イメージなどで検索できるため、初めての業種のLPサイトを作る方やイメージや方向性が漠然と決まっている方はこの方法でさらにイメージを具体化していきましょう。
例えば、パソコン教室についてのLPを作る場合、「パソコン教室」「パソコンスクール」などと検索をかけて、出てきた実際のサイトを参考にしてみましょう。
中には、LPのデザインをまとめているサイトもあります。
こうしたサイトでは、色や業種、イメージなどで検索できるため、初めての業種のLPサイトを作る方やイメージや方向性が漠然と決まっている方はこの方法でさらにイメージを具体化していきましょう。
まとめ
ランディングページのデザインは、ユーザーの視点になることが大切です。
何度も改善を繰り返し、納得のいくランディングページに仕上げて下さい。
まずは、ファーストビュー・CVボタン・入力フォームのデザインに集中して下さい。
ランディングページの要であり、コンバージョンを上げるか、上げないかの分かれ道になります。今回ご紹介したポイントを参考に、ぜひ効果的なデザインを見つけ出して下さい。
さらに、そもそもデザインが思い浮かばない、初めての顧客でイメージが湧きづらい方は、他サイトを参考にすると自分のアイデアの引き出しも増えます。
それでもなお、煮詰まったら、要素を一度紙に書き出したり、一旦離れて別のことをするのもよいでしょう。
何度も改善を繰り返し、納得のいくランディングページに仕上げて下さい。
まずは、ファーストビュー・CVボタン・入力フォームのデザインに集中して下さい。
ランディングページの要であり、コンバージョンを上げるか、上げないかの分かれ道になります。今回ご紹介したポイントを参考に、ぜひ効果的なデザインを見つけ出して下さい。
さらに、そもそもデザインが思い浮かばない、初めての顧客でイメージが湧きづらい方は、他サイトを参考にすると自分のアイデアの引き出しも増えます。
それでもなお、煮詰まったら、要素を一度紙に書き出したり、一旦離れて別のことをするのもよいでしょう。
へのお問い合わせはこちらから
