楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い 2. OPFにおける注意点
3. 目次の作り方 4. 組版表現Tips
5. 固定レイアウトの礼儀
Kobo向けの推奨指定（1/10）
• 電書協と緊デジのEPUB3制作ガイド
•
基本的には電書協ガイドに従いましょう
• 現状でのベストプラクティスに近い存在
• 現在のKoboビューワーを考慮した場合、
• 傍線は「border-right」がおススメ
• 扉表現の実現方法はKobo向けがおススメ
• 縦書時の文字方向に関する仕様が若干違う（後述）
といった違いはあります
• 固定レイアウト向けはデジコミ協と共同制作
•
緊デジ版テンプレートは電書協ガイドに準拠
• 基本的には電書協ガイドのサブセットの位置付け
（電書協テンプレートのCSSを一部簡略化）
Kobo向けの推奨指定（2/10）
• マージン（余白）：ゼロ（0）を推奨
•
楽天Kobo向けとしてはUXの向上が期待できる
• ビューワー側で適度なマージンを確保しているため、
コンテンツ側ではマージンを「ゼロ（0）」にして下さい
• 基本的には、縦書時の左右／横書時の上下マージンは コンテンツ側の指定が反映されません
• マージンの指定がない場合はデフォルト値になりますので、
明確に「margin: 0;」などと指定して下さい
•
マージン：ゼロによる不具合の可能性
• マージン部分にルビや句読点（ぶら下がり）を表示する ビューワーでコンテンツを表示する場合
• 現在のKoboビューワーは「ぶら下がり」に対応していません
Kobo向けの推奨指定（3/10）
• XHTMLの適度な分割を推奨
•
楽天koboによる最大サイズの目安は「200KB」
• 1MBを超えるXHTMLはUX低下の原因となります
•
巨大なXHTMLファイルは表示に時間がかかります
• 現在のKoboビューワーでは、XHTMLの切り替わり時に XHTMLに含まれるコンテンツ全体をレンダリングしてから 最初のページを表示する仕組みになっています
•
目次項目の区切りでの分割を推奨
• XHTMLの分割により、自動的に改ページが行われ、
ページ内リンクによる目次を作成する必要がなくなります
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）では、
XHTMLの区切り単位で、画面をフルリフレッシュします
Kobo向けの推奨指定（4/10）
• 「inline-block」は危険です
•
テキストブロックには使わないで下さい
• <p>タグなどのディスプレイ要素として、
display: inline-block;
といった指定が可能ですが、現在のKoboビューワーでは ページの区切りが正しく判断されず、文字が見切れてしまう 場合があります
•
外字画像などの指定に使って下さい
• 「inline-block」は文中にあたかも文字のようにブロックを 挿入する目的で使用されますので、外字などに適しています
Kobo向けの推奨指定（5/10）
• リンクの貼り方にはご注意下さい
•
画像のみのページの場合に、画像にリンクは貼らないで下さい
• Koboビューワーを含む多くは、タップとフリックにより ページを遷移する操作方法が用意されています
• フリックによるページ移動の場合は問題ありませんが、
タップを利用するユーザにとっては、画像しかないページで
画像に目次等へのリンクが貼られていると、次ページではなく、
意図しないページへ遷移して混乱を招く可能性があります
•
相互リンクはおススメしません
• EPUBには目次機能があり、読書中にいつでも利用出来るため、
目次ページへ戻るリンクを見出し等に貼る必要はありません
• 見出し等が表示される位置によっては、意図せず遷移してしまう 上記の問題を引き起こす可能性があります
Kobo向けの推奨指定（6/10）
• 狭過ぎる行間の指定は避けて下さい
•
楽天koboの推奨値は「1.75em」
• 「1.75em」は、Adobe Illustrator のデフォルト値
• 行間の指定である「line-height」には「1.6em」以上を 指定することをおススメします
• 現在のKoboビューワーでは、テキストブロックに
「1.5em」以下の行間が指定された場合、ページの区切りが 正しく判断されず、文字が見切れてしまう場合があります
•
ルビの表示領域を考慮した設定を推奨
• ルビの標準サイズが親文字に対して「0.25em」のため、
「1.75em」程度がバランスがよいと思います
• 行間が狭いとルビのある行とない行で行間が変わります
Kobo向けの推奨指定（7/10）
• フォントの指定は必ずお願いします
•
フォントの指定がないと正しく表示されません
• 現在のKoboビューワーでは、フォントの指定（font-family）が 正しくされていないと、欧米のフォントが自動的に選択され、
日本語が正しく表示されない場合があります
•
「serif」および「sans-serif」の使用を推奨
• 明朝系とゴシック系の併記をおススメします
（明朝指定の例）font-family: serif, sans-serif;
（ゴシック指定の例）font-family: sans-serif, serif;
• 具体的なフォント名の指定は、各OSで代表的なフォントの場合、
指定しなくてもそれらが選択されるのであまり意味がなく、
ファイルサイズの肥大化の原因となるのでおススメしません
Kobo向けの推奨指定（8/10）
• 画像の配置について その1
•
文字の回り込み指定は避けて下さい
• 現在のKoboビューワーでは、画像の周囲に文字列が回り込む 指定がされている場合に、改ページが画像の途中で行われ、
画像が分断されてしまう場合があります
•
画像はブロック要素のタグで囲んで下さい
• 現在のKoboビューワーでは、<body>に画像が単体で文中に
配置されていると、改ページで画像が分断される場合があります
•
画像の周囲には適度なマージンを確保して下さい
• 現在のKoboビューワーでは、画像と文字列の間に適度な余白が 確保されていない場合に、改ページが画像の端ギリギリで行われ、
1px分だけ前のページに残る場合があります
【参考】 ページネーション
• 文字と画像の混在は切り分けが困難
•