電子書籍を作るとき、「縦書きにするか横書きにするか」は見た目だけの問題ではありません。読者の読みやすさ、ジャンルの慣習、技術的な制約、そして端末ごとの表示差異に大きく影響します。この記事では、縦書き・横書きそれぞれの特性と選び方、EPUB3での具体的な設定方法、Kindle Createでの対応、フォント選び、ルビや圏点の扱い方、そしてよくあるトラブルの解決策まで、網羅的に解説します。

縦書き・横書きの選び方

まず大前提として、日本の電子書籍はジャンルによって縦書き・横書きの慣習がはっきり分かれています。この慣習に逆らうと、読者に違和感を与えてしまいます。

縦書きが適しているジャンル

横書きが適しているジャンル

比較項目縦書き横書き
ページめくり方向右から左（右綴じ）左から右（左綴じ）
数字の表示漢数字が自然アラビア数字が自然
英語の扱い90度回転 or 縦中横そのまま表示
表・グラフ表示が難しい自然に表示
コードブロック非対応（横書きに切替が必要）自然に表示
ルビ対応右側にルビ上側にルビ
読者の期待小説的な読書体験情報取得・学習

判断の基準: 迷ったときは「英数字やコードが多いなら横書き、日本語の文章が主体なら縦書き」と覚えておけば、大きく外れることはありません。

EPUB3での縦書き設定

EPUB3は縦書きを正式にサポートしています。縦書きのEPUBを作るには、OPFファイルとCSSファイルの2箇所を設定する必要があります。

OPFファイルの設定

OPFファイル（パッケージドキュメント）の<spine>要素にpage-progression-direction属性を設定します。

縦書き（右から左）の場合

<spine page-progression-direction="rtl">

これにより、ページめくりの方向が右から左（右綴じ）になります。日本語の縦書きはすべてこの設定です。

横書き（左から右）の場合

<spine page-progression-direction="ltr">

デフォルト値なので省略も可能ですが、明示的に指定しておくほうが安全です。

CSSでの書字方向の指定

OPFの設定に加えて、CSSでwriting-modeプロパティを指定します。これが実際のテキストの流れ方向を制御します。

縦書きCSS

body { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; }

vertical-rlは「vertical（縦方向）、right-to-left（右から左）」の意味です。WebKitプレフィックスとEPUBプレフィックスも付けておくと、古いリーダーでも正しく表示されます。

横書きCSS

body { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -epub-writing-mode: horizontal-tb; }

horizontal-tbは「horizontal（横方向）、top-to-bottom（上から下）」です。こちらもデフォルト値ですが明示的に指定しておきましょう。

縦中横（たてちゅうよこ）の設定

縦書きの中で半角数字やアルファベットを横並びに表示する「縦中横」は、電子書籍で頻繁に使われるテクニックです。たとえば「2026年」の「20」「26」を縦書きの中で横に並べて表示します。

縦中横のCSS

.tcy { -webkit-text-combine: horizontal; -epub-text-combine: horizontal; text-combine-upright: all; }

HTML側: <span class="tcy">26</span>

一般的に、2桁までの数字に縦中横を適用します。3桁以上は漢数字に変換するか、そのまま回転表示にします。

Kindle Createでの縦書き・横書き設定

Amazon公式の電子書籍作成ツール「Kindle Create」でも縦書き・横書きを設定できます。

Kindle Createの言語設定

Kindle Createでプロジェクトを新規作成する際、「言語」で「Japanese」を選択し、「書字方向」で「右から左（縦書き）」か「左から右（横書き）」を選びます。この設定はプロジェクト作成後に変更できないため、最初に正しく選択することが重要です。

Kindle Createの制約

Kindle CreateはWordファイル（DOCX）をインポートして変換するツールです。縦書きの場合、以下の制約があります。

これらの理由から、縦書きの電子書籍を高品質に作りたい場合は、Kindle CreateよりもEPUB形式で直接作成することを推奨します。EPUBの方がCSSで細かい制御ができ、表示の安定性も高くなります。

フォント選びのガイドライン

電子書籍のフォントは基本的に読者の端末設定に依存しますが、EPUBのCSSで推奨フォントを指定できます。縦書きか横書きかによって、適切なフォントの傾向が異なります。

縦書きに適したフォント

横書きに適したフォント

EPUB CSSでのフォント指定例

縦書き: body { font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", serif; }

横書き: body { font-family: "游ゴシック", "YuGothic", "Hiragino Sans", sans-serif; }

注意: EPUBに独自フォントを埋め込むとファイルサイズが大幅に増加するため、システムフォントのフォールバック指定が一般的です。

ルビ・圏点・傍点の対応

日本語の電子書籍では、ルビ（ふりがな）、圏点（強調のための点）、傍点が重要な表現手段です。EPUB3ではこれらをHTMLとCSSで実装できます。

ルビの記述方法

EPUB3では、HTMLの<ruby>タグを使ってルビを記述します。

ルビのHTML記述

<ruby>電子書籍<rt>でんししょせき</rt></ruby>

ルビ非対応のリーダー向けに、<rp>タグで括弧を追加することもできます。

<ruby>電子書籍<rp>（</rp><rt>でんししょせき</rt><rp>）</rp></ruby>

ルビのCSS調整

ルビのサイズや位置はCSSで調整できます。

圏点・傍点の実装

圏点（傍点）は、文字の上（横書き）または右（縦書き）に小さな記号を付けて強調する表現です。CSS3のtext-emphasisプロパティで実装します。

圏点のCSS

.emphasis { -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; text-emphasis-position: over right; }

HTML側: <span class="emphasis">重要な箇所</span>

圏点の種類: filled dot（黒丸）、open dot（白丸）、filled sesame（ゴマ点）、filled circle（丸）など

Kindle端末でのルビ・圏点の表示

Kindle端末やKindleアプリは、ルビと圏点に概ね対応していますが、以下の注意点があります。

よくあるトラブルと解決策

縦書き・横書きの電子書籍作成で頻繁に遭遇するトラブルと、その解決策をまとめます。

トラブル1: 数字が90度回転して読みにくい

縦書きで半角数字がそのまま90度回転して表示され、読みにくくなる問題です。

解決策
  • 2桁までの数字: 縦中横（text-combine-upright: all;）を適用する
  • 3桁以上の数字: 漢数字に変換する（「1000」→「千」「一〇〇〇」）
  • 年号: 「2026年」→ <span class="tcy">20</span><span class="tcy">26</span>年
  • 全体的にアラビア数字が多い場合: 横書きに変更を検討する

トラブル2: 英単語が1文字ずつ縦に並ぶ

縦書きで英単語が「H」「e」「l」「l」「o」のように1文字ずつ縦に表示される問題です。

解決策
  • 短い英字（2〜3文字）: 縦中横を適用する
  • 長い英単語: 横倒し表示（デフォルト）を受け入れるか、カタカナ表記に変更する
  • 英語が多い箇所: その部分だけwriting-mode: horizontal-tb;で横書きに切り替える

トラブル3: Kindleプレビューアーで表示が崩れる

Kindle Previewer（プレビューツール）で確認すると表示が崩れているが、実際のKindle端末では正しく表示されるケースがあります。逆のケースもあります。

解決策
  • Kindle Previewerだけでなく、実際のKindle端末やKindleアプリでも確認する
  • CSSにはWebKitプレフィックスを必ず付ける（Kindleのレンダリングエンジンに必要）
  • EPUBをKindlegenまたはKindle Previewerで変換後、KPF形式で再確認する

トラブル4: 目次が右から左にならない

本文は縦書きで右から左にページが進むのに、目次ページだけ左から右になってしまう問題です。

解決策

OPFファイルの<spine>でpage-progression-direction="rtl"を設定していても、NCX/NAVファイルの構造が正しくないと目次が逆方向になることがあります。NAVドキュメント（nav.xhtml）にもwriting-mode: vertical-rl;を適用してください。

トラブル5: 画像が縦書きに合わない

横長の画像が縦書きレイアウトで小さく表示されたり、ページの中央に配置されなかったりする問題です。

解決策
  • 画像は縦長（ポートレート方向）で作成するのが縦書きとの相性が良い
  • 画像専用ページを設け、writing-mode: horizontal-tb;で横書きモードに切り替える
  • CSSでmax-width: 100%; max-height: 100%;を指定し、画面内に収まるようにする

テスト環境のセットアップ

縦書きの電子書籍は、表示環境によって見た目が変わりやすいため、出版前のテストが特に重要です。以下の環境で表示を確認することを推奨します。

必ずテストすべき環境

テスト時のチェックポイント

DraftZeroでの縦書き・横書き対応

DraftZeroで電子書籍を生成する際、ジャンルに応じて適切な書字方向が自動的に選択されます。小説ジャンルを選択すれば縦書き、技術書やビジネス書を選択すれば横書きのEPUBが生成されます。もちろん、生成後にCSSを編集して書字方向を変更することも可能です。

縦書きのEPUBを手動で作成すると、縦中横やルビの設定に多くの時間がかかりますが、DraftZeroならAIが自動的に適切な設定を行います。特に数字の縦中横処理は、すべてのタグを手作業で付けると膨大な作業量になるため、自動化の効果が大きい部分です。

まとめ: 縦書き・横書きの選択はジャンルの慣習に従うのが基本。EPUB3のwriting-modeとpage-progression-directionを正しく設定し、縦中横・ルビ・圏点にはCSSで対応。出版前には複数の端末・アプリでテストを行い、表示崩れがないことを確認してから出版しましょう。