PageFly 製品ページ: 15 以上の例とヒント (2024 年更新)

Shopify の製品ページは、ギャラリーにランダムに放り込まれた退屈な写真の集まりであってはなりません。

ニールセン・ノーマン・グループによると、オンライン購入の半分は最初のクリックから28分以内に発生し、75%は24時間以内に、90%は12日目までに発生し、残りは4週間以上かかります。

購入の決定は、ほとんどの場合、30 分以内に行われます。信じてください、それはあなたが思っているよりも短い時間で、しかも非常に複雑です。購入の決定には、商品ページを閲覧し、ショップ間を移動し、比較し、商品をカートに追加し、そして支払いをするという一連の作業が含まれます。

したがって、商品ページは訪問者を遠ざけるものであってはなりません。代わりに、Shopify の商品ページは、訪問者をすぐにカートに追加したり支払いページに誘導するショートカットである必要があります。

このブログ記事では、 PageFly で作成された Shopify 製品ページのトップ 15 以上を厳選し、なぜそれが素晴らしい効果を発揮すると考えているのかを説明します。

ここでのアプローチは、私が常連客になって、ページを上から下まで気軽にスクロールするというものです。私 (そしてあなた) がそこに留まる理由を見てみましょう!

PageFly 製品ページのトップ 15 の例

1. ケミモト

• ページの上部は色が一貫しています。ブランドがロゴにわずかに赤を選び、それをテキスト、ソーシャルメディアのハンドル、ボタンなどにも取り入れているところが気に入っています。
• ナビゲーション ペインはわかりやすく、ナビゲートできます。サイト上のどこにいるかがわかれば、簡単に別のページに移動して、さらに探索することができます。たとえば、ここでは Can-Am Maverick X3 のパーツとアクセサリのコレクションにアクセスできます。
• プレミアム製品に関しては、ページは単なる詳細を表示するだけでなく、情報を提供することで販売しています。スクロールしていくと、詳細な説明、特典、配送ポリシー、そしてクールなボーナスとしてのビデオやアニメーションに夢中になっていることに気づきます。

アニメーション：

2. ビジネス＆プレジャー株式会社

• 情報ボードは、説明と仕様の 2 つの部分に分かれています。Kemimoto と同様に、ここでの製品概要は、非常に有益な情報を提供しながら、感情を呼び起こします。

• PageFly の「おすすめ商品」リストは、ビーチで遊ぶ女性に関連商品を探してさらに購入するよう促します。同時に、下のナビゲーション ペインは、ユーザーが戻ってコレクション全体を見るのに役立ちます。
• PageFly に組み込まれている Yotpo アプリの功績です。Business&Pleasure Co. は、ユーザーの Instagram 写真を PageFly スライドショーにエクスポートすることで、旅行したい、自由になりたい、見た目を良くしたいという欲求を呼び起こし、ほぼすべての女性をターゲットにしています。

3. チャー・グリラー

• こんな時、友達と出かけたくない。Char Griller に行くと、コロナウイルス危機が終わったら楽しい時間を過ごせると思わせてくれる。そこらじゅうに撒かれた赤いスプレーと食べ物の写真から始まる。

• 商品のメイン画像には、食べ物やパーティーの写真が添えられています。商品の説明も、長い言葉ではなく、説明ビデオで説明されています。
• 関連商品（Char-Griller 5555 グリルカバー）へのリンクは、詳細表示トリガーです。

• 説明の最後にある 3 つの行動喚起は、それぞれ顧客をサポート サイトに誘導します。「部品が必要です」と「カバーが必要です」の呼び出しはコレクションに誘導し、もう 1 つはマニュアルに誘導します。
• マーチャントはHTML/Liquid要素を使用して、外部のコードでライブページにカスタムコンテンツを表示できます。

• ここでの教訓は何でしょうか?製品ページで何を見たいのか、自分自身に問いかけてください。製品そのものだけでしょうか?

• カートに追加ボタンだけでは十分ではありません。顧客が機会を逃してしまい、後で時間を戻してより良い選択をしたいと考える場合もあります。
• PageFlyエディタでWiserを直接参照することで、すべての買い物客にパーソナライズされた商品のおすすめを簡単に表示できます。
• 「閲覧した製品」タブでは、まさにそれが可能です。

4. エムドライブ

• おそらく、医療情報を興味深く読める数少ない製品ページの例の 1 つです。
• Mdrive は、PageFly アニメーションを最大限に活用して、上から下まで重要な情報ブロックに注意を向けさせます。
• 「フラッシュ」、「フェードイン」など、さまざまなエフェクトが機能します

• サプリメントのボトルボックスは、左側の縦方向の画像リストのおかげで、あらゆる角度から見ることができます。このようにパッケージを見せることで、潜在的な購入者は医薬品に含まれる成分を詳しく見ることができます。
• あいまいなブランド約束ほど、顧客を遠ざけるものはありません。特に医薬品に関してはそうです。わかりやすい説明画像と説明ページへのリンクにより、Mdrive は信頼性を証明しています。
• デザインは多少異なりますが、これらのページは PageFly の通常のページ タイプと同じ柔軟な基盤に基づいて開発されています。

• 信頼の要素

• PageFly に組み込まれたサードパーティ製アプリが常にあなたの役に立つことを忘れないでください。この場合、レビュー セクションが完全に透過的に表示され、訪問者にとってページがより説得力のあるものになります。

5. ガブリエル・アッシュ

• ミニマリズムの Shopify 製品ページの例を探しているなら、次の製品ページは素晴らしいデモンストレーションです。店主は建築のバックグラウンドを持っており、ページの構成にも建築の知識を駆使していることは明らかです。
• 注意: Gabriel Ash は実際の住宅モデル (家、建物など) を販売しています。価格帯は非公開ですが、これはこのニッチ市場では当然のことです。したがって、ここでのすべてのタッチポイントは、直接対面での話し合いにつながる可能性があります。
• バナーはパンフレット注文ページにつながります

• 多くの要素（「フォーム」を含む）をPageFlyの「タブ」内に挿入できます。

• 関連商品にポップアップ バブルを表示すると、ページ全体がより生き生きとした印象になります。私としては、詩的なモデルを背景にした CTA ボタンという、以下の 2 つの提案のほうが気に入っています。
• 芸術的な雑誌をデザインするのと同じように、PageFly はユーザーにページをカスタマイズする柔軟性を提供します。具体的なアイデアがあれば、最高の Shopify ページ ビルダーが視覚化を最高のものに仕上げるのに役立ちます。

6. アクティブ5

• 特定の製品について詳しく説明する前に、展示されている製品は 5 つだけであることに留意してください。オーナーは、それぞれの製品について独自のコンテンツを厳選するのに本当に時間を費やしました。

• セール品や関連商品のスライドショーを含む商品詳細

• 福利厚生パッケージとお客様の声を掲載した2つのセクション

• それでは、各製品ページから重要なポイントをいくつか見てみましょう。価格が高額な製品や、製品ユニットが小さい製品の場合、連絡フォームへの CTA ボタンは、セールス & マーケティング ファネルに適したオプションです。

• 高価なテクノロジー製品の場合、顧客が立ち寄って製品を手に取りたいと思う可能性があるため、実店舗を持つことが重要です。Activbody のように、説明に実店舗へのリンクを添付できます。

7. ラフネック

• フライアップアニメーションは、ページに入った瞬間から、PageFly エディターのどこからでもアクティブ化できます。しかも、読み込み速度はそれほど長くかかりません。

• 上記の他のページとは異なり、ここでは商品写真が縦向きに配置されています。

• 3つのアコーディオン

8. ワイルドバウンド

• 同じ垂直配置は、Wildbounds のキャンプ用品にも適用されています。販売者はこの構造を参考にして、商品の高さを強調することができます。

• 注意すべき点が 1 つあります。製品の色を選択すると新しいページが開き、読み込みに時間がかかります。ページの切り替え時間を短縮するために、製品バリアントにすることをお勧めします。
• もう一つの製品ビデオが来ました
• 上記のバナーとは異なり、Wildbounds はプロモーション バナーをページの中央に配置しています。これは、顧客が他の製品を探し始めるときに情報を提供するためです。[今すぐ購入] ボタンをクリックすると、新しい製品に戻り、ショッピング サイクルがスムーズに再開されます。

9. アルティプラント

• 垂直配置と、それが商品の高さに焦点を合わせるのにどのように役立つかについて、私はかなり詳しく話してきました。しかし、Artiplanto は、そのセンスの良い目でそれを少し違った方法で設計しています。
• スクロールするたびに商品画像がスライドアップします。

• 興味深いことに、画像をクリックすると、対応する画像に自動的にスクロールします。これは、属性と「固定セクション」を使用することで実現できます。

• FOMO 効果のカウントダウン タイマーを忘れないでください。

10. ウォータードロップ

• 商品ページも商品そのものと同じくらい美しいです。

• この製品には 10 色、つまり 10 種類の製品バリエーションがあります。製品バリエーションを使用することで、Waterdrop の製品ページは Wildbounds の製品ページよりも読み込み時間が短くなります。
• このストアのマーチャントはスライドショーの大ファンのようです。製品のプレゼンテーション、実績、レビューなど、すべてがスライドで表示されます。Pag​​eFly の要素リストからドラッグ アンド ドロップするだけです。

• 便利なアコーディオンやセール品のほかに、美しいコレクションのバナーがユーザーにクリックしてさらに見るように促します。

11. マグアジャスタブル

• この商品ページは、すっきりとしたレイアウトと、帽子の特徴を示す魅力的な商品画像でうまくデザインされています。色の配色も目に優しく、商品によく合っています。

• PageFly で作成されたアコーディオン レイアウトにより、顧客は製品のすべての機能を簡単に確認できます。これらの機能の利点も強調されているため、実用的で機能的な帽子を探している潜在的な顧客にとって役立つ可能性があります。

• 製品の透明なレイアウトは、間違いなく目を引くユニークなものです。製品の品質と機能を視覚的に魅力的な方法で紹介できるのは素晴らしいことです。

• また、製品ページにソーシャル メディア チャンネルを掲載することで、顧客がブランドに親しみやすくなっています。

12. トラディネット。

• 店主は、ビジネスの構築とウェブサイトの関連付けの専門的な経歴を持ち、デザインも大好きなので、メインのレイアウト スタイルが 1 つの長いページ レイアウトである製品ページを作成しました。1 つの長いページ レイアウトには、シンプルさ、デザインのしやすさ、創造性など多くの利点があり、顧客に必要なすべての情報を提供します。
• アコーディオンを製品ページに巧みに組み込むことで、膨大な量の情報が効果的に整理され、すっきりとしたユーザーフレンドリーなレイアウトが実現し、閲覧者がコンテンツにアクセスする際に圧倒されることがなくなります。
• 製品ページでは、優れた製品画像に投資し、垂直折りたたみレイアウトを使用して製品ページのレイアウト デザインを最小限に抑えています。これにより、顧客は最初に製品に集中し、購入を決定したり、追加の情報が必要になったりしたときに、折りたたまれたアコーディオン内で簡単に見つけることができます。

13. ブリックビジネスフリート

• 店主はデザイン、特に製造業のバックグラウンドを持つため、店内のレイアウトは非常にミニマルで、販売している製品などの製品のハイライトを簡単に把握できます。
• 商品ページにはカラー スウォッチ機能があり、商品には 1 色しかありませんが、これによりサイトがよりプロフェッショナルになります。将来、商品に複数の色がある場合は、カラー スウォッチを使用すると、画面に直接表示されるカラー スウォッチを確認するだけで済むため、ドロップダウンで色を選択したり、色を覚えたりする時間を無駄にすることがなくなり、より効果的になります。
• 多くの製品オプションを表示することで、顧客が製品を訪問して購入する際に選択肢が増えます。これは効果的な販売方法であり、売上の増加に役立ちます。

• Brick と Business Fleet では、常に製品の仕様を表示するための専用セクションを設けています。Pag​​eFly の Click Action 機能を使用して、ボタンをクリックするだけでパンフレットが表示される製品パンフレットを提供しています。

14. ジョイルクリニック

業種: 美容・スキンケア

重要なポイント

• 最大限の明瞭性と読みやすさを確保するために、Joile Clinic は箇条書きとアコーディオン要素を組み合わせて製品の説明に製品情報を表示しています。このアプローチにより、顧客は重要な詳細をすばやく把握できると同時に、必要に応じてより包括的な情報にアクセスできるようになります。

• Joile Clinic は、メイン製品の下に製品リストを表示することで、製品ページにアップセルとクロスセルのテクニックを実装し、ショッピング体験を向上させます。この戦略により、顧客は追加のオプションを調べ、補完的な製品を見つけることができます。

• CTA は、顧客の関心を引き付け、行動を促すように設計されています。これにより、顧客は希望する治療を予約し、Joile Clinic の贅沢を体験するようになります。

15. ピークプレイス

業種: アウトドアとアドベンチャー

重要なポイント

• PeakPlace は、注目を集め、緊迫感を演出し、商品の認知価値を高めるために、商品ページの上部にセールバナーを追加しました。これにより、効果的にコンバージョンを促進し、顧客に購入を促すことができます。

• PeakPlace は、製品価格を戦略的に強調し、価格が簡単に目につき、元の価格との比較が添えられるようにしています。製品価格をこのように目立つように表示することで、訪問者を楽々と引き付けることができます。さらに、価格がはっきりと見えるため、訪問者は製品のこの重要な側面を簡単に評価できます。

• PeakPlaceは、製品に対する信頼を高めるために、ユーザー評価の平均と顧客レビューの両方を示しました。

16. インフラヒール

業界： 医療機器

重要なポイント:

• 当社の製品ページ例のリストにあるINFRAHEALは、さまざまな角度から多くの製品画像を使用しています。このストアは、視覚的な評価を容易にするために、人体モデルの画像も提供しています。

• INFRAHEALは、商品ページに「カートに追加」や「今すぐ購入」などの目立つ魅力的なCTAボタンを、目立つ色のコントラストで追加することで、訪問者を引き付け、行動を促すことができます。

• INFRAHEAL は、コンテンツ リスト要素を使用して視覚的な階層、記憶保持、読みやすさを作成し、ユーザー エクスペリエンスを向上させて訪問者を顧客に変える可能性を高めることで、製品の利点を強調しました。

• INFRAHEALは、製品に対する信頼を高めるために、ユーザー評価平均と顧客レビューの両方を示しました。

17. フィールー

業種: マタニティウェア

重要なポイント:

• 他の製品ページの例と同様に、Feelou は、視覚的な評価のしやすさを高めることを目的として、人間モデルをフィーチャーした画像を含む、さまざまな視点から撮影された多数の製品画像を活用しました。

• Feelou は、リスト要素とアコーディオン要素を組み合わせて、製品の詳細と追加情報を一貫した方法で提示し、さまざまな読者の好みに対応し、製品の属性と利点を包括的に把握できるようにします。

• Feelou は、コンテンツ リスト要素を使用して、信頼バッジをシームレスに表示します。これには、信頼性、信用、コンバージョン率を高めるセキュリティ シール、配送保証、支払いアイコンの組み込みが含まれます。

• Feelou は、製品ページにお客様の声のセクションを追加することで、実際の顧客体験を紹介し、信頼を築き、貴重な社会的証明で潜在的な購入者に影響を与えます。

18. ウェケイ

業界: 美容・パーソナルケア

重要なポイント:

• WEKAY は、カラーバリエーションのセレクターとして見本を使用し、顧客が好みの製品オプションを視覚的かつ直感的に選択できるようにしています。

• WEKAYは戦略的に商品価格を強調し、簡単に目立たせ、元の価格との明確な比較を提供します。

• WEKAYはアコーディオンを使用してFAQセクションを作成し、顧客の質問を明確にするのを支援しています。

• WEKAY は進捗状況要素を利用して、自社製品の追加統計情報を効果的に提示しています。このアプローチは情報を伝えるのに最適で、コンバージョン率を大幅に向上させることができます。

待って、それで今何するの？

商品ページの主な機能は、画像、詳細、価格、ATC ボタンなどで商品を定義し、それによって顧客に購入の決定を促すことであるということに同意しましょう。

顧客のために最高の製品ページをデザインしているなら、言うほど簡単ではないことはご存知でしょう。当社のトップの Shopify 製品ページの例は、標準的な製品ページのルールに従っています。さらに、各製品ページのデザイン インスピレーションは、PageFly の追加機能を最大限に活用することで、同時に斬新なものを生み出します。

注: 私たちはあなたの仕事をサポートするためにマーケティング担当者と開発者の多様なチームを持っています

出発前に、以下のプロのヒントを復習しましょう。

最高の商品ページを作成するためのヒント

PageFly製品ページでビデオを使用する

製品ページでビデオを使用するべきですか?

はい、3000 倍です! PageFly の各製品ページ テンプレートでは、最高の視覚補助を活用するためにビデオ要素が使用されています。

製品ビデオは、製品のメリットを効果的に示す説明ビデオです。

写真と説明が理論的な関連性を提供する場合、ビデオは顧客が製品の使用状況や動きを見ることができる場所です。

プロのヒント:多くの製品ビデオは製品の機能に焦点を当てていますが、顧客が遭遇する可能性のある問題点を製品がどのように軽減するかに焦点を当てましょう。

PageFly Lazyloadを使用して読み込み速度を最適化する

インタラクティブな商品ページに関してほとんどの販売者が懸念するのは、読み込み速度です。

ページのパフォーマンスを損なうことなく、さまざまな PageFly ページ タイプで動く効果を作成するにはどうすればよいでしょうか?

ページに Lazy-load を使用すると、ページの読み込み時間が 10 ～ 30% 短縮されます。

モバイルマインドにPageFly製品ページテンプレートを使用する

このデジタル時代では、モバイルを意識することは常識であるべきです。店舗から店舗へ移動するには、画面を 1 回タッチするだけで済むため、顧客が閲覧の途中でやめることが容易になります。

さまざまなデバイスに対応した製品ページのデザイン方法については、こちらをご覧ください。

PageFly の製品ページ テンプレートを使用すると、ストアのモバイル フレンドリー性を確保できます。当社の 100 を超えるテンプレートは、モバイル レスポンシブに最適化されています。

激励はこれで終わりです。次は、PageFly を使用して、すべての製品ページの固定観念を打ち破る時です。

最後にもう 1 つ: PageFly を使用して Shopify クライアント ストアを設定している場合は、PageFly アフィリエイト プログラムで追加の収入を得ることができることを知っておくと便利です。フリーランスの YouTube コンテンツ クリエイターでも、代理店でも、このプログラムは誰にとっても同様に有益です。