FLOW ANATOMY #27 — 1サイトを縦に解剖する
元町銀座商店街は、
なぜ見出し画像を持たないのか。
技法は『点』、サイトは『線』。架空の商店街ディレクトリ『元町銀座商店街／MOTOMACHI GINZA』は、全58店を紹介するのに一枚の写真も、一行のキャッチコピーも掲げません。かわりに実務的な名札帯のすぐ下から、検索・業種フィルタ・並べ替え・表示切替を備えた一覧そのものを主役として置きます。しかも「只今営業中 32／58店」という数字は固定値ではなく、58店それぞれの営業時間データを毎回その場で計算し、60秒ごとに静かに更新し続けます。ヒーローを削り、探せる状態そのものを見せる——商店会のペラ紙ディレクトリをWebに移した設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
名札帯→ツールバー→業種チップ→一覧→沿革案内。他のFLOWシリーズが「起承転結」で緩急をつけるのに対し、このサイトは絞り込みの精度で緩急をつけます。動くのは背景ではなく、検索するたびに増減する「表示中の件数」そのもの。色は檜皮色ひとつに絞り、装飾より判読性を優先する“実務的な落ち着き”を保ちます。
- 00MASTHEAD起 — ヒーローの代わりに、名札とライブ集計を置く動
- 01TOOLBAR探 — 検索・営業中のみ・並べ替え・表示切替を即時反映動
- 02CHIPS絞 — 18業種を件数付きチップで複数選択動
- 03GRID核 — 58件をカード/リストで描き分け、営業中バッジが自律更新動
- 04ABOUT結 — 沿革・アクセス・発行元で事務的な一覧に人格を足す動
ヒーローの代わりに、名札とライブ集計を置く
狙い画面いっぱいのビジュアルも、詩的なコピーもありません。あるのは「元町銀座商店街 全58店」という名乗りと、只今営業中 ▲／58店・新着 ▲店・判定時刻 --:-- という3つの数字だけの、実務的な名札帯。この数字は起動時に一度計算され、以後は60秒ごとのsetIntervalで更新される生きた集計です。一覧サイトの一枚目に必要なのは、心を動かす絵ではなく「今、何件あるか」という即答だと言い切る設計。
つなぎここで示された3つの数字が、以降のツールバー・チップ・グリッドすべての「今この瞬間の状態」を先取りして見せる予告編になります。派手さを捨てた分、数字の正確さそのものが信頼の土台になる。
検索・営業中のみ・並べ替え・表示切替を、即時反映する
狙い店名・業種・丁目で絞れる検索窓（90msデバウンス）、「営業中のみ」トグル、号順／五十音順／新着順を切り替えるセレクト、カード/リストの表示切替ボタンを一列に並べます。どの操作も確定ボタンを介さず、変更した瞬間に一覧と件数表示（「全58件を表示中」→「58件中 N件を表示中」）が書き換わる。探す行為そのものにラグを作らないのが、一覧系サイトの生命線です。
つなぎこの段の4つの道具が、次章の業種チップと合わさって初めて「知りたい店だけを、自分の言葉と条件で残す」体験になります。ツールバーは絞り込みの入口、チップは絞り込みの中身。
18業種を、件数付きチップで複数選択させる
狙い食堂・青果・鮮魚・呉服など18業種を、線アイコン＋件数バッジ付きのチップとして横に並べます。「すべて」は単独排他、業種チップ同士は複数選択でき（食堂＋カフェ、のように）、選ぶたびに「すべて」の点灯状態も自動で追従する。件数バッジは静的な飾りではなくSTORES.filterで数え上げた実数で、選ぶ前から「その条件で何件あるか」が見えているのがポイントです。
つなぎチップで絞った条件は、検索語・営業中のみ・並べ替えとすべてANDで重なります。次の一覧が長い理由（58件）を、迷わず短くする役目をこの段が担う。
58件をカード/リストで描き分け、営業中バッジが自律更新する
狙いこのサイトの核。フィルタ後の店舗を、カード表示なら業種アイコン・状態バッジ・営業時間・定休日・創業年、リスト表示なら1行の密な表に描き分けます。新規開業店にはNEWラベル。そして各カードの営業中／営業時間外／本日定休バッジは、店ごとの曜日別営業時間から算出した状態で、60秒ごとに[data-badge]要素だけをピンポイントで書き換える——一覧全体を再描画せず、出現アニメーションを壊さずに“今”を保ち続けます。該当0件のときは、検索条件をリセットする導線を必ず添える。
つなぎマストヘッドで見せた「只今営業中32店」という数字は、ここで1件ずつのバッジとして裏付けられます。集計と個票が同じ計算ロジック（isOpenNow）を共有しているから、数字と実物がずれない。
沿革・アクセス・発行元で、事務的な一覧に人格を足す
狙い探し終えたあとに、3列で締めます。左は1953年の闇市アーケードから現在58店に至る沿革メモ、中央は最寄り駅・アーケード全長・丁目区分を簡易SVGマップで示すアクセス案内、右は発行元の商店街振興組合と「2026年7月号・次回10月更新」という発行情報。フィルタやバッジという“いま”の機能一辺倒だったページの最後に、“来歴”という時間軸を一段だけ足す。
つなぎ一覧・検索・バッジという実務機能で始まったページが、最後は「この一覧は誰が、なぜ更新しているか」を明かして終わる。無機質な集計に発行元の顔を足すことで、事務的なディレクトリが一枚の信頼できる紙に見えてきます。
TAKEAWAY“一覧を主役にする”ための5原則
元町銀座商店街から取り出せる、店舗ディレクトリ・施設案内・名簿系サイト全般に持ち帰れる設計則。#21 はこぶね見積 の“form-first”がコピーより先に入力を置くのと同様に、このサイトは装飾より先に「絞り込める状態」を置きます。同じ“機能優先”でも、片や入力、片や一覧という違いに注目すると設計の作り分けが見えてきます。
ヒーローは要らない、一覧そのものを主役にする
件数の多いディレクトリ系では、見出し画像より先に「何件あって、今何件見えているか」を示す名札帯を置く。感情を動かす一枚絵より、判読性の高い数字が来訪者を安心させる。
「営業中」は固定値でなく、その場で計算する
状態を表す言葉は、更新を忘れた瞬間に嘘になる。営業時間という一次データから毎回算出し、軽量な間隔で再判定すれば、ページを開きっぱなしにしても情報が腐らない。
検索・フィルタ・並べ替え・表示切替は即時反映を徹底する
確定ボタンを挟むと、絞り込みは「作業」になる。変更した瞬間に一覧と件数が動けば、絞り込みは「会話」になる。デバウンスで負荷を抑えつつ、体感の遅延はゼロに近づける。
空の結果には必ず出口を用意する
条件が重なって0件になるのは一覧系の必然。「該当なし」で終わらせず、その場でリセットできる導線を添えれば、迷子にならず探索を続けてもらえる。
事務的な情報にこそ、発行元の人格を足す
集計とバッジだけで終わるページは道具止まり。沿革・アクセス・発行元という“誰が更新しているか”を一段添えるだけで、無機質なディレクトリが信頼できる媒体に変わる。