Monkeyish Studio’s methods and best practices

コミック&グラフィックノベル・プロダクションワーク

〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜

ウェブで読む漫画/グラフィックノベルの表現・販売・プロモーション


KF8 - 68 design 検証一覧ページ

Kindle Format 8仕様

固定レイアウトを使うこなす上で、リフローの理解は必須になりますので、Kindle Format 8の仕様からレイアウトデザイン関連のプロパティを検証しています。6月に実施した大規模な検証のアップデート作業ですが、まず68パターンを再検証です。
※KDPで販売可能な表現にとどめています。
サンプルファイル(EPUB 3とMobiをセット)は、当日ダウンロードできるようにまとめておきます。
検証環境は、Kindle Fire HD、Kindle Paperwhite、Android、iOS(※iOSは検証用のAZKファイル)


サンプルデータに収録

※スクリーンショットのリンクをサムネイルに指定する予定ですが、ブラウザーのウィンドウを狭めるとオリジナルサイズになります。
更新:11月26日


001
-

002
-

003
-

004
-

005
-

006
-

007
-

008
-

009
-

010
-

011
-

012
-

012 - Kindle Paperwhite
※注意事項

012 - Android App
-

012 Accessibility
文字サイズ

012 Accessibility
反転

012 Accessibility
セピア(不合格)

010 Accessibility
セピア

001
デフォルト

002
-

003
-

004
-

005
-

006
-

007
-

008
-

009
-

010
-

010 - Android App
-

011
-

011 - Kindle Paperwhite
-

011 Accessibility
文字サイズ

011 Accessibility
反転

011 Accessibility
セピア

012
-

012 - Kindle Paperwhite
-

012 - Android
-

013
-

013 - Kindle Paperwhite
-

012 Accessibility
文字サイズ

012 Accessibility
反転

012 Accessibility
セピア


KF8仕様/画像を一切使わず、CSS3で折れた角の表現
アクセシビリティ・チェック(セピアで問題あり):解決策は、ボックスの背景色を削除し、周辺の陰影と折れた角の明度を下げる


03_04
Kindle Fire HD

03_04 Accessibility
文字サイズ

03_04
Kindle Paperwhite

03_04 Android
-


Kindle FireとKindle Paperwhiteで表示する内容を変更する
Kindle Fireの場合、カラーの写真/見出しに囲み線
Kindle Paperwhiteの場合、グレースケールの写真/見出しの囲み線は無効


03_02
2つの画像ファイル

03_02
Kindle Fire HD

03_02
Kindle Paperwhite


Kindle FireとKindle Paperwhiteで表示する内容を変更する
Kindle Fireはカラー写真/見出しに囲み線。Kindle Paperwhiteはグレースケールの写真/見出しの囲み線は無効
※Amazonが提供しているKF8サンプルで使用されているCSS3(回転角度を指定/transform)を両方に適用


03_03
Kindle Fire HD

03_03
Kindle Paperwhite