効果的なLPデザイン例 20選

ビジネスのページに初めて訪れた人が混乱してしまうようなデザインのランディングページだと、二度と戻ってきてくれないかもしれません。第一印象は94%がデザインに関連していると言われており、14ミリ秒以内に目にしたものを気に入らなければ、永遠に離れてしまう可能性があるのです。製品を見てもらうためにお金を掛けているのに潜在顧客を逃してしまうと、また最初から作り直さなくてはならないのです。

実際、世界の大手ブランドの中にも、LPデザインが効果的でないことがあります。これはよく見られる問題ですが、ターゲットとする顧客を深く理解することができれば、ウェブサイトデザインによって解決できます。

この記事では、潜在顧客を真の顧客に変えるための効果的なLPデザインを作成する方法を専門家から学ぶことができます。成功したブランドの20の例からインスピレーションを得ましょう。

効果的なランディングページの要素とは？

ランディングページは通常、同じような構成ですが、高いパフォーマンスのページにするために特に気に掛けるべき要素があります。

ファーストビューのコンテンツ

ファーストビューとは、スクロールせずにウェブページ上で見える部分を指し、使用するデバイス（PC、タブレット、モバイル端末）によって異なります。一般的に、ファーストビューはブラウザウィンドウの上から600ピクセルまでの配置です。

ンディングページへのすべての訪問者が、PCやモバイル端末でファーストビューを超えてスクロールするわけではありません。実際には、サイト訪問者の大多数はまったくスクロールしない可能性があります。

ページ全体の情報の流れに焦点を当て、ファーストビューとスクロール後の部分を別々でデザインせずに、ユーザーがスクロールしなくても見ることができるすべての要素を考慮しましょう。

ランディングページのキャッチコピー

優れたランディングページのキャッチコピーは、ページ内で使われている言葉（製品説明、CTA（行動喚起）の言葉、見出し、メタタイトル、メタディスクリプションなど）で構成されています。ランディングページの冒頭は、取り上げたいことに焦点を当てた大胆な見出しにしましょう。

ランディングページのキャッチコピーを書く際には、顧客が使うような言葉を考慮します。レビューやソーシャルメディアを活用して、顧客が使用する言葉やフレーズをコピーに取り入れましょう。

特徴ではなく利点を強調します。たとえば、スマートフォン用防水ケースを宣伝するランディングページなら、IP（防水保護）等級を強調する場合、「泳ぎながらでも写真を撮ることができる」というようなメリットを伝えましょう。

最後に、魅力的なキャッチコピーはブランドボイスが意識されて書かれています。ターゲットプロモーションやキャンペーンにおいても一貫性があることが重要です。

画像と配色

LPデザインは、色やフォント、適切に配置された画像を考慮する必要があります。多くの人は、ランディングページのキャッチコピーを作成した後に視覚的なアセットを生成して、双方による相乗効果を確保します。画像とは製品の写真だけでなく、イラストや動画も含まれます。

顧客レビュー

「Smart Marketer」の創設者であり、「BOOM! by Cindy Joseph」の共同創設者兼CEOであるエズラ・ファイアストーン（Ezra Firestone）氏が、Shopifyストアの購入ページの枠に加えた小さいながらも最も効果的な変更の一つは、製品名の代わりに顧客の推薦文を載せるボックス枠を上部に追加したことです。

その例がこちらです。

上部に実際の顧客の声を見せることで信頼を築き、レビューを探す手間も省きながら、既存顧客にアピールしてもらうことができます。ここでは各製品のメリットやデメリットが分かるレビューを選ぶようにしましょう。

また、顧客レビュー専用のセクションを設け、実際に製品を購入した人々の声をまとめて読めるようにします。良い口コミだけでなく、悪い口コミや中立の評価もいくつか表示するようにし、他の人が何を気に入って何が気に入らなかったのか、全体的に理解できるようにします。

CTA（行動喚起）

効果的なランディングページには、必ず「CTA（行動喚起）」が必要です。CTAは、ユーザーに取ってほしい行動を促すものでなくてはなりません。ランディングページに応じてCTAは異なり、例えば「詳細を見る」「今すぐ購入」「登録する」といった文言が挙げられます。価格に関するものなら、CTAを価格情報にすることができます。

CTAの配置はオーディエンスのニーズにもよります。どこに配置をすればコンバージョン率を向上させられるのかをテストして決定しましょう。一般的には、ファーストビューの上部やページの全体にCTAを配置するのがよいでしょう。

ランディングページのデザイン例

Brightland

「ニュースやメディアに取り上げられたことは？」というロゴをランディングページに表示し、記事からの引用を加えることを、「Sharma Brands」のCEO、Nik Sharma（ニック・シャルマ）氏は「自慢のバー」と呼びます。雑誌はブランドの信頼性を高め、情報を求めるショッパーに対して非常に効果的です。

「Brightland」ではカリフォルニア産のエクストラバージンオリーブオイルを販売しています。『ニューヨーク・タイムズ』や『ウォール・ストリート・ジャーナル』などの出版物からの好評を活用して、LPデザインに活かしています。

Olipop

「Olipop」は、植物由来の成分とプレバイオティクスを使った健康的なソーダを販売しています。このブランドではメリットを強調したキャッチコピーを使用し、「でも、一体、このソーダにはどれくらいの砂糖が入っているの？」といったダイレクトな疑問に答える形で、この飲み物が要望を満たすものであることを伝えています。

その他にも真似できるランディングページのアイデアがあります。例えば、はっきりとした大きなテキスト、詳しい製品情報（スクロールしたら表示される）、実際のレビュー評価による星、控えめなヘッダー、直感的でナビゲートしやすいレイアウト、美しい製品写真などです。

Path

「Path」は、Shopifyストアを持つ写真編集のバーチャルスタジオです。提供している主なサービスは製品写真の編集で、潜在顧客と繋がるためのチャネルの一つとして、メールを使用しています。メールのニュースレターの登録を促進するために、Pathは専用のランディングページを設けています。

このページは明確に目標に焦点が当たっており、登録を促すのに妨げとなるようなものはほとんどありません。会社のホームページからは直接アクセスできませんが、ニュースレターの登録を促進するターゲットキャンペーンからこのランディングページに導くことができます。

LUSH Cosmetics

ショッパーにとって認証は大きな意味があり、認証がないと購入をためらう人もいます。例えば、「リーピングバニー」の認証マーク、「遺伝子組み換えでない」、「Bコープ認証」などが挙げられます。何らかの認証がある場合はランディングページに表示しましょう。

「LUSH」は、ランディングページのデザインにこのアプローチを採用しています。「プラスチックフリー」ページの下部には、製品が100%植物性のハンドメイドであり、動物実験を行っていないというブランドのコアバリューを表示しています。

Netflix

「Netflix」は、サブスクリプション業界のパイオニアと見なされています。190カ国以上で2億6000万人以上の有料会員を抱え、顧客を惹きつけるLPデザインに精通しています。

例えば、ギフトカードのLPデザインを見てみると、Netflixでカードを購入するか、Amazonで購入するかの2つのシンプルなCTAが表示されており、ギフトカードの仕組みが簡単に説明されています。短くて分かりやすい、顧客が購入前に知っておくべき情報をすべて提供しています。

Grind

「Grind」はコーヒーブランドで、オンラインストアとコーヒーハウスで販売しています。ブランドのコアバリューであり差別化となるサステナビリティを伝えるランディングページを掲げています。

このランディングページのデザインで特に素晴らしい点は、視覚要素の使用です。ファーストビューのすぐ上にスクロールバーがあり、色付けされたボタンが人々を興味のあるコンテンツに誘導し、「私たちはコーヒーを真剣に考えています」というキャッチーなサブタイトルはターゲット市場の語彙を反映させています。

Creatorpreneur Academy

デジタル製品は高額になりやすいため、購入を決定する前に多くの情報が必要です。クリエイターのアリ・アブダール（Ali Abdaal）氏は、訪問者を圧倒させないように配慮しながら必要な情報を提供する理想的なLPをデザインしました。

このランディングページを開けた時に最初に目にするのは、「クリエイティブなサイドビジネスを次のレベルへ引き上げましょう」という見出しです。これは、ターゲットオーディエンスの心に響き、挑戦と目標へ語りかけます。オンラインコースについて文章ではなく詳しく知りたい場合は、詳細を説明するYouTube動画へのリンクをクリックすることができます。

Jolie

ランディングページの主な目的は、人々にアクションを起こさせることです。eコマースの場合、ランディングページが、必ずしも販売している製品の特徴やメリットに焦点を当てたデザインである必要はありません。

例えば、B2Cでシャワーフィルターシステムを販売する消費者向けブランドの「Jolie」は、水中の化学物質を確認するための「水質レポート」を紹介するランディングページを構築しました。

このページでは、特定の化学物質の危険性や、それが肌や髪に与える影響について説明しています。この情報を知った人々は問題の緊急性を認識して、ランディングページにあるメール登録フォームを通じて「レポートを入手する」というアクションを起こす可能性が高くなります。

Ahrefs

コンバージョンを向上させるためにランディングページをカスタマイズするのに、特別なデザインスキルは必要ありません。例えば、SEOツールの「Ahrefs」は、主な機能やユースケース（使用方法）ごとにランディングページを設けています。

キーワードリサーチツール機能のランディングページは、小さなグラフィックと重要なポイントをテキストブロックで分けて表示するデザインです。また、レイアウトに区切りを入れる線にはAhrefsのロゴがあり、ブランドの一貫性とロゴの認知を強化するためのスマートな方法です。

Tabs

「Tabs」の成分に関するランディングページは、社会的証明を取り入れたデザインとして上級レベルです。モノクロデザインの中で目立つピンクのアナウンスバーがあり、返金保証、1,000以上あるレビューの星、20万人以上の顧客が満足したことを表示しています。

また、主となるCTAボタンの下に5つ星レビューのエリアがあり、同じチョコレートを購入しているよい仲間がいることを強調しています。これはCTAボタンをクリックする直前に目にする可能性が高く、戦略的な配置です。

Peepers

LPデザインに組み込む製品説明は、製品が何であるのかを即座に伝えるための簡潔なメッセージです。ページの下部には購入を躊躇する可能性のある懸念に答えるために、詳しい情報を提供できるスペースがあります。

眼鏡ブランド「Peepers」はこの戦略を活用しています。ファーストビューには多くの製品画像があり、その下にはPeepersの眼鏡を選ぶメリットを列挙した詳細と説明があります。

ConvertKit

効果的な活用方法として、ランディングページで補色を少なめに使用することが推奨されていますが、「ConvertKit」は、スタイルガイドに沿いながら、色味やトーンを使ってバリエーションを増やすアプローチを示しています。

このLPデザインで素晴らしい点は、ホワイトスペースの使い方です。サブヘッダーの上の部分を空白にするのではなく、ConvertKitのデザイナーは訪問者へのメッセージを加えました。これは、マイクロコピー（ログイン画面、入力フォームのラベル、リンクボタンなどで使われる細部の文章）の賢い使用方法であり、ブランドの個性を訪問者に伝えるデザインとしてインスピレーションになります。

Jones Road Beauty

美容ブランドが化粧品をオンラインで販売する上で苦労するのは返品です。画面に映る色合いは実際の色とは異なります。「Jones Road Beauty」は、適切な色を見つけるのに役立つクイズを展開することで、この問題を解決しました。

Jones Road Beautyの質問のためのLPデザインは、シンプルかつダイレクトです。通常は、CTAは1つだけ取り入れるのが効果的な活用方法ですが、用意されたクイズを解説し、その使い方の説明が非常にうまく作り込まれています。クイズのサブヘッダーの下には小さく星評価があり、クイズが色の不一致の問題を解決するのに役立っていることを強調しています。

BEAM Content

キャッチコピーがブランドに合うものであるべきなように、画像、フォント、色もまた合う必要があります。LPデザインは創造性を発揮する場である一方、すべてのタッチポイントで一貫性のあるブランド体験を提供することは依然として重要です。

「BEAM Content」は、インスピレーションが得られる優れたランディングページの一例です。このエージェンシーは、グラフィカルな要素によく合う洗練されたカラーパレットを使用しています。フォンにはシンプルでエレガントなものを選び、重要なキャッチコピー（例えば、ランディングページが提供する主なサービスである「ブランドソーシャル（Brand Social）」）に注目させるために手書きのフォントを使用しています。

Basecamp

顧客の声や体験談、証言は、LPデザインで重要な一部になり得ます。ある研究によると、高額な製品のページにレビューが表示されると、コンバージョン率が最大380%も増加する可能性があると言われています。

顧客の声の欠点は内容を変更できないことで、言葉を消してあたかもその人が言ったように見せることは悪用となります。その中で「Basecamp」は、感想の中にある最も効果的な文を強調するアプローチを取っています。

Maev

視覚的に分かりやすく、かつ多くの情報を提示する必要がある場合に「Maev」はインスピレーションを得られる素晴らしい例でしょう。

犬の食事の成分を単にリストアップするのではなく、小さな画像を使用しています。人々は肉やブルーベリーを瞬時に認識できるため、犬にどんな食事を与えるのかを視覚化することで、ペットフードをオンラインで購入する際のペインポイントを克服するのに役立っています。

Money with Katie

ニュースレターのランディングページには明確な目標があります。それは、人々にメールリストに登録させることです。「Money with Katie」は、LPデザインを縦に長くせず、目標を完璧に実現しています。

Money with Katieのランディングページはファーストビューだけで全体が見えます。スクロールする必要はなく、訪問者を圧倒させることもありません。見出しは人々が得られるものを正確に伝え、画像は人々が何に登録するのかを示しています。することは登録フォームを完了することだけです。

Creator Wizard

ジャスティン・ムーア（Justin Moore）はスポンサーシップのコーチで、デジタル製品を販売しています。「Gifted to Paid」は、クリエイターがスポンサーシップ契約を獲得して、オンラインコンテンツから収益を上げる方法をレクチャーするプレミアムオンラインコースです。

Gifted to Paidは、これらの目標の両方についてランディングページ全体で触れています。ページのこの箇所では、コースのチュートリアルに関する情報を訪問者に提供しています。理解するには情報が多く、Justinは重要な箇所を太字にし、GIFを使用するなど、理解しやすくするためのスマートなデザインを選んでいます。

Descript

見出しはランディングページでより多くのスペースを必要とし、デザインする際に留意するべき重要な要素です。たとえば、「Descript」のランディングページは見出しがスマートで、「コストはいくらか」、「無料プランには一体何が含まれるのか」といった、コンバージョンに至るまでに人々が懸念することに触れています。価格変動もあるため、ビデオ編集ソフトウェアの金額を計算するのに、インタラクティブな価格計算機も用意しています。これは静的コンテンツよりもはるかに魅力的で、ブランドがスケールでパーソナライズするのに役立ちます。

Shopify POS

Shopifyのデザイナーたちは、ポイントオブセール（POS）のランディングページを構築する際に、異なる3つのCTAに対応するという難しい課題に直面しました。

1. 無料トライアルを開始する
2. 営業チームに問い合わせる
3. 既存のShopify POSアカウントにログインする

ここでは、ボタンの色が大きな違いを生み出します。色がコントラストするボタン（暗い背景に白い文字）はニュートラルなデザインの中で最も目立つため、新しいトライアルを開始する上で最も重要なCTAとして選ばれました。

営業への問い合わせのボタンボックスも同じサイズにし、逆の色を使用しました。3番目に重要なのは、各ボタンの下にある小さなリンクテキストです。

LPデザインのための効果的な方法

潜在的な顧客の注目を引いて、ブランドと製品がユニークであることを伝えることは今すぐ始められます。言葉や画像で伝えるには求められることが多く、潜在顧客がブランドをほとんど知らない場合はさらに難しくなります。

パフォーマンスは多くの要因に依存しますが、ランディングページの全体的なデザインをシンプルにしておくことで、人々を最も見せたい情報に導くことができます。何を一番押したいのかを考えましょう。

情報の流れを考慮する

顧客にとって最も効果的な方法が何であれ、ランディングページの最上部に配置するキャッチコピーやコンテンツの種類を常に考慮する必要があります。ただし、最初の画面にコンテンツを詰め込もうとすると、ユーザーが混乱する体験を引き起こす可能性があります。

「マーケターは『ファーストビュー』について考えるのではなく、ランディングページ上のコンテンツの全体的な情報階層と流れについてもっと考えるべきです」と、CROコンサルタントのミケル・アーガード（Michael Aagaard）氏は述べています。

ランディングページを構築する際に、以下の質問を考慮しましょう。ターゲットオーディエンスのユーザージャーニー全体への理解と、ランディングページに果たしてほしい役割によって答えることができるでしょう。

• 質問に正しく答え、課題に適切に対処しているか？
• 期待に応え、広告ソースでの「約束」を果たしているか？
• 正しい順序でコンテンツを提供し、コンバージョンの目標に向けた勢いを築いているか？

コンバージョンのために購入ボックスを最適化する

購入ボックスは、各ランディングページの中で大きな影響を与える必要がある小さなセクションです。Ezraは、これを製品ランディングページの最も重要な部分と呼んでいます。これは、購入ボタンを含む高く最適化されたコンバージョンアセットのセットを持つ、ページ上にある文字通りのボックスです。

一般的に、PCで見ると、購入ボックスには左側に製品の写真がある画像カルーセルと、右側に要約、販売キャッチコピー、価格、レビューの星、購入ボタンまたは「Shop Pay」のボタン、ボタンの下にはユニークな販売提案が含まれています。

「ほとんどのビジネスは購入ボックスに販売キャッチコピーや社会的証明がなく、『カートに追加』ボタンの下にはユニークな販売提案や画像フォーマットなどがありません。また、製品のカルーセルには見栄えの良くない画像も見られます。購入ボックスはすべてです。」とEzraは言います。コピーや画像が本当に際立つためのテンプレート要素がいくつかあります。高く最適化されたバイボックスには、Ezraが「コンバージョン資産のスタッキング」と呼ぶものが含まれています。下記はPCでの例です。

視覚要素に焦点を当てる

製品画像は、潜在顧客が期待するアクションを起こす上で考慮する唯一の要素となる可能性が高いです。LPデザインとして、情報を下記のような要素ごとに分割します。

• 箇条書き・番号付きのリスト
• ロゴ、グラフィック
• 画像
• CTAボタン
• レビュー
• 動画による顧客の声

eコマースの場合、画像は購入者が製品を実際に手に取らずともイメージさせるための方法です。写真が製品の素晴らしさを捉え切れていないと、顧客が購入後のイメージするのは非常に難しいです。

レスポンシブデザインを使用する

ノートパソコンなどPCの画面上でランディングページをデザインするかもしれませんが、現実は、すべての人がPCでランディングページにアクセスするわけではありません。インターネットトラフィックの約半分はモバイル端末で発生しています。レスポンシブデザイン（デバイスのサイズに合わせて表示を変更する手法）は、どのデバイスにも適したランディングページを作成します。

ウェブサイトビルダーを使用して、画像カルーセルやCTAがPCとモバイル端末の両方でどのように表示されるかを確認し、最適化されていることを確認しましょう。レスポンシブウェブサイトデザインには他にも下記のようなヒントがあります。

• 折りたたみメニューを使用する
• スムーズな体験を確保するために詳細を小さくする
• 「TinyPNG」などの画像圧縮ツールを使って画像サイズを小さくし、ページの読み込み時間を短縮する
• 動画の自動再生を避ける
• 大きめのクリックしやすいボタンを使用する

トラフィックとデバイスのソースを分析する

顧客がどのデバイスでショッピングをしているのかに基づいてランディングページを設計することは、コンバージョンに関するリサーチを始めるアプローチの1つです。

大多数の顧客のがモバイル端末からホームページにアクセスしている場合、優れたモバイル体験を生み出すためにランディングページを最適化する必要があります。一方で、万一ショッパーがPCでのアクセスを好むことが分かったなら、PC体験が向上するランディングページを構築するとよいことが分かります。

「Sharma Brands」のニック・シャルマ氏は、そのトラフィックをさらに深く分析し、TikTok、Facebook、ブログ投稿、その他のチャネルなど、人々がどのプラットフォームから来たのかを把握することを推奨しています。

「訪問者のアクセスに繋がったプラットフォームに対してページをコンテクスト化（データ同士を関連づけて一連の流れを作ること）しないと、直帰率（ウェブサイトに訪問したユーザーが、入口となる最初の1ページだけを見てサイトから離脱してしまう割合）が急上昇し、全体のプラットフォームのROAS（投資利益率、ないし広告支出に対するリターン）が停滞してしまいます」とNik氏は言います。このようなコンテクストを意識して対応することは、全体的により優れた顧客体験をもたらします。

LPデザインをテストする

ランディングページが公開され、サイトにとって有意義なトラフィックが生まれたら、A/Bテストを開始して、LPデザインにおけるさまざまな要素により高いコンバージョン率を得ているのかを確認しましょう。

A/Bテストは、最も効果的なキャッチフレーズやCTAの配置を見つけるだけではありません。「Speero by CXL」のマネージングディレクターであるベン・ラベイ（Ben Labay）氏は次のように述べます。「テストを行う場合、意見を証明するためにテストを行うのではなく、戦略に対して挑戦したり、顧客の問題やビジネスの機会に直接関連する仮説をテストする必要があります。」

ラベイ氏は、テストはビジネスの成長モデルに関連する要因に直接比例するべきだとも述べています。「顧客を獲得したい」、「Instagramを収益化したい」、「既存顧客を維持したい」といった場合に、ランディングページでの体験とテストの仮説は、目的に応じて変化させなくてはいけません。

LPデザインが失敗する理由を理解しておく

この記事のランディングページのデザインにおけるヒントは、専門家がテストして、繰り返し成功に繋がったものです。しかし、これらのデザイン要素を実装するには、全体の目標とどのように関連しているのかを理解することが重要です。

ターゲットとするオーディエンスのニーズを理解することは、コンバージョンを向上させるランディングページを構築するための基盤となります。

「ターゲットオーディエンスをより深く理解するほど、より優れたランディングページを構築することができます。最新のデザイントレンドだけに目を奪われないようにしましょう」とミケル・アーガード氏は言います。「単なるページレイアウトの調整ではなく、あらゆる基本を整えて、ユーザーに関するリサーチをしっかりと行い、ユーザー行動に影響を与える情報に基づいた意思決定を行うようにするのです。」

美しいLPデザインを構築する

Shopifyには、LPデザインを開始するために必要なすべてのツール、アプリ、統合、テーマがあります。ゼロから始めることも、テンプレートを使用することもでき、独自のブランドに合わせてカスタマイズし、どこからでもすべてを管理することができます。

また、ランディングページの機能を追加するための数千あるShopifyアプリを閲覧して、コンバージョンを向上させ、投資を最大限に活用することができます。