大きさやテキストの配置要素が固定されている書籍では、フォント サイズの変更や、テキストの流動的な表示 (リフロー) ができません。たとえば、画集や写真集、子供の絵本はページ全体が画像であり、テキストは背景作品との関係で正確に位置が設定されています。もちろん、この形式はこのようなタイプの書籍以外にも使用されています。

固定レイアウトの本ではテキストのリフローはサポートされないため、本全体が固定レイアウト形式に適している場合にのみ、固定レイアウトを使用してください。本の一部だけをリフロー可能にしたり、部分的に固定レイアウトにすることはできません。Kindle Kid’s Book Creator を使用して、このタイプの電子書籍を作成する方法の詳細については、こちらを参照してください。

現時点で、この形式はタイプセッティングの改善でサポートされていません。

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

目次

• メタデータのガイドライン
• 表紙画像のガイドライン
• テキストのガイドライン
• コンテンツの要件
• HTML および CSS のガイドライン
• テキスト ポップアップ付きの固定レイアウトの本に複数ページにわたる背景画像とテキストが含まれる場合

---

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

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

メタデータ	内容紹介
レイアウトは次にあるいずれかのメタデータ フィールドの使用により指定できます。 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	必須。固定レイアウトのある本として本を特定します。 rendition:layout メタデータの有効な値は reflowable または pre-paginated です。デフォルト値は reflowable です。 fixed-layout メタデータの有効な値は true または false です。デフォルト値は false です。
<meta name="original-resolution" content="1024x600"/>	必須。コンテンツがデザインされた元の解像度を特定します (「1024 x 600」は例の 1 つ)。スクリーン解像度はすべての正の整数。上記の値は元のコンテンツの縦横比全体に比例している必要があります。
本のコンテンツの向きは、次のいずれかのメタデータ フィールドを使用して指定できます。 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> 注: iOS では現在サポートされていません。	オプション (ただし推奨されます)。 rendition:layout メタデータの有効な値は、 portrait、landscape、auto です。縦方向あるいは横方向に本の向きを固定します。値が auto の場合、縦方向と横方向の両方の向きに対応します。デフォルト値は auto です。 orientation-lock メタデータの有効な値は、portrait、landscape、none です。縦方向あるいは横方向にコンテンツの向きを固定します。値が none の場合、縦方向と横方向の両方の向きに対応します。デフォルト値は none です。
<meta name="primary-writing-mode" content="horizontal-rl"/>	オプション。ページの表示順序、読み取りモード、およびリーダー ナビゲーション (Kindle テキスト ポップアップ、Kindle パネル ビュー、Kindle 仮想パネルを含む) を定義します。有効な値は、horizontal-lr、horizontal-rl、vertical-lr、vertical-rl です。 デフォルトの動作は、ページめくりの方向が左から右または指定されていない場合、horizontal-lr です。ページめくりの方向を右から左に設定するには、値 horizontal-rl を使用します。 中国語、日本語、韓国語の本用にページめくりの方向を右から左に設定するには、値 vertical-rl を使用します。
<meta name="book-type" content="children"/>	絵本・児童書用オプション。絵本・児童書などの特定の書籍に関連のないリーダー機能 (共有など) を削除します。有効値は children または comic です。

---

表紙画像のガイドライン

リフロー型フォーマットの Kindle 本には裏表紙がないので、裏表紙を付けることで絵本・児童書コンテンツの物語の終わりを表現することができます。児童書のデザインの一部として裏表紙を追加することをお勧めします(児童書以外の書籍にこの形式を使用する場合、裏表紙は必要ありません)。 裏表紙の画像からは、バーコード、価格リストおよび販促用コンテンツは含めないでください。テキスト ポップアップは裏表紙のストーリー テキストには必須です。その他の裏表紙のテキストには推奨されますが、必須ではありません。

---

テキストのガイドライン

固定レイアウトの本では、読者はフォントを変更できません。CSS で @font-face を使用してパッケージ フォント (およびその名前) を指定すると、すべての端末および画面でデザインの一貫性を保つことができます。これにより、固定レイアウトの本でもソースと同一のフォントが使用されるだけでなく、ページ ビューと領域拡大ビューの間で HTML テキストの表示がより滑らかになります。

例:

@font-face { font-family: "Arial"; /* 使用するフォント名 */ src: url(../fonts/arial.otf); /* フォント ファイル */ }

アクセシビリティのヒント: 細いフォントは読みにくく、認識されるテキストと背景とのコントラストに影響する可能性があります。原稿の本文テキストに細いフォントを使用することは避けてください。

---

コンテンツの要件

要件 #1: HTML ファイル構造を使用する

固定レイアウトでは Kindle 端末で表示される単一の HTML ファイルが各ページ用に必要です。そのため、ページが横向きに固定されている場合、HTML ファイル内の 1 つの画像を使用するか、または 2 つの画像を HTML ファイルにまとめて 1 ページとして表示されるようにします。

縦向きに固定:

印刷ページ = 1 HTML ファイル

例:

横向きに固定:

2 印刷ページ (2 ページ分の画像 1 つ) = 1 HTML ファイル

例:

要件 #2: 領域拡大を使用する (ポップアップ)

固定レイアウトのコンテンツでは、フォント サイズを変えることができません。フォント サイズを変更すると、物語の内容が分かりにくくなる可能性があるためです。Kindle は、領域拡大 (ポップアップ) を用い、オリジナルのレイアウトを損なうことなく固定レイアウト テキストを拡大します。領域拡大の例については、このセクションの最後のほうに表示された画像を参照してください。

領域拡大は、タッチ スクリーン対応機器で「アクティブ エリア」をダブルタップすると作動します。タッチ スクリーン非対応機器では、5 方向キーの上矢印をクリックすると領域を選択し、中央のボタンをクリックすると Kindle テキスト ポップアップまたは Kindle パネル ビューをアクティブにします。 領域拡大の際は、アクティブ エリア要素は非表示、ターゲット要素は表示されます。領域拡大をサポートするように設定されている電子書籍では、KindleGen が自動的に領域拡大コードを検出し、OPF ファイルの領域拡大メタデータ値を「true」に設定します。

領域拡大をサポートするには、次の操作を行います。

1. 拡大するテキストの周りに、正しく定義された HTML アンカー (<a>) 要素を設定することで、アクティブ エリアを指定します。アンカーには app-amzn-magnify クラスを指定する必要があります。さらに、アンカーには data-app-amzn-magnify 値の一部として JSON オブジェクトの以下の属性を指定する必要があります。
   1. "targetId":"<string:elementId>" = 拡大エリアの一意の要素 ID (CSS ファイルで位置およびフォント サイズを設定)
   2. "sourceId":"<string:elementId>" = 拡大されるソースの一意の要素 ID
   3. "ordinal":<integer:reading order> = 拡大エリアのリーディング順序 (パネルがリーディング フローの一部として現れる順序)これは、領域拡大を使用するすべてのテキストにおいて必要となります。
2. 拡大が有効化されるとき、ソース テキストは表示されなくなります。ページの背景を覆う部分を最小限にするため、拡大し位置決めを行うテキストを完全にカバーするターゲット <div> 要素を作成します。これにより、領域拡大を有効にする場合、ソース テキストがページ ビューから消えなくなります。また、画面の右端あるいは下に直接隣接するようにポップアップを配置しないことが重要です。端末の種類により、ポップアップがこれらの端に近すぎる場合、コンテンツのオーバーフローが生じ、内容が画面に収まりきらないことがあります。出版前に、異なる種類の端末でコンテンツがどのように表示されるかを確認してください。
3. 領域拡大 <div> におけるテキストのフォント サイズは、ページにおける通常のフォント サイズの 150% に指定します。これにはいくつかの例外があります。
   • 1 つの例外は、ページにおけるテキストが大きいため、読みやすさを改善しても 150% に拡大すると読みにくくなる場合。7 インチの端末では、児童向けコンテンツで高さ 4 mm 以上のテキスト、児童向け以外のコンテンツで高さ 2 mm 以上のテキストには領域拡大は不要です。
   • もう 1 つの例外は、領域拡大 <div> における読みやすさを改善するため、ページにおけるテキストを 150% よりさらに拡大する必要がある場合。たとえば、ページにおけるテキストのフォント サイズが 45% の場合、読みやすくするために領域拡大 <div> におけるテキストのフォント サイズを 225% に拡大することが必要な場合があります。

固定レイアウトのサンプル ページ

領域拡大をした同じサンプル ページ

例:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

HTML および CSS のガイドライン

CSS のリセット

固定レイアウトの本に対する CSS のリセットを行います。リセット CSS はフォント サイズや余白などブラウザーによって自動的に適用される不統一性を取り除きます。YUI リセット などのリセット CSS を加えることにより、これらの不統一性は取り除かれ、デザイナーは統一されスタイルの整ったテンプレートを作成することができます。

固定レイアウトの本で複数の CSS ファイルを使用する

固定レイアウトの本のページめくり性能を高めるには、CSS ファイルを分割して、HTML ページのグループごとに個別の CSS ファイルにまとめます。CSS ファイルには、関連する HTML ファイルによって直接参照される情報のみ含めます。

全画面用コンテンツを最適化する

Kindle 本は、さまざまな端末 (Fire タブレット、その他メーカーのスマートフォンやタブレットなど) の、あらゆる画面の大きさでお読みいただけます。2013 年発売の Kindle Fire HD 8.9 の画面解像度は、1920 x 1200 ピクセルです。コンテンツはできる限りこの縦横比で作成してください。

固定レイアウトでコンテンツを制作する場合、画面の大きさを最大限に使用することを強く推奨します。コンテンツの縦横比やサイズが異なる場合、Kindle 端末およびアプリケーションでは画面の大きさに応じてサイズ調整が行われ、画面の中央に余白と共に表示されます。

固定レイアウトや画像が主体のコンテンツの本の場合、読者は Kindle パネル ビューや大きい画面の端末で読むことを好むため、これらのコンテンツは拡大して読まれることがほとんどです。ベストプラクティスは、可能な限り高い解像度の画像を使用することです。したがって、少なくとも 2 倍に拡大した状態でも鮮明に表示される画像を使用することをお勧めします。たとえば、2013 年発売の Kindle Fire HD 8.9 で表示する場合、画像の大きさは最低でも 3,840 x 2,400 にする必要があります (これにより 2 倍まで拡大することができます)。コンテンツの品質を検証するには、Kindle Previewer をお使いください。

テキスト ポップアップ付きの固定レイアウトの本で広範囲の領域拡大タップ ターゲットを使用する

領域拡大の主な目的は操作をしやすくすることで、拡大する部分よりタップ ターゲットが大きい場合により効果的に利用できます。より大きな部分を機能させるためには、app-amzn-magnify のアンカー要素に 20 ピクセルと 40 ピクセルの間の余白を加えてください。その際、各タップ ターゲットが重ならないようにします。

画像のテキストには position:absolute を使用する

画像上にテキストを正確に配置する必要がある場合は、position:absolute 属性を使用してください。これは、関連するテキストを背景画像の適切な位置に配置する必要がある、子供向け絵本などの固定レイアウトを必要とする本にのみ使用してください。

テキスト ポップアップ付きの固定レイアウトのコンテンツを将来の端末でも使用できるようにする

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

---

テキスト ポップアップ付きの固定レイアウトの本に複数ページにわたる背景画像とテキストが含まれる場合

このセクションでは、単一の背景画像とテキストからなるページを作成する方法を説明します。いくつかの方法がありますが、ここでは簡単で確実にマークアップをする方法を紹介しています。ここで使用するテンプレートでは、HTML を変更することなく CSS ルールを更新することによってページを作成します。

ページの向きが横にロックされている場合に画像を並べて配置する

見開きページ全体が 1 つの画像で構成されている本は少なくありません。また、見開きページが 2 つの並んだ画像で構成されている本もあります。

下の例では、見開きページのサイズは 1024 x 600 ピクセルです。これは、Kindle Fire (第 1 世代) のフルスクリーン解像度です。それぞれのページの画像サイズは、フルスクリーンの半分の大きさ (512 x 600 ピクセル) になります。 512 x 600 ピクセル。各要素の特定部分は CSS ID を使いラベリングされ、共通部分ではクラスを使います。左側の画像はスプレッドの左側に表示されます。右側の画像は、左側の画像の幅に指定されている margin-left スタイルを定義することによって、ページの右側に移動します。

これにより 2 つの画像が 1 つにまとめられて横方向モードで表示されます。これは統合見開きページとは異なります。統合見開きページでは、1 ページを縦方向モードで表示したり、隣接するページを横方向モードで表示するなど、コミックブック独特の形式に対応できます。

HTML:

<div class="fs"> <div id="fs9-img" class="lPage"></div> <div id="fs10-img" class="rPage"></div> </div>

CSS:

/* 両ページ用領域サイズ */ #fs9-img { background-image: url("../images/005a.jpg"); background-size:100% 100%; } #fs10-img { background-image: url("../images/005b.jpg"); background-size:100% 100%; } div.fs { height: 600px; width: 1024px; /* 2 倍のページ幅 */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 画面幅 */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 画面幅 / margin-left: 512px; /* イメージ左の余白と同じ幅 */ }

テキスト ブロックの配置

適切な位置とフォント サイズをパーセンテージで指定します。これにより、異なる解像度でも位置が調整され、横幅の広い端末や画面への互換性が保たれます。テキスト配置やフォント サイズがピクセルで指定されると、新しい端末用にコンテンツのサイズ調整ができません。各段落は単一の <div> 要素内でグループにまとめられ、<br/> 要素で複数行に区切られます。行間をカスタマイズする場合は、複数の <div> コンテナや追加の改行タグを追加する代わりに、CSS のスタイルで指定してください。

例では、2 ページの画像の例で拡張しており、背景画像の上部にテキストを配置する方法を表しています。テキストは固定 spread ブロック内に配置し、margin 属性にパーセンテージを使用し、位置調整と余白調整は CSS によって行っています。テキスト ポップアップは、背景の対応するテキストを覆うように配置します。

テキストの位置調整

デフォルトのテキスト配置は、HTML 要素のコンテンツの左上角です。多くの本は右または下、もしくは左右両端を揃えてテキストが配置されていることもあります。位置を特定する最も簡単な方法はテキスト回りのアウトラインを想像し、段落のどの端が余白に関連しているかを特定することです (上、左、右、下)。

テキストの配置に、改行なしスペース (&nbsp;) を使用しないでください。代わりに CSS の top、right、bottom、left を使用して、絶対位置で配置されたテキストを含む <div> 要素を配置してください。各 <div> 要素を配置するには、2 つの隣接辺を使用します。たとえば、top、left、bottom ではなく、top と left のようにします。HTML の block 要素内でテキストの位置を調整する場合は、CSS の text-indent および line-height を使用すると便利です。