なぜ部門別に hero を変えるか
5 部門があるのに、記事ヒーローのレイアウトが全部同じ、という雑誌は 書き手の個性が見えなくなる。少なくとも私はそう感じる。
技術記事と随筆を同じテンプレで読むと、読み手の脳内モードが切り替わらない。だから記事ヒーローだけは部門別に作り分けた。本文（reader-prose）は共通でいい。ヒーローが「どの声で書かれた記事か」を予告する役割を持つ。
5 種類の hero を作った:
| 部門 | レイアウト | 特徴 |
|---|---|---|
| Engineering | 12-col, mono メタライン + 巨大 ID | 観測誌寄り、データ感 |
| Design | 中央寄せ、余白多め | エディトリアル誌寄り |
| AI | 2-col with logbook サイドカー | 機械的整列 + 観測ノート |
| Process | 日付スタンプ箱 + タイトル | ジャーナル / 日誌寄り |
| Essay | Fraunces italic 連番 + 静かなタイトル | 文芸誌寄り |
Engineering — 12-col grid + mono メタ
Engineering の hero は 観測機器のダッシュボード をイメージした。
▪ ENGINEERING · #0054 · 3 MIN · 1,064 字 · 14 view
[巨大タイトル]
[1 段組 lead]
mono の 1 行に部門 / 記事 ID / 読了 / 字数 / view を並べる。等幅で並べると 観測中の誌面 に見える。タイトルは 56-72px の display で 2 行までに収める。
Design — 中央寄せ、余白多め
Design 記事は 誌面そのものを楽しむ部門 なので、hero に余白を持たせる。
[chip: DESIGN] ← 中央
[巨大タイトル] ← 中央
[lead] ← 中央 max-w-620px
[date · read · author] ← 中央 mono small caps
中央寄せにすると視線がページ全体に散らない。「読み物としての設計」を予告する。
AI — 2-col with logbook
AI 記事は 「観測ノート」と「本文」の二元構成。
[巨大タイトル] | LOGBOOK
[lead] | DATE 2026-05-09
| READING 4 min
| WRITER SoraEndo
| LENGTH 1,439 chars
| VIEWS 2
右に Logbook（観測情報）を縦に並べた。これがあるだけで「機械を観察する記事」の雰囲気が出る。<dl> で組んでアクセシビリティも担保。
Process — 日付スタンプ箱
Process は 日々の運用記録 なので、日付を主役にした:
┌──────────────┐
│ LOGGED │ [PROCESS タイトル]
│ 2026年5月9日 │ [lead]
│ 4 min ·... │
└──────────────┘
左に「観測日付スタンプ」のような箱を立てる。text-[34px] tracking-[-0.025em] で日付を主役級にする。記事の中身より「いつのことか」が大事な部門。
Essay — Fraunces italic 連番
Essay は 静かに、文芸的に。
50. [chip: ESSAY]
(huge [巨大タイトル]
italic) [lead — italic]
[author · date · read]
連番（50.）を Fraunces italic で巨大に左に置く。タイトルと並ぶ。読み手はまず 数字 で「これは何号目の随筆か」を把握する。本の章番号のような扱い。
どこで失敗しがちか
最初は Engineering hero に「巨大 #0012」を置いて完全に主役にしていた。これがタイトルとぶつかって読みづらくなった。hero の主役はタイトルで、ID やナンバーは脇役、という当たり前の優先順位を守る。
まとめ
5 部門 × 5 hero は手間に見えるが、書き手にとっての差別化 として効く。部門ごとに筆が変わる雑誌は、読み手の脳内モードも切り替わる。
ヒーローは記事の表紙。表紙が同じなら、中身の声色も同じに聞こえる。