製品ランディングページ：ベストプラクティスと例

リード生成ページに関する前回の記事で、着陸のトピックを明らかにし始めました。 今日は、製品のランディングページについて詳しく説明します。つまり、製品の構造について説明し、デザインを作成してコピーするためのヒントをいくつか示し、実際の例をいくつか見ていきます。

商品のランディングページとは何ですか？

ご想像のとおり、商品のランディングページは、商品やサービスを宣伝および販売するために使用されます。 ユーザーは、電子メール、広告、またはその他のデジタルソース内のリンクをたどった後、または検索結果からリダイレクトされた後に、これらのページにアクセスする可能性があります。

あなたが妊婦のために服を売っていると想像してみてください。 Googleで「マタニティウェア4か月」を検索しているユーザーがいます。 検索結果に、4か月の妊婦向けの商品専用のランディングページが表示される場合があります。ページのタイトルと説明がおもしろいと思ったら、クリックします。 次に、あなたの申し出が彼らに関連している場合、彼らは購入することによって変換します。

WordStreamの調査によると、商品のランディングページの平均コンバージョン率は2.35％です。 ただし、ページの上位25％は5.31％で変換され、ページの上位10％は11.45％で変換されます。これは印象的です。

すべてのランディングページはコンバージョンの機会であるため、ページが多いほど、ターゲットを絞って作成できます。 ただし、秘密は、作成するページの数だけでなく、もちろん、ページを作成および設計し、コピーを作成する方法にもあります。 デザインとコピーについては後でアドバイスしますが、製品のランディングページの一般的な構造がどのように見えるかを見てみましょう。

商品のランディングページの構造

商品のランディングページはさまざまなブロックで構成されており、それぞれに独自の目的があります。 ブロックは論理的な順序で次々に進み、最後に行動を呼びかけます。 ロゴのサイズやフォントの色などの細部に気を取られないように、紙のランディングページの輪郭をブロックごとに描き始め、構造自体に焦点を当てることをお勧めします。

Mango Languagesの例に基づいて、優れた商品ランディングページに必要なメインブロックを見てみましょう。

ヘッダ

訪問者がページに最初に表示するのは、通常は次のようなヘッダーです。

• ロゴ;
• メインメニューボタン;
• ログインボタンとサインアップボタン。
• タイトルと説明。
• CTA;
• 背景ビデオ、写真、製品の写真などの視覚要素をサポートします。

Mango Languagesは、これらすべての側面をヘッダーに含めました。

同社は、提供するサービスの種類を説明し、アプリケーションのデモを行い、登録用と製品のビデオ用の2種類のアクションボタンを追加しました。 さらに、ヘッダーの上部に特別オファーを配置しました。これにより、新しいユーザーはアプリを低価格で試すことができます。

ヘッダーの背後にある主なアイデアは、製品に関する最も重要な情報をすぐに提供することです。 あなたがターゲットに当たって、人がこの情報が役に立つと思うならば、彼らはさらなる詳細のためにスクロールします。

間違いなくポップになるタイトルには、製品が顧客にもたらすメリットの説明と行動の呼びかけをすべて2〜3語の文章で表現する必要があります。 説明では、タイトルを詳しく説明し、ユーザーがすぐに知る必要のある重要な詳細を明らかにする短い文章をいくつか書くことができます。

製品とその利点の詳細な説明

訪問者が製品を紹介されたら、それは彼らにもっと話す時です。 説明では、顧客体験から始めて、顧客の問題点に焦点を当てる必要があります。 製品がどのように機能し、視聴者の実際の問題または潜在的な問題をどのように解決できるかを示します。 次に、ボーナスとしてもう少し詳細を追加します。 それらは必ずしもユーザーにとって大きな利益になるとは限りませんが、主な製品を補完するものになるでしょう。

ページを通して訪問者の目を誘導し、すべての重要なポイントが視覚的に強調表示されていることを確認してください。

ご覧のとおり、Mango Languagesは大きな見出し、画像、ボタンを使用して、提供する言語の数とアプリの動作を示しています。 その後、別のビジュアルブロックを追加して、アプリがさまざまな人や組織で使用できることを示し、詳細へのリンクを提供しました。

社会的証明

実際、ユーザーの15％は、レビューのない会社を信用していません。 今日のソーシャルメディアとオンラインインタラクションにより、ユーザーは製品についての意見を自由に共有し、すでにそれらを試した顧客のレビューを読むことができることを考えると、それは理解できます。

商品のランディングページにカスタマーレビューを配置するには、いくつかの方法があります。

• 匿名のテキストレビューを追加する。
• 顧客の名前と写真を含むテキストレビューを追加する。
• ビデオの声を追加します。

たとえば、MangoLanguagesは匿名のレビューを表示することにしました。 ユーザーがかなりの量のテキストを理解しやすくするために、各レビューの主要なアイデアを太字で上部に配置しました。 訪問者はレビューをスクロールして詳細を表示することもできます。これは、ランディングページのスペースを節約するためのスマートなソリューションです。

アクションの呼び出し

ランディングページの主なユーザーの宛先は、行動を促すフレーズのボタンです。 ページ全体でCTAを数回繰り返したり、CTAボタンごとにテキストを変更したりすることもできます。これにより、どのオプションが最適かを追跡できます。

Mango Languagesは、行動の呼びかけを2回繰り返しました。最初の「登録」ボタンはヘッダーに配置され、最後の「言語の選択」ボタンはランディングページのフッターの前にあり、どちらも同じ登録ページにつながっていました。

Mango Languagesアプリは、アプリ内購入で無料で使用できます。 ただし、物理的な商品を販売する場合は、召喚ボタンの近くのランディングページに商品の価格を記載する必要があります。

フッター

商品のランディングページの最後の部分はフッターです。 ページの最も「退屈な」要素のように見えるかもしれませんが、実際には、メニュー、ソーシャルメディアリンク、電子メールサブスクリプションフォーム、その他のボタンなどの非常に重要な情報が含まれています。

フッターでは、Mango Languagesがヘッダーで使用するボタンの内容を部分的に繰り返し、拡大しました。 ユーザーは、会社について詳しく知り、ブログやソーシャルメディアアカウントにアクセスし、アプリをダウンロードし、ダイジェストを購読し、製品自体の詳細を読むことができます。

チャットボックス

通常、商品のランディングページのすべてのブロックの上に配置される要素の1つは、チャットボックスです。 これにより、ユーザーは製品について質問し、すぐに回答とサポートを受けることができます。

Mango Languages製品のランディングページでは、右下隅にある青いメッセージアイコンのように見えます。

クリックするとすぐに大きなチャットウィンドウに展開され、ユーザーは質問を入力してファイルを送信できます。

ランディングページにチャットボックスを追加し、それ自体が展開してユーザーの注意をそらさないようにします。

商品のランディングページのデザインとコピーのヒント

使用するブロックを決定し、製品のランディングページの基本構造を確立したら、たとえ一枚の紙であっても、コピーとデザインでそれを強化するときが来ました。 コンバージョン数で測定されるページの成功は、製品をどれだけ上手く提示し、行動を促す効果がどれだけ効果的かによって異なります。

商品のランディングページのデザインとコピーを最大限に活用するための、短いながらも役立つヒントをいくつか紹介します。

商品ランディングページの5つの基本的なデザインのヒント

Adobeによると、コンテンツのレイアウトや画像が魅力的に見えない場合、ユーザーの38％がページを閉じます。 これが、ランディングページのデザイン方法に細心の注意を払う必要がある理由です。

訪問者の目を引くのに役立つ製品ランディングページのデザインに関する推奨事項のリストは次のとおりです。

1. 詳細に集中する前に、レイアウト、つまりページの構造を作成することから始め、最大かつ最も重要な要素について考えます。
2. ページ全体に一貫性を持たせることが重要です。 そのためには、1つのデザインと配色に固執します。 互いに補完する色を選択するには、ColorsやMaterialPaletteなどの配色ジェネレーターを試してください。 1つまたは2つの色を選択してアクションボタンを強調表示し、背景にニュートラルトーンを使用し、テキストが他の要素と対照的であることを確認します。
3. 動画を追加すると、コンバージョン率が80％向上する可能性があります。 アニメーションに頼って、ページの特定の部分にユーザーの注意を引き付け、それをより長く保持します。 製品のいくつかのビデオレビューを配置することを検討してください。
4. 携帯電話の着陸を最適化します。 すべてのランディングページの50％のみがモバイル向けに最適化されており、ユーザーの82％が携帯電話からウェブサイトにアクセスしていることを考えると、これは良い結果ではありません。 したがって、ランディングページのデザインをレスポンシブにすることを忘れないでください。
5. 1秒の遅延でもコンバージョンが7％減少する可能性があるため、ウェブページの読み込みが速いことを確認してください。

商品のランディングページに関する5つの基本的なコピーのヒント

コピーに関して言えば、あなたの目標は、その最も重要な利点を強調することによって魅力的な方法で製品を提示し、潜在的な顧客のために行動を促すことです。

変換する効果的なコピーを作成するためのヒントを次に示します。

1. あなたの製品の利点を強調し、訪問者をあなた自身ではなく彼らに注意を向けさせてください。
2. Adobe Consumer Content Surveyによると、ほとんどの消費者にとって優れたWebサイトの3つの最も重要な特性は、正確性、情報価値、および単純さです。 そのため、説明や不要な情報で加入者を圧倒しないように、要点を明確にした短い見出しを書くようにしてください。
3. サインアップ、購入、または連絡するためにクリックする場所をユーザーに伝えて、アクションを実行するようにユーザーに依頼します。 CTAテキストを試してみてください。 単純すぎる「ここをクリック」テキストのように見える場合でも、コンバージョンが30％向上する場合があります。 ユーザーがすぐに決定を下すように動機付けるための切迫感を作成します。
4. あなたの主張を証明するために統計や数字のような特定の情報を使用してください。 たとえば、社会的証明を追加して、すでに製品を使用している人の数を示すことができます。 たとえば、リアルタイムで更新される数値などのインタラクティブ機能を追加して、ページにとって楽しく、有益で、効果的な要素にします。
5. 常に文法とスペルをチェックしてください。 一部のユーザーは、間違いを見つけた場合、ランディングページから目をそらす可能性があります。

最後に、コピーとデザインをA / Bテストして、新しい売上をもたらし続ける完璧なバランスを見つけることを忘れないでください。 トレンドに従って最新の状態に保ちますが、同時に、常に本物であり続け、独自のアイデアを実装します。

商品ランディングページの例

何かを学ぶための最良の方法は、他の人がそれをどのように行うかを見ることです。 いくつかの製品ランディングページの例を見て、さまざまな企業がどのようにデザインとコピーを使用して製品を販売しているかを見てみましょう。

SquareUpの最初の例は、物理的な製品を販売する方法をよく表しています。

このランディングページのコピーの長所は次のとおりです。

1. テキストは最初の文からポイントまでまっすぐです。
2. 機能は、顧客の問題や懸念を解決する能力を通じて説明されます。
3. 使用される単語は単純で、文章は短く明確です。

このランディングページデザインの長所は次のとおりです。

1. 製品の高品質の写真がたくさんあります。
2. バランスの取れたカラーパレットが使用されており、背景はテキストと対照的です。
3. 最も価値のある情報は、太字または色で強調表示されています。

それでは、よりインタラクティブな例を見てみましょう。

Bellroyはいくつかの楽しみを追加し、ユーザーが古いウォレットと新しいBellroyウォレットが最大10枚のカードと現金でどのように見えるかを確認できるようにします。 これは、訪問者の注意を引き、あなたの製品が優れた選択肢である理由を訪問者に発見させるための賢い解決策です。

このランディングページのコピーが本当に優れている理由：

1. このページは、インタラクティブヘッダーでの楽しい行動の呼びかけから始まります。
2. テキストはほとんどありませんが、製品について知っておく必要のあるすべてを学ぶにはまだ十分です。
3. セクションの種類とそこに入れることができるカードの数、色と価格など、さまざまなウォレットの明確な説明があります。

このランディングページデザインの長所は、

1. Bellroyウォレットが非常にスリムである理由のビデオ説明は言うまでもなく、ランディングページのすべてのブロックはインタラクティブです。
2. 製品のクローズアップ画像がたくさんあります。
3. 利用可能なすべてのウォレットは、ウォレットの外側と内側からの写真とともにランディングページに表示されます。

最後の例は、これまでに示したすべてのものとは異なります。 それはより個人的なトーンを持っており、標準的な製品のランディングページ構造からの逸脱はページを個性でいっぱいにします。

マリー・フォーレオは、彼女のランディングページをある種の名刺として使用する彼女自身のショーのホストです。 彼女の主な製品はオーディオトレーニングですが、マリーのテレビ番組やチャリティープロジェクトもページで宣伝しています。

このページのコピーの長所は次のとおりです。

1. メッセージは個人的で、暖かく、心地よいものに聞こえます。これは、個人のページや小さな会社のWebサイトの雰囲気を完璧に表現します。
2. ヘッダーテキストは、このランディングページが何であるかを実際には明らかにしていませんが、好奇心を呼び起こし、訪問者を下にスクロールするように動機付けます。
3. テキストの量と文の長さは前の例よりも大きくなっていますが、これはランディングの全体的なスタイルに完全に適合しています。

ランディングページのデザインに関しては、ここで次のメリットがあります。

1. アニメーションはページ全体で数回使用されるため、よりインタラクティブで楽しく見ることができます。
2. 書道のタイポグラフィは非常に個性的でエレガントな雰囲気を醸し出しており、ランディングページの各ブロックのユニークなデザインにより、視聴者はコンテンツを簡単に理解できます。
3. 写真に裏付けられた有名人からの引用がたくさんありますが、それは一般の人々の間でマリーの権威を証明するだけです。

今ではあなたの番です

私たちの推奨事項に従い、トレンドに注意し、テストすることを忘れないでください！ SendPulseのマルチチャネルマーケティングプラットフォームは、サブスクリプションフォームを製品のランディングページに追加し、メーリングリストを作成し、高品質の電子メールを送信するのに役立ちます。 また、デジタルマーケティング戦略に全体的なアプローチをとる準備ができている方には、SMS、Webプッシュ通知、Facebookチャットボットを提供しています。