目次

• 画像のガイドライン
• 技術的な詳細

画像のガイドライン

• 本質的に絵画である画像 (写真や歴史的画像など) は、読者の関心を物語から反らしてしまうほど不鮮明であったり、ぼやけていたり、または不明確であってはなりません。このようなタイプの画像の場合、サイズが小さな端末でも問題なく読めるようにするには、画面の幅の 60% 以上を占めるようにすることをお勧めします。
• 文字、数字、または記号が含まれているテキストを含む画像は、読み取り可能であり、判読可能である必要があります (グラフ、図面、地図など)。このようなタイプの画像の場合、サイズが小さな端末でも問題なく読めるようにするには、画面の幅の 80% 以上を占めるようにすることをお勧めします。
• コンピューター生成のビジュアルはスケーラブル ベクター グラフィックス (SVG) として最適に表示されますが、SVG タグによってエラーが発生する可能性があります。SVG タグを削除し、HTML で画像用の image タグを使用することをお勧めします。
• テキストを画像として表示しないでください。テキストを周囲のアートと切り離すことができる場合は、画像として設定しないでください。その代わりに、HTML にします。
• 図のキャプション、表、およびタイトル画像は HTML にする必要があります。表の詳細については、リフロー型の表のセクション「表のガイドライン - リフロー型」をご覧ください。
• アクセシビリティのため、すべての画像は HTML タグの alt 属性にテキストを含める必要があります。装飾的な画像の場合、画像タグに alt = “” または role = “presentation” を設定し、支援技術によって無視されるようにします。
• どの Kindle 端末や Kindle アプリでも快適な読書体験を提供するために、カラー画像がふさわしい箇所では可能な限りカラー画像を使用してください。
  
  

技術的な詳細

1. 画像のタイプ
   1. ブロック画像: ブロック画像は、常に新しい行で始まります。Kindle 本の画像のほとんどは、ブロック画像となります。ブロック画像の例と HTML を以下に示します。
      

      

      HTML:

      <p> Lorem ipsum dolor ….</p> <img src="img.jpg" alt="A view of Canyonlands national park"> <p>Lorem ipsum dolor ….</p>

      CSS:

      <style> img { display: block; width: 100%; object-fit: contain; } </style>

   2. フロート画像: フロート画像は、コンテナ内のテキストの左または右に配置されます。
      HTML:

      <img src="Earthworm.jpg" alt="Image illustrating a cross section of an Earthworm">

      CSS:

      <style> img { float: left; width: 20%; object-fit: contain; } </style>

   3. インライン画像: インライン要素は、新しい行で始まらず、テキストと同じ行に表示します。インライン画像の高さを “EM” 単位で設定し、周囲のテキストに比例して大きさが調整されて表示されるようにします。可能な場合は、ロスレス形式のインライン画像を提供してください。

      

      HTML:

      <p> Yes <img src='checkbox.png' alt='Check Box'/> No <img src='checkbox.png' alt='Check Box'/> Lorem ipsum dolor.. </p>

      CSS:

      <style> img { height: 1em; vertical-align: bottom; object-fit: contain; } </style>

   4. 表紙画像: 表紙画像は常にフル ページ レイアウトとし、幅または高さは 1,200 ピクセル以上にする必要があります。

2. 画質
   1. 不鮮明でぼやけている画像: Amazon では、ぼやけている画像を含む電子書籍について、Amazon の電子書籍の詳細ページでコンテンツの品質に関する警告をフラグ設定します。ぼやけている画像の例:

      

   2. 画像内の判読できないテキスト: 文字、数字、または記号が含まれているテキストを含む画像は、読み取り可能である必要があります。判読できないテキストを含む画像がある場合は、Amazon の電子書籍の詳細ページにコンテンツの品質に関する警告が表示されます。判読できない画像の例:

      

   3. キャプションを含む画像: キャプションを含む画像には figure ブロックを使用し、キャプションを画像とともにラスター化しないでください。キャプションは画像形式ではなく、テキスト形式にすることをお勧めします。キャプションを含む画像の例:

      

      HTML:

      <figure> <img src="img.jpg" alt=" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </figcaption> </figure>

      CSS:

      <style> figure {width: 100%; } img { display: block; width: 100%; object-fit: contain; } figcaption { margin: 0.5em 0 0 0; text-align: center; text-indent: 0; } </style>

3. アクセシビリティ: アクセシビリティのため、すべての画像は HTML タグの alt 属性にテキストを含める必要があります。装飾的な画像の場合、画像タグに alt = “” または role = “presentation” を設定し、支援技術によって無視されるようにします。Alt テキストは、短く、簡潔で具体的にする必要があります。Alt テキストは、画像の説明、および必要に応じてその文脈の意味を指定する必要があります。リンクされている画像については、alt テキストに画像の説明ではなく、リンクの目的を指定してください。
   HTML:

   <img src="img.jpg" alt="A Bald Eagle perched in a tree in its native habitat">

   装飾目的の HTML:

   <img src="DecorativeImg.jpg" role="presentation" alt=”> OR <imgsrc="DecorativeImg.jpg" alt=””> OR <img src="DecorativeImg.jpg" role="presentation">

4. サポートされている入力形式: Kindle 端末および Kindle アプリでは、TIFF や複数フレームの GIF、または透過領域のある画像はサポートされていません。画像に透過バックグラウンドが指定されている場合、透過バックグラウンドが白に変換されます。
5. カラー プロファイルまたは色空間: すべての画像に sRGB カラー プロファイルを使用します。Kindle では、CMYK 色空間はサポートされていません。CMYK 色空間が指定されている画像は、自動的に sRGB 色空間に変換されます。