FLOW ANATOMY #23 — 1サイトを縦に解剖する
大手町郵便局のあゆみは、
なぜヒーローを置かず1924年から始まるのか。
技法は『点』、サイトは『線』。架空の『大手町郵便局』100年史は、キャッチコピーが浮かぶヒーロー画面を持ちません。ページを開いた瞬間、もう1924年の木造局舎の前に立っている――冒頭の一文がそう宣言する通り、この作品の主役はスクロール量そのものです。ページの上端から下端までを1924年→2024年のものさしに見立て、たった一つの進捗値p(0〜1)が、左レールの現在年・和暦・経過年数、背景の地色、そして時代写真のフィルターまでを同時に動かす。大正の木造局舎(セピア)→戦後復興(灰)→高度成長(くすみ)→平成令和(冷たい紙色)と、下へ進むほど時代そのものが転調していく設計を、章ごとに解読します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ヒーロー無しで1924年からいきなり始まり、大正→戦後→成長→現代の4時代を経て、2024年の現在へまっすぐ着地する一本道。動くのは主に左レールの数字と、背景の地色・写真のフィルターだけ。派手なアニメーションは使わず、「時間が流れている」という一点だけを、スクロール量にぴったり同期させ続けます。
- 00OPEN起 — ヒーロー無し、1924年からいきなり始まる動
- 01RAIL常 — 左レールが西暦・和暦・経過年数を数え上げ続ける常
- 02TAISHO承 — 大正〜昭和戦前、セピアの木造局舎動
- 03POSTWAR承 — 戦後復興、灰がかった写真と自転車配達動
- 04GROWTH転 — 高度成長、番号と数字で街をさばく時代動
- 05MODERN転 — 平成〜令和、フィルターが消え現代の色が戻る動
- 06NOW結 — 現在(2024)、100年ぶんの数字で総括する動
冒頭の一文が、ヒーローの代わりを務める
狙い見出し部に大きなビジュアルは置かず、細い題字帯(mast)の下にいきなり「年代記｜CHRONICLE」のキッカーと「1924→2024。ある郵便局の、百年。」の見出し、そして「スクロールした分だけ、時間が進む。」という一文が並ぶ。装飾を極力削ぎ落とし、太字ひとつで宣言することで、これから100年をスクロールで下るという体験の“契約”を、最初の1画面で結んでしまう。
つなぎヒーローが無い分、来訪者は迷わず下へ進むしかない。この最小限の開幕が、次章で明かす「レール」という仕掛けへの導入になる。
左のレールが、常に「いま何年か」を指し続ける
狙い広い画面では、左端に細いレールが常駐する。西暦・和暦・レール上のドット位置・「開局から◯年」の経過年数――この4つはすべて、#trackという1924〜2024を収めた帯のスクロール量から算出される、たった一つの進捗値pの言い換えにすぎない。1945・1968・1989という節目の年がレール上の目盛りとして刻まれ、迷子にならない道しるべになる。狭い画面ではレールの代わりに、題字帯右の小さな年チップが同じ役割を引き継ぐ。
つなぎこの常在のレールがある限り、来訪者は年代記のどこにいても「いま何年か」を見失わない。以降の4つの時代セクションは、すべてこのレールの上を通過していくだけの存在になる。
セピアの木造局舎から、百年がはじまる
狙い大正13年(1924)、震災の翌年に開いた木造二階の局舎。写真にはsepia(.34) contrast(1.02)のフィルターがかかり、見出しの朱色も濃い赤茶(#7c2f22)に沈む。年ごとのエントリは縦の時間軸の線と丸い節点に沿って並び、「4名」「12名」といった数字がスクロールで視界に入ると0からカウントアップする。写真とテキストは左右に組まれ、時代が変わるたびに左右が入れ替わる――単調な繰り返しを避ける、控えめな仕掛け。
つなぎこの章で決まる配色・フィルター・組み方が、次の戦後復興の章との“差”としてはじめて意味を持つ。時代が変わるとは何が変わることか、を最初に刷り込む章。
灰色がかった写真が、焼け跡からの復興を語る
狙い昭和20年代、空襲で失われた台帳を記憶で書き起こす時代。写真のフィルターはgrayscale(.2) sepia(.06)で、大正のセピアより少し冷たく、まだ完全にはモノクロに振り切らない。自転車配達の再開・窓口の行列・三輪の集配車と、「8台の自転車」のような数字を交えたエントリが並ぶ。地の色も#e9dcc2から#e8e0d0へわずかに変わり、ページの“温度”がひとめもりだけ下がる。
つなぎ派手な演出を使わず、色温度をひとめもりずつ動かすだけで時代の空気を変える――このやり方が、後半さらに大きく振れる「現代」の章への振れ幅を確保する。
郵便番号と窓口の数字が、街をさばく時代を語る
狙い昭和43年の郵便番号導入、鉄筋の新局舎、年の瀬に78万通を捌いた年賀状――高度成長期は、扱う数字そのものが主役になる。エントリは一段ずつ時間差をつけて現れ、忙しなく拡大する局の様子を、出現のリズムでも再現する。写真フィルターはsaturate(.86)で彩度をわずかに落とし、当時のカラー写真が退色したような質感に寄せる。
つなぎ情報量が増える章だからこそ、時間軸の縦線と節点という同じ骨格を崩さない。骨格が同じだから、扱う出来事の密度が変わっても迷わず読み進められる。
写真からフィルターが消え、現代の色が戻る
狙い平成から令和にかけて、写真のフィルターはついにnone――100年かけて重ねてきた色味の“覆い”が、この章で剥がれ落ちる。朱色も#d02417という、現在の郵便ポストに近い鮮やかな赤に戻る。同時に年数字の書体が明朝からRoboto Monoへ切り替わり、「デジタル化していく時代」を書体そのもので語る。荷物の増加・民営化・再配達通知アプリと、いまの暮らしに直結する出来事が並ぶ。
つなぎ4つの時代を通じて積み上げてきた“色とフォントの転調”が、この章でようやく現在(いま)に追いつく。次の締めくくりの章では、その100年をまとめて数字にする。
百年ぶんの数字が、最後にまとめて示される
狙い2024年、開局100年。締めくくりの章では、延べ取扱通信物「18億通」・配達の総距離「地球42周ぶん」・在籍した局員「のべ340名」・局舎の建て替え「3回」、そして変わらず「1本」の赤いポスト――この5つの数字が、カウントアップで一斉に現れる。奥付には開局年・所在・あゆみの要約を表形式で添え、「架空である」旨を明記して締める。
つなぎレールが刻んできた100年という時間の“長さ”を、最後に“量”として実感させる着地。年代記(時間の軸)と白書(数字の軸)――次章で解読する『令和の米白書』は、この着地点を逆に“はじまり”として置く設計です。
TAKEAWAY“ひとつの進捗値”で時代を語る流れの5原則
大手町郵便局のあゆみから取り出せる、沿革ページ・周年サイト・企業史コンテンツ全般に持ち帰れる設計則。#18 星川プラネタリウムの一枚ずつ切り替える没入や、次章で解読する#24 令和の米白書の“数字から始まる”白書型と読み比べると、同じ「縦に長いページ」でも、時間で束ねるか・数字で束ねるかで設計がまったく変わることが分かります。
ヒーローを削り、最初の一文を契約にする
大きなビジュアルの代わりに、短い一文で「これは何を、どう体験させるページか」を宣言する。年代記・沿革ページ全般で使える、装飾より速い没入の作り方。
ひとつの進捗値に、複数の表示を束ねる
西暦・和暦・経過年数・レールの位置・背景色。すべてを個別のスクロールイベントで管理せず、単一のp(0〜1)から導出すると、表示同士がズレず実装も軽くなる。
色とフォントの“ひとめもり”で時代を語る
時代が変わるたびに大きく作り変えるのではなく、彩度・色温度・フィルターの強さを段階的にずらす。積み重なると、気づけば遠くまで変わっている。
時間軸の骨格は、情報量が増えても崩さない
縦線と節点というひとつの型を全時代で使い回すことで、扱う出来事の密度が章ごとに変わっても、読み手は迷わない。
締めくくりは“量”で答える
時間の長さを追ってきた年代記の最後は、数字の総括で着地させる。物語(質)と数字(量)、両方の手応えを残して終える。