🤪

Claude.aiと壁打ちしながら設計を考えてるときの課題(副題:壁打ちしすぎると指摘しても修正指示が通りにくくなる?(Claude.ai)

に公開

概要

開発の課題: AIとの壁打ち中に、UIデザインの修正指示がなかなか反映されず、何度も同じ指示を繰り返す必要がありました。
得られた教訓: AIとの対話では、期待通りの成果物が得られなくても、諦めずに何度も問いかけることが重要です。また、ワイヤーフレームのような視覚的な成果物をテキストベースで生成させることは効率が悪く、専用のツールを使うべきだと結論付けています。

最近挑戦したアプリ開発

世の中ではKiroで設計、Claude Codeで実装という記事をよく見かけます。そちらにも手を出したいと思いつつ、その効果をより実感するためにも、まずはClaude.aiと壁打ちしながらアプリの仕様を考えたいと思います。
今回考えたアプリのプロンプトは下記のとおりです。

お買い物するときに似たような商品で、どちらがお得かを瞬時に判断するアプリです。対象はお買い物をするユーザ(主に主婦(主夫)の方)を対象にしたいと思います。商品名や品目と金額、重量を入力して、単価を計算します。色々な店舗で入力するのである程度は結果を保持する必要があります。保持できる件数の上限は課金要素にするのが、ありかもしれません。データの保持は、iPhone内で完結するべきか、iCloudくらいまでは持たせるべきか迷っています。ユーザ間で結果を共有できると、面白いかもしれません。共有機能は今後の改修要素として優先順位は低めです。また割引シールが貼られてお得になることもあるので、こちらも課金要素として考えたいです。

最近の物価高で、今日手に取った商品は先月から(あるいは去年から)どのくらい上がっているのか?とか、ここのスーパーにある商品Aは、別のスーパーよりお得なのか🉐?とか、その場ではふわっとしか思い出せないことを残しておけるようなアプリを作ってみたくなりました。

壁打ちしながら仕様を考えるときに感じるイライラ

そんな感じのプロンプトから仕様を掘り下げていくと少しずつイライラすることが出てきました。例えばUIを設計しているとき、下の画像のようなデザインを提案してきたとします。


これは画面の右下にあるフローティングボタン(+)を長押しすると、商品追加や商品カテゴリの編集、設定編集の画面に遷移することを示しています。フローティングボタンを押すと商品追加なので商品カテゴリの編集は百歩譲って分かるかもしれない(最終的にはやめましたが)けれど、設定画面の編集はユーザが分かるわけないと考え、Claudeに指示を出しました。

フローティングボタン長押しで設定画面を開く処理の妥当性について考察してください

そうすると下のような回答を出しました。

やはり標準的なiOSアプリとしても良くない仕様のようです。改善案も上がって良き良きと思っていました。

その改善を受け入れます

これで次の考えごとに移れると思っていました。しかし修正後の資料見てみると…

あれ?改善が反映されていない?プロンプトの内容が不十分だったかなと考え、しっかり指示を出します。

お買い物比較アプリ - UIワイヤーフレームに改善案の内容を反映しましょう。またメイン画面は「フローティングアクションボタン(推奨)」を採用します。

変わっていませんΣ(-᷅_-᷄๑)
成果物だけ回収してプロンプトをやり直そうにも、肝心の成果物が中途半端だからリセットもできません…
ここはしつこく指示を出します。

設定ボタンが表示されていません。改善案を反映してください。

ダメだー😱このあたりで聞き分けのなさに大分頭に来ました。それでもしつこく指示します。

UIワイヤーフレームに対して改善案の内容を反映しましょう

できた〜
UIワイヤーフレームの文字列を毎回生成するので、待ち時間が長くて大変でしたが、無事出力できました。まだ仕様の一部分なのですが…

今回得た教訓

成果物の内容が期待する内容と異なっていても、懲りずに何度でも問いかけることで課題が解決するかもしれないです。それとワイヤーフレームを都度テキスト出力するのは考えものですね。たった数画面生成するだけでも相当手間でした。画面設計は専用のAIにお願いするのがいいのかもしれません。

Discussion