zine.js

Webに、印刷物のような美しい文字組みを。

本や雑誌のように、余白とベースラインが心地よく揃う。 HTMLに数行の属性を加えるだけでDTPレイアウトを実現する、ゼロ依存の組版ライブラリ。

16P Zine『思考の醸成』を読む auto_stories Download zine.js (v1.1.0) arrow_downward 機能を見る south
Inspector HUD: キーボードの G で格子、M で版面枠、H で調整HUDが開きます
Motivation

文章を読むとき、
余白の呼吸が揃っていると心地いい。

Webページで長い文章を読むとき、なんとなく目が疲れたり、行が詰まって読みづらく感じたことはないでしょうか。

書籍や雑誌の印刷物では、文字のサイズ、行と行のあいだ（行送り）、そして上下左右の余白が、ひとつの規則正しいリズム（ベースライン）に沿って丁寧に組まれています。

zine.js は、そうした印刷・出版の心地よい文字組みのルールを、普段のWebサイトやブログに手軽に取り入れるためのツールです。複雑なCSSを書かなくても、読みやすく落ち着いた紙面が自然に立ち上がります。

Features

zine.js の10大エディトリアル組版機能

印刷物の美しさと職人技の秩序をWebで再現するための、10の組版アルゴリズム。

01 / Rhythmic Grid

ベースライングリッド

文字サイズや行間、上下マージンを基準線に完全吸着。見出しや図版が挟まっても垂直リズムが狂いません。

8px Grid • Baseline Snap
02 / Micro-Typography

和欧混植と四分アキ

和文と欧文の境界を自動検知し、活版印刷の四分アキ（約0.22em）をインライン挿入。英数字の沈みを防ぐ仮想合成フォントを実現。

Quarter-space • Latin Scaling
03 / Optical Balance

約物ツメとぶら下げ

連続する括弧（「（ や ）」）の余分なアキを自動で詰め、行頭のカギ括弧を外側に逃がして垂直の揃いを端正に維持します。

Bracket Trim • Hanging Quotes
04 / Precision Drop Cap

飾り大文字

2〜3行分の矩形に1ピクセルも狂わず端正に収まる飾り文字。日本語の漢字・かな、欧文の天地を美しく揃えます。

Drop Caps • Line Precision
05 / Interactive Notes

双方向インタラクティブ傍注

本文横の余白に衝突回避で配置。参照番号と注釈の双方向ホバーハイライト、クリック時のスムーズジャンプを標準装備。

Bidirectional • Smooth Scroll
06 / Typesetting HUD

組版インスペクタHUD

キーボード（G/M/H）で開くInDesign風のブラウザ上調律パネル。行送りや比率を微調整し、ワンクリックでCSS変数を出力。

G/M/H Shortcuts • Copy Tokens
07 / Tateyoko Hybrid

縦書き横書き交差

日本語組版の粋である「縦書き」を見出しやアクセントとして横書き文章と共存。縦中横（数字の横向き配置）も自動化。

Vertical Flow • Tatechuyoko
08 / Editorial Cut-in

抜き出し見出し

雑誌のようなエディトリアルな引用文。文字が詰まらず、上下の繊細な罫線とゆったりとした余白で紙面に緩急を生みます。

Pull Quotes • Balance Wrap
09 / Paragraph Composer

段落バランサー

文末に「1文字だけ」が取り残されるウィドウ（寡婦行）を自動検知して撲滅。行末の不自然なぶつ切りを美しく整えます。

No Widows • Balance Typeset
10 / Mathematical Scale

数理音階スケール

白銀比（大和比 1:1.414）、黄金比（1:1.618）、完全五度（3:2）などの数理的比率で見出しから本文までを数学的秩序で統率。

Silver & Golden • Musical Scales
Live Example

組版サンプル

ゆったりとした行間と余白のバランス。ツールバーの「Baseline Grid」を押すと、8pxの基準線を確認できます。

Scale:
Essay ・ Issue 01 • 2026年9月

余白と道具のあいだにある静けさ

急いで読むためではなく、ゆっくりと言葉を受け取るために。日々の思考を支える文字組みについて。

本を開いたとき、ふと息が落ち着く瞬間があります。それは文字がただ情報として詰め込まれているのではなく、紙の上にゆったりとした呼吸の余白が用意されているからかもしれません。行と行のあいだに十分な風が通り、次の段落へと視線が迷わず滑らかに進む。よい組版とは、読んでいるあいだその存在を忘れてしまうほど自然で、静かなものだと感じます。

印刷の歴史において、ページ全体のプロポーションや行の高さは、経験と数理的な感覚によって磨かれてきました。 スイスのデザイナーであるヨゼフ・ミュラー＝ブロックマンがまとめたグリッドシステムも、決して窮屈な制約ではなく、人がもっとも自然に内容に集中できる調和を見つけ出すための手引きでした。1 画面の上でも、この心地よさを再現できないだろうか。そんな思いから、文字サイズと行送りの比率を整え、画面幅に応じて自然に息ができるレイアウトの仕組みを組み立てました。

「よい組版は、静かに息をする。」

日本語の文章には、漢字、ひらがな、カタカナだけでなく、英語の単語や数字（例えば「2026年9月」や「HTML5 & CSS3」、「A4判」など）が当たり前のように混ざり合います。 全角文字の中に半角英数字が入ると、放置すると欧文が小さく沈み、文字と文字の間に息苦しい緊張を生んでしまいます。2 zine.js はそうした境界を自動検知し、活版印刷の「四分アキ（約0.22em）」を動的に挿入。さらに連続する開き括弧「（や『」の余分なアキを詰める約物ツメ処理を自動で行います。

手軽に、心地よい読書空間を作る

大がかりな設定や重いライブラリを読み込む必要はありません。 いつものHTMLに少しの属性を添えるだけで、ブログのエッセイや技術ドキュメント、作品のポートフォリオが、まるで丁寧に製本された小冊子（Zine）のように落ち着いた佇まいに変わります。

画面右下の「組版HUD」を開くか、キーボードの G を押せばグリッド線が、H を押せばスライダーパネルが展開し、InDesignのようにミリ単位の行送りや比率を微調整できます。

ZINE.JS SPECIMEN

組版体系
Zine.js v1.1.0 Solid Engine
音階比率
Silver Ratio (1:1.414) / 8px Grid

METRICS & INK

行送り
32px (Strict Baseline Multiples)
調律機能
Quarter-space, Bracket Trim, Tufte Sidenotes
ZINE.JS SHOWCASE
PROJECT KAMOS / KOSUKE KATO
PAGE 01
Quick Start & Documentation

使い方

既存のHTMLを活かしながら、シンプルな3ステップで印刷物のような気品ある組版を導入できます。

STEP 01

ファイルを配置して読み込む

ダウンロードした zine.css と zine.js をプロジェクトに配置し、HTMLから読み込みます。

STEP 02

記事をコンテナで囲む

data-zine="container" を付けると、8pxグリッド・和欧調律・スケールが全自動適用されます。

STEP 03

好みの装飾属性を添える

ドロップキャップや傍注、引用など、必要な箇所に属性を添えるだけで美しいDTPレイアウトが完成します。

1. ファイルの読み込み (セルフホスト) Zero Dependencies (~12KB) 
<!-- ダウンロードした CSS を <head> 内に配置 -->
<link rel="stylesheet" href="/css/zine.css">

<!-- ダウンロードした JS を <body> 末尾に配置（自動初期化） -->
<script src="/js/zine.js"></script>
2. 属性リファレンス (Cheat Sheet)

HTML属性・クラス一覧

機能 HTML属性 / クラス 書き方例 & 動作
コンテナ (必須) data-zine="container" 記事全体を包む。8pxグリッド吸着、和欧混植調律、段落バランサー、見出しスケールが全自動で発動。
飾り大文字 data-zine-dropcap <p data-zine-dropcap> で段落の頭文字を2行分の高さに精密吸着。
ドロップキャップ行数 data-zine-lines="2" 飾り大文字の占有行数を指定（デフォルトは2行、洋書風なら3行）。
本文横の傍注 data-zine-sidenote <aside data-zine-sidenote id="n1"> でPCは右余白に吸着、スマホは折りたたみ。
傍注の参照番号 class="zine-sidenote-ref" 本文中に <sup class="zine-sidenote-ref" data-target="n1">1</sup> を配置。
抜き出し見出し data-zine-cutin <blockquote data-zine-cutin> で上下罫線と広い余白を持つ雑誌風引用。
縦書きアクセント data-zine-vertical <h3 data-zine-vertical> で見出しを縦書きに（1〜3桁の英数字は自動で縦中横）。
2段組レイアウト class="zine-columns-2" 段落エリアに指定して新聞・雑誌のような美しい2段組を形成。
3. そのまま動く完全テンプレート (Minimal Template) index.html 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>わたしのエッセイ</title>
  
  <!-- 1. Zine.css を読み込む -->
  <link rel="stylesheet" href="./css/zine.css">
</head>
<body>

  <!-- 2. data-zine="container" で記事を包む -->
  <article data-zine="container">
    <h1>余白と道具のあいだにある静けさ</h1>

    <!-- 飾り大文字つきの冒頭文 -->
    <p data-zine-dropcap data-zine-lines="2">
      本を開いたとき、ふと息が落ち着く瞬間があります……
    </p>

    <!-- 本文と傍注 -->
    <p>
      本文の段落です。歴史あるグリッドシステムに触れます。<sup class="zine-sidenote-ref" data-target="note-1">1</sup>
    </p>
    <aside data-zine-sidenote id="note-1" data-target="note-1">
      1. ヨゼフ・ミュラー＝ブロックマンのグリッド思想。
    </aside>

    <!-- 抜き出し見出し -->
    <blockquote data-zine-cutin>
      「よい組版は、静かに息をする。」
    </blockquote>

    <h2>手軽に、心地よい読書空間を作る</h2>
    <p>
      道具が後ろに下がり、言葉そのものが主役になります。
    </p>
  </article>

  <!-- 3. Zine.js を読み込む（自動で初期化されます） -->
  <script src="./js/zine.js"></script>
</body>
</html>
4. JavaScriptでのカスタマイズ (任意) Options 
// 初期化オプション（指定しなくても初期値で美しく動作します）
Zine.init('[data-zine="container"]', {
  baseline: 8,            // 基準グリッド (8px)
  baseLeading: 32,         // 基準行送り (32px)
  scale: 'silver',          // 音階スケール ('silver' | 'golden' | 'perfectFifth' | 'majorThird')
  baseFontSize: 16,        // 本文フォントサイズ (16px)
  quarterSpace: true,      // 和欧混植の四分アキ自動挿入 (0.22em)
  bracketTrimming: true,   // 連続する括弧の約物ツメ処理
  opticalKerning: true,    // 和欧調律と行頭約物のぶら下げ
  dropCaps: true,          // 飾り大文字の自動計算
  sideNotes: true,         // 傍注の双方向ハイライト＆スムーズスクロール
  enableHUD: true,         // ブラウザ組版インスペクタHUD (G/M/Hキー対応)
});

// 音階比率の動的切り替え
Zine.setScale('golden');

// ベースライングリッドの可視化トグル
Zine.toggleGrid();

zine.js

いつものWebサイトに、印刷物のような落ち着いた読書体験を。

Download zine.js (v1.1.0) ESM (zine.esm.js) CSS (zine.css)
MIT License • Kosuke Kato (加藤康祐) • Zero Dependencies • ~14KB