ブログを始めるための土台

活字に近いマルチカラム

Next.js と Sanity を前提に、記事が集まっていく場所を作るための初期メモ。記事ページは、横に広い画面でも一行の文字数が伸びすぎないように、本文を二つの段に分けて読む前提で組みます。読み手の視線が短い距離で折り返せるため、長めの日本語本文でも紙面に近いリズムを保てます。

今回はSanityの管理画面やスキーマには触れず、表示側の骨格だけを先に作ります。あとからデータを差し替えても崩れにくいように、本文、脚注、関連リンクをそれぞれ独立した領域として扱います。

スプレッド単位の二段組

二段組は単にCSSで列数を指定するだけではなく、左右二段をひとまとまりのスプレッドとして扱います¹。本文が長くなったときは、同じ形のスプレッドを縦方向へ繰り返すことで、視線移動の単位が安定します。

段落の字下げ

段落の始まりには一字ぶんの字下げを入れます。Webの記事では省略されがちな処理ですが、段落の開始位置を視覚的に揃えると、本文の密度が高い画面でも読み始めを見つけやすくなります。

会話文、図版のキャプション、短い注記のように字下げが不要な要素は、個別に字下げを外せるようにします。本文の規則を持ちながら、局所的な例外も許容する設計です。

組版ルールの入口

日本語の本文では、句読点、括弧、英数字、ルビなどが混ざります。まずはブラウザ標準のline-breakやhyphensを土台にし、必要なところだけ独自の補正を重ねられるようにしておきます。

たとえば見出しは単語の途中で折り返されると読みにくくなります。将来的にはBudouXのような分かち書き処理を挟めますが、この段階ではを手で置けるHTML構造に留めています。

均等割付と余白

本文段の終端をそろえるため、段落にはtext-align: justifyとtext-justify: inter-characterを指定します。行末の見え方が落ち着き、二段組の左右が近い濃度で並びます。

ルビと脚注

日本語の記事では組版くみはんや脚注を本文に差し込む場面があります。ルビは標準HTMLで表し、脚注は本文中の参照と本文末の注釈をアンカーでつなぎます。

フォントは欧文をNeue Haas Unica Pro、日本語をCezanne ProNで表示する指定にしています²。本文と脚注で同じ基準の書体が使われるため、UIと読み物の境界が自然につながります。

レイアウトの目的は装飾ではなく、長い本文を読むための視線の距離と情報の置き場を整えることです。