FLOW ANATOMY #22 — 1サイトを縦に解剖する
kobanは、
なぜ売り込まずプロダクトを見せるのか。
技法は『点』、サイトは『線』。架空の配車管理SaaS『koban』は、機能紹介のヒーローもスクリーンショットのモックアップも使いません。開いた瞬間からプロダクト画面そのもの——左にナビゲーションのサイドバー、上に日時とアラート、中央にKPI帯と本日84便の配車テーブル、右にライブ通知ログという、実務で毎日触るダッシュボードの3カラムapp shellが立ち上がる。データは全て構造化された配列から描画され、フィルタ・検索・並べ替え・ページングは同じ配列への純粋な操作として実装されている。「これは売るためのLPではなく、動いている本物の管理画面だ」という説得力を、密度と整然さだけで作る設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
殻(app shell)→道具立て(サイドバー・トップバー)→概況(KPI)→絞り込み→本体(テーブル)→周辺視野(通知ログ)、という実務ダッシュボードの視線順。ページ全体がスクロールで動く縦長LPではなく、固定の骨格の中でデータだけが絶えず動く構造なので、章を追うほど"止まっている部分"と"動き続けている部分"の役割分担がはっきり見えてきます。
- 00SHELL殻 — 3カラムのapp shellが、ノーヒーローで立ち上がる常
- 01SIDEBAR案 — 6項目のナビが、現在地を常に示す常
- 02TOPBAR刻 — 実時計とアラートベルが、今この瞬間を刻む常
- 03KPI概 — 84便の全体像を、5枚のカードに圧縮する動
- 04FILTER絞 — ステータスチップと検索で、84件を狙い撃つ動
- 05TABLE本 — ソート可能な配車テーブルが、業務の本体になる動
- 06NOTIF脈 — 右端で通知ログが、5秒おきに息をする常
3カラムのapp shellが、ノーヒーローで立ち上がる
狙いページを開いても「koban」というロゴと「配車ダッシュボード」という見出し以外、名乗りも売り文句もない。左のナビ、中央の業務エリア、右の通知という3カラムの骨格が最初から完成形で表示され、以降どのセクションを見てもレイアウト自体は動かない。この“最初から本番画面”という体裁そのものが、他のショーケースが持つスクロール演出付きヒーローとの最大の違いです。
つなぎ骨格が固定されているぶん、以降の章で語る"動き"は全てデータ側（数字・行・通知）に集中する。次章から、この殻を構成する各パーツを個別に見ていきます。
6項目のナビが、現在地を常に示す
狙いダッシュボード・配車一覧・ドライバー・車両・帳票・設定の6項目を、自前SVGアイコン（外部アイコンフォント不使用）付きで縦に並べる。現在地の「ダッシュボード」だけが常時アクティブ表示のまま固定され、他の項目をクリックすると画面下にトーストで「このデモでは未実装です」と正直に表示する。実装済みの範囲だけを"今いる場所"として偽りなく示す設計です。
つなぎ下部にはイニシャルアバターと氏名・所属の入った担当者パネル。ここで「これは個人が使うのでなく、拠点ごとの担当者が使う業務システムだ」という文脈が静かに補強されます。
実時計とアラートベルが、今この瞬間を刻む
狙い左に和暦ふうの「――年――月――日」から実日付へ差し替わるタイトル、右に本物のOS時計に同期したHH:MM:SS表示、遅延件数バッジ付きのベルアイコンが並ぶ。ベルを押すと「遅延」ステータスへ即フィルタが切り替わり検索欄にフォーカスが移る——通知を見る人が、次にすべき行動（絞り込み確認）へ1クリックで着地する導線です。
つなぎ時計が毎秒動き続けることで、以降のKPIやテーブルが「今の状態」を映しているという前提を、言葉ではなく体感で保証する。次章はこの"今"を数字に圧縮するKPI帯です。
84便の全体像を、5枚のカードに圧縮する
狙い本日の配車数・運行中・遅延中・完了率・平均遅延という5指標を、シード固定の疑似乱数（mulberry32(20260725)）で生成した84件のダミー配車から常時集計する。遅延件数が0件超ならis-alert、完了率が30%以上ならis-goodという具合に、数字の意味を色でも二重化。ライブ更新のたびにテキストだけを差し替え、DOM要素自体は作り直さない——reveal済みのフェードイン状態やIntersectionObserverの監視対象を壊さないための、地味だが重要な実装判断です。
つなぎ5枚の数字は"見るための帯"。次章からは、この全体像に対して実際に手を動かして絞り込む操作パートに入ります。
ステータスチップと検索で、84件を狙い撃つ
狙い運行中・待機・遅延・完了・予定の5ステータスを、件数付きのチップで一覧しつつ絞り込める。右にはID・ドライバー・車両・ルートを横断する検索窓があり、入力から140msデバウンスして再描画する。0件になった場合は空の一覧ではなく「該当する配車がありません」という専用の空状態メッセージへ切り替わり、フィルタが機能していることをユーザーに明示する。
つなぎチップ操作中もキーボードフォーカスは同じ意味のボタンへ戻す実装が入っており、絞り込みという反復操作をキーボードだけで続けても迷わない。次章は、この絞り込みが最終的に流し込まれるテーブル本体です。
ソート可能な配車テーブルが、業務の本体になる
狙い便ID・ステータス・ドライバー・車両・ルート・出発／到着・遅延・積載率の9列。列見出しをクリックすると昇順・降順が切り替わり、aria-sortが同期する。積載率はミニバー＋数値の二重表現、遅延は色分けされたテキストで、どちらも読み上げず見た瞬間に判断できる密度で並ぶ。12件ごとのページネーションは、7ページ以下は全表示・それ以上は省略記号"…"で中央に寄せる標準的な実装。
つなぎ6.8秒ごとに運行中・遅延の便から1件をランダムに選んで遅延を微増減させ、該当行が一瞬だけハイライトする"擬似ライブ"更新も入る（reduced-motionでは自動停止）。静的なモックではなく、動いているシステムに見せる最後の一手です。
右端で通知ログが、5秒おきに息をする
狙い新規配車登録・配送完了・遅延通知・車両アラート・ルート変更・保守通知という6種類の文面を、それぞれ"矛盾しないステータスの便"だけから選んで生成する（完了通知は完了便から、遅延通知は遅延便から、というように）。5.2秒ごとに新着が上から差し込まれ、24件を超えると古いものから消える。全ての可変文字列はesc()でHTMLエスケープしてから挿入し、将来ここが実APIデータに差し替わっても安全な作りにしてある。
つなぎタブが非表示（document.hidden）の間は時計・通知・データ更新の全タイマーを止め、reduced-motionでは最初から起動しない。"常に動いている"という説得力は、無駄なCPU消費やモーション過多と引き換えにしない設計があって初めて成立します。
TAKEAWAY“密度で魅せる”実物ダッシュボードの5原則
kobanから取り出せる、業務SaaS・管理画面・BtoBツール系のサイト全般に持ち帰れる設計則。#21 はこぶね見積 の"form-first"と読み比べると、同じ「読ませず使わせる」志向でも、入力を主役にするか（フォーム）、既存データの一覧・監視を主役にするか（ダッシュボード）で、章立ての作り方が逆になることが分かります。
ヒーローを削り、骨格を先に見せる
キャッチコピーの代わりに、完成形のapp shell（サイドバー＋トップバー＋本体）をそのまま最初に出す。"これは本物の画面だ"という説得力は、演出よりも骨格の完成度から生まれる。
表示データは配列から描く
HTMLにベタ書きせず、構造化された配列から都度レンダリングする。フィルタ・検索・並べ替え・ページングを同じ配列への純粋な操作として実装すれば、状態が絶対にズレない。
数字は色でも二重化する
件数や達成率をテキストだけでなくis-alert/is-goodのようなクラスで色分けし、瞬時に良し悪しが伝わるようにする。読む前に感じ取れる情報密度が、業務ツールらしさを作る。
"擬似ライブ"は矛盾なく、控えめに
通知の文面はその内容と矛盾しないステータスの実データだけから生成し、更新頻度も数秒単位に抑える。動きすぎるダッシュボードは信頼を損なうため、密度は上げても騒がしさは上げない。
見えない所でタイマーを律する
タブが非表示の間は全ての定期更新を止め、reduced-motionでは起動しない。"常時ライブ"の説得力は、無駄な処理や過剰なモーションと引き換えにしないという裏側の規律があって初めて成立する。