FLOW ANATOMY #32 — 1サイトを縦に解剖する
みなと区の防災手引きは、
なぜ目次から始まるのか。
技法は『点』、サイトは『線』。架空の自治体『みなと区』が発行する防災ハンドブック「MK-BS-004」は、表紙をめくる感動もヒーローの一撃もありません。紺色の帳票ヘッダーの下に、いきなり目次が6章ぶん並ぶ――この作品の主役は、装飾ではなく実直な書式そのものです。第1章の15項目チェックリストは確認するたびに進捗バーが伸び、第2章は「危険」と「注意」を色で明確に分けたステップ手順、第3章は警戒レベル1〜5の色帯テーブル、第4章は区内の避難所をペットや段差の条件で絞り込める一覧、第5章は世帯人数を増減させると備蓄の数量がその場で再計算される道具、そして第6章は切り取って使える連絡先カードと、書名・改訂履歴を記した奥付で締めくくる。派手なアニメーションではなく、文書番号・章番号・図版番号という組版の体裁そのもので信頼を作る設計を、章ごとに解読します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
目次(#toc)からいきなり始まり、帳票ヘッダーが常駐したまま6つの章を進む。「いますぐ確認すること」→「地震」→「大雨・高潮」→「避難所」→「備蓄」→「連絡先」という、災害の時系列そのものが章立てになっており、最後は装飾のCTAではなく奥付という行政文書らしい着地で締めます。
- 00TOC起 — 表紙もヒーローも無く、目次と注意書きから始まる動
- 01BAR常 — 章送りナビ・文字拡大・印刷・読了進捗が常駐する常
- 02CH.1承 — 15項目チェックリスト、確認するたびに進捗が伸びる動
- 03CH.2承 — 地震発生時、危険と注意を色で分けた6ステップ動
- 04CH.3転 — 大雨・高潮、警戒レベル1〜5の色帯テーブル動
- 05CH.4転 — 避難所18か所、条件で絞り込める一覧動
- 06CH.5転 — 世帯人数を増減すると備蓄の数量が再計算される動
- 07CH.6結 — 切り取れる連絡先カード、そして奥付で締める動
表紙もヒーローも無く、目次と注意書きから始まる
狙いハンドブックという型を選んだ時点で、この作品もヒーローという発想を持たない。「みなと区危機管理課 二〇二六年四月 第4版」という発行者情報の下に、いきなり6章分の目次が並ぶ。各行は章番号・タイトル・要約・ページ番号(架空)まで添えられ、「15項目のチェック／所要10分」「区内18か所／受入可能人数」のように、開く前から中身の分量が伝わる。すぐ下の「この手引きを読むうえでの注意」というアラートボックスで、数値・避難所指定は変更されることがある旨と、停電時はFMラジオ78.2MHzで同内容を放送する旨を先に断っておく――配布物としての誠実さを、最初に提示する。
つなぎ目次で全体像を渡してしまうからこそ、以降の章は迷わず本題に入れる。次章で明かす帳票ヘッダーは、この目次の内容を常時ミニ化して携帯させる仕掛け。
章送りナビと読了進捗が、ページ最上部に常駐する
狙い紺色の帳票ヘッダーには、文書コード「MK-BS-004」・書名・版だけでなく、1〜6の数字だけの章送りナビ、「文字を大きく」の切替、「印刷する」ボタンが並ぶ。ナビの数字はスクロール位置に応じて現在章がハイライトされ(is-onクラス)、その下の細い読了バーは全体の読了進捗を0〜100%で示す。目次で示した設計図を、実際に読んでいる最中もずっと手元に置いておく仕組み。印刷ボタンを押すと、進捗で組み上がる図版やカウントアップの数字はすべて最終値に確定してから印刷される。
つなぎこの帳票ヘッダーがある限り、手引きのどこにいても「いま何章目か」「あとどれくらいか」を見失わない。以降の各章は、このナビの上を一つずつ通過していく。
15項目のチェックリスト、確認するたびに進捗が伸びる
狙い「家の中」「備え」「連絡と避難」の3グループ、計15項目のチェックボックスが並ぶ。チェックを入れるたびに上部のck-statusが更新され、件数はオドメーターのように短く送られてカウントアップし、進捗バー(ck-fill)が幅を伸ばす。さらにメッセージも「まだ確認していません」→「半分を過ぎました」→「あと少しです」と段階的に変化する。チェック状態は保存されないと明記し、印刷して紙で使うことを前提にする――デジタルの進捗表示と、アナログな運用を両立させる設計。
つなぎ「まず自分の状況を確認する」という導入を終え、次章からは実際に災害が起きた場面の行動手順に入っていく。
地震が起きたとき、危険と注意を色で分けた6ステップ
狙い「危険 揺れている間に火を消しに行かないでください」という赤いアラートボックスを先頭に置き、続く01〜06の番号付きステップ(身を守る→出口確保→火の始末→靴を履く→避難判断→安否連絡)を、経過時間つきで縦に並べる。図2-1では、部屋の中で安全な場所(机の下・内壁側)と危険な場所(窓際・家具の前)を線画のSVGで示し、スクロール進捗pに応じて危険ゾーン→安全ゾーンの順に要素が現れる。「順序を入れ替えないでください」という一文が、この章の設計思想そのもの。
つなぎ地震という一瞬の判断が求められる場面を終え、次章は「事前に分かる」水害という対照的な災害へ切り替わる。
大雨・高潮、警戒レベル1〜5の色帯テーブル
狙い表3-1は、レベル1(早期注意情報)からレベル5(緊急安全確保)まで、レベル数字のバッジに色帯(lv1〜lv5)を敷いた行として並ぶ。「区が出す情報」「とるべき行動」「対象」を横に読めば、自分がいつ動くべきかが一目でわかる。下の「レベル5を待たないでください」という注意書きが、表だけでは伝わりにくい“避難はレベル3〜4で完了させる”という核心を補う。地震のような瞬発力ではなく、段階を追って備える水害の性質が、色の濃淡で可視化されている。
つなぎ「いつ逃げるか」を扱ったこの章から、次章は「どこへ逃げるか」という具体的な避難所選びへ進む。
避難所18か所のうち、条件で絞り込める10か所
狙い「区内の指定避難所18か所」「本章に掲載10か所」「想定受入5,220人」の3つの統計値が、画面に入ると0からカウントアップする。その下の「すべて／地震時／水害時／ペット可／段差なし」という絞り込みボタンを押すと、表4-1の該当行だけが即座に表示され、「◯件を表示中」という件数もオドメーターのように送られて更新される。「ご自宅から最も近い避難所が、開設されるとは限りません」という注記が、なぜ絞り込みという操作を用意したかの理由になっている。
つなぎ行き先が決まったところで、次章は「そこで何日過ごすか」という備蓄の具体量へ話が移る。
世帯人数を増減させると、備蓄の数量がその場で再計算される
狙い「世帯人数」の＋／−ボタンを押すと、表5-1(飲料水9L・主食9食・携帯トイレ15回…)の「世帯合計」列が、1人あたりの数量×人数へその場で再計算され、数字はオドメーターのように旧値から新値へ短く送られる。特別な防災グッズを買い足す必要はなく、普段の食品を多めに買って古い順に使う「ローリングストック」という考え方を、フォームではなく計算という体験で腹落ちさせる。派手な演出は無いが、read-onlyの表を“自分の世帯用に変換できる道具”に変えている。
つなぎ備え終えたところで、最後の章は「もしもの時、誰に連絡するか」という最終確認へ進む。
切り取れる連絡先カード、そして奥付で締める
狙い「この頁は切り取って、財布や玄関に貼ってお使いください」という一文とともに、切り取り線を上辺に持つカードが現れる。災害用伝言ダイヤル(171)・消防(119)・警察(110)・停電・ガス漏れ・断水の電話番号を罫線で揃え、下には家族の集合場所を書き込む空欄まで用意する。本文はここで終わらず、書名・文書番号・発行・発行日・改訂履歴(第1版〜第4版)・次回改訂という奥付の表で締め、最後に「本サイトは架空の自治体ハンドブックです」という免責を明記する。フォームやCTAで締めるのではなく、最後まで“配布文書”としての体裁を崩さない。
つなぎ目次(第0章)で渡した設計図が、奥付という形になって最後に回収される。令和の米白書(#24)が図表一覧と参考文献で締めたのに対し、ハンドブック編はこの“切り取って持ち歩ける実用物”で終える――同じ行政文書型でも、読了後に何を残すかが対になっている。
TAKEAWAY“目次から始める”行政文書設計の5原則
みなと区 防災の手引きから取り出せる、マニュアル・行政文書・社内規定・取扱説明書系のサイト全般に持ち帰れる設計則。#24 令和の米白書の“チャートを進捗の関数として組む”白書型や、引越し見積もり(入力ライブ計算)の“数字をその場で再計算する”体験と読み比べると、同じ「実用のためのUI」でも、読ませるか・使わせるかで設計の重心が変わることが分かります。
目次を先に全部渡す
表紙やヒーローの代わりに、章立てと所要時間・分量を先に見せてしまう。緊急時に開く文書ほど、読み手が「どこに何が書いてあるか」を最初に把握できることが最優先になる。
危険・注意・情報を色で機械的に分ける
赤(危険)・橙(注意)・紺(通常)を装飾ではなくルールとして固定し、本文の強調(b要素)と組み合わせる。読み手がパニック時でも、色を見るだけで優先度を判断できるようにする。
数字は読み手の状況に合わせて再計算する
固定の目安表を置くのではなく、世帯人数やフィルタ条件など読み手自身の入力に応じて数量・件数をその場で計算し直す。「自分ごと」に変換できて初めて、実用文書として機能する。
進捗はチェックリストで自分の手に取り戻す
スクロールで自動的に進む演出ではなく、読み手がチェックを入れるたびに進む進捗バーにする。確認作業そのものをUIの主役にすると、読むだけで終わらせない設計になる。
印刷と持ち出しまでを設計に含める
文字拡大・印刷ボタン・切り取り線・奥付を用意し、画面の外で使われることを前提にする。beforeprintで進捗表示を最終値に確定させるなど、紙になった瞬間に破綻しない配慮までが行政文書らしい誠実さになる。