ドタバタ開発日記 #02 / サイト制作編 ・ 実画像あり
AIが作ったサイト、綺麗すぎる。
でも、どこ押したらええねん問題。
サイトが一瞬でそれっぽくできた! ところが開いてみると、動かない・迷う・読み順が分からない。文系人間とAIのサイト制作、なかなか大騒ぎです。
えっ、もうサイトできたん?
「ゲームを作ったんだから、遊んでもらう場所も欲しいよな」。さらに、その裏側も読めたら面白そう。というわけで、ゲーム紹介と制作日記を一緒にしたサイトをAIにお願いしてみた。サイトなら、ゲーム本体より簡単かもしれない。……なんて思いたくなる出だしだった。
出てきたデザインが、予想以上に立派。緑もきれい、島もめっちゃ良い雰囲気。当時の感想は「良すぎて草」。いや、こんなサイトまで作れるんかい。

見えるのに動かない。どういうこと?
さっそくチャッピー内で開いてみたら、表示はバッチリ。よし、記事も読めるぞ! ……とリンクを押したら、ページが切り替わらない。「え? 押したよね? もう一回……あれ?」。見た目はサイトなのに、先へ進めない。ここで初めて「綺麗に見える」と「ちゃんと使える」は別だと実感することになった。
「見た目は完成してるのに、ボタンが働かないってどういうこと!?」ページ切り替えの仕組みを直して、v2では操作できるように。ひとまず安心。……でも、これで完成と思ったのは早かった。
今度は、イラストが良すぎる問題
次の悩みは、トップの島のイラストが良すぎること。華やかなのはうれしい。でも実際のゲームは開発途中。「この絵のゲームが遊べる」と思われたら、ちょっと困る。見た目が良ければいい、という話でもなかった。
そこでイメージアートと実ゲーム画面を区別し、昔の画面も見せる方向に変更。絵文字だらけの頃から少しずつ育ってきた姿は、むしろ立派な見どころになりそうだ。

入口が多い! で、どこから読めばええの?
今度は「作品を見る」「ゲームの紹介へ」「実画面を見る」……。「親切に入口を増やしたはずなのに、これ全部同じ場所じゃない?」。押せる場所はたくさんある。でも行き先が似ていると、どこを選べばいいのか分からない。さっきはリンクが動かず、今度は動くリンクが多すぎる。なかなかちょうどよくならない(笑)。
おまけに、ゲーム紹介も制作記録も開発の歩みも並んでいるから「結局、どこから読んだらええの?」問題が発生。きれいなサイトなのに、読者を迷子にしてしまっていた。
そこでv6以降は行き先を整理。切れていた画像は全部見えるようにし、トップの長すぎる画像比較もコンパクトに。ちょっと直すと、また別の気になるところが見つかる。ゲーム制作と同じやん。


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

最初は見た目が立派なだけで大喜びしていたのに、気づけばリンクの行き先や読む順番を細かく確認している。サイト制作、見た目を作ってからが本番だった。 AIに作ってもらうだけでは、読む人が迷わないかまでは分からない。
まだ完成じゃない。でも、ネタは尽きない
サイトはまだ制作途中。記事も増やしたいし、ゲームへのリンクや公開の準備も残っている。つまり、まだまだ試行錯誤は続く。
でも、サイトもゲームも、試して直すたびに少しずつ良くなっていく。しかもそのドタバタ自体が、次の記事のネタになる。作るものが増えたと思ったら、ネタまで増えてしまった(笑)。
試作品v1〜v10、何を変えてきた?
- v1:初期デザインとサイト試作
- v2:JavaScriptに依存しないページ切り替え
- v3:Block Islandの実画面を追加
- v4:バージョン別の開発履歴を追加
- v5:絵文字版の画面を追加し、実画面とコンセプトアートを整理
- v6:同じ目的地への重複した入口を減らした
- v7:開発履歴の画像を最初から全体表示し、記事とガイドの役割を整理
- v8:制作の裏側を画像付き記事として見せる構成へ
- v9:ホームのBefore/Afterをコンパクトに
- v10:初めての人向け読み順ガイドを新設
資料:AI GAME LAB試作v1〜v10の保存画面、当時のフィードバック、ページ切り替え・記事導線に関する修正記録。画像は実際の試作サイトのスクリーンショット。世界観アート部分は実ゲーム画面ではありません。 ※記事内のツッコミや心の声は、実際の出来事に基づく読み物としての表現です。