ゲーム一覧
サイト制作・運営

ドタバタ開発日記 #02 / サイト制作編 ・ 実画像あり

AIが作ったサイト、綺麗すぎる。
でも、どこ押したらええねん問題。

サイトが一瞬でそれっぽくできた! ところが開いてみると、動かない・迷う・読み順が分からない。文系人間とAIのサイト制作、なかなか大騒ぎです。

AI GAME LAB / 試作品v1→v10 / 2026年10月の制作記録 / 開発記録

えっ、もうサイトできたん?

「ゲームを作ったんだから、遊んでもらう場所も欲しいよな」。さらに、その裏側も読めたら面白そう。というわけで、ゲーム紹介と制作日記を一緒にしたサイトをAIにお願いしてみた。サイトなら、ゲーム本体より簡単かもしれない。……なんて思いたくなる出だしだった。

出てきたデザインが、予想以上に立派。緑もきれい、島もめっちゃ良い雰囲気。当時の感想は「良すぎて草」。いや、こんなサイトまで作れるんかい。

AI GAME LAB初期試作のPC表示。大きな島の世界観イラストがメインに置かれた
初期のサイト試作。最初から見た目はかなり立派だった。※島の絵は実ゲーム画面ではなくイメージアート。

見えるのに動かない。どういうこと?

さっそくチャッピー内で開いてみたら、表示はバッチリ。よし、記事も読めるぞ! ……とリンクを押したら、ページが切り替わらない。「え? 押したよね? もう一回……あれ?」。見た目はサイトなのに、先へ進めない。ここで初めて「綺麗に見える」と「ちゃんと使える」は別だと実感することになった。

「見た目は完成してるのに、ボタンが働かないってどういうこと!?」ページ切り替えの仕組みを直して、v2では操作できるように。ひとまず安心。……でも、これで完成と思ったのは早かった。

今度は、イラストが良すぎる問題

次の悩みは、トップの島のイラストが良すぎること。華やかなのはうれしい。でも実際のゲームは開発途中。「この絵のゲームが遊べる」と思われたら、ちょっと困る。見た目が良ければいい、という話でもなかった。

そこでイメージアートと実ゲーム画面を区別し、昔の画面も見せる方向に変更。絵文字だらけの頃から少しずつ育ってきた姿は、むしろ立派な見どころになりそうだ。

AI GAME LAB v5スマホ画面。コンセプトアートを使いながら実画面への導線も設けた
v5時点のトップ。世界観アートと実画面の役割を区別し始めた。

入口が多い! で、どこから読めばええの?

今度は「作品を見る」「ゲームの紹介へ」「実画面を見る」……。「親切に入口を増やしたはずなのに、これ全部同じ場所じゃない?」。押せる場所はたくさんある。でも行き先が似ていると、どこを選べばいいのか分からない。さっきはリンクが動かず、今度は動くリンクが多すぎる。なかなかちょうどよくならない(笑)。

おまけに、ゲーム紹介も制作記録も開発の歩みも並んでいるから「結局、どこから読んだらええの?」問題が発生。きれいなサイトなのに、読者を迷子にしてしまっていた。

そこでv6以降は行き先を整理。切れていた画像は全部見えるようにし、トップの長すぎる画像比較もコンパクトに。ちょっと直すと、また別の気になるところが見つかる。ゲーム制作と同じやん。

v8の開発記事の一部。修正前の港の画像を大きく表示し、その下に調整内容の説明が続く
v8:大きな画像を縦に見せる構成。ホームでは間延びが課題になった。
v9の制作記事カード。港画像が左右コンパクトに並ぶ
v9:ホームでは小さく比較。詳しい画像は記事側へ移した。

ようやく道案内ができた! v10で入口を整理

v10でようやく「①作品を知る → ②昔と今を見比べる → ③改善記事を読む」の順番を用意した。初めて来た人も、どこから読めばいいか見当がつくようになった。やっと道案内ができた感じ!

AI GAME LAB v10で追加した、1作品を知る・2開発の歩み・3改善記録を読むというガイドの画面
v10:読む順番を3ステップで案内。初めて来た人の入口を整理した。

最初は見た目が立派なだけで大喜びしていたのに、気づけばリンクの行き先や読む順番を細かく確認している。サイト制作、見た目を作ってからが本番だった。 AIに作ってもらうだけでは、読む人が迷わないかまでは分からない。

まだ完成じゃない。でも、ネタは尽きない

サイトはまだ制作途中。記事も増やしたいし、ゲームへのリンクや公開の準備も残っている。つまり、まだまだ試行錯誤は続く。

でも、サイトもゲームも、試して直すたびに少しずつ良くなっていく。しかもそのドタバタ自体が、次の記事のネタになる。作るものが増えたと思ったら、ネタまで増えてしまった(笑)。

試作品v1〜v10、何を変えてきた?
  1. v1:初期デザインとサイト試作
  2. v2:JavaScriptに依存しないページ切り替え
  3. v3:Block Islandの実画面を追加
  4. v4:バージョン別の開発履歴を追加
  5. v5:絵文字版の画面を追加し、実画面とコンセプトアートを整理
  6. v6:同じ目的地への重複した入口を減らした
  7. v7:開発履歴の画像を最初から全体表示し、記事とガイドの役割を整理
  8. v8:制作の裏側を画像付き記事として見せる構成へ
  9. v9:ホームのBefore/Afterをコンパクトに
  10. v10:初めての人向け読み順ガイドを新設

資料:AI GAME LAB試作v1〜v10の保存画面、当時のフィードバック、ページ切り替え・記事導線に関する修正記録。画像は実際の試作サイトのスクリーンショット。世界観アート部分は実ゲーム画面ではありません。 ※記事内のツッコミや心の声は、実際の出来事に基づく読み物としての表現です。

続けて読む · 開発日記 #03

絵文字の島、いつの間にこんなゲームに!?

次の日記 #03 を読む →開発日記の一覧を見る →