Shopifyのランディングページ：ランディングページの作り方（+7つの例）

Shopifyストアの訪問者がなかなか購入に踏み切ってくれないと感じたことはありませんか？そこでShopifyのランディングページの出番です。ランディングページは、特定の行動を促すために特別にデザインされています、ランディングページは、購入やフォーム送信など、特定の行動を促すために特別にデザインされています、コンバージョンを高めるために必要不可欠です。

この包括的なガイドではShopifyのランディングページの世界を掘り下げます、その定義種類そしてどのように作成すればよいのかを探ります。また、Shopifyランディングページの成功例を紹介し、あなたの創造力を刺激します。

始めよう！

Shopifyのランディングページとは？ 

Shopifyのランディングページは、最も簡単な定義では、Shopifyストアのランディングページです。マーケティングキャンペーンで強調したい、または宣伝したい製品やサービスのために特別にデザインされています。これらのShopifyランディングページの最終的なゴールは、フォームへの入力、購入、サービスへの申し込みなど、特定のコンバージョンアクションをランディングページ上で実行するようユーザーに促すことです。

簡単に言うと、訪問者をリードやバイヤーに変換します。これは、あなたのShopifyストアのランディングページにターゲットオーディエンスが入ったときに仕掛ける罠のようなものです。トラップの主な目的は、顧客にCall To Actionボタンに「足を踏み出させる」ことです。

しかし、ホームページのような他のページとどう違うのか？

Shopifyストアのホームページは、ブランド紹介や商品紹介など、様々な目的で使用することができますが、ランディングページは、オンラインストアのコンバージョン率を上げるという1つの目的を持って使用されます。 

Shopifyランディングページの種類

高コンバージョンのモバイル・ランディングページを作る7つのコツ（6つの例を含む）

現時点では、ランディングページがオンラインストアのコンバージョン率にとって極めて重要であることは常識の一部となっています。しかし、コンバージョンのゴールは、ビジネスの種類、ビジネスゴール、マーケティングファネルによって異なることを覚えておいてください。

例えば、高品質なサプリメントを販売している場合、購入プロセスが長く蛇行することが多いので、最初のコンバージョンゴールはAdd To Cart Eventではなく、Email Submissions That Are Sales Qualified Leads (SQL)とし、対応するランディングページはEメールキャプチャページとします。

同様に、もしあなたが犬のおもちゃを販売する店を持っているならば、それは価値が低く、訪問者をすぐに顧客に変えることができるものであるため、Shopifyのランディングページは、商品ページ、またはコレクションページに構築されるべきであり、コンバージョンゴールは、カートに入れるイベント、または今すぐ購入イベントのいずれかである。 

01.スプラッシュ・ランディングページ

スプラッシュページとは、ユーザーが広告をクリックした後にランディングするページのことで、一般的には告知や年齢確認のために使用されます。Shopifyのスプラッシュランディングページは、通常カミングスーンページ、またはパスワードページです。

スプラッシュ・ランディングページは、最小限のコピー、強力なビジュアル、キャッチーなメッセージを含み、瞬時にユーザーに強い印象を与えます。スプラッシュページはウェブページに先行することが多いため、マーケティングファネルのどの段階でも使用することができますが、ブランド認知度を高めるためにファネルの一番上に使用することをお勧めします。ZARAがどのようにスプラッシュページを使ってロケーションを確認したかを見てみましょう。 

より良いスプラッシュ・ページを作るためのヒントがここにある：

• ライトボックスオーバーレイを使用する： ライトボックスオーバーレイは、訪問者を別のページにリダイレクトするのではなく、最初に訪問したときと同じページに維持します。ライトボックスオーバーレイ方式で構築されたスプラッシュページの半透明の性質は、ゲストが期待した正しい場所にいることを確実に理解させます。
• 訪問者を元のページに戻す：ウェブがユーザーをスプラッシュページに誘導する場合、最初にユーザーがどこから来たかを追跡しておくことが重要です。
• スプラッシュページの繰り返し表示は避けましょう：スプラッシュページを最初に表示したときにゲストがスプラッシュページを見逃すと、次にスプラッシュページを表示したときに、ゲストがあなたの望むステップに進もうとしない可能性が高くなります。
• 読み込み速度の最大化：スプラッシュページに、ページの読み込み速度を低下させる可能性のある、例えば自動再生動画で溢れさせないことが重要です。
• スプラッシュページのデザインをレスポンシブにしましょう：あなたのスプラッシュページが、さまざまな閲覧デバイスを持つすべてのユーザーに利用可能であることを確認してください。モバイル重視の考え方の重要性はいくら強調しても足りないほどです！
• 終了意思表示ボタンがある：ユーザーに、ウェブサイトから退出する可能性があることを気づかせることは重要である。選択肢がないと感じて喜ぶ人はいない。スキップボタンにアクセスできることは、この問題を軽減するのに役立つ。

02.リードジェネレーション・ランディングページ

マーケティングファネルに話を戻すと、リードジェネレーション・ランディングページは通常ファネルの中間に位置します。強力なリードジェネレーション・ランディングページを作るには、適切なバランスを見つける必要があります。基本的に、訪問者にEメールや連絡先を残してもらうよう「お願い」するのであれば、ダウンロード可能なリソースや割引コードなどのオファーで「報いる」必要があります。

このようなランディングページを簡単に作成できるように、Shopifyにはコンタクトフォームとカスタマーフォームが組み込まれており、カミングスーンページ、パスワードページ、またはリードキャプチャページに簡単に追加することができます。この例では、Nautoは連絡先情報を収集し、リードをキャプチャするためにリードジェネレーションページを使用しました。 

• 安心感とパーソナライゼーション：商品を購入する際、何が好きで何が嫌いなのかを知るためには、訪問者を観察し、学習することが重要です。例えば、パーソナライゼーションでは、訪問者のセグメントごと、あるいは訪問者ごとに異なるページを表示することができます。
• ランディングページはシンプルに：シンプルな外観のランディングページは、訪問者がよりよくナビゲートし、必要な情報をキャッチすることができます。これは、例えば、短く甘い見出しをつけたり、フォームフィールドの数を最小限に抑えることで実現できます。
• ポップアップがおすすめです：ポップアップは、訪問者の注意を即座に引くのに最適な方法です。ページの背景をぼかし、新製品や販売キャンペーン、ニュースレターの登録など、訪問者が興味を持ちそうな情報ボックスを表示しましょう。印象的です！
• 社会的証明は最高の味方です：社会的証明は重要であり、あなたの製品の背後には、それを愛する実際の顧客がいることを証明することで、あなたの業績が向上する可能性が高まる。手始めに、サイトに星の評価や体験談を追加してみてはいかがでしょうか。
• ページに選ぶボタンは重要です：ボタンに何らかのメリットを加えることで、成功の可能性が高まります。ボタンの文言を変えるだけで、顧客の興味をそそることができるかもしれません。「今すぐダウンロード」？いいえ、違います。「今すぐダウンロードして、XYZの割引を受けましょう」の方がいい。
• 特別オファー、割引：Eメールなどを送る代わりに何かを無料で提供することは、顧客にとって何の問題もないことです。それは人々に、話を聞いてもらえた、特別なことだと感じさせる。

関連記事完璧なイベント用ランディングページを作るための7つのヒント（例文付き）

03.セールスランディングページ

セールスページはファネルの一番下、つまり普通の買い物客を購買客に変える必要がある時によく使われます。セールスランディングページを作るために、Shopifyには商品ページとコレクションページが用意されていますが、ほとんどのテーマテンプレートは商品詳細セクションと商品おすすめセクションのみで構成されているため、セールスランディングページにしたい場合はShopifyの商品ページをカスタマイズする必要があります。

セールスページは、あなたの商品や、誰かにお金を払ってもらったり、あなたの大切なコール・トゥ・アクション・ボタンをクリックしてもらったりするために必要な情報量によって、長くも短くもなります。一般的に、あなたの製品やサービスが高価であればあるほど、あるいは複雑であればあるほど、あなたの見込み客はそれらについてより多くの疑問を持つでしょう。 

より良いセールスページを作るためのヒントがここにある：

• 読者を理解する：読者について知れば知るほど、セールスページは強くなる。例えば、新米ママをターゲットにしたページでは、優しい言葉遣いと心を和ませるビジュアルを使うべきだし、バイク乗りのようなニッチ向けの商品では、屈強な表現が必要かもしれない。
• 明確かつ簡潔にページを構成しましょう：顧客がメッセージを読み解くのに時間を浪費しないようにしましょう。本題に入り、訪問者が断れないような見出しにしましょう。製品やサービスのメリットでリードし、次に何を売っているのかに言及しましょう。
• 説得力のあるコピーを作りましょう：まず、何をしてほしいかを伝えることから始めましょう。強い動詞と権威的な声を使う。平凡な特徴ではなく、ベネフィットに焦点を当てましょう。例えば、レーシングバイクのホイールの構造について言及するのではなく、購入者がそこからどのようなメリットを得られるかを説明しましょう。
• 商品のベネフィットを説明するセールスページに「ゆとり」を持たせる一つの方法は、情報を箇条書きや番号付きのリストにまとめることです。箇条書きにすることで注意を引き、より読みやすくなります。
• 訪問者があなたを信頼できることを証明しましょう：私たちとの仕事が他の人々にも愛されていることを証明する素晴らしい方法です。一緒に仕事をした企業のロゴ、満足した顧客の声、詳細なケーススタディへのリンクなどを掲載することができます。
• 複数の行動喚起を使う：同じ結論に導くことを忘れずに。訪問者が読み続ける理由を与えるために、それらの間にコンテンツを追加することを確認してください。
• 緊急性を持たせる：例えば、フラッシュセールを使ってコンバージョンを促すことができます。例えば、フラッシュセールを使ってコンバージョンを促すことができます。また、"Do you want to [...]?なぜ待つのですか？"
• 反論に対処する：FAQも非常に便利です。訪問者をコンバージョンから遠ざけることなく、情報を素早く伝えることができます。
• 終了意図のポップアップを試してみましょう：訪問者に購入する最後のチャンスを与えたい場合、終了意図ポップアップは非常に効果的です。このポップアップを使って、限定割引やボーナスのおまけを提供することもできますし、単に訪問者が本当に帰りたいのかを確認することもできます。

04.ありがとうのページ

サンキューページとは、誰かが購入した後、情報を入力した後、または情報を記入した後にリダイレクトされる場所です。一方、サンキューページには、リードをファネルのさらに下に移動させたり、リピーターの平均注文金額を増加させたりする力があります。

より良いサンキューページを作るためのヒントがここにあります：

• 個人的なタッチ：サンキューページで顧客の名前を使うという行為だけで、顧客はあなたのショップに親近感を抱き、より重要な存在であると感じるようになります。また、サンキューページに地図を統合して、ユーザーの配送先住所を表示することもできます。
• 再来店のインセンティブ次の2つの方法が効果的です。
• 割引 - 次回のオファーから20％または30％割引など
• ロイヤリティ・プログラム - 顧客が繰り返し購入することでポイントを貯め、最終的には報酬を請求できる。
• ソーシャルに共有」ボタン：これは、あなたの顧客があなたの製品について有機的に広め、彼らのソーシャルメディアに彼らの正直なレビューを残すためのものです。
• 紹介するインセンティブ紹介プログラムとは、あなたのブランドの最高の支持者である顧客が、あなたの会社のメッセージを友人と共有するための金銭的なインセンティブである。
• アンケートへのリンク完了したアンケートは、あなたのお店の将来にとって絶対的な金鉱です。実際に商品を買ってくれている人たちから、何が正しくて何が間違っているのかを正確に知ることができます。
• 追跡情報：これは、顧客が信頼の問題を克服し、消費者とあなたの間に長期的な関係を育むのを助けるためである。
• トラストバッジ：送料無料、返金保証、第三者サービスからの推薦など、顧客が購入した商品に関する重要な保証を示す視覚的シンボルです。
• 内部リンクと外部リンク：サンキューページをループさせることを常に忘れないようにしましょう。これとともに、サンキューページをお店の外のページ、主にFacebook、Instagram、Pinterestなどのソーシャルメディアページにリンクさせることができます。

05.季節のランディングページ

季節のランディングページとは、オンラインショップの独立したページで、訪問者を惹きつけ、季節や祝日のセールに向けて誘導するものです。

無慈悲な効率で顧客を獲得し、コンバージョンさせたいのであれば、すべてのホリデーランディングページが持つべき3つの重要なポイントがある：

01.グレート・デザイン

• 祝祭感を出す：ランディングページの美的感覚は、ホリデーの美的感覚に合わせるべきです。バレンタインデーのランディングページにカボチャをベースにしたデザイン、父の日のランディングページに卵をベースにしたデザインでは意味がありません。
• 明確にする：訪問者に注目してもらいたい見出し、画像、コールトゥアクションボタンの魅力を強調するために、空白と色の完璧なバランスを見つけよう。
• ヘッダーとフッターを取り除く：ランディングページのヘッダーとフッターを削除することは、そのランディングページが属する店舗の通常のヘッダーとフッターを持たないこととは直感に反するように思えるかもしれませんが、実際には、ヘッダーとフッターはランディングページへの訪問者の気をそらし、あなたが促進しようとしているコールトゥアクションから引き離すリンクでいっぱいです。

• 在庫希少性：「在庫は残り3つだけです！」など。
• ビューカウンター：例：「現在6人がこのアイテムを見ています
• カウントダウンタイマー：例えば「あと4日です。
• 早期購入者特典：「先着100名にぬいぐるみをプレゼント！」など。

03.割引と送料無料

• 割引：BOGOディスカウント、バンドルディスカウント、バルクディスカウント、初回顧客ディスカウントなど、あなたの店で採用できるディスカウントの種類はたくさんある。
• 送料無料：送料無料の保証は、ホリデーシーズンには特に喜ばれる。送料をまかなうために商品価格を上げるか、送料を自己負担しなければならないとしても、送料が無料であることを確認しよう。

Shopifyでランディングページを作成する方法

Shopifyでランディングページを作るには2つの方法がある：

• Shopifyのページをカスタマイズしてランディングページを作る - Shopifyの商品ページ、Shopifyのコレクションページ、あるいはComing Soonページでもよい。
• Shopifyランディングページビルダーを使う - ほとんどのページビルダーアプリでは、直感的に要素をドラッグ＆ドロップしてページを構築することができる。 

01.ShopifyのページをカスタマイズしてShopifyのランディングページを作成する

Shopifyのデフォルト設定にプライマリページとして存在するランディングページを作成したい場合は、テーマエディタでページを追加してページタイプを選択するだけです。これらのページタイプには以下が含まれます：

• Shopify 会社概要ページ 
• Shopifyの商品ページ
• Shopifyパスワードページ
• Shopifyコレクションページ
• Shopifyブログページ
• Shopifyショッピングカートページ
• Shopifyの404エラーページ
• Shopifyコンタクトページ

しかし、よりカスタマイズ可能なページを作成するには、Shopifyのテーマエディターでちょっとしたコーディングゲームをする必要がある。

ステップ1：テーマをカスタマイズする前の準備

• テーマを複製してバックアップコピーを作成します。こうすることで、必要に応じて変更を破棄し、もう一度やり直すことが簡単になります。
• どのようなレベルのサポートが受けられるかを理解しておくこと。
• 画像をアップロードするための要件とベストプラクティスについて学びましょう。

ステップ 2: Shopifyテーマのエディタコードにアクセスする

ステップ3：コードを編集する

コードエディターは、左側にテーマファイルのディレクトリを表示し、右側にファイルを表示して編集するためのスペースを表示します。

左側のディレクトリにあるファイルをクリックすると、コード・エディターが開きます。一度に複数のファイルを開いて編集することができます。編集したファイルはファイル名の横にドットが表示されます。

HTML、CSS、Liquidに慣れ親しんだら、もう大丈夫！

(*)注：Shopifyでは、テーマアーキテクチャのバージョンごとに分かれたテーマカスタマイズのチュートリアルを提供しています。 テーマアーキテクチャのバージョンを確認する方法.

02.ページビルダーアプリでShopifyのランディングページを作成する

ステップ1: PageFlyランディングページビルダーのインストール

訪問 ページフライ をクリックし、アプリをShopifyストアにインストールするために、ストアのURLを入力します。

ステップ2：PageFlyでShopifyのランディングページを作成する

Shopify管理画面のサイドバーで、Apps > PageFly - Advanced Page Builderをクリックします。その後、別ページのPageFlyダッシュボードにリダイレクトされます。

ページフライアプリのページダッシュボードで、ページを作成するか、左メニューの（+）アイコンをクリックします。その後、ページ設定でお好みのページタイプを選択できます。

PageFlyには、ホームページ、商品ページ、コレクションページ、会社概要ページなど、カスタマイズ可能な主要ページタイプがあります。

ページ設定が完了すると、テンプレートライブラリが表示され、ストアを開始するためのテンプレートを選択することができます。

しかし、ゼロから物事を作り始めたい場合は、白紙のページで作成を選択することができる。

ステップ3：エレメントの追加

ページエディターにはPageFlyとShopifyエレメント、セクションがあり、空白のページにドラッグ＆ドロップすることができます。PageFlyを使用すると、好きなようにページを構成して、ストアの外観を楽しむことができます。

PageFlyはまた、エレメントを使った無限の実験を提供します。

より快適なアプローチは、ページ設定で125以上の高品質テンプレート（2024年8月26日更新）を使用することです。

PageFlyでShopifyのランディングページを作成する方法については、こちらのチュートリアルをご覧ください： 

ステップ4：ページのプレビューまたは公開

ページの作成が終わったら、「保存」をクリックします。このオプションはページをデータベースに保存しますが、まだ公開はしません。プレビューでページのプレビューを見ることができます。

公開ボタンはページを保存し、公開します。ライブビューでライブページを見ることができます。ページは "your-shop-name.myshopify.com/pages/page-name "というアドレスであなたのストアにリンクされます。

Shopifyデータベース内のPageFlyページは、Shopifyホーム > 販売チャンネル > オンラインストア > ページで確認できます。

トップ 07 Shopifyのランディングページの例

Shopifyのランディングページは、他の仲間のShopifyストアが真のインスピレーションを与えてくれる。

私はインターネットで、トップページ、商品ページ、サンキューページなど、できるだけ多くの種類のShopifyページをチェックした。以下は、私のエキサイティングな観察の一部である！

1.マスター＆ダイナミック

Master & Dynamicの製品ページは、「大胆」、「エレガント」、「リュクス」の真の定義を表している。同ブランドのヘッドホンのディテールをクローズアップした写真は、その商品の品質と丁寧さをアピールしている。

さて、この商品ページは通常のものとは異なります。一見してわかる画像と説明的な商品名だけで、カートに入れるボタンもなければ、詳細な商品情報もない。メインのショッピングカートに行くには、下にスクロールしなければなりません。

スクロールするにつれて、ヘッドホンが何でできているのか、どんな高度な機能を備えているのか、どのようにコントロールするのかなど、細部までこだわったヘッドホンの設計が見えてくる。 

ページ上部にあるバッグに追加バーは、体験の邪魔にならない程度に控えめだが、このヘッドホンを自分だけのものにできることを常に思い出させてくれる。購入したい場合は、わざわざ上までスクロールして体験を中断する必要はない。 

2.ハッピースキンコ

脱毛ハンドセットを販売するHappySkinCoは、ウェブ上であなたの見た目を美しく清潔に保つ方法を確かに知っている（文字通り！）。

イメージは、健康的なライフスタイルを購入する若い男女を登場させ、製品を使用している様子を紹介している。ターゲット顧客に語りかけるのに、これ以上の方法があるだろうか？

同社のホームページを少し下にスクロールすると、ソーシャルプルーフがまたたくさん表示される。ユーザーのソーシャルメディア画像を表示することで、HappySkinは顧客レビューをリアルタイムで更新するだけでなく、潜在的な購入者になるかもしれない美容愛好家のコミュニティを作り出している。

彼らのお店は数種類の商品だけに特化しているので、ホームページにこのようなショップボタンを追加することにしました。割引と行動喚起のボタンは視覚的に魅力的だ！

3.流れ

Flowは季節ごとにランディングページを用意し、養蜂のヒントを紹介している。この戦術により、1年を通して特定の訪問者をターゲットにすることができる。

位置情報をカスタマイズできるヘッダーバーによって、Flowは世界中の顧客との距離をさらに縮めることができる。以下は、完璧なテスティモニアルとして使用されたケーススタディです。

スクロールするたびに、情報セクションと魅力的な行動喚起ボタンが表示される。いくつかの行動喚起や表現があるにもかかわらず、メッセージや目標は一貫している。

画像の使用はフローの重要な武器である。日常的に使用されている商品の生き生きとした写真を見せることで、消費者と自然物とのつながりを強調している。さらに、照明も実に的を得ている。

4.贅沢な髪

Luxy Hairは人毛のエクステンションを販売しているので、顧客のほとんどが女性であることは想像に難くない。この商品にはさまざまなバリエーションがあるため、買い物客はまず髪の太さを選び、次に色を選び、さらにクイズ形式の質問に答えるという、自分に最適なものを選ぶ旅に出ることになる。

一連の質問に答えると、買い物客は（理想的には）まさに探していたものを含む特定の商品ページにたどり着く。

ポップアップ通知は、顧客情報を収集する直接的な方法として割引を利用している。これはまた、後にLuxy Hairがパーソナライゼーションゲームを全開にするのに役立つだろう。

お客様の声には、美容業界のビッグネームやお客様の写真が含まれています。信頼を築くには最高の方法だ！

フッターのニュースレター登録ボックスは、Luxy Hairのホームページの最後の仕上げです。割引や情報満載の読み物は、美容愛好家にとってノーと言うのは難しい！ 

5.ショップファイ

Shopifyの無料トライアルランディングページは、あなたにサインアップしてもらうことを使命としている。ランディングページのベストプラクティスに忠実に、CTAボタンはページ全体で1つだけだ："無料トライアルを開始する"。このボタンはヒーローに一回表示され、一番下にもう一度表示されます。 

ダブルCTAは効果的な戦略です。準備のできた訪問者にとっては、ページの一番上に明確かつシンプルに表示される。もう少し説得力が欲しい人は、スクロールしてShopifyのセールスポイントを見ることができる。一番下まで来ると、彼らはこのページの唯一の目的を思い出し、スクロールバックすることなくサインアップする機会が与えられます。

6.うんちプーリー

PooPourriは、ほとんどの人が公に話したがらないようなことに楽しいアプローチで取り組んでいる！

商品ページでは、簡潔な商品説明、わかりやすい画像、大胆な色使いを組み合わせ、買い物客がトイレ用スプレーが必要かどうかを判断するのに必要な情報を提供している。 

素敵なアドオンは、"Most Poopular Products "と呼ばれる関連商品の推奨です。これは、顧客がオンラインショッピングで期待するものとなっており、現在のオプションが不要な場合、あなたのストアで別の製品を見つけるのに役立ちます。 

PooPourriには、スプレーの使い方を紹介する「How it Works」ビデオもあります。ご質問がある場合は、チャットウィンドウをクリックして、カスタマーサービス担当者と話すことができます。

7.僧侶マニュアル

和尚マニュアルのお礼のページの半分は、紹介プログラムについて書かれている。そこには、顧客が到達できるマイルストーンと、15人の紹介という最終ゴール、そして紹介者がその過程で獲得できるすべての特典が明確に示されている。このような視覚的な方法でプログラムの完全な進行を示すことは、顧客を乗せる素晴らしい方法である。

紹介による顧客ベースの構築はもちろんのこと、Monk Manualはソーシャル共有ボタンもページに追加している。これは、顧客が新しい購入を自慢したくなる可能性があり、Monk Manualがリーチできる潜在的な新規顧客が増えることを意味するため、強力である。

結論

Shopifyのランディングページの技術をマスターすることは、コンバージョンを高め、売上を促進したいビジネスにとって不可欠です。さまざまなタイプのランディングページを理解し、デザインと最適化のベストプラクティスに従うことで、訪問者を顧客に変える魅力的な体験を作り出すことができます。

よく練られたランディングページは、ビジネス目標を達成するための強力なツールであることを忘れないでください。様々なランディングページのデザインを試し、結果を追跡し、Shopifyストアの可能性を最大化するために継続的にアプローチを改良していきましょう。

高コンバージョンのモバイル・ランディングページを作る7つのコツ（6つの例を含む）