FLOW ANATOMY #26 — 1サイトを縦に解剖する
『川辺町夏まつり』は、なぜ
写真の代わりに紙を選ぶのか。
技法は『点』、サイトは『線』。架空の町内会サイト『川辺町夏まつり／KAWABE MATSURI』には、写真が一枚もありません。夜紺のコルクボードに、マスキングテープと画鋲で留めた紙の掲示物が5枚——表紙のお知らせ・出店・盆踊り・タイムテーブル・雨天対応——ぴん、ぴん、と並んでいく。提灯も櫓も金魚もぜんぶ手描き風のインラインSVGで、実在の写真は使いません。それでいて「9つの屋台」「3曲の盆踊り」「9時間のタイムテーブル」と、情報量はむしろ多い。飾りより先に日時と場所を出すlist-firstの掲示物が、密度を保ったまま雑にならない理由を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
表紙のお知らせ→出店→盆踊り→タイムテーブル→雨天対応→連絡先、という掲示板そのままの一本道。動くのはページ全体の演出ではなく「紙が1枚ずつ現れる」reveal と、細部の手描きSVG(提灯の揺れ・金魚の泳ぎ・輪の回転)だけです。色は夜紺の地に、赤・橙・黄・薄荷・桃という祭りの5色を一貫させ、情報量が多くても“縁日の賑わい”として破綻しないようにします。
- 00MASTHEAD起 — 写真無し、紙の掲示物とスタンプがぴんと留まる動
- 01STALLS承 — 9つの出店を、値段つきカードで並べる動
- 02ODORI転 — 櫓を囲む3重の輪と、3曲の踊り動
- 03TIMETABLE結 — 提灯マーカーが今の時間まで進む動
- 04RAIN誡 — 派手さの後に、雨天時の地味な確認事項動
- 05FOOTER常 — フォームなし、連絡先を明記して静かに締める常
写真無し、紙の掲示物とスタンプがぴんと留まる
狙い最初に現れるのは大きなヒーロー画像ではなく、夜紺のコルクボードに斜めに留まった1枚の紙。左右にマスキングテープ、上に画鋲、右上には「今年で52回目」と円形にテキストを回す手作りスタンプ。見出し「第52回／川辺町夏まつり」は色をわずかにずらした二重の影(印刷の版ズレ)で組まれ、下には日時・会場・雨天時を並べるquick-factsの定義リストが3色の左罫で並ぶ。派手な写真の代わりに、紙質と手仕事の跡だけで“町内会が作った本物感”を出す入口です。
つなぎここで決まるのは「これは広告ではなく掲示物である」というトーン。以降の紙もすべて同じ角度のブレ・同じテープ・同じ紙色で統一され、1枚のボードに貼られた連作として読まれていきます。
9つの出店を、値段つきカードで並べる
狙いかき氷・たこ焼き・金魚すくい・お化け屋敷まで9つの屋台を3列グリッドで淡々と並べる章。絵文字アイコンと、金魚すくいだけは手描き風のインラインSVGで差をつけ、テント番号と値段(または「無料・整理券制」)を右端にきっぱり添える。ホバーでカードがふわりと持ち上がり、スクロールで入ってきた瞬間はdata-ck-staggerで1枚ずつ時差をつけて浮かび上がる——情報は羅列でも、現れ方に順番があることで“めくっている感覚”が残ります。
つなぎ祭りの「賑わい」を、動きの派手さではなく数の多さと整列で見せる章。次の盆踊りへ進む前に、来場者が現地で何を買えるかを頭に入れてもらいます。
櫓を囲む3重の輪と、3曲の踊り
狙い左には線画だけで組んだ櫓(やぐら)のSVGアイコンと、破線の同心円3つがゆっくり42秒かけて回り続ける“輪”。右には炭坑節・川辺音頭・東京音頭という3曲を、時刻つきのリストで縦に並べる。写真の代わりに線と円だけで「櫓を囲んで踊る」情景を示し、動きは常時だが極めて遅く、目に付きすぎない速度に抑えてあります。
つなぎ出店の「買う」から、盆踊りの「参加する」へ。ここでも浴衣でなくてよい・途中参加OKという一文が添えられ、掲示物らしい実務的な親切さが続きます。
提灯マーカーが、今の時間まで進む
狙いこのサイトの背骨。開会式16:00から終了20:30まで9項目の破線タイムラインに、小さな提灯アイコンがスクロール量に応じて上から下へ滑らかに移動し「今、読んでいる時刻」を指す。盆踊りとフィナーレ花火の2行だけは黄色く塗って強調され、下にはIntersectionObserverで画面内に入ったときだけ動くCanvas 2Dの打ち上げ花火が控えめに添えられる——常時描画せず、見えている間だけ計算する軽量な演出です。
つなぎここまでの出店・盆踊りがすべて「何時何分の出来事か」に一度収束する章。花火という視覚的なごほうびで一日の流れを締めくくり、次の雨天対応への落ち着いたトーンに戻ります。
派手さの後に、雨天時の地味な確認事項
狙い花火という盛り上がりのすぐ後に置かれる、いちばん地味だが実用的な章。右上に破線の円形スタンプで「中止／順延 ここを確認」と目立たせ、その下に小雨=決行(緑)・荒天=中止(赤)という2値の判定と、当日15:00までに3か所で告知する具体的な手順を並べる。装飾は最小限、色分けと太字だけで判断材料を渡す、掲示物としていちばん実務寄りの一枚です。
つなぎ祭りの高揚を煽りっぱなしにせず、天気という不確実性を正直に先に伝えておく。この誠実さが、フッターの静かな締めへと素直につながっていきます。
フォームなし、連絡先を明記して静かに締める
狙い「お問い合わせは、掲示板の下の連絡先まで。」という一文の後、主催・後援・問い合わせ・発行元を2列の定義リストで淡々と並べるだけ。メール登録フォームも抽選応募ボタンもありません。最後に「本ページは架空の町内会・イベントのお知らせで、写真は使用せずSVG／CSSの手描き表現である」旨を明記し、薄い文字で静かに締める——掲示物は掲示物のまま終わる、という一貫性です。
つなぎ写真もCTAも持たずに始まったサイトは、最後まで売り込まずに終わる。list-first(情報が先)の姿勢を、最後の1行まで崩さないことがこの掲示物型サイトの品位になっています。
TAKEAWAY“紙の掲示物”として密度を保つ5原則
『川辺町夏まつり』から取り出せる、地域イベント・町内会・自治体お知らせ・回覧板系のページ全般に持ち帰れる設計則。#25 塾えらび2026 の“表が主役”のcompare型とは違い、こちらは“紙が主役”のnotice型。どちらもヒーロー写真に頼らず、情報の整列そのものを主役にする点で親戚関係にあります。
写真の代わりに、統一されたSVGの手描き表現を選ぶ
提灯・櫓・金魚を同じ線の太さ・同じ色数で描くと、写真を使わなくても“その世界のトーン”が一枚ごとにブレない。低コストでも品位を落とさない選択肢になる。
list-first：雰囲気より先に、日時と場所を出す
ヒーローで感情を煽る前に、quick-factsの3項目で「いつ・どこで・雨だったら」を渡す。掲示物として使われる情報は、感情より先に到達しなければ意味がない。
版ズレ・テープ・スタンプで“手作り感”を出しつつ、グリッドは崩さない
紙の角度のブレやテープの位置は装飾として自由に振っても、内部の情報(定義リスト・グリッド・タイムライン)は厳密に整列させる。装飾と情報整理を別レイヤーとして扱うと、賑やかでも雑にならない。
動きは常時ではなく、遅い/局所的/可視時のみに絞る
提灯の揺れ・輪の回転は極めて低速に、花火のCanvasはIntersectionObserverで画面内にいる間だけ描画する。情報密度が高いページほど、演出側の動きは控えめにしないと読む負荷が二重になる。
盛り上げた直後に、地味な実務(雨天対応)を正直に置く
祭りの高揚をそのまま終わらせず、中止・順延の判定基準と告知手段を先に明記しておく。掲示物としての信頼は、都合の悪い情報をどれだけ早く・具体的に出すかで決まる。