埋め込み

FlipLinkの機能

iframeや埋め込みコードを使用して、フリップブックを別のWebサイト内にインラインで表示する機能です。

定義

埋め込み(エンベッド)とは、[iframe](/glossary/iframe)やJavaScriptスニペットを使用して、フリップブックやドキュメントビューアーを別のウェブページ内に直接配置するプロセスです。埋め込まれたコンテンツはホストページ内にインラインでレンダリングされ、ページめくり、ズーム、検索、ナビゲーションコントロールなど、すべてのインタラクティブ機能が直接閲覧時と同様に動作します。ビューアーはホストページのDOM内に読み込まれるため、読者はサイトを離れることなく、ブラウザバーにサードパーティのドメインが表示されることもありません。

重要な理由

パブリケーションを外部リンクではなく埋め込みで表示すると、訪問者を自社の閲覧体験内に留めることができます。これが重要な理由は3つあります。第一に、サイトに留まる読者はフォームの入力、[CTAボタン](/features/cta-buttons)のクリック、関連ページの閲覧など、次のアクションを取る可能性が高まります。第二に、ページ滞在時間や[スクロール深度](/glossary/scroll-depth)などのエンゲージメント指標が自社ドメインに帰属され、SEOに有利に働きます。第三に、埋め込まれたコンテンツはページの自然な流れの中に表示されるため、外部リソースではなく自社ブランドの一部として認識されます。

FlipLinkでの使い方

FlipLinkの[共有と配信](/features/sharing-and-distribution)機能は、各パブリケーションに対してコピー&ペースト可能な[埋め込みコード](/glossary/embed-code)を生成します。デフォルトオプションは、あらゆるコンテナ幅に合わせて自動調整される[レスポンシブ埋め込み](/glossary/responsive-embed)iframeで、手動でのサイズ調整なしにデスクトップ、タブレット、スマートフォンで正しく表示されます。CTAボタン、[リードキャプチャ](/features/lead-capture)フォーム、[分析](/features/analytics-and-insights)トラッキング、[パスワード保護](/features/password-protection)など、設定済みのすべての機能が埋め込み内で動作します。iframeをブロックするプラットフォーム(一部のメールクライアントやSNS)向けに、FlipLinkは[クリッカブル画像埋め込み](/features/clickable-image-embed)をフォールバックとして提供しています。また、[ドメインホワイトリスト](/glossary/domain-whitelisting)を使用して、パブリケーションの埋め込みを許可するサイトを制限できます。

技術的な詳細

埋め込みリンクは通常、パブリケーションのホストURLを指すHTML `<iframe>` タグとして提供されます。iframeはサンドボックス化されたブラウジングコンテキストで実行されるため、親ページのCookieやJavaScriptスコープにアクセスできません。これは、パブリッシャーとホストサイトの両方にセキュリティレイヤーを提供します。FlipLinkの埋め込みコードには、読者がビューアーを拡大できるよう `allow="fullscreen"` が含まれており、`loading="lazy"` を使用してiframeがビューポートに入るまで読み込みを遅延させ、ホストページの初期レンダリングを遅くすることを防ぎます。iframeタグを除去するシングルページアプリケーションやCMSプラットフォーム向けには、DOM読み込み後にiframeを動的に作成するJavaScriptスニペットも利用可能です。

ベストプラクティス

- **コンテナ幅をコンテンツの目的に合わせる。** カタログや雑誌にはフル幅の埋め込みが適しています。ブログ記事内の補足コンテンツには、より狭いコンテナ(600〜800px)が周囲のテキストとのバランスを保ちます。 - **遅延読み込みを使用する。** リソースライブラリなど、1ページに複数のフリップブックを埋め込む場合、遅延読み込みにより全フリップブックが同時にアセットを要求することを防ぎます。 - **最小高さを設定する。** 最小高さがないと、一部のCSSフレームワークでiframeがゼロに縮小されることがあります。400〜500pxの値を設定することで、コンテンツ読み込み中のレイアウトジャンプを防止できます。 - **ドメインホワイトリストを有効にする。** パブリケーションに機密コンテンツやゲート付きコンテンツが含まれる場合、埋め込みを自社ドメインのみに制限し、第三者によるiframeジャッキングを防止します。 - **モバイルでテストする。** レスポンシブ埋め込みは幅に適応しますが、ピンチズームやスワイプでのページめくりなどのタッチ操作が実際のデバイスで正しく動作することを必ず確認してください。

よくある質問

**FlipLinkのフリップブックはどのウェブサイトビルダーにも埋め込めますか?** はい。カスタムHTMLを追加できるプラットフォーム — WordPress、Wix、Squarespace、Webflow、Shopify、または手動コーディングされたサイト — はすべてFlipLinkのiframe埋め込みコードに対応しています。ブロックエディターを使用するプラットフォームでは、HTMLまたは「カスタムコード」ブロックにコードを貼り付けてください。 **埋め込みはページ速度に影響しますか?** FlipLinkの埋め込みコードはデフォルトで遅延読み込みを使用するため、フリップブックは訪問者がその近くにスクロールした時のみ読み込まれます。ページの初期読み込みには影響しません。iframeが読み込まれると、アセットはFlipLinkのCDNから配信され、読者の場所に関係なく高速な配信が維持されます。 **埋め込みとリンク共有の違いは何ですか?** 埋め込みはフリップブックをページ上に直接表示し、読者がインラインで操作できるようにします。[リンク共有](/glossary/link-sharing)は読者を別のURLに誘導し、フリップブックがフルスクリーンで開きます。埋め込みは訪問者をサイトに留めるのに適しており、リンク共有はインラインレンダリングが不可能なメールやメッセージングなどのチャネルに適しています。

関連用語

関連機能

他の言語で利用可能

PDFを
もっと活用しませんか?

FlipLinkを活用して、PDFから魅力的でインタラクティブなコンテンツを作成している多くの企業に加わりませんか。クレジットカード不要で無料スタートできます。