Shopifyにおける魅力的なランディングページの作り方

Shopifyでのビジネスタイプを問わず、ランディングページは高いコンバージョンへの強力な入り口となります。2022年時点において、ランディングページのコンバージョン率は他の種類のサインアップフォームと比較して、160%高くなっています！

従って、ビジネス用のランディングページの作成は明らかに、考えるまでもなく必要だと考えてください。

効果的なShopifyランディングページの作り方を探しているなら、これ以上探す必要はありません。この投稿では、正しい方向でスタートするために必要な要素を全てまとめました。

Shopifyランディングページとは何ですか？なぜ必要ですか？

ランディングページは、マーケティング又は広告目的の為に特別にデザインされたスタンドアロンウェブページです。期待される成果は、情報提供からリード獲得や販売の成立まで多岐にわたります。

訪問者の行動を促す為に、ランディングページは通常、グーグルAdwords又はフェイスブック広告を通じて宣伝されます。これらのオンライン広告プラットフォームから、見込み顧客がランディングページにたどり着く（英語で「land」と言う）ことができるため、「ランディング」ページと呼ばれます。

ランディングページは、Shopifyストアのコンバージョンを高める為に不可欠です。様々な視聴者グループにカスタマイズされた体験を提供することにより、訪問者を買い物客に転換することが容易になります。

更に、適切にデザインされたランディングページは訪問者に好印象を残すことができ、訪問者があなたのビジネスをプロかつ信頼できると考える可能性が高くなります。

ランディングページがeコマースのウェブサイトにもたらすその他の重要な利点は以下の通り幾つか列挙します。

• Shopifyの販売者は、マーケティングキャンペーン用のランディングページを簡単に作成して立ち上げることが可能です。
• 有料広告キャンペーンでは、より大きな投資収益率（ROI）を得ることが可能です。
• 特定のランディングページのA/Bテストにより、どの要素がコンバージョンに優れているかを特定可能です。
• Shopifyストアのオーナーは、ターゲット視聴者の好みについて詳しく理解できます。

Shopifyランディングページにはどのような種類がありますか？

1. リードキャプチャーページ

リードキャプチャーページの目的は、主に訪問者のデータを収集してリードを生成することです。このページは、訪問者が製品/サービスを継続的に使用するかどうかを検討する時点でよく使用されます。

リード獲得には、名前、住所、電話番号、年齢、メールアドレスの入力フィールドのあるウェブフォームが必ず必要です。フォームに記入して送信すると、訪問者は見返りに特典を受け取ります。一般的な特典には、電子書籍、無料サンプル、割引、その他デジタル資産等があります。

2. クリックスルーページ

クリックスルーページはウォームアップとして機能し、訪問者をコールトゥアクション（CTA）経由で別のコンバージョン対象ページに誘導できるようにします。

このページには通常、大胆なグラフィック、キャッチーな見出し、簡潔な製品説明、魅力的なCTAボタンが含まれています。また、このページは、訪問者がボタンをクリックすると別のページに移動し、そこで直ちにコンバージョンを完了できるように誘導することを目的としています。

クリックスルーページを使用することで、顧客のより高い信頼を獲得できる可能性が高く、その結果、質の高いトラフィック（コンバージョンに至る可能性が高い訪問者）がセールス及びマーケティングファネルに誘導します。そのように、フィルターとして機能するクリックスルーページと見做しても良いでしょう。

3. 販売ページ

その名の通り、販売ページは販売を目的としています。その基本的な要素には、見出し、本文コピー、CTA、お客様の声/レビュー、会社概要セクション及びビデオが含まれます。

本ページは取引の成立に重点を置いているため、セールスファネルの最後でよく使用されます。成功するものを作成するには、より多くの見通しと努力が必要とします。

一般的な販売ページには、ショートフォーム及びロングフォームの二つのタイプがあります。長さにも拘わらず、訪問者に製品の知識を提供し、最終的には購入者に転換するという同じ目的となります。

• ショートフォームの販売ページ：本ページには、明らかにロングフォームの販売ページよりも情報が少なく、ページを少しスクロールするだけで全てのページコンテンツが閲覧可能です。
• ロングフォームのセールスページ（又はセールスレター）：本ページには、必要な情報を出来るだけ表示する為のより広いスペースがあります。長い段落、広範な製品説明、大量の製品写真コレクションを含むランディングページを作成することができます。

4. Shopifyスプラッシュページ

スプラッシュページとは、ウェブサイトの他のページの前にあるページを指します。このページの目的は、最も重要な情報を前面に出すことでユーザー体験をスムーズにすることです。

スプラッシュページは、重要な発表に注意を向けたり、オファーを宣伝したり、免責事項や警告を表示したりする等、様々な目的に役立ちます。

Shopifyスプラッシュページの作成は、目的に応じてメインのホームページにポップアップを追加するのと同じくらい簡単です。

5. バイラルページ

バイラルページはバイラルにすることが期待されるものです。このページの目的は、ソーシャルメディアの共有能力を最大限に活用してブランドの認知度を高めることです。そのため、バイラルページでは、注目を集め、サークル間での共有を促すコンテンツに重点を置きます。したがって、バイラルページのコンテンツはトレンディで面白いことが多く、驚きの要素をもたらすビデオやゲームが含まれる場合があります。

企業のウェブサイトへのリンクも含まれていますが、通常は非常に控えめな方法で表示されます。

Shopifyでのランディングページの3つの作り方

1. Shopifyの組み込みシステムの適用（限定的な方法）

ステップ1：ランディングページのテンプレート作成

Shopifyテーマエディター及びオンラインストア2.0テーマは、独自のランディングページテンプレートを開発する為の最適な所です。

Shopify管理画面から、[Online Store]>[Themes]を選択し、編集したいテーマを選択して[Customize]ボタンを押します。

 

ページ上部のドロップダウンメニューから[Create Template]を選択します。

空白のテンプレートが表示され、希望のランディングページを作成するためにコンテンツを追加できます。

Learn more: 初心者向けShopifyカスタマイズガイド

ステップ2：ランディングページテンプレート内の要素整理

左側のメニューから、ランディングページに含めたい要素を選択し、必要に応じて調整します。

それらを希望のスペースにドラッグアンドドロップするだけで、ページ上で好きなようにレイアウトできます。

右上隅の[Save]をクリックして変更を保存します。

ステップ3：新しいページの作成

Shopifyダッシュボードから[Pages]>[Add Page]をクリックしてShopifyで新しいページを作成します。

ステップ4：ランディングページの構築開始

これで、以前作成したランディングページテンプレートを選択し、[Page]セクションでページタイトル、画像、グリップテキスト、CTAボタン等のオリジナルコンテンツの作成を開始できるようになります。

 

検索エンジンリスティングプレビュー等のShopifyのSEO機能を使用して、Shopifyでのランディングページをより検索エンジンに適したものにすることが可能です。

2. より高度なカスタマイズの為のLiquidの使用（コーディングが必要）

ステップ1：オンラインストアのテーマに移動して、必要なテーマを選択します。[Actions]ドロップダウンメニューをクリックし、[Edit Code]を選択します。

 

ステップ2：[Templates]>[Add a New Template]に移動します。ポップアップウィンドウで、テンプレートのタイプを選択し、名前を付けます（例：「ランディングページ」）。

 

ステップ3：テンプレートが作成されると、エディターに送信されます。HTMLコードを編集し、[Save]をクリックします。

非セクションテンプレートの場合：これで、テンプレートをページに実装する準備が整いました。テンプレートをページに割り当てるには、テンプレートのサフィックスリストからテンプレートを選択します。　

セクション化されたテンプレートの場合：編集したいコードがセクション要素内に隠されている場合は、新しいセクションを構築する必要があります。

テンプレートエディターで、編集したいセクションのLiquidタグを見つけ、そのタグに新しい名前を付けます（これが新しいセクションです）。

これらの調整を行ってテンプレートを保存後、前に作成した名前でセクションを作成する必要があります。[Sections]>[ Add a New Section]に移動し、セクションに「product-landing-template」という名前を付けます。

「Create Section」に移動して編集を続行します。エディター内のデフォルトのコードを削除したほうが良いです。新しく作成したセクションのコードをコピーして、テンプレートコードに貼り付けます。これを変更して、新しいセクションとして保存します。

3. GemPagesを使用してコンバージョン率の高いランディングページ構築（最も簡単な方法）

Shopifyが提供できる以上のものをご希望の場合は、我々がお手伝いします。

GemPages ‐ 強力なページビルダを使用すれば、既成のテンプレートを選択し、直感的な方法で異なる要素をドラッグアンドドロップするだけで、数分以内に信じられないほどうまく変換される見やすいランディング ページを作成できます。

以下は、期待するランディングページを作成するためのクイックガイドです。

ステップ1：GemPagesダッシュボードにアクセスし、[Create New Page]をクリックします。

 ステップ2：テンプレートライブラリを確認し、ニーズに合ったものを見つけます。

 

テンプレートを選択したら、[編集]をクリックして、ランディングページの作成を好きな方法で開始できます。

必要に応じて、CTAボタン、フォーム、ポップアップなどの要素をセクションにドラッグアンドドロップして、コンテンツとビジュアルを追加できます。

GemPagesエディターの全ての要素をより適切にナビゲートするには、この概要記事をご参照ください。 

ステップ3：結果に満足したら、[Save]ボタンをクリックします。

その後、ページはデータベースに保存されますが、まだ公開されていません。[公開]ボタンをクリックしてページを公開する前に、[Publish]をクリックしてページのプレビューが表示されます。

 

インスピレーションを与える最高のShopifyランディングページの例

以下では、GemPagesの顧客から最高のランディングページの例を収集し、それぞれがなぜ効果的かつ、独自のShopifyランディングページを完成させるために何を学べるかをご説明します。

注：全ての例は、公開時に紹介されているブランドから直接取得したスクリーンショットを紹介しています。

1. The Factor Formula

 

The Factor Formulaのランディングページが機能する理由：

• 役立つが、圧倒的ではないこと：このランディングページには大量の情報が含まれています。それにも拘わらず、適切な配置のグラフィックとテキストの階層構成が、情報を分かりやすく整理しています。
• 信頼の構築：ランディングページ全体を通じて、ブランドは顧客の体験談、使用前と使用後の画像等の形でインスピレーションを与えるコンテンツを表示します。

2. Topaz

 

Topazのランディングページが機能する理由：

• 商品写真への協調：ランディングページでは、様々なボディスタイルで水着がどのように見えるかを分かりやすく視覚化するため、多数の水着モデルの写真を紹介しています。
• 最小限のウェブデザイン：ランディングページ全体を通して、高品質の製品画像、シンプルで魅力的なコピー、適切な CTAという同じ式に従います。

3. Cape Saltie

Cape Saltieのランディングページが機能する理由：

• ビデオ背景の使用：このブランドは静止画を表示するだけではなく、自分の製品やサービスを紹介するためにショートビデオも活用しています。
• 魅力的なコピー：Cape Saltieはウェブサイトのコピーをマスターし、シンプルで過度に単純化していません。テキストは親しみやすくフレンドリーで理解しやすく、簡単に読み進めることができるため、今の一般的なインターネットブラウザに最適です。

Learn more: トップブランドのShopifyランディングページの7つの例（+ヒント）

コンバージョン率の高いShopifyランディングページを作成する10のヒント

1. 明確な目標の設定

これは、ランディングページのコンテンツ全体に強力で鋭い焦点を当てる為の基盤となります。

各ランディングページは、一つの目的を中心に展開する必要があります。明確な目標を持っていれば、様々な情報をフォローしやすい構造と重要度の適切な順序で配置できます。

例えば、売上を増やすことが目標であれば、製品の利点を自慢するのではなく、顧客の課題に対処することをお勧めします。

2. ターゲット視聴者とそのニーズの特定

良いランディングページと悪いランディングページを区別する最も重要な要素は、それが顧客のニーズをどの程度満たしているかにあります。

ランディングページにたどり着いた訪問者は、特定の心構えで特定の情報を求めています。ランディングページを開発する際には、彼らの検索意図を認識し、彼らの要望に応えることが重要です。

全ての人に同じ体験を提供するのではなく、それぞれが特定の視聴者グループをターゲットにした多様なランディングページを作成した方が良いでしょう。

下記の質問を考えることで、顧客をよりよく理解することができます。

• 顧客のプロフィールはか？年齢は？仕事は？主に男性又は女性ですか？
• 顧客が直面している主な問題は何ですか？また、自社の製品で解決できる可能性のある主な困難。
• 顧客にとっての購入時の重要なことは何ですか？購入する製品を選択する際、価格、顧客サービス、支払方法のどの要素を優先しますか？

3. バリュープロポジションの決定

顧客が経験している問題を把握したら、自社の製品がそれらの問題点にどのように対処できるか、更には、自社の製品が他の代替品と比較してどのように最良なソリューションになり得るかを考えるべきです。

あなたのバリュープロポジションは、買い物客があなたの製品やサービスを選ぶべき理由を要約したものであり、ランディングページの中心に配置されるべきです。

理想的なアプローチは、バリュープロポジションがターゲット視聴者の課題に対応し、目標達成に役立つアクションを促し、全てのタッチポイントで一貫性を保つことです。

価値提案が決まったら、ランディングページのコンテンツ全体で同じメッセージを強調するようにしてください。

ジュエリー コレクションのランディング ページを作成するBad Badは、そのバリュープロポジションをヒーロー バナーの右に太字で表示しています。

女性が悪びれずに人生を生きる力を与えるという精神で、Bad Bad の新しい肯定的ジュエリー コレクションは、「手放そう。許可しよう。降伏しよう。」というメッセージを追求しています。このバリュープロポジションを聞いたら、Bad Bad の通常の大胆で声高なペルソナとは違って、多少柔らかすぎると思うかもしれませんが、脆弱性はまさに勇気になり得るということを愛情溢れるリマインダーです。これは確かに、自分が愛され、尊重されるのに十分な能力があることを証明しなければならないという絶え間ないプレッシャーの下で置かれている多くの女性の共感を呼べるものとなるでしょう。

4. 明確かつ具体的なメッセージの提示

電子メールや広告キャンペーンの仕組みと同じように、ランディングページも成功するには、簡潔でブランドに沿った且つ、視聴者を重視したコンテンツが必要です。

• 本文は簡潔で魅力的でありながら、役立つものである必要があります。必要に応じて、読みやすいように箇条書きを使用します。
• ブランドアイデンティティの一貫性を維持するために、ランディングページのメッセージがキャンペーン全体のメッセージと一致するようにします。
• コンテンツ全体をバリュープロポジションに基づいて作成します。製品の特性を説明するときは、それらをターゲット視聴者のニーズと結び付けることを忘れないでください。言い換えれば、単に製品の特徴を列挙するのみならず、製品が顧客の生活の質をどのように向上させることができるかを強調してください。

5. 目立つ見出しの表示

実のところ、我々の集中力の持続時間は非常に短いのです。殆どの場合、ウェブ訪問者は全文を十分に読む代わりに、重要なアイデアを得るためにページの見出しだけを探します。

したがって、見出しが人々の注目を集めることができない場合、多額を損失する可能性があります。

では、どうすれば目立つ見出しを作成できるのでしょうか？

それらを製品のスローガンとして使用してください。簡単に言いますと、見出しであなたの製品が視聴者にどのような利益をもたらすかを明確にします。

見出しをシンプルに、要点を絞って、それで十分に興味深いものにしておけば、きっと期待を裏切らないでしょう。効果的な見出しは、視聴者にその内容をわずか数秒で伝えることができる必要があります。

Ace Fitness Equipmentは、見出しを分かりやすく提示しています。

視聴者は、Ace Fitness EquipmentのPay Tomorrowサービスが一目で理解できると言っているかもしれません。実際、これらの見出しは短く、シンプル且つ、一般的な懸念事項に直接取り組んでいるというすべての要件を満たしています。

6. 魅力的なCTA（Call-To-Action）ボタンの作成

ウェブ訪問者に購入、メーリングリストの購読、または特定のページへのアクセスを促したい場合は、適切な方法でそれらをトリガーする必要があります。

そのための最も効果的なアプローチは、強力なCTAボタンを使用することです。

これはランディングページを成功させる為に欠かせない要素でもあります。

注意を逸らさず、一度に一つの特定のアクションを視聴者に誘導するため、各ランディングページにCTAを一つだけ含めた方が良いと言われています。

CTAは明確で目標志向に保つことが重要です。そして最も重要なことは、訪問者の購買段階に応じて調整し、効果を最大限に引き出すことです。

Aimはランディングページに視覚的に魅力的なCTAボタンを作成しています。

Aimは単なるサプリメント会社でなく、「常に自分を改善しよう」という同じ方針を共有するコミュニティとして自社を位置づけています。そのCTAボタンは、ネオンカラー、感嘆符、カジュアルな見た目のタイポグラフィーで、Aimの追求する居心地の良い雰囲気と自己成長のダイナミックな精神を真に表現しています。

7. 印象的な画像の採用

ことわざにあるように、百聞は一見に如かずです。魅力的な画像はコピーを素敵に補完するだけでなく、訪問者をページに留まらせる重要な要素にもなり得ます。

ヒーローバナーに製品やサービスの最も魅力的な画像を表示することにより、ページにアクセスした瞬間に視聴者に印象を与えます。訪問者が最初からメインメッセージを正しく理解できるようにしたいと考えていれば、バリュープロポジションを写真で表現させることを忘れないでください。

製品の動作を簡単に説明したい場合、ビデオの使用も検討してください。背景ビデオは店舗のビジュアルを新しいレベルに引き上げ、非常に楽しい没入感のあるインタラクティブな体験をもたらします。

Yoga Strongはランディングページにおいて、美しいヨガトレーナーの画像シリーズを表示しています。

これらのYoga Strongの人々のように、健康で禅に満ちた体に見えたいなら、ためらわずに今すぐトレーニングセッションにサインアップして下さいというのがそれらの写真がすべてを物語っています。

8. 社会的証明の活用

ブランドの信頼はどれだけ強調しても過ぎることはありません。ビジネスの信頼性を証明するために、以前のパートナーや顧客からの積極的なフィードバックを表示する機会を決して逃さないでください。

レビュー、評価、お客様の声、レビュー、更には返金保証等を組み合わせて、社会的証明を多様化することでブランドの信頼性をより活気のある形で表現できます。

Taatは喫煙者向けに製品のレビューを共有するための別のレビューページを作成します。

従来のタバコのような味のタバコ代替品のメーカーとして、Taat社は、通常の喫煙体験を模倣し、更にそれを新たな高みに引き上げる方法を示したいとしっかりと考えています。生身の人間が話すことほど説得力のあるものはないため、Taatは多様な証言ビデオのコレクションを作成しました。

9. コンバージョン障壁の取り除き

ランディングページは、訪問者がコンバージョンしやすいものにしなければなりません。したがって、ウェブサイトへのアクセスを妨げる可能性のある障壁はすべて排除する必要があります。下記、絶対に避けるべき一般的なブロッカーをいくつか紹介します。

• 読み込み時間が遅い：ページの読み込み時間が1秒遅れるごとに、サイトは視聴回数が11%、そしてコンバージョン数は7%減という問題が発生します。ストアにアップロードする前に、必ず画像を最適化してください。

Learn more: 2023年のShopifyスピード最適化に関する11の実践的なヒント。

• 長いチェックアウトプロセス：注文完了にあまりにも多くのクリックが必要とする場合、恐らく顧客は興味を失い、ページを離れてしまうでしょう。買い物客の負担を軽減するために、チェックアウト手順を注意深く確認し、それを最小限に抑えてください。
• 不十分な情報：連絡先情報、配送情報、返品ポリシー等、情報に基づいた意思決定を行うために必要な詳細を全て顧客が把握できるようにします。

10. 検索エンジン最適化（SEO）の改善

SEOはページの可視性を高める上で重要な役割を果たします。SEOが最適化されればされるほど、より多くのトラフィックを獲得でき、見込み客を購入者に転換する機会が増えます。

最初に行うべきステップは、キーワードをリサーチし、ランディングページに最適なキーワードを決定することです。これらのキーワードを本文全体に使用するだけでなく、ページタイトル、メタディスクリプション、URLにもキーワードを組み込む必要があります。

SEOランキングをチェックするための無料ツールは数多くあります。ページの状況を迅速に分析し、潜在的な問題を事前に検出するには、SEO Site Checkup、Seobility、またはSiteCheckerの使用を検討してください。

また、ランディングページを翻訳する際には、多言語SEOに細心の注意を払う必要もあります。

次のShopifyランディングページを作成する準備はできていますか？

上記はShopifyランディングページについての概要となります。作成には多くの作業が必要ですが、この時点で、その技術と科学を習得するための基本はすべて身に着けているでしょう。では、実践に移し、あなたのビジネスの売上向上を目指しましょう！

Shopifyランディングページに関するよくある質問