WixサイトにFlipLinkフリップブックを埋め込む方法

Wixではコードを書かなくても洗練されたウェブサイトを簡単に構築できますが、フリップブックのようなインタラクティブコンテンツの追加は最初は難しく感じるかもしれません。しかしご安心ください。WixサイトへのFlipLinkフリップブック埋め込みはわずか数分で完了し、コーディング経験は不要です。

このガイドでは、FlipLinkから埋め込みコードを取得し、Wixエディターに配置し、すべての画面サイズで美しく表示されるよう微調整する方法を解説します。

Wixサイトにフリップブックを埋め込む理由

ダウンロードリンクの奥に埋もれた静的PDFでは、訪問者のエンゲージメントを得られません。埋め込みフリップブックなら、リアルな3Dページめくりアニメーションでページ上のコンテンツを直接めくることができます。つまり以下のようなメリットがあります。

• エンゲージメント向上 — 訪問者がPDFビューアーに移動する代わりにコンテンツと直接やり取りします
• ページ滞在時間の延長 — インタラクティブ要素が閲覧を促進します
• プロフェッショナルなプレゼンテーション — カタログ、ポートフォリオ、マガジン、パンフレットがフリップブックとしてはるかに洗練された見た目になります
• ダウンロード不要 — すべてブラウザ内で読み込まれます

商品カタログ、会社レポート、デジタルマガジンのいずれを紹介する場合でも、埋め込みはリンク共有を常に上回ります。

必要なもの

始める前に、以下を準備してください。

1. 少なくとも1つの公開済みフリップブックがあるFlipLinkアカウント（まだの場合はこちらでサインアップ）
2. ウェブサイトのWixエディターへのアクセス
3. FlipLinkからのフリップブックの埋め込みコードまたは共有URL

以上です。プレミアムWixプラグインやサードパーティアプリは不要です。

ステップ1：FlipLinkから埋め込みコードを取得する

まず、表示したいフリップブックの埋め込みコードを取得します。

1. go.fliplink.meのFlipLinkダッシュボードにログインします
2. 埋め込みたいフリップブックを開きます
3. ツールバーのShareボタンをクリックします
4. Embedタブを選択します
5. 提供されるiframe埋め込みコードをコピーします

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

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

FlipLinkがすぐに使えるiframeスニペットを提供するので、手動で構築する必要はありません。埋め込みオプションの詳細については、共有・配信の機能ページをご覧ください。

ステップ2：WixでHTML埋め込み要素を追加する

Wixのサイトエディターに切り替えます。

1. サイトのWixエディターを開きます
2. フリップブックを表示したいページに移動します
3. 左ツールバーの**追加（+）**ボタンをクリックします
4. メニューからEmbed Codeを選択します
5. Embed HTMLを選択します
6. グレーのHTMLウィジェットがキャンバスに表示されます — ページ上の目的の位置にドラッグします

このウィジェットがフリップブックの表示場所になります。

ステップ3：埋め込みコードを貼り付ける

1. 配置したHTML埋め込みウィジェットをクリックします
2. Enter Codeを選択します
3. モードがHTMLに設定されていることを確認します（URLではありません）
4. FlipLinkからコピーしたiframe埋め込みコードを貼り付けます
5. UpdateまたはApplyをクリックします

ウィジェット内にフリップブックが表示されるはずです。Wixエディターのプレビューでインタラクティブビューアーを直接確認できます。

ステップ4：フリップブックのサイズ変更と位置調整

デフォルトのiframeサイズがページレイアウトに完全に合わない場合があります。以下はサイズ調整のヒントです。

適切な高さを設定する

ほとんどのフリップブックには500〜700ピクセルの高さが適しています。コンテンツが横向き（カタログの見開きなど）の場合は高め（650〜700px程度）にし、縦向きドキュメントの場合は500〜600pxで通常は十分です。

全幅にする

フリップブックをコンテンツエリア全体に広げるには、ウィジェット幅をページのコンテンツカラムに合わせます。Wixエディターで、HTMLウィジェットの端をドラッグして利用可能なスペースを埋めるか、Wixテンプレートが対応していればStretchレイアウトオプションを使用します。

レスポンシブに関する注意点

Wixは従来のHTMLとは異なるレスポンシブ動作をします。いくつか注意点があります。

• クラシックWixエディターでは、HTML埋め込みウィジェットはモバイルで自動的にリサイズされません — モバイル版を別途調整する必要がある場合があります
• WixモバイルエディターでHTMLウィジェットをクリックし、小さい画面用にリサイズします
• 埋め込みコードのiframe幅を100%に設定して、Wixが提供するコンテナを埋めるようにします
• モバイルでフリップブックが画面全体を占めないように、高さを400〜500pxに減らすことを検討してください

Wix Studio（旧Editor X）を使用している場合は、レスポンシブブレークポイントをより細かく制御でき、ウィジェットを流動的にスケーリングするよう設定できます。

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

フリップブックのセキュリティのためにドメイン制限を有効にしている場合は、Wixドメインをホワイトリストに登録して埋め込みが正しく読み込まれるようにする必要があります。

1. FlipLinkダッシュボードに移動します
2. フリップブックの設定を開きます
3. ドメインホワイトリストセクションに移動します
4. Wixサイトのドメインを追加します（例：www.yourbusiness.comまたはyourusername.wixsite.com）
5. 変更を保存します

ホワイトリストを設定しないと、訪問者にフリップブックの代わりにブロックメッセージが表示される場合があります。Wixに接続したカスタムドメインを使用している場合は、デフォルトの.wixsite.comアドレスではなくそのドメインをホワイトリストに追加してください。

よくある問題のトラブルシューティング

エディターにフリップブックが表示されない

• 埋め込みウィジェットで「Website Address」モードではなくHTMLモードを選択しているか確認してください
• FlipLinkでフリップブックが公開済み（下書きではない）であることを確認してください
• iframeのsrc URLが正しく、通常のブラウザタブでアクセスできることを確認してください

フリップブックが表示されるが切れている

• Wixエディターで HTML埋め込みウィジェットの高さを増やしてください
• iframeのwidth属性が100%に設定されていることを確認してください
• Wixレイアウトの親コンテナがウィジェットをクリッピングしていないか確認してください

フリップブックが白い空白のボックスとして表示される

• フリップブックにドメインホワイトリストが有効になっている可能性があります — 許可リストにWixドメインを追加してください
• ブラウザキャッシュをクリアしてページをリロードしてください
• フリップブックURLを新しいタブで直接開いて読み込まれることを確認してください

モバイルで埋め込みの見た目が異なる

• Wixのモバイルエディターに切り替えてウィジェットサイズを個別に調整してください
• 過度なスクロールを防ぐために、モバイル用にiframeの高さを下げてください
• Wixのモバイルプレビューは実際の動作と異なる場合があるため、実際のモバイルデバイスでテストしてください

代替手段：埋め込みの代わりにリンク

レイアウト的に埋め込みが理想的でない場合 — ページをすっきりさせたい場合やフリップブックが非常に長い場合など — リンクで代用できます。

1. FlipLinkから共有リンクをコピーします（埋め込みコードではありません）
2. Wixページにボタンまたはテキストリンクを追加します
3. フリップブックURLが新しいタブで開くようにリンクを設定します

このアプローチは以下の場合に適しています。

• 専用フリップブックページへのトラフィックを誘導するメールキャンペーン
• カタログやマガジンへの直接リンクを含むナビゲーションメニュー
• CTAボタン付きのすっきりしたヒーローセクションを好むランディングページ

Wixサイトに埋め込みフリップブックのみを含む専用ページを作成し、ナビゲーションや他のコンテンツからそのページにリンクすることも可能です。

Wixでのフリップブック体験を向上させるヒント

• ページに他の重要なコンテンツがある場合は、フリップブックをフォールド下に配置してください — 大きな埋め込みが重要な情報を押し下げてしまいます
• 埋め込みの上にコンテキストを追加して、訪問者が何を見ているか理解できるよう短い見出しと説明を入れましょう
• ローディングプレースホルダーを使用しましょう — 通信速度が遅い場合に備えて、ウィジェットの上に「フリップブック読み込み中...」のような短いテキストを追加します
• フリップブックを最適化しましょう — アップロード前にPDFを圧縮して、読み込み時間を短縮します
• 公開前に複数のデバイスでテストしてください — デスクトップ、タブレット、スマートフォンで表示を確認しましょう

関連ガイド

他のプラットフォームへのフリップブック埋め込みについては、以下のガイドで各プラットフォームの手順を解説しています。

• ウェブサイトにPDFを埋め込む方法
• WordPressにフリップブックを埋め込む方法
• iframeでフリップブックを埋め込む方法

今すぐフリップブックの埋め込みを始めましょう

WixサイトにFlipLinkフリップブックを設置するのは簡単です。埋め込みコードをコピーし、HTMLウィジェットにドロップし、サイズを調整して公開するだけ。全プロセスは5分もかかりません。

まだフリップブックを作成していない場合は、FlipLinkにサインアップして最初のPDFをアップロードしましょう。ライフタイムディールの詳細は料金ページでご確認ください — 一回の支払いでサブスクリプションなし、埋め込みコード、カスタムドメイン、アナリティクスを含むすべての機能にフルアクセスできます。