ランディングページデザインの5つのコツを解説!効果的なページを作るポイントも紹介

株式会社キネクト
監修者
株式会社キネクト 代表 小林 謙介
最終更新日:2023年12月11日
ランディングページデザインの5つのコツを解説!効果的なページを作るポイントも紹介
この記事で解決できるお悩み
  • ランディングページをデザインするコツとは?
  • ランディングページで成功するポイントとは?
  • 参考にしたいランディングページとは?

ランディングページとは、商品の購入や会員登録など特定の行動を促進させるためのページのことです。売上アップや会員数増加などの目的を達成するために、ランディングページのデザインを設計しましょう。

この記事では、ランディングページの作成方法に悩みがある人にデザインのコツを解説します。コンバージョン獲得に効果的なランディングページを作るポイントも解説するため参考にしてください。

記事を読み終わった頃には、ランディングページのデザインイメージができるでしょう。

ホームページ制作にお困りではありませんか?

もしも今現在、

  • どの制作会社に依頼したらいいかわからない
  • 実績豊富な会社に依頼したい
  • 名刺代わりにホームページがほしい

上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。

ホームページ制作・デザインに対応できる業者を一覧から探す

ランディングページをデザインする5つのコツ

zhu9aGMLcnkEgWz1683862595_1683862611

ランディングページをデザインするコツは、以下の5つです。

  1. メインカラーを決める
  2. フォントを統一する
  3. 文字や画像を揃える
  4. 写真を効果的に使う
  5. 余白を適切に入れる

少しのこだわりでランディングページの情報が伝わりやすくなります。

1. メインカラーを決める

ランディングページのメインカラーを決めることで、ページに統一感が出ます。

ページ全体でメインカラー・サブカラー・アクセントカラーの3つを利用します。サブカラーはメインカラーを補完する役割を果たし、アクセントカラーは特別な強調が必要な場面で使用するものです。

メインカラーが商品やサービスと一致していると、ユーザーに印象を与え覚えてもらいやすくなるでしょう。

2. フォントを統一する

使用するフォントは統一することで、読みやすくデザイン性の高いランディングページを作成することができます。フォントを統一するとユーザーにランディングページの安定感を与え、商品やサービスの信頼性を高めます。

文字の大きさは2〜3種類くらいにとどめ、強調したいキーワードは太字にしたり背景色をつけたりして目立たせると効果的です。

3. 文字や画像を揃える

文字の書き出し位置や画像を配置する位置は揃えましょう。左揃え・中央揃え・右揃えを混在させることは避けて、訪問者に情報を伝えやすくします。

画像が少しずれているだけでも、ランディングページを訪問した人は違和感を覚えるため、こだわったデザインを心がけましょう。

4. 写真を効果的に使う

商品やサービスを利用しているイメージ写真も掲載することで、視覚的情報をユーザーへ伝えられます。商品の魅力が伝わり、コンバージョン獲得に効果的です。写真を多用するとわかりにくくなるため、使いすぎないように注意しましょう。

5. 余白を適切に入れる

余白をうまく利用することで、ユーザーが情報を受け入れやすくなります。余白の適用範囲は、コンテンツの上下左右だけではなく、文章の行間も含まれます。

十分な余白を確保することでコンテンツを区切り、メリハリを持たせる効果があり、整理された情報を伝えられます。

コンバージョン獲得に効果的なランディングページのポイント

pixta_90624766_S

コンバージョン獲得に効果的なランディングページを作るポイントは、以下の3つです。

  1. 目標を設定する
  2. 具体的な行動に誘導する
  3. モバイルに対応させる
  4. 読者となるターゲットを明確にする

ランディングページの目的とターゲットを明確にし、訪問者が行動を起こしやすい構成を考えましょう。

1. 目標を設定する

ランディングページを作成する前に、ランディングページを運営するうえでの目標設定を行いましょう。目標の例として「企業やブランドの知名度を高める」「ユーザーの滞在時間を5分以上にする」などが挙げられます。

ランディングページの定期的な効果検証をして目標値との差を埋める施策を検討しましょう。

2. 具体的な行動に誘導する

ランディングページを運営する目的は、訪問者に商品購入や問い合わせなどの行動を起こしてもらうことです。ユーザーに具体的な行動を起こしてもらえるよう、誘導するような仕掛けを組み込みましょう。

たとえば「無料トライアルを始める」「今すぐ申し込み」などのボタンを設置することで、ユーザーがアクションを起こしやすくなります。

3. モバイルに対応させる

モバイルでアクセスするユーザーを意識したランディングページは、コンバージョン獲得につながります。アクセスするデバイスに関係しないレスポンシブデザインを採用し、モバイルユーザーが行動を起こしやすいデザインを構築しましょう。

文字数が多いとユーザーはサイトを離れてしまうため、伝えたいことを端的に伝えるサイト設計が重要です。

4. 読者となるターゲットを明確にする

コンバージョン獲得のためにデザインだけではなく、ターゲット選定にも力を入れましょう。ターゲット層(性別・年齢・性格・地域など)によってデザインの方向性が変わります。

カスタマージャーニーマップやペルソナ設定を行い、ランディングページのターゲットを明確にすることが重要です。

参考にしたいランディングページ3選

参考にしたいランディングページを3つ紹介します。

  1. ブラウン
  2. キャククル
  3. 白雲荘

どのランディングページもユーザーを意識したページ構成になっていることがわかります。

1. ブラウン

Q9AleFn2KkZRxWm1696384963_1696384994

電気髭剃りメーカーとして有名なブラウンのランディングページです。ブラックベースの背景から電気髭剃りの高級感が伝わるデザインになっており、ユーザーにブラウンのイメージを与えています。

細部まで構造が分かるように動画を積極的に活用し、ブラウンを使用しているシーンをうまく訴求できています。

2. キャククル

O4wn5EFw1nc4QTZ1696385007_1696385025

Web集客と同時に行うポジショニングメディアを展開しているZenken株式会社のランディングページです。短時間で読める漫画タッチのデザインを組み込み、ユーザーに親近感を与えています。

ポジショニングメディアという聞きなれない用語をていねいに説明し、ユーザーが相談しやすくなるよう構成されたデザインといえるでしょう。

3. 白雲荘

fA84jYE5V81WbbA1696385047_1696385073

ニセコにあるホテル白雲荘のランディングページです。北海道の雪の美しさを感じることができ、ホテルの特徴がわかりやすい構成になっています。

ランディングページ内に雪が舞い散るデザインを組み込み、白雲荘のライトを目立たせて温かみを伝えています。挨拶のページや部屋の紹介ページなどコンテンツが整理されており、多くの写真からホテルのイメージが湧きやすいでしょう。

まとめ

ランディングページのコンバージョン獲得を高めるためには、カラーの統一や写真の活用でユーザーの情報を伝えやすくデザインすることが大切です。ランディングページの目的を明確にし、売上アップや会員数増加などの成果を出しましょう。

「比較ビズ」では、ランディングページのデザインや構成を請け負う業者を簡単に探すことができ、比較して相談できます。ランディングページの制作を検討している人は、ぜひ利用してください。

監修者のコメント
株式会社キネクト
代表 小林 謙介

1979年東京生まれ。東北芸術工科大学芸術学部を卒業後、美大進学の予備校に2年間勤めたのちフリーのデザイナーとして活動。飲食店のメニューや酒造メーカーのカタログなど、食に関連するクリエイティブ業務を開始。その後、インハウスデザイナーとして商品デザインの企画・制作を経験し、現在は株式会社キネクトを設立。グラフィックやWEBなどのデザイン制作をはじめ、広告事業や講演会など幅広い分野で活動している。

ランディングページ(LP)は、1ページで構成されるホームページと認識されている方もいますが、広告や他サイトからのリンクによって訪問者が最初にアクセスして「着地」したページのことを言います。

そのランディングページは、訪問者に対して特定の行動を促すことを目的としており、商品の販売、サービスへの登録、イベントやセミナーの集客など、さまざまな目的があります。

ターゲットが明確で、一つの目的に特化しているため、ランディングページは効果測定や改善を繰り返しやすいという特徴があります。
比較ビズ編集部
執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。

ホームページ制作にお困りではありませんか?

もしも今現在、

  • どの制作会社に依頼したらいいかわからない
  • 実績豊富な会社に依頼したい
  • 名刺代わりにホームページがほしい

上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。

ホームページ制作・デザインに対応できる業者を一覧から探す