FLOW ANATOMY #09 — 1サイトを縦に解剖する
METEORは、
なぜゲームに見えるのか。
#04 NOCTILUCA が足し算、#05 あわい が引き算なら、架空ゲームのプロモサイト「METEOR BREAKERS」は翻訳。ローダーは起動画面に、スクロール進捗はHPバーに、お知らせはRPGの会話窓に、フッターはCONTINUE?画面に——Webの標準部品をまるごとゲームのUIに読み替える設計を章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
起動→タイトル→メニュー巡回→報酬→コンティニュー。ゲーム1回の流れを、そのままサイトの縦スクロールに写し取っています。
- 00BOOT起動 — ローダーを電源ONに起
- 01HUD持続 — 進捗バーをHPバーに(翻訳の原理)常
- 02HERO序 — ロゴが組み上がるタイトル画面序
- 03NEWS会 — お知らせをRPG会話窓に会
- 04CHARACTER選 — 人物をキャラセレクトに選
- 05SYSTEM触 — 機能説明に叩く手応えを返す触
- 06WORLD旅 — 一覧をワールドマップに旅
- 07REGIST報 — CTAを報酬メーターに報
- 08FOOTER継 — フッターをCONTINUE?画面に継
- 09報酬レイヤー効 — 横断的フィードバックで縫う効
ローダーを「ゲーム起動」に翻訳する
狙い開幕は NOW LOADING の起動画面。プログレスバーが伸び、「TIPS: グラビは落下が遅い」などゲームのコツが流れる。ただの読み込み待ちでなく、アーケード筐体の電源を入れた瞬間の体験に変換している。
つなぎ読み込みが終わると画面がスッと明ける——#04のSYNC、#05の墨と同じ「開幕の儀式」を、ここではゲーム起動の語彙でやっている。TIPSが早くもゲーム性を予告する。左上の ↻ で何度でも再生できます。
スクロール進捗を「HPバー」に読み替える
狙い追従ヘッダーはゲームのHUD。上端の QUEST PROGRESS バーは、その実スクロール進捗で、進むほど伸び緑→黄→赤と残量色が変わる。標準UI(進捗バー)を、別ジャンルの語彙に読み替える——これがMETEOR全体の設計原理。
つなぎこの「翻訳」がサイト全体を貫く。以降の章はすべて、Web部品をゲーム画面に読み替えて作られている。HUDと照準カーソルは全章に残る持続レイヤーでもある。
タイトル画面は、ロゴが「組み上がる」
狙い星空3層、降りそそぐメテオ、画面下を歩くドット絵キャラ。ロゴは粒子が四方から飛んできて文字に組み上がり、完成した瞬間に PRESS START が点滅しはじめる。アーケードのタイトルデモそのもの。
つなぎロゴ完成→PRESS STARTは「もう始められる」という合図。#04のSCROLLキューと同じ役割を、ゲームの語彙で果たしている。サブコピーはグリッチで小刻みに揺れ、画面の"通電感"を出す。
登場人物を「キャラクターセレクト」にする
狙い4人の仲間をキャラセレクト画面で紹介。パネルを選ぶと拡大したドット絵がぴょこぴょこ待機モーションし、五角形のレーダーチャートが数値をなめらかに補間しながら切り替わる。人物紹介を「選ぶ」体験へ変換している。
つなぎホバーやタップで即座に選択が切り替わる=ゲームのカーソル移動そのもの。能力をレーダーで見せるのは、4人の違いを一瞬で伝えるゲームUIの定石。触れる山場の1つ目。
機能説明を「チュートリアル」にして、手応えを返す
狙いあそびかた3枚のカード。どこを叩いてもダメージ数字(128! 999! たまに CRITICAL!)が弾け飛ぶ。機能を読ませるだけでなく、その場で"叩く手応え"を返して、本編の操作感をここで予習させてしまう。
つなぎクリック→即反応のフィードバックが滞在を作る。10回叩くと実績解除のトーストが出る——操作がちゃんと報酬につながる設計。「🖐 サイトを直接さわる」にしてこの位置で叩くと体験できます。
コンテンツ一覧を「ワールドマップ」にする
狙い5つのステージを夜空のマップに配置。背景は3層パララックスで、スクロールに連動して奥・中・手前が異なる速度で横へずれ、奥行きが生まれる。各ステージにはドット絵シルエットのアイコン。"目次"をマップ探索に変換している。
つなぎ縦に読み進める流れの中に、横方向の奥行きを差し込んで単調さを断つ。#05あわいが横スクロールで作った緩急を、ここでは多層パララックスで作っている。
CTAを「報酬メーター」に変える
狙い事前登録をゴール提示でなく、登録者数のカウントアップと、5万→10万→20万で報酬が解除されるマイルストーンメーターに。CTAを押すとコインが爆発し +10 GOLD がポップする。登録を「報酬を稼ぐ」行為に翻訳している。
つなぎ数字が伸びる→報酬が見える→押したくなる、というゲームのループ。#04が感情のピーク直後にCTAを置いたのと同じ位置取りを、ゲームの報酬設計で実装したもの。
フッターを「GAME OVER / CONTINUE?」にする
狙い締めはアーケードのコンティニュー画面。CONTINUE? の下で 9 からのカウントダウンが回り続け、YES を押すとトップへ戻る(=もう一周)。離脱の局面すら、ゲームの語彙で閉じている。
つなぎ「終わり」でなく「続ける?」で閉じるのがこのサイトの一貫性。#04が入口の言葉で出口を閉じ、#05が朱印で結んだのに対し、METEORはループ(もう一周)を提案して終わる。
全操作に「手応え」を仕込む（横断レイヤー）
狙い照準カーソルとクリック波紋、ダメージ数字、コイン爆発、実績解除トースト、そしてコナミコマンドでレインボー化。どれも特定セクションでなくサイト全体に散らした"ゲームのフィードバック"。触れば必ず何かが返ってくる。
つなぎ章をまたいで存在するこの報酬レイヤーこそが、バラバラのセクションを「1本のゲームセッション」に束ねる。#04の持続レイヤー(カーソル/進捗/質感)がやった"縫合"を、METEORは報酬体験で果たしている。
TAKEAWAY"翻訳"でつくる流れの5原則
METEORから取り出せる、世界観の強いサイト全般に効く設計則。#04(足し算)・#05(引き算)の原則と並べて読むと、3つの作法の違いが見えてきます。
Web部品をメタファーで翻訳する
進捗バー→HPバー、お知らせ→会話窓、CTA→報酬メーター。馴染みの部品を別ジャンルの語彙へ読み替えると、機能はそのままに世界観だけが立ち上がる。
全操作に手応えを返す
クリックに数字・波紋・トーストを返す。ゲームの中毒性は即時フィードバックのループ。触っても何も起きない部品を作らない。
持続レイヤーでなく"報酬"レイヤーで縫う
#04は見た目(カーソル/質感)で章を縫った。METEORは実績・コナミ・照準という報酬体験を全章に散らし、別々の画面を1つのセッションに束ねる。
翻訳は最後まで一貫させる
起動→タイトル→メニュー→報酬→コンティニュー。1箇所だけゲーム風にしても浮く。離脱面(フッター)まで同じ語彙で貫いて、初めてメタファーが信じられる。
過剰さは"軽さの作り込み"で御す
盛るほど、土台の最適化が体験を支える。canvasはスプライトを事前描画して毎フレームの色生成を避け、自動アニメは画面外で停止する。重い派手さは続かない。