FLOW ANATOMY #30 — 1サイトを縦に解剖する
雲州日日新聞の号外は、
なぜ写真を一枚も使わずに始まるのか。
技法は『点』、サイトは『線』。架空の地方紙『雲州日日新聞』の号外は、ヒーロー画像もイラストも一枚も持ちません。赤い「号外」の一語と題字だけで紙面が始まり、あとは縦組み(writing-mode:vertical-rl)のブロック組みを、日本の新聞と同じ右から左へ、横スクロールで読み進めていく。主記事・路線図・囲み記事・沿線の声・社説・紙面indexという版面の型を律儀に守りながら、罫線の太さ（1px／3px／double）と活字の大小だけで、情報の格を作り分ける。技法で驚かせるのではなく、"組版の規律"だけで最後まで読ませる設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
号外(告知)→主記事(事実)→路線図(構造)→囲み(歴史と数字)→沿線の声(証言)→社説(意見)→紙面index・奥付(締め)。写真を持たない代わりに、事実と意見を段ごとに物理的に分離し、右から左への横スクロールを「紙面をめくる」動作に翻訳します。動くのはほとんどが文字の出現（段落の順次リビール・社説の右→左マスク）だけで、装飾アニメーションはほぼ使いません。
- 00FLAG起 — ヒーロー画像なし、赤い「号外」の一語から紙面が始まる動
- 01LEAD証 — 五段の主記事が、名前入りの証言まで積み上げる動
- 02MAP図 — 十四電停の路線図が、記事の外側から裏づける動
- 03BOX歴 — 囲みのあゆみと数字が、五十五年の重みを刻む動
- 04VOICE声 — 沿線三人の肉声が、記事の外側から効いてくる静
- 05EDIT論 — 社説が、事実の先の"意見"を静かに述べる静
- 06INDEX結 — 紙面indexと奥付が、フォームなしで紙面を閉じる常
ヒーロー画像なし、赤い「号外」の一語から紙面が始まる
狙いふつうのランディングページはヒーロー画像かキャッチコピーで始まりますが、この号外は写真を一枚も置きません。題字ブロック（.col-flag）は赤ベタの「号外」の二文字、題字「雲州日日新聞」、発行日・号数・発行所を記す定義リスト、そして「この号外は無代です」の一文だけ。横スクロール紙面ではIntersectionObserverによるリビールが先頭で発火せず固着してしまうため、この段だけはdata-ck-revealを外し常時可視にしてある。読み込み中は「最終版を 刷って います…」という進捗バー付きのロード幕が、印刷が刷り上がる時間そのものを演出する。操作卓（紙面外のUI）では文字の大きさを3段階に切り替えられ、「紙面は右から左へ読み進みます」という一文が、これから始まる読み方を先に断っておく。
つなぎここで宣言されるのは「これは画像で見せるサイトではなく、活字で読ませる紙面である」という一点。以降のすべての段が、この赤い号外の重みの上に積まれていく。
五段の主記事が、名前入りの証言まで積み上げる
狙い主記事の段（.col-lead）は「市電五五五号線、あす最終運行」という見出しの下、段抜きの二重罫（.rule-dbl）で本文と区切ってから、リード文→背景説明→局長のコメント→最終日の案内→沿線住民の一言、と五つの段落をdata-ck-revealで一段ずつ静かに出現させる。固有名詞（戸倉史郎局長、大西みつさん）や具体的な数字（一九七一年開業、二〇二五年度五十一万人）を惜しまず入れることで、架空の記事でありながら実在の報道記事と同じ密度の"取材されている感"を作っている。
つなぎ事実（何が起きるか）をここで語り切ることで、次章以降の路線図・囲み・社説は「その事実の周辺」として安心して読める。記事本体が最初に立つ、新聞の基本の順番。
十四電停の路線図が、記事の外側から裏づける
狙い路線図の段（.col-map）は背景を一段だけ淡いベージュに変え、港前から山手車庫まで十四の電停をSVGの縦線と円で結ぶ。中間駅は小さな円、始発・終着は太い円、中町だけは朱色の「hub」として強調される。駅名ラベルはtext-orientation:uprightで縦のまま読める向きに固定され、地の文と同じ縦組みの流儀を崩さない。文章では書ききれない「路線の形そのもの」を、記事とは独立した一段として差し込む判断。
つなぎ主記事で語られた「五五五号線」が、ここで初めて具体的な形を持つ。次の囲み記事では、この路線が歩んできた時間の厚みへと視点が移る。
囲みのあゆみと数字が、五十五年の重みを刻む
狙い囲み記事の段（.col-box）には、罫囲み（border:1px solid）の箱を二つ縦に並べる。ひとつは一九七一年の開業から二〇二六年の最終運行までを年号と一行の出来事で刻む年表（dt/ddの定義リスト）。もうひとつは総延長八・二キロ／全線所要三十一分／十四電停／現存車両二両／営業五十五年という五つの数字だけを並べたボックス。どちらもdata-ck-staggerで項目を一つずつ時間差で出し、最後の行だけ朱色に変えて「今、まさにここ」を示す。
つなぎ路線図で得た「形」に、ここで「時間」が重なる。次章の住民の声は、この年表と数字の裏にいる"生きた人間"へとカメラを寄せる。
沿線三人の肉声が、記事の外側から効いてくる
狙い「沿線から」の段（.col-voice）は、六八歳・三四歳・七九歳と世代の違う三人の一言を、細い罫線（border-inline-start）だけを添えた引用ブロックで並べる。「発車のベルが目覚まし時計だった」「バスの方が正直助かる」と、感傷一色にせず賛否が割れる声を残すことで、記事全体の温度が一方向に偏らないようにしている。すぐ下には「全便無料」「見送りの会」など最終日の案内を、朱色の太字ラベル付きリストで実務的に添える。
つなぎ事実（記事）と数字（囲み）のあとに、感情（声）を置く。次の社説は、この声も踏まえたうえで新聞社自身の意見を述べる段へと進む。
社説が、事実の先の"意見"を静かに述べる
狙い社説の段（.col-edit）は背景色を囲みと同じ淡いベージュに変え、「音が消える日に」という見出しだけ罫線で囲んで独立させる。見出しの出現はdata-ck-reveal="mask"——通常は左から右へ開くクリップパスを、この紙面だけclip-path:inset(0 0 0 100%)に上書きして右から左へ開かせ、縦組み・RTLの読み方向とアニメーションの向きを一致させてある。本文は採算論だけに立たず「まちの記憶は路線図の上には載らない」と踏み込み、事実の段（主記事）とは明確にトーンを変えて"意見"であることを示す。
つなぎ事実・数字・声・意見という四つの層を積み終えたところで、紙面は最後の一段——読者を送り出す紙面indexへ向かう。
紙面indexと奥付が、フォームなしで紙面を閉じる
狙い紙面の最後（.col-index）は、申込フォームでもニュースレター登録でもなく「本日の紙面」という目次——一面から六面までの見出し一覧——と、発行所・住所・購読案内を記す奥付（colophon）で締める。奥付には「本紙は Web Design Lab のショーケース用に制作した架空の新聞です」という開示を必ず添え、実在との混同を防ぐ。この紙面indexに至るまで、画面下端の読了度バー（#rp）は横スクロール量をそのまま0〜100%に変換し続けており、最後の段に着いた瞬間にバーが満ちて紙面全体が朱にわずかに色づく——文字だけの紙面でも、読者は自分がどこまで読んだかを常に知っている。
つなぎすべての段を通じて一貫しているのは「写真ではなく活字と罫線で語る」という一点。CTAで畳みかけず、目次と奥付という新聞そのものの終わり方で静かに幕を引く。
TAKEAWAY“活字と罫線だけ”で読ませる紙面の5原則
雲州日日新聞から取り出せる、報道・広報誌・議事録・白書など"文字が主役"のコンテンツ全般に持ち帰れる設計則。#29 即金堂 の「金額を最初に見せて数字で押す」高密度LPと読み比べると、同じ Web Design Lab の中でも「数字で押す」と「文字だけで読ませる」がまったく別の設計原則で成立していることが分かります。
ヒーロー画像を持たない勇気
写真を一枚も使わず、赤い号外ラベルと題字だけで最初の画面を成立させる。文字がコンテンツそのものである題材では、画像より活字の組み方そのものを見せたほうが、かえって説得力を持つ。
横スクロールを「紙面をめくる」動作に翻訳する
右から左への横スクロールは通常のWebでは異物だが、日本語の縦組み新聞という文脈に置くと自然な"めくり"の比喩になる。読了度バーが横スクロール量をそのまま可視化し、迷子にさせない。
罫線の太さだけで情報の階層をつくる
1px（段間の細罫）／3px（見出しの太罫）／double（境界の二重罫）の3種類だけで、装飾なしに主記事・囲み・社説の格の違いを伝える。罫線の種類を増やすほど、紙面はかえって雑に見える。
「事実」と「意見」を物理的に分けて並べる
主記事（事実）と社説（意見）を別の段・別の背景色に分離し、混同させない。ジャーナリズムの倫理を、注意書きではなくレイアウトそのもので体現する。
フォームで終わらせない
号外の締めは申込フォームではなく、紙面indexと奥付。読了度100%というごほうびと「これは架空の新聞です」という誠実な開示だけで終わる。すべてのサイトがCTAで終わる必要はない。