HTML5 としてのコンテンツの書き出し

最終更新日 : 2026年8月7日

Adobe InDesign で、ページ、スプレッド、または選択したオブジェクトを HTML5 形式に書き出す方法について説明します。

InDesign 文書を HTML5 に書き出すことでクロスプラットフォームの互換性が確保され、リッチでインタラクティブなコンテンツ、ユーザーエンゲージメントの強化、アクセシビリティの改善、優れた SEO、高速な web ページパフォーマンスがサポートされます。Web で使用するテキストの書き出し方法もコントロールできます。

ファイル／書き出しを選択します。

「ファイルの種類」（Windows）または「形式」（macOS）で「HTML5」を選択します。

同じファイル名を使用する場合は「InDesign 文書名を出力ファイル名として使用」を選択し、「保存」を選択します。

HTML5 パッケージを書き出しダイアログボックスで「HTML テキストタグ」または「HTML SVG タグ」オプションを選択します。

フォントを含めるには、「フォントをコピー（Adobe Fonts から追加にしたものを除く）」オプションを選択します。

「書き出し」オプションを選択して HTML5 パッケージを生成します。

HTML5 レンダリングの問題を解決するためのクイックフィックス

「HTML テキストタグ」オプションを選択した場合は、必ず、書き出し時に「フォントをコピー」オプションを選択してください。
「フォントをコピー」オプションを選択した場合は、欠落しているフォントによって問題がまだ発生しているかどうかを確認します。フォントの問題かどうかを確認するには、「HTML SVG タグ」オプションを試してください。
これが実際にフォントの問題であり、「HTML SVG タグ」オプションが適切に表示されている場合は、InDesign ドキュメントで使用したフォントが書き出され、パッケージのフォントフォルダーに配置されているかどうかを確認します。配置されていない場合は、フォントを手動でコピーしてフォルダーに配置する必要があります。
フォントを配置した後も問題が解決しない場合は、カスタマーサポートチームにお問い合わせください。

メモ

Web サイトでのフォントの使用は、フォントライセンスの条件に準拠する必要があります。 Web サイト用のフォントのセルフホスティングには、別途ライセンスが必要になる場合があります。
フォントメーカーによって課せられた制限により、特定のフォントがパッケージフォルダーにコピーされない場合があります。詳しくは、sharewithID@adobe.com までお問い合わせください。

HTML5 パッケージと HTML（レガシー）の違い

HTML5 パッケージは、出力 HTML5 で InDesign ファイルのレイアウトを最初から模倣することを目的としています。一方、HTML（レガシー）は、InDesign ファイルから HTML を作成するボトムアップのアプローチであり、元のファイルとのレイアウトの類似性は限られています。

HTML5 書き出しのスクリプトのサポート

この機能により、InDesign アプリケーション UI からだけでなく、VBScript、ExtendedScript、AppleScript からも HTML5 へのドキュメントの書き出しがサポートされるようになりました。これらのスクリプト環境では、HTML5 書き出しオプションと同じ書き出し操作がトリガーされます。これにより、チームは Windows、macOS、またはクロスプラットフォームワークフローで HTML5 出力を自動化することができます。

InDesign にはスクリプトは含まれていません。このワークフローを使用するための独自のスクリプトを作成することができます。

既知の問題

テキスト用のドロップシャドウ、ぼかしなどの効果は適切に書き出されません。

回避策：テキストを書き出すには、「HTML テキストタグ」ではなく「HTML SVG タグ」を選択します。

InDesign で印刷物やデジタル資料を作成
インパクトのある広告、雑誌や本のレイアウトなどをデザインできます。

アプリを開く

HTML 書き出しオプション

HTML5書き出しオプション

学ぶ

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

コミュニティ

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

アドビホーム

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。