FLOW ANATOMY #07 — 1サイトを縦に解剖する
HANABI WAVEは、
なぜ行きたくなるのか。
技法は『点』、サイトは『線』。架空フェス『HANABI WAVE』のサイトは、高揚を積み上げてチケットへ運びます。 同じ多色マキシマリズムでもWeb部品をゲームに翻訳する#09 METEOR BREAKERSとは違い、 こちらは"祭りの高鳴り→購入"が組織原理。花火で一気に上げて行きたさを育てる設計を章ごとに解剖します。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
花火→出演者→時間割→チケット→会場→アクセス→FAQ。高揚を具体で裏づけ、頂点で購入を差し出します。
- 00HERO開花 — 花火で一気に高鳴らせる開
- 01持続レイヤー常 — 虹の進捗と常設チケット常
- 02LINEUP顔ぶれ — 出演者を壁に貼る顔
- 03TIMETABLE段取 — 行く理由を時間割で段
- 04TICKET購入 — 頂点でチケットを差し出す購
- 05MAP会場 — 絵地図で行く先を点灯場
- 06ACCESS道順 — 迷わせない3択に道
- 07FAQ不安 — 最後の迷いを潰す問
- 08FOOTER余韻 — 大きな名前で締める余
花火を上げて、一気に高鳴らせる
狙いCanvasで菊型・柳型の花火が打ち上がり、版ズレ印刷風の「HANABI WAVE」タイポが重なる。浮遊するステッカー(「2 DAYS」「全25組」「花火3000発」)と帯マーキーが画面を埋め尽くし、最初の一画面で「祭り」を確定させる。様子見させず、開幕ゼロ秒から高揚をピーク近くまで引き上げる告知サイトの掴み。
つなぎ版ズレのズレとステッカーの散らかしは、整いすぎた画面が祭りに見えないという逆説への答え。あえての"手作りの熱"が冒頭の高揚感を作る。帯マーキーに刻まれた「8.22–8.23」の日付が次章(出演者)への期待感を予告する。
虹色の進捗と、常設チケット
狙い画面上端を走る虹色グラデの進捗バー、スクロールでソリッド化する追従ヘッダ、そしてナビ右端に常設の「チケット」CTAボタン。どの章にいても購入口が常に視界の端にある設計。進捗バーの虹色はフェスの多色コーポレートカラーそのものを全章にわたって通す持続レイヤーでもある。
つなぎ高揚を煽りながら購入口を手元に置き続ける。「行きたい」という感情がピークに達したどの瞬間でも、チケット購入まで1タップで届くように設計されている。
タブで、出演者を壁に貼り出す
狙いDAY1/DAY2のタブ切り替えで、壁面を埋め尽くすような大きなタイポグラフィに出演者25組を並べる。文字サイズに差をつけたヘッドライナーとサポートアクトの扱いが、出演者のヒエラルキーを自然に伝える。抽象的な熱量を「誰が」の具体に落とす最初の章。
つなぎ知っているアーティスト名を見つけた瞬間、「行きたい」という行為への動機が芽吹く。出演者という具体の積み上げが始まる。次の章では「いつ・どこ」という時間の具体が加わる。
行く理由を、時間割で具体化
狙いDAY1/DAY2タブで切り替わる2ステージ並列のタイムテーブル。各アーティストの出演時間と担当ステージが明示され、「いつ・どこで見られるか」を一覧できる。出演者一覧(02)に時間という軸を加え、行く理由をさらに具体化する章。
つなぎ好きなアーティストの出演時間を確認した瞬間、「行くなら何時に着けばいい」という段取りが頭の中で動き始める。段取りが立てられると、購入への心理的ハードルが下がる。
高鳴りの頂点で、チケットを差し出す
狙い破り目のリップテクスチャを持つチケット型UIカード3種が並ぶ。1DAY通し券・2DAYS通し券・プレミアムの3択は、選択肢を増やしすぎず迷いを最小にしている。「誰が・いつ」で行きたさが最高潮に達した直後に購入導線を置く、感情のピークへの配置設計。
つなぎヒーローから積み上げてきた高揚を、ここで購入という行動に転換する。チケット後はすぐ「会場」の章に移行し、買った後のイメージを即座に補強する。
交通を、迷わせない3択に
狙い電車・バス・車の3種の交通手段カードがrevealで表示される。アイコンと所要時間・乗り換え情報を一枚に収めたカード形式で、「行けるかな」という不安を3択で解消する。選択肢を3つに整理することで迷いをなくし、行くことへの意思決定を後押しする。
つなぎ会場を目で見た(05)直後に「どうやって行くか」を解消する。行き方の不安が取れると、次の「よくある質問」で残った細かな疑問も潰しやすくなる。
最後の迷いを、開いて潰す
狙いJSアコーディオンのよくある質問が並ぶ。再入場・荷物預かり・雨天開催・小学生以下無料など、当日の行動に関わる疑問を一問一答で解消する。チケット購入直前・直後のためらいの芽を最後にまとめて摘む章。盛り上がりの中の小休止でもある。
つなぎ背中を押す前に、残った疑問を全部解消する。高揚したまま「でも…」という引っかかりを残さないことが、最終的な購入率を上げる。フッターへの橋渡しとして、祭りの余韻に入る直前の安心を提供する。
大きな名前で、夜を締める
狙いフッターの背景いっぱいに超特大の「HANABI WAVE」の文字が敷かれ、「音が上がる、夜が咲く。」のタグラインと無限マーキーが祭りの余韻を残す。情報を付け足さず、ブランド名そのものを最後の一枚として画面に置く。高揚の幕引きにふさわしいスケール感。
つなぎヒーロー(00)で打ち上がった花火が、フッターで大文字の「HANABI WAVE」として着地する。最初と最後の語彙を揃えることで、9章を通して一つの祭りを経験した感覚が完成する。
TAKEAWAY"高鳴り"でつくる流れの5原則
HANABI WAVEから取り出せる、フェス・イベント告知サイト全般に持ち帰れる設計則。同じ多色マキシマリズムで部品をゲームに翻訳する#09 METEOR BREAKERS(翻訳編)や、足し算で光を重ねる#04 NOCTILUCA(足し算編)と読み比べると、"熱量の使い方"の違いが際立ちます。
つかみで頂点近くまで上げる
花火ヒーローで冒頭から高揚させる。様子見させず最初の一画面で祭りを確定させることが告知サイトの掴みの鉄則。
高揚を、具体で裏づける
出演者→時間割と、熱量を「誰が・いつ」の具体に落とす。行く理由が積み上がるにつれて「行きたい」が「行く」に変わる。
購入は、感情の頂点に置く
チケットを情報の真ん中でなく、行きたさが最高潮の位置に。購入導線は計算された感情のピークへの配置が効く。
不安は最後にまとめて潰す
マップ・アクセス・FAQで「行けるかな」を解消。背中を押す前にためらいを摘む。安心が最後の購入をスムーズにする。
版ズレとステッカーで"手作りの熱"を出す
整いすぎた画面は祭りに見えない。あえてのズレと貼り散らしが高揚感を生む。"雑さ"は手抜きでなく設計された熱量だ。