メインコンテンツにスキップ

埋め込みの制約事項

PLAINERのデモコンテンツをWebサイトに埋め込む際の制約事項をまとめています。

1. iframe表示の制限

埋め込み先のWebサイトがX-Frame-OptionsContent Security Policy(CSP)frame-ancestorsディレクティブでiframe表示を制限している場合、PLAINERのデモを埋め込めません。

回避策:埋め込み先サイトの管理者に、PLAINERドメインからのiframe表示を許可するよう依頼してください。許可が難しい場合は、PLAINERの公開URLを直接リンクとして掲載する方法もあります。

2. WordPressプラグイン

WordPress専用のPLAINERプラグインは現在提供されていません。

回避策:WordPressの「カスタムHTML」ブロックにiframe埋め込みコードを貼り付けてご利用ください。

3. レスポンシブ対応

iframe埋め込みの場合、埋め込み先ページのレイアウトに応じた自動リサイズには制約があります。

回避策:iframeのstyle属性でwidth: 100%; height: 80vh;のように指定し、埋め込み先ページのレイアウトに合わせて高さを適宜調整してください。

4. ポップアップ・コンテンツが大きく表示されてしまう(2026年6月 修正済み)

2026年6月23日以前のバージョンで、PCブラウザやサイト埋め込み枠、ブラウザ幅が狭い環境において、ポップアップガイドやコンテンツ全体が以前より大きく(縮小されずに等倍で)表示されてしまう不具合がありました。

特に、埋め込み枠の幅(例:約1200px)よりもコンテンツの作成幅(例:2000px)が広い場合に顕在化し、本来は枠に合わせて縮小されるべき表示が等倍のままになるため、ガイドやコンテンツが枠からはみ出して見た目が崩れる状態でした。

この問題はPLAINER側の修正(2026年6月23日リリース)により解消されています。修正後は、PCブラウザ・埋め込み枠・タブレット環境では、コンテンツの作成幅に合わせて自動縮小される従来の表示(fit-to-width)に戻ります。

修正後も大きく表示される状態が続く場合は、以下の点をご確認ください。

  • ブラウザキャッシュをクリアして再読み込みしてください

  • 埋め込み先ページのHTMLに、iframeコンテナのサイズを明示的に指定してください(例:height: 80vh; width: 100%;

  • それでも解決しない場合は、サポートチームまでお問い合わせください

5. スマホ枠・iframe内の要素にバルーンガイドが追加できない/表示されない(2026年8月 修正済み)

以前のバージョンで、以下の環境において新編集画面でバルーンガイドが正しく扱えない不具合がありました。

  • スマートフォン枠(スマホのベゼル風プレビュー枠)で撮影したキャプチャで、枠内の要素を選択しても「ガイドを追加」ボタンが押せなかった

  • iframe埋め込み形式のサイトを撮影したキャプチャで、設定済みのバルーンガイドがプレビューに表示されなかった

この問題はPLAINER側の修正により解消されています。修正後は以下が正常に動作します。

  • スマホ枠・iframeを含むキャプチャでも、枠内の要素にバルーンガイドを追加できます

  • 設定済みのバルーンガイドがプレビューに正しく表示・追従されます

  • iframe内の要素でも、AIによるガイド本文の自動生成が正常に動作します

これまで回避策として旧編集画面(?editor=legacy)をご案内していたお客様も、通常の新編集画面でそのままご利用いただけます。修正後も表示されない場合は、ブラウザキャッシュをクリアして再読み込みのうえ、解消しない場合はサポートチームまでお問い合わせください。

6. 新編集画面のプレビューでPDF・iframe等の埋め込みが表示されない(2026年8月 修正済み)

以前のバージョンで、新編集画面(2025年以降に切り替わった編集画面)のプレビューにおいて、キャプチャ内のPDF・iframe・埋め込み画像などの外部コンテンツがすべて空白(真っ白)で表示される不具合がありました。旧編集画面では正常に表示されていたため、新編集画面に切り替わったお客様のみ影響を受けていました。AIツアーのプレビュー画面でも同様の表示崩れが発生していました。

この問題はPLAINER側の修正により解消されています。修正後は、新編集画面のプレビューでもPDF・iframe・埋め込み画像などが旧編集画面と同じように正常に表示されます。AIツアーのプレビューでも同様に修正されています。

これまで「新編集画面のプレビューで一部が表示されない」とご報告をいただいていたお客様は、改めてご確認をお願いします。修正後も表示されない場合は、ブラウザキャッシュをクリアして再読み込みのうえ、解消しない場合はサポートチームまでお問い合わせください。

7. fit-to-width(自動縮小)表示とは

コンテンツの作成幅が表示枠より広い場合に、枠に合わせてコンテンツ全体を自動的に縮小して収める表示方式です。サイト埋め込みや狭いウィンドウでも、コンテンツが枠内に収まって見やすくなります。PCブラウザ・タブレット・埋め込み枠ではこの方式が適用されます。

8. スマートフォンでの表示

iframeで埋め込んだコンテンツをスマートフォン(画面幅480px以下)で表示した場合、ガイドは等倍で表示されます。ガイドのボタンは通常サイズでタップでき、操作が正常に行えます。

PC幅のキャプチャ素材は画面横幅を超える場合があります。その際は横スクロールで閲覧できます。

スマートフォン向けの表示最適化オプション(?mobile_mode=true による縮小表示など)については、スマートフォンでの表示を最適化するをご覧ください。

関連ヘルプ記事

こちらの回答で解決しましたか?