FLOW ANATOMY #24 — 1サイトを縦に解剖する
令和の米白書は、
なぜ目次から始まるのか。
技法は『点』、サイトは『線』。架空の調査機関『全国米穀動向研究所』による白書は、表紙をめくる感動もヒーローの一撃もありません。文書コード「ZBK-RW-08」を掲げた細い帳票ヘッダーの下に、いきなり目次が5章+付録2項目ぶん並ぶ――この作品の主役は、章ごとに独立して動く自己描画チャートです。折れ線はclip-pathの幅で、横棒は行ごとの伸長で、ドーナツは円周の長さで、それぞれの章のスクロール進捗p(0〜1)に合わせてゼロから描き上がっていく。数字はcount-upし、脚注(*n)・図表番号(図1-1)・出典が律儀に添えられ、最後は結論と参考文献・図表一覧・奥付という巻末構成で締める。装飾ではなく“組版の体裁”そのもので信頼感を作る設計を、章ごとに解読します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
目次(#toc)からいきなり始まり、5つの章それぞれが独立した自己描画チャートを持つ。表紙もヒーローも無く、"読むための道具"であることに徹し、脚注・出典・図表番号という学術文書の体裁を保ったまま、結論と巻末構成へまっすぐ着地します。
- 00TOC起 — 表紙もヒーローも無く、目次と注意書きから始まる動
- 01BAR常 — 章送りナビ・文字拡大・印刷・読了進捗が常駐する常
- 02CH.01承 — 一人当たり消費量の推移、折れ線で伸びる動
- 03CH.02承 — 品種別作付動向、横棒が一段ずつ伸びる動
- 04CH.03転 — 価格の変遷、二本の折れ線が跳ね上がる動
- 05CH.04転 — 食卓の変化、ドーナツと横棒で数える動
- 06CH.05結 — 結論、そして巻末(参考文献・図表一覧・奥付)へ動
表紙もヒーローも無く、目次と注意書きから始まる
狙い白書という型を選んだ時点で、この作品はヒーローという発想そのものを持たない。文書番号「ZBK-RW-08」、発行者「全国米穀動向研究所(架空)」、初版年月を記した細い帳票ヘッダーの下に、いきなり目次が5章+付録2項目ぶん並ぶ。各行には章番号・タイトル・要約・ページ番号(架空)まで添えられ、開いた瞬間に本の厚みが伝わる。すぐ下の「本書の性格について」というアラートボックスで、数値がすべて架空であることを先に断っておく――白書というフォーマットを借りるからこそ、最初に誠実さを提示する。
つなぎ目次で全体像を渡してしまうからこそ、以降の章は迷わず本題(データ)に入れる。次章で明かす「章送りナビ」は、この目次の内容を常時ミニ化して携帯させる仕掛け。
章送りナビと読了進捗が、ページ最上部に常駐する
狙い帳票ヘッダーには文書コード・書名・版だけでなく、1〜5の数字だけの章送りナビ、文字サイズ切替、印刷ボタンが並ぶ。ナビの数字はスクロール位置に応じて現在章がハイライトされ、その下の細い読了バーは本文+奥付をまとめた領域の進捗を0〜100%で示す。目次で示した設計図を、実際に読んでいる最中もずっと手元に置いておく仕組み。
つなぎこの帳票ヘッダーがある限り、白書のどこにいても「いま何章目か」「あとどれくらいか」を見失わない。以降の各章は、このナビの上を一つずつ通過していく。
第1章、118.3kgから50.1kgへ折れ線が伸びていく
狙い1962年のピーク118.3kgから2025年の50.1kgまで、63年ぶんの推移を描く図1-1は、あらかじめ描き切った折れ線をclip-pathの幅で隠しておき、章の進捗pに合わせて左から現れさせる自己描画チャート。各年の点も進捗の閾値を超えるたびに一つずつ点灯し、最後の点にだけ「50.1kg」のラベルが浮かぶ。上部のstat-stripでは「118.3kg」「50.1kg」「57.6%」の数字がカウントアップし、下には出典付きの表が続く――グラフ・数字・表という白書の三点セットを、この章で確立する。
つなぎこの「進捗pで折れ線を描く」仕組みは以降の章でも繰り返される、白書全体を貫く骨格。第2章では同じ仕組みを横棒に転用する。
第2章、コシヒカリ33.4%の横棒が一段ずつ伸びる
狙いコシヒカリ33.4%を筆頭に、ひとめぼれ・ヒノヒカリ・あきたこまちと続く横棒グラフ(図2-1)は、行ごとに開始の閾値をずらして順番に伸びる――上から下へ、まるで順位が読み上げられるように出現する。最後の行「その他(252品種)」も34.6%とコシヒカリに匹敵する幅を持ち、一極集中と裾野の広さが同じグラフの中で対比される。下の表では主産地の傾向まで補い、グラフだけでは語れない地理的な背景を添える。
つなぎ前章の折れ線(時間の推移)から、この章の横棒(ある一時点の内訳)へ――同じ「進捗で描く」骨格のまま、見せるデータの種類を切り替えられることを示す章。
第3章、二本の折れ線が「令和の米不足」で跳ね上がる
狙い取引価格(実線)と消費者物価指数(破線)、二本の折れ線を左右異なる軸で重ねた図3-1。1995年から2020年まではおおむね緩やかな下落で寄り添って動くが、2025年に向けて二本そろって急伸する――猛暑による作柄の乱れと流通在庫の逼迫という文中の説明を、グラフの傾きの変化がそのまま裏づける。最後の点には「21,400円」という着地点のラベルが浮かび、脚注では「令和の米不足(架空の呼称)」という補足が加わる。
つなぎ数字の変化を折れ線の“傾き”として見せてきたこの章が、次の第4章で「割合」という別の切り口(ドーナツ)に接続する。
第4章、ドーナツと横棒で「食べ方」を数える
狙い家庭内炊飯58.2%・中食惣菜19.4%・外食14.1%・加工品8.3%――図4-1のドーナツは、進捗pに応じて円周を順番に描き足し、中心の数字と凡例の数値も同時にカウントアップする。続く図4-2では「朝食に米飯を食べる人」が1975年の82%から2025年の46%まで縮んだことを、ごく短いミニ横棒2本だけで見せる。派手なグラフを増やすのではなく、章ごとにグラフの種類を変えて飽きさせない構成。
つなぎ消費量・作付・価格ときて、この章でようやく「暮らしの中の米」という生活実感に降りてくる。数字の物語を、最後の結論の章で一つに束ねる。
第5章、三つの発見にまとめ、巻末で本書を閉じる
狙い第1〜4章の数値を接続すると見えてくる三つの構造変化――「減速する減少」「一極集中と裾野の両極化」「安定から変動へ」――が、findings-gridに3枚のカードとして並ぶ。本文はここで終わらず、参考文献(架空の資料7点)・図表一覧(掲載した図表への内部リンク)・奥付(書名・文書番号・発行日を記した表)という、学術文書らしい巻末構成まで律儀に用意する。フォームや購読CTAでは締めず、最後まで「読み物」としての体裁を崩さない。
つなぎ目次(第0章)で渡した設計図が、巻末で図表一覧という形になって回収される。年代記編(#23 大手町郵便局のあゆみ)が“時間の総括”で終えたのに対し、白書編はこの“出典と索引”で終える――同じ「縦に長いページ」でも、着地のさせ方が対になっている。
TAKEAWAY“目次から始める”白書設計の5原則
令和の米白書から取り出せる、レポート・調査資料・技術文書・マニュアル系サイト全般に持ち帰れる設計則。#23 大手町郵便局のあゆみの“時間で束ねる”年代記型や、#18 星川プラネタリウムのスライド型没入と読み比べると、同じ「縦に長いページ」でも、データで束ねるか・時間で束ねるかで設計がまったく変わることが分かります。
目次を最初に渡し切る
表紙やヒーローの代わりに、章立てと要約を先に見せてしまう。読み手は「この文書の厚みと構成」を最初に理解でき、以降は迷わず読み進められる。report/白書/マニュアル系サイト全般に使える型。
チャートは「進捗の関数」として描く
完成した図を置くのではなく、その章のスクロール進捗pの関数として線・棒・円を伸ばす。章ごとに独立した進捗を持たせれば、チャートが増えても実装は同じ関数の使い回しで済む。
数字は最終値をHTML側に一本化する
アニメーションの途中値をJSで二重管理せず、data-final/data-target属性を単一の正とする。表示順やコピーを変えてもJSを直す必要がなく、事故が起きにくい。
脚注・出典・図表番号で「体裁」を作る
装飾ではなく、章番号・図番号(図1-1)・脚注(*n)・出典という組版のルールそのものが、白書らしい信頼感を生む。数字の大きさより、体裁の一貫性がものを言う。
結論は巻末で回収する
本文の結論で終わらせず、参考文献・図表一覧・奥付という巻末セットまで用意する。フォームやCTAで締めるのではなく、「読み終えた」という感覚を最後まで裏切らない。