Shopifyストアにフリップブックを埋め込む方法

静的な商品画像だけでは、ストーリーの一部しか伝えられません。Shopifyストアを運営していて、商品カタログ、ルックブック、サイズガイド、ブランドマガジンをより魅力的な形式で紹介したいなら、インタラクティブなフリップブックの埋め込みが最も効果的な方法の1つです。訪問者はページを離れることなく、本物の本のようにページをめくることができます。

このガイドでは、FlipLinkフリップブックをShopifyに埋め込む方法を、埋め込みコードの取得から商品ページやカスタムランディングページへの配置まで解説します。

Shopifyでフリップブックを使う理由

Shopifyは商品販売のための強力なツールを提供していますが、複数ページのビジュアルコンテンツに関してはネイティブコンテンツオプションに限界があります。フリップブックがそのギャップを埋めます。

• 商品カタログ — 静的なグリッドをスクロールする代わりに、ページめくりアニメーションでカタログ全体を閲覧できます
• ルックブック — ファッション、家具、ライフスタイルブランドが、シーズンコレクションを没入感のあるデジタルルックブックとして提示できます
• サイズガイド — 使いにくいPDFダウンロードの代わりに、商品ページでめくれるインタラクティブなサイズ表を提供できます
• ブランドマガジン — ブランドストーリー、舞台裏コンテンツ、特集記事をストア内で直接共有できます
• 卸売価格表 — B2Bバイヤーに別ポータルなしで価格を閲覧できるエレガントな方法を提供できます

フリップブックは訪問者のエンゲージメントを高め、直帰率を下げ、プレミアム感のある形式で商品を提示します。

ステップ1：フリップブックを作成する

埋め込む前に、フリップブックが必要です。まだ作成していない場合は以下の手順で進めます。

1. go.fliplink.meでサインアップします
2. PDFをアップロードします — 商品カタログ、ルックブック、その他の複数ページドキュメント
3. FlipLinkがリアルな3Dページめくりアニメーション付きのインタラクティブなフリップブックに自動変換します
4. 外観をカスタマイズし、Shopify商品へのリンク付きCTAボタンを追加し、共有設定を設定します

フリップブックが公開されたら、埋め込みコードを取得する準備が整います。

ステップ2：埋め込みコードを取得する

FlipLinkは公開されたすべてのフリップブックに標準のiframe埋め込みコードを提供します。

1. FlipLinkダッシュボードでフリップブックを開きます
2. Shareボタンをクリックします
3. Embedタブを選択します
4. iframeコードをコピーします

埋め込みコードは以下のようになります。

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

heightの値はShopifyテーマのレイアウトに合わせて調整できます。ほとんどのテーマでは500〜700ピクセルの高さがうまく機能します。

iframeの埋め込みオプションの詳細については、iframeでフリップブックを埋め込む方法のガイドをご覧ください。

ステップ3：Shopify商品ページに埋め込む

特定の商品ページにフリップブックを追加することで、静的なサイズガイドや商品仕様書を置き換えたり補完したりできます。

Shopifyテーマエディターを使用する場合

1. Shopify管理画面でOnline Store → Themesに移動します
2. アクティブなテーマのCustomizeをクリックします
3. 商品ページテンプレートに移動します
4. 新しいセクションを追加します — テーマに応じてCustom Liquid（またはCustom HTML）を選択します
5. iframeの埋め込みコードをコードフィールドに貼り付けます
6. フリップブックを表示したい位置にセクションを配置します（商品説明の下が一般的です）
7. Saveをクリックします

Metafieldを使った動的埋め込み

異なる商品ページに異なるフリップブックを表示したい場合は、Shopify Metafieldを使用します。

1. flipbook_urlという名前の商品メタフィールドを作成します（タイプ：URL）
2. 各商品のメタフィールドにフリップブックの埋め込みURLを貼り付けます
3. Custom Liquidセクションで以下を使用します。

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

このアプローチはテーマをクリーンに保ち、テーマコードを毎回編集することなく商品ごとにフリップブックを管理できます。

ステップ4：カスタムShopifyページに埋め込む

カタログランディングページやブランドマガジンセクションなどのスタンドアロンページの場合は以下の手順です。

1. Shopify管理画面でOnline Store → Pagesに移動します
2. 新しいページを作成するか、既存のページを編集します
3. ページエディターでShow HTMLボタン（<>アイコン）をクリックします
4. iframeの埋め込みコードをHTMLに直接貼り付けます
5. ビジュアルエディターに戻して正しく表示されることを確認します
6. ページを保存します

テーマエディターを使って任意のページテンプレートにCustom Liquidセクションを追加することもでき、配置やスタイリングをより細かく制御できます。

ステップ5：レスポンシブ対応にする

Shopifyテーマは多種多様なので、デスクトップとモバイルの両方でフリップブックが美しく表示されるようにしましょう。iframeをレスポンシブコンテナで囲みます。

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

padding-bottom: 75%は4:3のアスペクト比を作成します。フリップブックのページサイズに合わせてこの値を調整してください。

• 4:3比率（横向き）：padding-bottom: 75%
• 16:9比率（ワイド）：padding-bottom: 56.25%
• 3:4比率（縦向き）：padding-bottom: 133%

これにより、すべての画面サイズでフリップブックが適切にスケーリングされ、不自然なスクロールバーやコンテンツの切れを防ぎます。

ステップ6：商品へのCTAボタンを追加する

Shopifyストアにとって最も強力な機能の1つが、フリップブック内に商品ページへ直接リンクするCTAボタンを追加することです。これにより、カタログが受動的な閲覧体験からアクティブなショッピングツールに変わります。

FlipLinkエディターでの手順は以下の通りです。

1. フリップブックを編集モードで開きます
2. CTAを追加したいページを選択します
3. 「今すぐ購入」や「商品を見る」などのテキストでCTAボタンを追加します
4. リンクをShopifyの商品URLに設定します（例：https://yourstore.myshopify.com/products/product-handle）
5. カタログに掲載されている各商品について繰り返します

埋め込みフリップブックを閲覧中の顧客が気に入った商品を見つけたら、ワンクリックで商品ページに移動してカートに追加できます。発見から購入までの経路が大幅に短縮されます。

ステップ7：ドメインホワイトリストを設定する

フリップブックの埋め込み先を制限したい場合 — 例えば、自分のShopifyストアだけで他のサイトには表示させたくない場合 — ドメインホワイトリストを使用します。

1. FlipLinkダッシュボードでフリップブックの設定を開きます
2. ドメインホワイトリストセクションに移動します
3. Shopifyドメインを追加します（例：yourstore.comとyourstore.myshopify.com）
4. 設定を保存します

これにより、競合他社や無許可のサイトがフリップブックコンテンツを埋め込むことを防げます。特に、ストア外で公開アクセスさせたくない卸売カタログや限定ルックブックに重要です。

Shopifyフリップブック成功のヒント

**アップロード前にPDFを最適化しましょう。**ソースPDFの画像を圧縮してファイルサイズを抑えましょう。軽いフリップブックほど読み込みが速く、通信速度が遅いモバイルユーザーにとって重要です。

**説明的なページタイトルを使用しましょう。**FlipLinkの目次はPDFの構造から取得されます。整理されたチャプターにより、顧客は特定の商品カテゴリにすばやくジャンプできます。

**複数のデバイスでテストしましょう。**公開前にデスクトップ、タブレット、モバイルで埋め込みフリップブックをプレビューしてください。Shopifyのレスポンシブテーマはほとんどのケースに対応しますが、特定のテーマでレスポンシブラッパーが機能するか確認しましょう。

**エンゲージメントを追跡しましょう。**FlipLinkのアナリティクスでは、最も閲覧されたページや各見開きでの滞在時間を確認できます。このデータを使って、どの商品やセクションがオーディエンスに響いているかを理解し、カタログレイアウトを最適化しましょう。

**コンテンツを最新に保ちましょう。**新商品の追加やシーズンプロモーションの際にフリップブックを更新しましょう。埋め込みコードはそのままで、FlipLinkダッシュボードでフリップブックを更新するだけで、Shopifyストアに即座に反映されます。テーマコードを再度触る必要はありません。

**メールキャンペーンからフリップブックにリンクしましょう。**ストアへの埋め込み以外にも、マーケティングメールやソーシャルメディア投稿でフリップブックカタログの直接リンクを共有しましょう。FlipLinkの共有・配信オプションにより、複数チャネルからShopifyストアへのトラフィック誘導が簡単にできます。

ウェブサイト全般へのPDFやフリップブックの埋め込みについては、ウェブサイトにPDFを埋め込む方法のガイドをご覧ください。商品カタログをゼロから作成する場合は、デジタル商品カタログの作成方法もご確認ください。

Shopifyストアへのフリップブック埋め込みを始めましょう

Shopifyへのフリップブック埋め込みはわずか数分で完了し、顧客が商品コンテンツとやり取りする方法を一変させます。シーズンルックブック、包括的な商品カタログ、シンプルなサイズガイドなど、インタラクティブなフリップブックは静的な画像やPDFでは実現できないショッピング体験を生み出します。

無料でフリップブックを作成して、今すぐShopifyストアに埋め込みましょう。FlipLinkがあなたのビジネスにどう適しているか、料金プランをご確認ください。