電子ブックをiframeで埋め込むときの注意点｜制作会社が納品前に確認する5つのポイント【2026年版】

本記事は、PDFをめくれる電子ブックに変換するツール「MEKURU（メクル）」の運営チームが執筆しています。他社ツールについては公式サイト等の一次情報をもとに記載しています（2026年時点）。

「電子ブックの公開URLをiframeでページに貼ったら、スマホで高さが潰れた」「クライアントに納品したあと、いつの間にか枠が真っ白になっていた」——iframe埋め込みは手順そのものは簡単ですが、貼ったあとに気づく落とし穴がいくつかあります。この記事では、電子ブックをiframeで埋め込むときに納品前へ確認しておきたい注意点を、5つに絞って解説します。

結論
– iframe埋め込みは「公開URLを枠で読み込む」方式。実体はMEKURU側に残り、URLは mekuru-pdf.com 配下になる
– 枠は高さを直接決めず、aspect-ratio で比率を指定するとPCでもスマホでも崩れない
– 表示はMEKURU上の公開に連動する。買い切りの公開期間（1年）やサブスク契約が切れると枠が空白になる
– 実体もURLも自社ドメイン配下に置きたいなら、iframeではなくZIP書き出し＋サーバー設置を選ぶ

この記事は、クライアントのWebサイトに電子ブックをiframeで埋め込んで納品したい制作会社の方に向けて書いています。自社サイトにカタログを1本だけ足したい場合も、注意点はそのまま当てはまります。

そもそもiframe埋め込みとは（ページの中に窓を開ける仕組み）

iframeは、いま見ているページの中に”小さな窓”を開けて、そこに別のページを表示する仕組みです。MEKURUで電子ブックを公開すると、その本を見せるための公開URLと、ページに貼り付けるためのiframe埋め込み用のコードを共有メニューから取得できます（公開URLのスラッグは自由に設定できます）。このコードを自社サイトやクライアントのページに貼ると、ページの中の枠の中で本がめくれるようになります。

閲覧者から見ると、アドレスバーはあくまで貼り付けたページ（自社ドメイン）のまま。「別サイトに飛ばされた」感じにならず、記事や商品ページの中に自然にカタログを組み込めるのが、iframe埋め込みの利点です。ここから、貼るときに気をつけたい点を順に見ていきます。

注意点1：本の実体はMEKURU側に残る（URLは mekuru-pdf.com 配下）

まず押さえたいのが、iframeで貼っても本の実体（データ）はMEKURU側に置かれたままという点です。ページに見えているのは”窓越しの表示”で、枠の中身は mekuru-pdf.com 配下から読み込まれています。

これは「アドレスバーが自社ドメインのまま」ということと別の話です。閲覧者に見えるページのアドレスは自社ドメインでも、枠の中で読み込んでいる本のURLは mekuru-pdf.com のものになります。MEKURUはMEKURU上で公開したブックの独自ドメインには対応していないため、実体もURLも完全に自社ドメイン配下にしたいという要件では、iframe埋め込みだけでは満たせません。その場合は後述のZIP設置を選びます（注意点5）。

注意点2：枠のサイズは aspect-ratio で決める（スマホで潰さない）

iframe埋め込みで一番多いつまずきが、スマホで高さが潰れる／PCで余白が出るというサイズの問題です。原因は、iframeに固定の高さ（height="600" など）を直接指定してしまうこと。画面幅が変わっても高さが変わらないため、狭い画面では中身が窮屈になります。

これを避けるには、iframeを枠（div）で包み、高さを直接決めずに比率（aspect-ratio）で指定します。こうすると画面幅に応じて高さが自動で決まり、PCでもスマホでも収まりよく表示できます。

<div style="position:relative;width:100%;aspect-ratio:4/3;">
  <iframe src="ここにMEKURUの公開URL"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;"
    allowfullscreen loading="lazy"></iframe>
</div>

aspect-ratio の比率は、載せるカタログの見え方に合わせて調整します。見開き（横長）で見せたいなら横長め、1ページずつなら縦長めが目安です。貼ったら必ず実機（スマホ実物）で確認するのが、納品前のつまずき回避になります。

注意点3：表示はMEKURUの公開状態に連動する（期限切れで空白になる）

iframe埋め込みは「MEKURU上で公開している本を、窓越しに表示している」だけなので、MEKURU側で公開が止まると、埋め込んだ枠も空白になります。ここは納品後のトラブルになりやすいので、契約プランごとの公開期間を先に押さえておきます。

• 買い切り（1冊¥9,900・税込）：公開期間は1年間。延長は¥3,300/年で、期限が切れたあとでもいつでも延長できます。延長しないまま期限が過ぎると、iframeの枠は表示されなくなります。
• サブスク（月額プラン）：契約が続いている間は公開されます。解約（契約期間の満了）でそのプラン中に作ったブックは公開が停止し、閲覧者には「公開期間が終了しました」と表示されます。再契約すれば設定そのままで元に戻ります。
• 無料プラン：1冊・100ページ・300MBまで表示できます。フッターにMEKURUのコピー表記が入ります。

注意点4：全画面・遅延読み込みの属性を付けておく

細かい点ですが、iframeのタグに付けておくと閲覧体験が良くなる属性があります。注意点2のコード例にも入れていますが、役割を確認しておきます。

• allowfullscreen：ビューアの全画面ボタンを使えるようにします。付けておかないと、閲覧者が全画面表示にできない場合があります。カタログを大きく見せたい納品では入れておくと安心です。
• loading="lazy"：iframeの読み込みを、その枠が画面に近づいてから始めます。電子ブックをページの下のほうに置く場合、これを付けておくとページ全体の初期表示が軽くなります。

どちらも1回貼れば済む属性です。埋め込みコードをテンプレート化しておくと、案件ごとに付け忘れずに済みます。

注意点5：実体まで自社ドメインに置きたいならZIPを選ぶ

注意点1・3で触れたとおり、iframe埋め込みは「実体はMEKURU側・公開はMEKURUに連動」という前提です。外部サービスへの依存を避けたい／実体もURLも自社（クライアント）ドメイン配下に置きたい／公開期間を気にせず長く運用したいという要件では、iframeではなくZIP設置を選びます。

MEKURUでは電子ブックをZIP（HTML一式）で書き出し、クライアントのサーバーに置いて公開できます。ZIPは自己完結ビューア同梱なので、置いたファイルだけで本が表示され、特別なサーバープログラムは要りません。設置したそのURL（自社ドメインのURL）を使えば、実体もURLも自社ドメイン配下にできます。

ただし使い分けの前に、ZIP設置版にはiframe埋め込み（MEKURU上公開）とは違う制限があります。

• 閲覧パスワード・公開/非公開の切り替え：ZIP設置版では使えません。閲覧制限はサーバーのBasic認証で、公開/非公開は設置ファイルの出し入れで代替します。iframe埋め込み（MEKURU上公開）ならこれらはそのまま使えます。
• ZIPの書き出しは契約が有効なうちだけ：買い切り（¥9,900/冊・税込）またはサブスクで対応しています。無料プランはZIP書き出しに非対応です。

「手早く見せたい・記事の中に組み込みたいならiframe／実体まで自社に持ちたい・長く運用したいならZIP」という軸で選ぶと、案件に合うほうを決めやすくなります。

よくある質問

Q. iframeで埋め込むと、閲覧者に見えるURLは他社サービスのものになりますか？
A. いいえ。閲覧者が見ているページのアドレスは、iframeを置いた自社ドメインのままです。ただし枠の中で読み込んでいる本の実体はMEKURU側（mekuru-pdf.com 配下）にあります。実体とURLの両方を自社ドメイン配下にしたい場合は、ZIPで書き出して自社サーバーに設置し、そのURLを埋め込みます。

Q. 埋め込んだ電子ブックのPDFを差し替えたら、iframeを貼り直す必要がありますか？
A. 必要ありません。iframe埋め込みなら、MEKURU側でPDFを差し替えても公開URLは変わらないため、埋め込んだページの貼り直しは不要です（差し替えはサブスクで無制限、買い切りは同一PDF6回まで）。

Q. スマホで枠の高さが潰れてしまいます。どうすればいいですか？
A. iframeに固定の高さを直接指定していると、狭い画面で潰れやすくなります。iframeを枠（div）で包み、高さを直接決めずに aspect-ratio で比率を指定してください。画面幅に応じて高さが自動で決まり、PCでもスマホでも崩れにくくなります。貼ったあとは実機で確認するのが確実です。

Q. 埋め込んだ電子ブックが、あるとき表示されなくなりました。なぜですか？
A. iframe埋め込みはMEKURU上の公開に連動します。買い切りの公開期間（1年・延長¥3,300/年）が過ぎた、またはサブスクを解約した場合、枠が表示されなくなります。延長・再契約で元に戻ります。公開期間に左右されずに運用したい場合は、ZIP書き出しで自社サーバーに設置する方法があります。

まとめ

• iframe埋め込みは「公開URLを枠で読み込む」方式。実体はMEKURU側に残り、URLは mekuru-pdf.com 配下になる
• 枠は高さを直接決めず、aspect-ratio で比率を指定するとPCでもスマホでも崩れにくい。貼ったら実機で確認する
• 表示はMEKURU上の公開に連動する。買い切りの公開期間（1年）やサブスク契約が切れると枠が空白になる
• allowfullscreen・loading="lazy" を付けておくと、全画面表示と初期表示の軽さで有利
• 実体もURLも自社ドメイン配下に置きたい・長く運用したいなら、iframeではなくZIP書き出し＋サーバー設置を選ぶ（ZIP書き出しは買い切り¥9,900/冊・税込 またはサブスク。無料プランは非対応）

iframe埋め込みの手順自体はコードを1回貼るだけですが、「実体はどこに残るか」「いつまで映るか」を先にクライアントと決めておくと、納品後のトラブルを防げます。まずは無料で1冊作って見え方を確かめ、要件が固まったら埋め込み方を選ぶ、という流れがスムーズです。

関連記事
– 電子ブックの作り方（PDFをアップロードするだけ）
– 電子ブックを自社サーバーに設置する方法
– 自社ドメインで“社名を出さず”電子ブックを納品する方法
– クライアントのPDFを電子ブックにして納品する流れ
– WordPressサイトに電子ブックを埋め込む方法

出典

• MEKURU 公式サイト（iframe埋め込み・公開URL・ZIP書き出し・買い切り／サブスク料金・公開期間・延長・PDF差し替え・無料プランの上限・アクセス解析の仕様）：https://mekuru-pdf.com/
• iframeの aspect-ratio・allowfullscreen・loading="lazy" などのマークアップは、各サービスの公式サイト等の一次情報に基づく（サイトのCMSやテーマにより画面表記は異なります）