一見すると普通のコーポレートサイトですが、そこに隠されたキーワードを見つけることで、不気味な世界観に変わっていくサイトをAIと作ってみました。
本記事ではAIからアイデアを引き出し、仕様をブラッシュアップしていく様子を記しています。
1. 初期コンセプト
最初の要件は極めてシンプルです。
提示したプロンプト
モノクロベースでシンプル・洗練された企業サイトを作って。
ただし、よく見ると内容がどこか不気味な雰囲気のあるもの。
サイト内にとある文字を1文字ずつ隠してそれを打ち込むと動くような仕様にしたい。
このあとにも、どのような文字を隠すかなどをAIと対話しつつ、まずは普通のコーポレートサイトを作成しました。
2. 演出
ベースができあがったので、ユーザーからのアクション時に不気味な演出が発生するようにしていきます。
追加した要望
codeを送信した際に、画面の乱れる演出やノイズは入れられますか？
文字の位置がズレたり、文字がチカチカと白黒が反転するバグのような画面にしてほしい。
純粋なCSSアニメーションとJSだけで画面の崩壊を表現して。
上記の指示によりAIはCSSの @keyframes を駆使し、clip-path による画面の断片的な移動と filter: invert(1) による明暗の反転を組み合わせることで、グリッチ演出を構築してくれました。
かなり簡潔な指示ではありますが、意図を汲み取って作成してくれました！すごい！
3. 発生した問題
一部、設計してもらった部分でどうしても謎解きの構造が崩れてしまう部分があったのですが、AIに「ロジックが矛盾しているから直して」と何度も修正させるより、人間側が自分でその原因を調べて直したほうが早いケースもあるなと感じました。
AIは優秀なコーダーですが、
- 仕様の全体整合性
- 状態遷移
- ユーザーの満足度(使いやすさ・分かりやすさ)
のような「システム全体の責任」を自然に持ってくれるわけではありません。
AI = 実装速度ブースター
人間 = 設計・整合性・品質保証
という役割分担をしたほうが、最終的な開発速度も品質も圧倒的に良くなると感じました。
普段自身で作成しているからこそ、その視点がそのままAI時代の開発力になる。
と実感した体験でした。
AI駆動開発で上手くいくための注意点
1. 期待値を明確かつ構造的に伝える
AIに漠然と「面白くして」と頼むと、平凡な結果になります。
「○○のような動きで」といった具体的にどんな動きをしてほしいかや、「どのタイミングでどこがどう変わるべきか」というデータ構造を先に提示すると、より精度の高いコードを吐き出してくれやすい印象でした。
2. 矛盾指摘は詳細に
「なんかおかしい」という曖昧な表現ではなく、
「この状態でここを開くとデータが消えてしまい、○○の部分に矛盾が生じている」
と具体的に指摘すると、AIは即座にコードをリファクタリングしてくれます。
3. 先走るAIを「制約」で縛る
私の使用しているAIは、なぜかすぐに画像生成をしたり指示していないものを勝手に作り出してしまうので
- 指示以外の動きはしない
- 必要であれば提案をする
- 画像生成は「画像を作って」といったときのみ
など明確な制約を最初に設定し、意図通りの設計を維持しやすくしました。
こちらのサイトはまだまだバグの多いサイトなので、人間の力も使いつつAIと一緒に開発を進めていきます！