グラフィック ノベル、漫画、コミック (以降、まとめてグラフィック ノベル) は、画像ポップアップや仮想パネルが付いた最も一般的な固定レイアウト本です。これらは絵本・児童書と似ていますが、ページ数が多く、複雑なコンテンツを含む傾向にあるため、特有の問題が発生します。

グラフィック ノベルには、1,920 x 1,200 の画面に表示される詳細な画像が多く含まれます。アクセスに関するこうした問題を解決するために、カスタマイズされたコンテンツと Kindle パネル ビュー機能の使用をお勧めします。これらは高解像度の読書体験においてコンテンツを最適化します。Kindle Comic Creator の詳細については、こちらを参照してください。

電子書籍にハイブリッド テキストが含まれない限り、この形式はタイプセッティングの改善をサポートします (ハイブリッド テキストの詳細を参照)。

重要: 固定レイアウトの本では整形式のアンカー タグはサポートされていません。整形式アンカー タグのある固定レイアウト本は販売停止になります。

目次

• メタデータのガイドライン
• 画像のガイドライン
• パネル ビュー (領域拡大)
• コミックおよび漫画での仮想パネル
• グラフィック ノベル コンテンツの最適化
• テキストのガイドライン
• ガイド付きビュー

メタデータのガイドライン

固定レイアウト本に必要なメタデータは OPF ファイルの中で指定します。固定レイアウト形式にはさまざまな種類があり、それぞれ似ていますが大きく異なる点もあります。明記されていない限り、画像ポップアップまたは仮想パネル付きの固定レイアウト本のガイダンスは、テキスト ポップアップ付きの固定レイアウトなど他の形式に該当しないのでご注意ください。

画像のガイドライン

2013 年発売の Kindle Fire HD 8.9 用に画像を最適化する場合、グラフィック ノベルでは 1,920 x 1,200 の縦横比を保ってください。画像の解像度は Kindle パネル ビューに必要なズーム率により異なります。

Amazon では、2 倍に拡大表示しても満足度の高い読書体験を提供できるようにすることを推奨しています。画像は JPEG 形式で保存してください。300 ppi 以上の画像解像度を使用することをお勧めします。

標準的なズーム率は以下の 5 つです。

グラフィック ノベルの画像品質は、このセクションに記載された解像度の基準に従ったうえ、縦横比を一貫して維持することが求められます。テキストの読みやすさと、背景画像の明瞭さを改善するために画像を最適化することが特に重要になります。これにより、優れた品質のグラフィック ノベルを作成できます。

パネル ビュー (領域拡大)

グラフィック ノベルのパネル ビューはユニークな読書体験を得ることができます。パネル ビューによりアクセシビリティが向上し、ページ間の流れを高解像度かつ簡単な方法で体験することができます。読者はページ全体を見るために、いつでもパネル ビューを終了することができます。パネル ビューの例については、このセクションの画像を参照してください。

読者は、タップ ターゲットをダブルタップするだけで、パネル ビューを開くことができます。アクティブ エリア (ソース要素) が非表示になり、パネル ビュー (ターゲット要素) が表示されます。

パネル ビューを有効にするには、以下の手順が必要です。

1. アンカー (<a>) 要素を含む正しく定義されたコンテナ (<div>) 要素を作成して、タップ ターゲットを設定します。<div> は、タップ ターゲットのサイズと位置を指定します。<a> は <div> に対応するサイズにし、app-amzn-magnify クラスを指定する必要があります。さらに、アンカーには data-app-amzn-magnify 値の一部として JSON オブジェクトの以下の属性を指定する必要があります。
   1. "targetId":"<string:elementId>" = 拡大領域を示す、パネル ビューの HTML 要素の一意の要素 ID
   2. "ordinal":<integer:reading order> = 拡大エリアのリーディング順序 (パネルがリーディング フローの一部として現れる順序)
2. タップ ターゲットを最もよく反映するアクションを表示するために、サイズおよび位置を決めるターゲット ビュー パネルの <div> 要素を作成します。
   
   

   固定レイアウト コンテンツのスナップショット

   パネル ビューによる同じコンテンツのスナップショット

   例:

   <div> <img src="images/page_002.jpg" alt="コミック本の画像" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="コミック本の画像"/> </div> </div>

   
   

   ---

   コミックおよび漫画での仮想パネル

   出版者がパネルを指定していない場合、仮想パネル機能がコミックおよび漫画でアクティブになります。RegionMagnification メタデータは、出版者がパネル情報を指定したかどうかを識別するために使用します。領域拡大パネルがページに含まれていると、Kindle 仮想パネル ビューは有効になりません。

   デフォルトでは、すべてのページは primary-writing-mode 値に基づき、4 つのパネルに分けられます。次の例は、パネルの順序を示しています。

   例:

   縦方向モード:

   

   Horizontal-lr、Horizontal-rl

   

   Vertical-rl、Vertical-lr

   
   

   横方向モード:

   

   Vertical-lr および Horizontal-lr、Horizontal-rl および Vertical-rl

   統合見開きページに対応する端末もあります。

   

   Vertical-rl、Vertical-lr

   要件 #1: 向きの固定 (orientation-lock) が「none」の場合に統合見開きページを使用する

   方向が固定されていない場合、コンテンツは縦方向モードと横方向モードの両方に対応するデザインとなります。一部の端末は、横方向モードで 2 ページを並べて表示する統合見開きページに対応しています。統合見開きページ用のページはどれも、横方向でペアのページとして表示するように定義されている必要があります。縦方向ではペアは無視されます。

   統合見開きページとして使用されるページは、page-spread-left プロパティまたは page-spread-right プロパティでタグ付けする必要があります。すべての左側ページには関連する右側ページが必要で、またその逆も同様です。page-spread-center プロパティを使用すると、個々のページを横方向モードの端末の中央に表示できます。

   

   縦方向モードでは次のように 2 ページが別々に表示されます。

   

   プロパティを指定しない場合や、一致する page-spread-right がない page-spread-left でページにタグ付けした (またはその逆の) 場合、Kindle では page-spread-center と見なされ、端末が横方向モードになると page-spread プロパティが反映されずにページが中央に表示されます。

   次の例では、primary-writing-mode が horizontal-lr または vertical-lr であると見なされます。

   例:

   <spine> <itemref idref="page1" /> <!--注: properties="page-spread-center" と見なす --> <itemref idref="page2" /><!-- 注: properties="page-spread-center" と見なす --> <itemref idref="page3" properties="page-spread-left"/> <!-- 注: 統合見開きページの左側の表示域 --> <itemref idref="page4" properties="page-spread-right"/> <!-- 注: 統合見開きページの右側の表示域 --> </spine>

   次の例では、primary-writing-mode が horizontal-rl または vertical-rl であると見なされます。

   例:

   <spine> <itemref idref="page1" /> <!-- 注: properties="facing-page-right" と見なす --> <itemref idref="page2" /> <!-- 注: properties="facing-page-left" と見なす --> <itemref idref="page3" properties="page-spread-right"/> <!-- 注: 統合見開きページの右側の表示域 --> <itemref idref="page4" properties="page-spread-left"/> <!-- 注: 統合見開きページの左側の表示域 --> </spine>

   左側ページが同等の右側ページを持っていない (またはその逆の) ケースでは、最終ページの場合を除き、出版者が空白の HTML ページを挿入し、layout-blank プロパティをページに追加することができます。任意で、空白のページに本のタイトルや透かしを入れることもできます。

   layout-blank プロパティがあるページは、横方向モードでのみ表示され、縦方向モードでは無視されます。

   縦方向と横方向モードの両方に常に表示する空白ページを挿入する場合は、layout-blank プロパティを使用しないでください。同様の統合見開きページのルールを使用し、「空白の」JPEG 画像ファイルを参照するようにします。

   次の例では、primary-writing-mode が horizontal-lr または vertical-lr であると見なされます。

   例:

   <spine> <itemref idref="page1" /> <!-- 注: properties="page-spread-left" と見なす --> <itemref idref="blank-page" properties="layout-blank"/> <!-- 注: properties="page-spread-right" と見なす。縦方向モードでは無視。 --> <itemref idref="page2" properties="page-spread-left"/> <!-- 注: 統合見開きページの左側の表示域 --> <itemref idref="page3" properties="page-spread-right"/> <!--注: 統合見開きページの右側の表示域 --> </spine>

   
   

   ---

   グラフィック ノベル コンテンツの最適化

   タップ ターゲットを最適化する

   タップ ターゲットは、画面の 100% を効果的にカバーする必要があります。そうすれば、読者がグラフィック ノベルをダブルタップしたときにいつでも拡大表示できます。

   
   

   ビュー パネルを最適化する

   ビュー パネルのデフォルトは、タップ ターゲットの 150% にしてください。タップ ターゲットの特定のアクション シーンの強調に、これと異なるサイズのビュー パネルを使用することも可能です。

   背景の対応する画像を覆うようにビュー パネルを配置します。基本パネルの上に配置し、必要に応じて余白を調整します。

   複数のパネルにまたがるコンテキストの場合は、他のビュー パネルと多少重なっても構いません。

   

   デフォルトの 150% ズーム率を使用するには、アクション シーンを 2 つのビュー パネルに分ける必要があることも少なくありません (通常、左右または上下)。高解像度の読書体験を提供できるため、小さなズーム率を使用するよりも良い読書体験を得ることができます。

   タップ ターゲットを分割し、最初のタップ ターゲットが全領域の 50 ～ 75% の幅になるように、2 番目のタップ ターゲットが残りの幅を使用するようにします。これにより、読者がアクション パネルの中心付近をダブルタップしたときに最初のビュー パネルが表示され、そしてそこから移動したときに 2 番目のパネルが表示されます。

   このアクションのフローを保持するために、ビュー パネルは若干の部分が重なるアクションを表示します。

   2 つのビュー パネルに分割されたアクション シーンの最初のパネル

   2 つのビュー パネルに分割されたアクション シーンの 2 番目のパネル

   
   

   ---

   テキストのガイドライン

   画像ポップアップ付きの固定レイアウト本の場合: 画像は 300 ppi 以上で、テキストはピクセレーションやぼやけがなく、明瞭で読みやすくなければなりません。また、7 インチの端末で表示する場合、大文字の高さはポップアップで 2 mm 以上にする必要があります。通常 150% 以上の拡大率が最適です。

   仮想パネル付きの固定レイアウトの場合: 画像は 300 ppi 以上で、テキストはピクセレーションやぼやけがなく、明瞭で読みやすくなければなりません。また、7 インチの端末で表示する場合、高さは 2 mm に拡大する必要があります。

   Amazon では、グラフィック ノベルや絵本・児童書における大量のテキストを表示するために、ハイブリッド テキストの使用を推奨しています。ハイブリッド テキストは、テキストを十分に拡大する幅がない部分に使用するようにします。ハイブリッド テキストでは、行間、斜体、太字などを含め、テキストの書式設定や見た目が正しく再現される必要があります。これにより優れた読書体験を提供できます。

   将来の端末でも使用できるコンテンツにするため、テキスト サイズとテキスト ブロックの配置にピクセルを使用することをお勧めします。パーセンテージ単位でフォント サイズまたはテキストの配置を指定すると、ピクセルの小数桁が生じ、端末によって小数桁の処理方法が異なる可能性があります。

   タイプセッティングの改善は、ハイブリッド テキストを含むグラフィック ノベルをサポートしていません。

   

   HTML のハイブリッド テキストの例:

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ab aquiline regem.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   CSS のハイブリッド テキストの例:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; font-size: 150%; font-family: "Arial"; }

   
   

   ---

   ガイド付きビュー

   ガイド付きビューは、一部の Kindle コミックで利用できるようになった、コミックの電子書籍の読書体験に対する一連の機能強化です。この機能強化は、モバイル端末でユーザーがコミックを読むときの自然な視線の流れに合わせて、パネルごとにコミックを表示できるようにするものです。ガイド付きビューでスワイプによるパネル間の移動がアニメーション化されるので、ページ間のストーリーの進み方がわかりやすくなります。ガイド付きビュー機能の内容:

   • 出版者が設定したパネルの順序に従った、ガイド付きのパネルごとの読書体験
   • フルスクリーン サイズに拡大され、中央に表示されるパネル
   • 拡大したときに各パネルの周囲に設定されるカスタムのマスキング色

   
   

   ガイド付きビューは互換性のある Kindle コミックに自動的に適用されます。また、既存のパネル ビューを使用してガイド付きビューのパネルが適切に配置されます。Amazon では、ガイド付きビューをより多くの本で利用できるよう継続的に取り組んでおり、Kindle コミックも自動的に有効になる予定です。