インタラクティブ・ブラウザーアーケード
Kiki Arcade
クリエイティブなおもちゃ、アーケードの名作、小さなブラウザーアドベンチャーを集めたカラフルな遊び場。
“小さな実験を、一貫性があり、洗練され、保守しやすい一つのインタラクティブプロダクトへ発展させられます。”
01
課題
Ganvas、Ticking Room、Pocket Calc、Hand Gameは、それぞれ単体ではポートフォリオ作品として小さすぎました。各作品の遊び心を残しながら、新しいゲームと統合し、ばらばらなデモ一覧ではなく意図のあるコレクションにすることが課題でした。
02
担当
プロダクト方針、ビジュアルデザイン、ゲームデザイン、フロントエンド設計、実装、アクセシビリティ、テスト、デプロイ。
03
制約
操作方法も描画方式も異なる14作品を軽量な一つのアプリで共存させ、キーボード、ポインター、タッチ、スワイプに対応する必要がありました。さらに、進捗のローカル保存、視差効果を減らす設定への配慮、ゲーム切り替え時のタイマー・アニメーション・音声・イベントリスナーの確実な後片付けも求められました。
04
プロセス
コレクションを「Featured Adventures」「Creative Studio」「Arcade Classics」に整理し、共通のランチャーとゲーム画面を設計しました。各ゲームは独立してマウントされ、専用の状態とクリーンアップ処理を持ちます。初期作品を作り直し、5つの大型アドベンチャーと定番ゲームを追加して見た目を統一し、ゲームロジックを純粋関数として切り出してUIとは別にテストできる構成にしました。
05
成果
ピクセル描画やアンビエント体験から、パズル、戦略、プラットフォーム、フライト、定番ゲームまで、14の完成したブラウザー体験を収録したレスポンシブなアーケードになりました。記録保存、アクセシブルな操作、モーション軽減、生成音声、22件の自動ロジックテストを備えています。
体験のポイント
- Garden Serpent、Night Shift、Parcel Quest、Patchwork Odyssey、Paper Skiesの5つのミニアドベンチャー
- ドラッグ描画、消しゴム、塗りつぶし、元に戻す、レインボーブラシ、PNG保存に対応したGanvasを含む5つのクリエイティブ体験
- 勝利数、連勝、手数、自己ベストを保存する4つの定番アーケードゲーム
- キーボード、ポインター、タッチ、スワイプ、画面上ボタンに対応したレスポンシブ操作
- アカウント不要で進捗、スコア、アンロック、モーション設定を端末内に保存
設計とパフォーマンス
- ViteとネイティブES Modulesを採用し、UIフレームワークに依存しない軽量なランタイムを実現
- ゲームごとのマウント／クリーンアップ関数で、イベント、タイマー、アニメーションフレーム、音声の残留を防止
- フレーム単位の描画が適したペイント、防衛、配達、プラットフォーム、フライト、Snake系ゲームにCanvasを活用
- 得点、衝突、移動、塗りつぶし、レシピ、パズル、経路、飛行物理を純粋関数にし、Node標準テストランナーで検証
- セマンティックな操作部品、ライブステータス、フォーカス表示、prefers-reduced-motion対応でアクセシビリティを改善
