vivliostyleで紙媒体の技術書を作成するまで

はじめに

技術書を「WordやDTPツール」ではなく、マークダウンで作りたいと思い、3ヶ月前ちょうどいいお題があったので、夜なべして勉強がてらvivliostyleで技術書（PDF）を作成。

なんとなく製本してみようと思い入稿条件を確認したところ、印刷所ごとに要件の粒度も内容も異なることが分かりました。

フォーマット指定（Word等）に加えて、版面設計（基本枠・内枠）、トンボや塗り足し（断ち落とし）、ノド側の余白、仕上がりサイズのミリ単位指定など、考慮事項が多く、失敗コストを踏まえると敷居が高く感じました。

という事で、入稿条件の差分に消耗するより、PDF入稿ができる印刷所で進めることにしました。

ただし、Vivliostyleで出力したPDFは「読むPDF」には十分でも、「製本して読むPDF」だと 用紙サイズ・改ページ・図版の扱い・ノド補正・ノンブル など考慮ポイントが増えます。

本記事では、A4で作った技術書をB5製本向けに作り直すにあたって行った CSSカスタマイズ内容と、製本時に意識したポイントをまとめます。

作った本の仕様

• 印刷サイズの指定
  • 印刷方法：オンデマンド印刷
  • サイズ：B5
  • 製本仕様：無線綴じ
  • 綴じ：左綴じ
• 表紙印刷の指定
  • 用紙：コート135K
  • 表紙用紙の色：白
  • 表紙印刷：カラー片面
• 本文印刷の指定
  • 用紙：上質90K（168ページあるので）
  • 本文印刷：両面
  • 本文ページ数：168ページ
  • 本文の印刷方法：モノクロ
• データ形式
  • 入稿データ形式：PDF形式
• 使用技術
  • vivliostyle
    • テーマはtheme-techbookを利用

製本時に考慮したこと

今回作成してきたものはA4サイズの技術書でしたが、製本を前提にするとページサイズや余白の考え方が変わるため、プロジェクトをコピーして製本用に作り直しました。

特に、B5へのサイズ変更に加えて、無線綴じで読みやすくするための ノド側の余白（gutter） や、改ページ位置、図の配置、ノンブル（ページ番号）の扱いなどは、PDFを「読む」だけのときよりも調整ポイントが増えます。
ここでは、実際にどこをどう直したかを、ハマりどころ込みでまとめていきます。

１．用紙サイズをB5に変更

元の原稿はA4サイズで作っていたので、そのままA4で入稿するか少し迷いました。
ただ、持ったときのサイズ感や「技術書っぽさ」を優先して、技術書はB5であるべきという偏見に従い、B5（JIS: 182×257mm）で作り直しました。

vivliostyle build -s 182mm,257mm -o build/book.pdf

コマンドだけだとサイズが期待通りにならないことがあったので、CSSでも明示的に固定しました。

/* -----------------------------------------------------------------------------
   0) 調整用のツマミ（CSS変数）
      - 数字を変えるだけで余白を微調整できます。
      - まずはこのまま出力して、読みやすさを見てから調整するのが安全です。
   -------------------------------------------------------------------------- */
:root {
  /* 仕上がり（JIS B5）
     - B5は “182×257mm” と案内されているため、mmで明示します。 */
  --page-width: 182mm;
  --page-height: 257mm;

  /* 余白（マージン）
     - top/bottom：天地（上/下）
     - inner：ノド側（綴じ側）
     - outer：小口側（外側）
     叩き台（B5・本文多め向け）：
       top/bottom 18mm
       outer 18mm
       inner 24mm  → outerより6mm広い（ノドが詰まりやすい無線綴じ対策）
  */
  --margin-top: 18mm;
  --margin-bottom: 18mm;
  --margin-outer: 18mm;
  --margin-inner: 24mm;

  /* 追いノド補正（オプション）
     - “製本すると見た目がノド側に寄って感じる” 場合に、さらに外側へ逃がす量。
     - まずは 0mm 推奨。気になったら 1〜2mm を試すのが現実的です。 */
  --gutter-extra: 0mm;
}

/* -----------------------------------------------------------------------------
   1) 用紙サイズの固定
      - PDFのページサイズそのものを指定します。
      - CSSの size: B5; は ISO B5（176×250mm）扱いになる環境があるため、
        指定の JIS B5（182×257mm）に “mmで固定” します。
   -------------------------------------------------------------------------- */
@page {
  /* 幅 × 高さ（横182 / 縦257） */
  size: 182mm 257mm;
}

２．改ページ

Markdownだけだと狙った改ページにならないので、HTMLで強制改ページするようにしています。

<div style="break-before: page;"></div>

３．改ページのコードブロック対応

コードブロックがページ途中で割れると、境目付近の行が落ちる現象がありました。
これは自力では解決できなかったので、コードブロックを分割して改ページを入れる運用で回避しました。

４．HTMLで図の挿入を行う

図はMarkdownでも挿入可能ですが、サイズ調整しやすさを優先してHTMLで記述しています。

<p style="text-align: center;">
  <img src="../picture/00_各章のフォルダ/図1.png"
       style="width:70%; height:auto;"><br>
  <span>図1: 図の説明</span>
</p>

５．ノド補正

無線綴じで読みやすくするため、ノド（綴じ側）を広めに取って版面を外側へ逃がすいわゆる「ノド補正（gutter補正）」を入れました。

/* -----------------------------------------------------------------------------
   2) ノド補正（gutter補正）
      - 無線綴じではノド側が開ききらず、視認範囲が狭くなります。
      - そこで「ノド側(inner)を広め」「小口側(outer)をやや狭め」にして、
        版面（本文領域）を外側へ逃がし、読書時に“中央寄りに感じる”のを緩和します。
      - :left と :right で左右ページを分けて設定します。
   -------------------------------------------------------------------------- */

/* 左ページ（見開き左）
   - 本を開いたとき、左ページのノド（綴じ側）は “右” です。 */
@page :left {
  /* 余白の個別指定（可読性のため margin: ではなく分解しています） */
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);

  /* 左ページ：
     - 右 = inner（ノド）を広く
     - 左 = outer（小口）を標準に */
  margin-right: calc(var(--margin-inner) + var(--gutter-extra));
  margin-left: var(--margin-outer);
}

/* 右ページ（見開き右）
   - 本を開いたとき、右ページのノド（綴じ側）は “左” です。 */
@page :right {
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);

  /* 右ページ：
     - 左 = inner（ノド）を広く
     - 右 = outer（小口）を標準に */
  margin-left: calc(var(--margin-inner) + var(--gutter-extra));
  margin-right: var(--margin-outer);
}

６．ノンブル（ページ番号）を中央にする

入稿ミスにならない様にノンブル（ページ番号）を中央にしています。

/* ===============================
   ノンブル（ページ番号）を中央下にする
   =============================== */

/* theme-techbook の「下に出す中身」はこの変数（既定は counter(page)） */
:root{
  --vs-theme--page-bottom-content: counter(page);
}

/* 左右の下（外側）を消して、中央下に同じ内容を出す */
@page :left{
  --vs-page--mbox-content-bottom-left: none;
  --vs-page--mbox-content-bottom-center: var(--vs-theme--page-bottom-content);
}
@page :right{
  --vs-page--mbox-content-bottom-right: none;
  --vs-page--mbox-content-bottom-center: var(--vs-theme--page-bottom-content);
}

次回やりたいこと

実際に製本してみると、「ここは次回もう少し詰めたいな」と感じた点がいくつかありました。備忘も兼ねてメモしておきます。

１．ノンブルを表紙・目次につけない

理想は「本文だけにノンブル」で、表紙・目次には付けない様にしたかったです。
ただ、試行錯誤する中で目次のページ番号とズレるケースが出てしまい、今回は安全策として断念しました。結果的に、全ページにノンブルが入った状態で印刷しています。

２．コードブロックに行数を付ける

紙で読むと、コードの位置を指さして説明したくなる場面が増えます。
やはりコードブロックには行番号があると便利なので、次回はCSS側で行番号を付ける方向でやりたいです。

３．コードスパン除去

フルカラーなら気にならないのですが、モノクロ印刷だとグレーのコードスパンが沈んでしまい、視認性がいまひとつでした。
次回はコードスパンの背景や色を見直すか、思い切って装飾を外す、もしくは太字などの強調表記に寄せるなど、読みやすさ優先で調整したいです。

４．画像はダークモードで

画面のキャプチャー等は白いものが多く、視認性が悪いのですが、可能であればダークモードでキャプチャーすれば見やすくなるのでは、と感じました。

後から気付いたこと

ページごとにカラー/モノクロを分けられる

印刷業者の仕様次第ですが、ページ単位でカラーとモノクロを混在できるようでした。今回は予算の関係上、全部モノクロにしましたが、次回は「ここだけカラー」を試したいです。

さいごに

Vivliostyleで「読むPDF」を作るところまではかなり快適でしたが、製本してみると 用紙サイズ・余白・ノド・改ページ・図版・ノンブル など紙の制約が前に出てきて、思った以上に調整ポイントが増えました。

とはいえ、一度つまずきどころが分かってしまえば、次からは再現性を持って詰めていけそうです。今回のCSSはまだ「とりあえず製本できる形」なので、次はここを一段整理して、印刷を前提にしたCSS（印刷用スタイル） にできないかと考えています。