目的
「夜の書庫」は、言葉による説明や画像素材に頼らず、Web上でどこまでゲームらしい体験を作れるかを試すために制作した短編クリック探索ゲームです。
ゲームの題材としては、夜の書庫に閉じ込められた探索者が、本棚・記号・光の装置・鍵盤を調べて脱出する構成にしています。ただし、ストーリーや会話文を読ませるのではなく、プレイヤーが画面内の記号や配置の関係を観察して進められることを重視しました。
ポートフォリオ上では、完成したゲームそのものだけでなく、CSS・SVG・状態管理・画面設計を組み合わせて小さなWeb体験を作った事例として位置づけます。
制作方針
制作方針は、できるだけ言語に依存しないゲーム体験にすることです。
ゲーム中の日本語は、タイトルや開始・戻る・終了など、最低限のUIに絞っています。謎解きの手がかりは、文章ではなく、記号の形、見つかる位置、棚の高さ、光の接続、鍵盤の順序といった視覚的な要素で伝える設計にしました。
また、画像素材や音声素材は使わず、CSS・SVG・タイポグラフィ・発光表現で「夜の書庫」の雰囲気を作る方針にしました。これにより、素材準備に依存せず、実装だけで世界観を組み立てることを目指しています。
制作時に意識したこと
まず意識したのは、ゲームとしての流れをシンプルに保つことです。
自由探索に見せつつ、内部的には以下の流れに整理しています。
- 本棚から記号を見つける
- 見つけた位置をもとに記号の順序を考える
- 記号の順に光のノードを接続する
- 同じ順序で鍵盤を入力し、扉を開ける
4つのギミックを入れていますが、それぞれを独立したミニゲームにするのではなく、前のギミックで得た情報が次の操作につながるようにしました。
また、ホラーではなく、静かで不思議な雰囲気に寄せることも意識しています。暗い配色を使いながらも、恐怖演出や強い驚かせ要素は避け、観察して少しずつ仕組みが分かる体験を目指しました。
実装面では、Codex CLIに作業を一括で任せるのではなく、画面土台、記号定義、状態管理、本棚探索、記号順序、光接続、鍵盤入力、演出調整といった単位に分けて進めました。この分割により、各段階でビルド確認と通しプレイ確認を行いやすくしています。
構成
- Vite + React + TypeScript による静的Webアプリ
- CSSとSVGによる画像素材なしの画面表現
- タイトル画面、ゲーム画面、エンディング画面の3画面構成
- ゲーム画面内に、本棚・机・光の装置・鍵盤の各パネルを配置
- 4種類のSVG記号を共通コンポーネントとして利用
- 発見済み記号、スロット入力、光の接続、鍵盤入力をReactのstateで管理
npm run buildで生成した静的ファイルをebicorn.com配下に配置- 公開URLは
https://ebicorn.com/games/yorunoshoko/
学び
今回特に学びになったのは、画像素材がなくても、CSSとSVGの組み合わせで一定の雰囲気を作れることです。本棚、扉、記号、光の接続などをすべてCSSとSVGで構成することで、素材準備を最小限にしながら、短編ゲームとして成立する表現を作れました。
また、Viteアプリをサブディレクトリで公開する際の base 設定も重要なポイントでした。今回は最終的に https://ebicorn.com/games/yorunoshoko/ に公開したため、Vite側の base とサーバー上の配置パスを一致させる必要がありました。ここがずれると、index.html は表示されてもCSSやJavaScriptが読み込まれないため、公開時の確認観点として重要だと分かりました。
実装プロセスとしては、Codex CLIに一括で依頼するよりも、画面・状態管理・各ギミックごとに分割して依頼する方が安定しました。小さなタスクごとにビルド確認しながら進めることで、ゲーム全体の流れを崩さずに完成まで進めやすくなりました。
今後
今後の改善としては、まずスマートフォン表示への対応を進めたいです。現時点ではPCブラウザ優先で作っているため、画面幅が狭い環境では操作性や見え方に調整余地があります。
また、光の接続や扉の開閉など、ゲーム内の演出もさらに磨けます。現状でも最後まで遊べる状態にはなっていますが、線が伸びるアニメーションや扉の開き方を改善することで、より印象に残る体験にできると考えています。
謎解き面では、鍵盤にダミー記号を追加する、操作説明に頼らずクリック可能箇所をより自然に伝える、キーボード操作やアクセシビリティを改善する、といった方向も検討できます。