生成AIとの共創で意識したいこと
はじめに
タイトルへの（筆者の）回答及び本記事の趣旨は「困っている人（生成AI）がいたら、手を差し伸べよう」です。
実は、これまで生成AIを使ったUI作成をしたことがなかったので、今回 Claude sonnet 3.7と「パタパタ時計」を作りました。
この際、（筆者のプロンプトも悪かったでしょうが）Claude が自分の実装内容をうまく修正できずにハマっている状況になったのです。
そこで、こちらでチェック及びコードを調整して「この方向で修正して」という道筋を出してあげると一気に期待したUIを実現してくれました。
本記事では「生成AIに投げっ放しにせず共創の意識で臨めばうまく活用できる気がする」と筆者が感じた所感を書いていきたいと思います。
そもそもパタパタ時計って？
今回これをClaude（sonnet 3.7）に1時間弱で作ってもらいました。
もう少しパパっとできるかと思っていましたが、筆者のプロンプトが悪かったこともあって中々うまく進まない部分もありました。
本記事では、そのようなハマった部分や注意点、実体験に基づく所感なども書いていきます。
ちなみに筆者は無料版を利用していて、今回の内容も無料プランのClaude sonnet 3.7によるものになります。
対象読者
- 生成AIを使ったUIや機能作成のイメージが欲しい方
- 生成AIを使ったUIや機能作成時の注意点を知りたい方
- 生成AIでUI作成ってどんなことできんの？な方
- 気軽に生成AIを使って何かしら作ってみたい方
はじめに、「生成AIを使ったUI作成」ではVercelのv0（ブイゼロ）とかが知られていると思います。
しかし、v0は基本的にReactベースでshadcn/uiやtailwindを使ってUIを構築する、といった感じなので気軽に試したい層からすると腰が重いでしょう。
そこで今回、（特にReactとか使わずバニラJSで）気軽に何か試したい層に向けて、無料プランでの「生成AIを使ったUI作成」といった魅力？も紹介していければと思います。
いざ開始！ 1回目
今回、Gemini 2.0 Flash（Google AI Studio）と Claude sonnet 3.7 を使いました。
結論から言うと、同じプロンプトでも Claude sonnet 3.7 の方が Gemini 2.0 Flash より意図をしっかり汲み取ってイメージに近いプロトタイプを出してくれました。
- プロンプト（1回目）
パタパタと動く時計を作りたいと思っています。
`JavaScript`で実装し、（パタパタと動く部分など）アニメーションは極力CSSで実現してください。
いま振り返ると「パタパタと動く時計」って曖昧で良くないプロンプトですね。
-
Claude sonnet 3.7 が出してきたUI（プロトタイプ1回目）
-
Gemini 2.0 Flash（Google AI Studio）が出してきたUI（プロトタイプ1回目）
※Google AI Studio では Claude のようにブラウザでUIを表示してくれないのでcodepenに生成コードを張り付けて表示しています。
どちらもカウントはしていたのですが、見ての通りレイアウトが崩れてしまっています。
あと、双方ともに時刻を縦並びに配置しているのが興味深かったです。
カウント（アニメーション）に関しては、
Geminiは（レイアウトが見づらく分かりにくかったですが多分）自然な速度でカウントしており、Claudeは0.5秒くらいの速さでカウントしていて、うまく意図が伝わっていない感じでした。
また、パタパタの動きに関してはどちらもフリップ全体が動いている（本来は中央のみ折り返してほしい）状態でした。
まだまだ！ 2回目
- プロンプト（2回目）
ありがとうございます。
現状、以下の点が気になりましたので修正してください
- 時や分、秒が縦並びになっています（一般的な横並び配置にしてください）
- カウントアニメーションを自然な速度に正してください
- パタパタ（フリップ）に関して、数字の中央から折り返すようにしてください
-
Claude sonnet 3.7 が出してきたUI（プロトタイプ2回目）
-
Gemini 2.0 Flash（Google AI Studio）が出してきたUI（プロトタイプ2回目）
Gemini に対しては先のプロンプトに以下も付け加えました。
- 視認しづらいので数字は白で、背景は黒のデザインで調整してください
ご覧の通り、Claude はだいぶ意図に近づいて実装してくれましたね！
Gemini は、要望通りのデザインにしてくれてはいるものの改善までは適切に行えず、という印象でした。
この結果を受けて、Gemini には本ステップでお引き取り願いました。
さて、2回目の修正でイメージに近いもの（Claude作）にはなったのですが、うまく時刻表示されないという致命的に残念な状態になっていました。
具体的には、キャプチャを見て分かるように時（12時）の1桁部分と2桁部分が重複表示されています。
その他、カウントしていくに連れて分や秒も同じように重複表示されたり、 そもそも表示されなかったりといった状態だったのです。
あと少し！ 3回目
- プロンプト（3回目：Claudeのみ）
ありがとうございます。
かなりイメージに近いものになっています。
しかし現状、数字がかぶっていたりしてうまく時刻表示できていないようです。
今回は、これまでのように箇条書きで具体的な修正指示を送りませんでした。
- Claude sonnet 3.7 が出してきたUI（プロトタイプ3回目）
さっきまで良かったのに急に改悪してきました。
時刻パネル（フリップ）がそれぞれ4つになっていたり、時刻表記も結局うまくいっていませんでした。
これは恐らく先ほど送ったプロンプトが悪かったのだろうと思い、これまでのように箇条書きで逐一指摘するような書き方にしました。
その結果、
プロトタイプ2回目verかつ別の箇所がデグレしているようなものを出してきたり、
それを都度伝えて修正してもらっても、
プロトタイプ3回目verかつ別の（以下略）のようなものを出してきたりして堂々巡りになりました。
生成AIは、ハマると自力で中々抜け出せない子なのです
筆者が体験したこれは、以下の記事で「pit of death」と呼ばれている現象に近いような印象を受けました。
AIにコーディングさせていると、いずれpit of death（エラーから抜け出せない、同じ失敗を繰り返す、etc・・・）が訪れます。これを復帰させるには、人間の開発者の手による修正が必要です。
pitから復帰させると、大抵の場合、そう進まないうちに次のpitにハマります。そしてアプリケーションが複雑になるほど、pitの間隔は短くなっていき、より開発者の介入が必要になります。
筆者はこの記事を以前読んでいたので「ははーん さては あれだな！」と思って、Claude が生成してくれたコードを自分で見て少し修正しました。
具体的には以下です
- HTMLのタグ整理
結構不要（と思えるような）タグが散見された - CSSの整理
上記の修正に合わせて使っていないまたは使わないスタイルを削除 - JavaScriptのリファクタリング
これまでの修正を踏まえてカウント機能の関数をシンプルにしたり、余計な（冗長な）処理の削除など
これら筆者が調整した内容で「以下のコードをベースにフリップ時計を作成してください」と、再度 Claude に生成を依頼しました。
リベンジ！ 4回目
まさしく意図したUIになりました！パチパチ～！
正確にはもう少し、こちらで調整が必要だったものの調整内容は微々たるもので十分イメージ通りなUIでした。
結論：困っている人（生成AI）がいたら、手を差し伸べよう
先生や祖父母からよく聞いた言葉ですよね～。
今回のパタパタ時計作りでは、生成途中で Claude が堂々巡りしてしまったわけですが、
こういった場合には自身でチェック及び調整して「この方向で修正して」という道筋を出してあげると一気に道を拓いてくれる感じがありました。
上記に関しては、UIや機能作成といったプログラミング以外のことにも適用できそうです。
例えば、サイト解析やマーケティングといった場面での使用において、
AIが出してきた仮説で齟齬や違和感があったりした場合に、
こちらで精査・ブラッシュアップした仮説に基づいたアプローチを再考してもらうなど、色々と応用できそうです。
筆者は今回そういった「プロットや大枠は生成AIに出してもらって、それを基に人間が改良していくような活用方法」を学びました。
本記事を通じて「試しにこういった使い方してみるか」など、何かヒントになるようなものを少しでも届けられると幸いです。
ここまで読んでいただき、ありがとうございました。
Discussion