レスポンシブ埋め込み

レスポンシブ埋め込みとは、埋め込みコンテンツを親コンテナやビューアの画面サイズに自動的にスケールする[埋め込みコード](/glossary/embed-code)スニペットです。固定サイズの[iframe](/glossary/iframe)は水平スクロールバーが発生したり空白ができたりしますが、レスポンシブ埋め込みはパーセンテージベースの幅とCSSのaspect-ratio技術を使用して、利用可能なスペースを流動的に埋めます。デスクトップモニターの1440ピクセル幅でもスマートフォンの375ピクセル幅でも、コンテンツのプロポーションが維持されます。このアプローチにより、埋め込まれたフリップブック、ドキュメント、動画、インタラクティブコンテンツが手動リサイズやデバイス固有のコードなしに、すべてのデバイスで正しく表示されます。

読者はさまざまなデバイスと画面サイズからコンテンツにアクセスします。埋め込まれたフリップブックがモバイルではみ出すと、読者は水平スクロールが必要になります — ページが最適化されていない強いシグナルです。ワイドスクリーンモニターで埋め込みが小さすぎると、コンテンツが読めなくなります。どちらの状況も直帰率を高め、ホストページの信頼性を損ないます。レスポンシブ埋め込みはこれらの問題を解消し、パブリケーションをあらゆる場所でプロフェッショナルかつアクセシブルに保ちます。また、コンテンツが読み込まれる前に正しいレイアウトスペースを確保することでサイトの[Core Web Vitals](/glossary/core-web-vitals)を保護し、[Cumulative Layout Shift](/glossary/cls)を防ぎます。

FlipLinkは公開されたすべてのフリップブックとドキュメントに対して、すぐに使えるレスポンシブ埋め込みコードを生成します。パブリケーションの共有オプションからスニペットをコピーし、任意のウェブサイト、ブログ、CMSに貼り付けます。iframeはコンテナ幅に自動的に調整され、フリップブックビューアはそれに応じてページをスケールします。埋め込みコードにはデフォルトで遅延読み込みが含まれているため、フリップブックはスクロールして表示領域に入った時にのみ読み込まれ、ページの高速性を維持します。また、[クリッカブルイメージ埋め込み](/features/clickable-image-embed)機能を使用して、クリックでフルレスポンシブビューアを開くサムネイルを配置することもできます — フルビューアをすぐに読み込まずにプレビューを表示したい場合に便利です。

レスポンシブ埋め込みは通常、2つのCSS技術のいずれかで機能します： - **Aspect-ratioコンテナ** — CSSプロパティ`aspect-ratio`（例：`aspect-ratio: 16 / 9`）と`width: 100%`を持つラッパー`div`。内部のiframeはラッパーを完全に埋めるように設定されます。これはモダンなアプローチで、現在のすべてのブラウザでサポートされています。 - **Padding-bottomハック** — ラッパーが`padding-bottom`をパーセンテージ（例：16:9の場合`56.25%`）として使用し、幅に対する正しい高さを作成する古い技術です。iframeは内部に絶対配置されます。この方法は後方互換性のためにまだ広く使用されています。 FlipLinkの埋め込みコードは、ブラウザ間の互換性を確保するため、aspect-ratioアプローチとフォールバックを使用しています。主要なCSSプロパティはiframeの`width: 100%`、`height: auto`、`border: none`で、ラッパーのアスペクト比と組み合わされます。結果として、コンテナの全幅を取り、高さを比例的にスケールする埋め込みが実現します。

- **幅制限のあるコンテナ内に埋め込みを配置** — フル幅セクションにコードを貼り付けると、フリップブックがビューポート全体に広がります。快適な読書サイズに保つため、コンテンツカラムやmax-widthラッパーを使用してください。 - **固定ピクセル高さの設定を避ける** — レスポンシブ埋め込みの目的が無効になります。アスペクト比に自動的に高さを制御させましょう。 - **複数の画面サイズでテスト** — デスクトップ、タブレット、スマートフォンでページをプレビューし、埋め込みが正しくスケールすることを確認します。ブラウザDevToolsのデバイスシミュレーションが素早いチェックに有効です。 - **ファーストビュー以下の埋め込みには遅延読み込みを使用** — FlipLinkのコードにはデフォルトで遅延読み込みが含まれていますが、コードをカスタマイズする場合は、初期読み込み速度を低下させないよう`loading="lazy"`属性を維持してください。 - **ビューポートセクションごとに1つの埋め込み** — 単一のスクロールビューに複数のフリップブックを埋め込むと、読者に負担がかかりページが遅くなります。間隔を空けるか、[クリッカブルイメージ埋め込み](/features/clickable-image-embed)を使用して読者がどのパブリケーションを開くか選べるようにしましょう。

1. **フリップブックを公開** — 埋め込みコードは公開後にのみ利用可能 2. **埋め込みコードをコピー** — パブリケーションの共有オプションでレスポンシブスニペットをコピー 3. **ページに貼り付け** — ウェブサイトのHTMLエディタ、CMSの埋め込みブロック、またはページビルダーウィジェットにコードを追加 4. **コンテナ幅を確認** — 親要素に定義された幅（パーセンテージまたはmax-width）があることを確認し、埋め込みのレンダリング幅を決定 5. **全デバイスでプレビュー** — デスクトップ、タブレット、モバイルビューで比例スケーリングを確認 6. **ページ速度をチェック** — Lighthouseオーディットを実行し、埋め込みが読み込み時間やレイアウトシフトスコアに悪影響を与えないことを確認 7. **ドメインホワイトリストを検討** — [ドメインホワイトリスト](/glossary/domain-whitelisting)を使用して、パブリケーションを埋め込めるウェブサイトを制限

レスポンシブ埋め込みは、手動サイズ調整やデバイス固有の変更なしに、すべての画面でフリップブックが正しく表示されることを保証します。あらゆるウェブサイトにインタラクティブなパブリケーションを配置しながら、すべての読者にプロフェッショナルで高速な体験を維持する最もシンプルな方法です。