HTMLインフォグラフィックをKindle書籍化！リフロー型ガイド
AI生成などのHTMLインフォグラフィックを、Kindleのリフロー型電子書籍として出版する際の課題と実践的な手順を解説します。レイアウトが可変なリフロー型に対応するための準備、変換方法、必須の検証プロセスを理解しましょう。
課題：リフロー型の壁
リフロー型Kindle書籍は読者環境に合わせてレイアウトが変わるため、HTMLインフォグラフィックのような複雑な視覚要素の表示を維持するのが難しい場合があります [cite: 1]。
- 固定サイズの画像や絶対位置指定はレイアウト崩れの原因に [cite: 1]。
- 多様なデバイス・文字サイズで意図した通りに見えない可能性がある [cite: 1]。
リフロー型とは？
テキスト中心の書籍に適した形式で、画面サイズや設定に応じてコンテンツが自動で再配置（リフロー）されます [cite: 1]。
インフォグラフィックを含む場合、HTML構造の論理的な順序と、CSSによる柔軟なスタイリングが重要になります [cite: 4, 5]。
KDP入稿形式（リフロー型）
Kindle Direct Publishing (KDP)ではいくつかの形式で入稿できますが、それぞれ特徴があります [cite: 1, 2, 7]。
- 標準規格で制御性が高い [cite: 1]。
- KDPでの処理が比較的安定 [cite: 4]。
- 適切な作成・検証が必要 [cite: 17]。
- KDP互換性保証、ツールが使いやすい [cite: 10]。
- HTML→DOCX変換で忠実性損失の可能性 [cite: 11, 12, 13]。
- 直接HTMLインポート不可 [cite: 12]。
- 手軽だがKDP変換の予測が困難 [cite: 7, 9]。
- 複雑なコンテンツには不向き [cite: 3]。
- Kindle Createと連携しやすい [cite: 11]。
- HTML→DOCX変換で忠実性損失の可能性 [cite: 7]。
インフォグラフィックを含む場合、構造とスタイルを制御しやすいEPUB形式での入稿が最も推奨されます [cite: 3, 4]。
準備：HTMLとCSS
HTMLの構造化 [cite: 4]
<h1>〜<h6>,<p>,<ul>などセマンティックなタグを使う。- 不要な
<div>や複雑なネストを避ける。 - HTML要素の順序が読書順序と一致するようにする。
- 論理目次（NCX/Nav Doc）は必須。HTML目次も推奨 [cite: 19]。
Kindle向けCSSの注意点 [cite: 5]
ウェブブラウザと同じように表示されるとは限りません！ Kindle独自のエンジン(KF8)はCSS3のサブセットを解釈します [cite: 8, 22]。
- 複雑なレイアウト（Grid, 高度なFlexbox）は避ける [cite: 5]。
position: absolute;の使用は慎重に [cite: 5]。- 固定ピクセルサイズ指定 (
width: 300px;など) は避ける。 - KDPガイドラインでサポートされているプロパティを確認する [cite: 22]。
- シンプルで堅牢なCSSを心がける [cite: 18]。
<link> タグで外部CSSを読み込むのが推奨されます [cite: 1, 5]。
準備：インフォグラフィック (特にSVG)
基本ガイドライン [cite: 6, 28]
- JPEG, PNG, GIF が基本。高解像度で準備する [cite: 2, 28]。
- 画像内テキストは避け、HTMLテキストとして記述する [cite: 3, 30]。
<img>タグには必ずalt属性で代替テキストを設定する [cite: 28]。
SVGの扱い [cite: 6, 7, 8]
SVGは拡大縮小に強い理想的な形式ですが、KDPでは注意が必要です。
KDPはHTML内の <svg> タグ直接使用を推奨していません (エラーの可能性あり) [cite: 28]。
<img src="infographic.svg" alt="...">
- KDP推奨に沿う形 [cite: 30]。
- スケーラビリティ維持（理論上）。
- 全環境での安定性に疑問符。要テスト。
<img src="infographic.png" ...>
- 互換性が最も高い。
- 表示が安定。
- スケーラビリティ喪失、ファイルサイズ増の可能性。
<svg>...</svg>
- KDPがエラー警告 [cite: 28]。
- 互換性問題大 (KF7/一部KFX非対応)。
- 複雑なフォールバック実装が必要。
レスポンシブ画像CSS [cite: 9, 10, 28]
画像がコンテナからはみ出さないように:
img { max-width: 100%; height: auto; display: block; }
テキスト回り込みには float や width: percentage; を使用 [cite: 28]。
変換方法の選択
HTMLからKindle形式への変換には複数の経路があります [cite: 11, 12, 13, 14, 17]。
- 最大限の制御 [cite: 11]。
- 高度なスキル要 [cite: 11]。
- 制御と自動化のバランス良 [cite: 12, 18]。
- 設定と出力検証が必須 [cite: 17]。
- (本ケースでの推奨) [cite: 18]
- 簡単だが制御低い [cite: 10, 13]。
- HTML忠実性損失リスク [cite: 11, 16]。
- 最もシンプル [cite: 14]。
- 変換結果が予測不能 [cite: 9, 14]。 (非推奨)
必須ステップ：検証！
KDPアップロード前の検証は絶対に省略できません [cite: 15]。
- EPUBCheck: EPUBファイルを選択した場合、仕様準拠を確認する公式ツール [cite: 17]。エラー・重大な警告はゼロにする。
- Kindle Previewer: Amazon提供のツールで、様々なデバイス/設定での実際の表示を徹底的に確認する最重要ステップ [cite: 14, 17]。レイアウト崩れ、画像表示、リンク動作などをチェック。
これらの検証を怠ると、品質問題や読者体験の低下を招く可能性があります。
最終チェックリスト
- HTMLはクリーンか？ [cite: 19]
- CSSはKDP向けに簡略化・チェック済みか？ [cite: 19]
- インフォグラフィック(SVG/画像)は処理済みでaltテキストはあるか？ [cite: 19]
- (該当する場合) EPUBはEPUBCheckで検証済みか？ [cite: 19]
- Kindle Previewerで徹底的にテストしたか？ [cite: 19]
- 目次は正しく機能するか？ [cite: 19]
- 表紙画像は別途準備したか？ [cite: 19, 23, 29]