こんにちは。KDDIアジャイル開発センターのサービスデザイナー よねみちです。
生成AIを用いたto Bプロダクトのスクラム開発や、お客様のDX・新規事業創出のきっかけとなるデザインスプリント支援などを行っています。
はじめに
Claude3.5 SonnetおよびArtifact機能の公開から約半月が経ちましたが、皆さま触ってみましたでしょうか？
AIが生成したアプリやフロー図などのプレビューが見えて動かせちゃうあれです。今日時点は無料で使えますのでぜひ。
エックス等で様々なインフルエンサーが取り上げていますのでご存知の方は多いと思います。
「アプリが3分で完成！！」「エンジニア不要！！」なんて暴論は置いておくとして、なんとなく動くものが速攻で出てくるのは本当にすごい。
これはチーム開発の体験が大きく変わりそうだと思い、今回試してみました。
具体的には、全くコードの書けないデザイナーの僕が作りたいReactアプリのドラフトをClaudeで生成し、社内のつよつよエンジニアに手直し&リリースいただきました。
協力いただいたエンジニアさんへの軽いインタビューと私の振り返りをもとにアプリ完成までの両者の過程や感想を語ります。
作ったものの紹介
今回、タイムテーブルを自動で計算してくれるwebアプリを作りました。
イメージはこんな感じです。
- アジェンダの名称、所要時間を入力すると開始/終了時刻を記載してくれる
- アジェンダはドラッグ&ドロップで入れ替えできる
- View Modeにすると表形式でタイムテーブルが表示される。パワポなどにコピペ可能。
作った背景
弊社ではサービスデザイン支援やプロダクト開発のプロセスでワークショップを頻繁に行います。その時の資料に必ずタイムテーブルを載せるのですが、これの計算がめんどくさいのです。
例えば、当初は60分で設計していた「ワーク1」に70分必要だ！となった場合、それ以降のアジェンダの開始/終了時間を手作業で直してました。
手作業が辛いのでスプレッドシートなどで効率化していたのですが、予定の順番を入れ替えたり差し込んだりに気を遣うため、あんまり効率的ではなかった。。
そこで、ドラッグ&ドロップで直感的にタイムテーブルが作れるアプリを作ろうと思ったのでした。
アプリ開発素人(僕)がやったこと
- 要件を自分なりに言語化してClaudeに入力 (5分)
- 生成されたコードをartifact機能で試しながら、方向性の修正や要求の追加などチャット数往復 (0.5~1時間)
- Code SandBoxにコピペしてClaude外で動かすように試す (2~3時間。AIに聞きつつライブラリを追加したりバグ修正を試みたりする。結局、ボタンなどのArtifacts機能ではClaudeが裏で用意しているっぽいコンポーネントが足りず、動かせずにギブアップ)
結局、Artifact機能がよしなにやってくれているライブラリやコンポーネントなど(?)が私にはよくわからないためClaudeの外でアプリを動かすことができませんでした。また、細かい不具合は見つかるんだけど対策の仕方がわからない..
エンジニアにお願いする時にやったこと
そんなわけで助っ人を密かに求めつつ雑談していたところ、話に乗ってきてくれた神つよつよエンジニア(たかつきさん)が現れ、僕の素人成果物を引き継いでもらいました。
やったこと：
- 今こんな困り事があって...と背景や課題、やりたいこと、今の代替ソリューションの説明(5分)
- 作ったreactアプリをArtifactでデモしてQ&A(4分)
- 生成したコードと共に、チャット履歴をシェア(1分)
時間の都合で10分しか話せず、こんな雑なお願いしてバチが当たらないかと思いつつも「ちょっと試してみまーす」という心強い言葉をいただきました。
エンジニアがリリースまでにやったこと
テキストで簡単にヒアリングした内容をもとに書きます。
- 初期アプリ構築(5m)
- reactの構築コマンドポチー
- gitの設定
- もらったコードをコピペしてエラー対応(20m)
- コードにあった特定のUI(buttonとかselectとか)を使用せずに再実装をchatGPTに頼む
- もらったイメージを添えて、tailwind(デザインのライブラリ)で実装してもらうようchatGPTに頼む
- lint(静的解析)に引っかかっているコードの修正(型エラーとか)
- 挙動バグの修正(10m)
- ドラッグ&ドロップでの入れ替え機能実装(5m)
- 各Itemについてドラッグ&ドロップでItemを入れ替えれるようにしてくださいとchatGPTに頼む
- デザインあて(1h)
- ボタンの色とか要素の幅とかアイコンとかとか
- なんか表示非表示とか諸々試行錯誤してた
- Save機能実装(5m)
- ローカルストレージに保存するやつをchatGPTに頼む
- Amplifyにデプロイ(5m)
- ドラッグ&ドロップの挙動改善(2h)
- 最初に入れたライブラリで色々試すがあんましいい成果得られず
- 記事漁って別の良さげなライブラリを見つける
- そのライブラリに沿って再実装してもらうようにchatGPTに頼む
- 挙動バグの修正(1h)
基本的にコードを手動ではほぼいじってなくて、chatGPTとのやりとりでコードを作ってる(返答待ちの時間結構あったかも)
...すごいです。
書いてあることはなんとなーく想像できるものの、じゃあやってみてと言われてもできないなあ。。そこが専門職たる所以と実感しました。
特に、10分間の会話の中で出てきたsave機能の実装(なるべく小規模にやりたいことが満たせるようにローカル保存をチョイスいただいた)や、適切なライブラリの再選定などコーディングの外の知識・方針決めにプロを感じました。
ちなみに、8番のドラッグ&ドロップの挙動改善以降は一度リリースしたものに私が追加リクエストをお願いしたものでしたので、初回リリースまではなんと2時間だったようです。
初回リリースに感動した僕がUXにこだわりたくなって追加したものでした。
エンジニアの感想
オフィスでよねみちから話を聞いた時、どんなことを思いましたか？(結構大変そう、サクッとできそう、そもそもなんでこれ作りたいの？面白そう！などなんでも)
以下のことを思いましたー
- そういった課題があるのか〜既存サービスにそういうのないのかな？
- ふむふむ、そこまで複雑な機能ではなさそうだし、二日くらいあったらなんとかなるかな〜
- え？欲しい動きや画面が既にある！？さらにコードまである！！勝ったなガハハ！
- 面白そうだし新幹線の暇つぶしにしよ〜
claudeのartifact(アプリの見本)やコード、チャットのスクショなどをお渡ししましたが、よねみちPOからのインプットとしてどうでしたか？(この辺がわかりやすかった、この辺はよくわからず想像で進めた、など)
artifact(アプリの見本)がわかりやすくてすごい助かりましたー
あのちょっとしたやりとり(約10分の説明)だと、ここの動きとか見た目とかどうなんだっけみたいになりがちだけど、見本があるので質問とかやりとりを挟まずスムーズに実装できた。 コードもあったので爆速でしたね！
スクショは1回みただけかも
その他感想とかなんでも思ったこと伺いたいです！
作りたいものがここまで具体的になっていて見本やコードまであるのがすごい！
すごい作りやすかったですし、面白かったです！
ただコピペでは終わらず、設計方針やエラーやバグ対処などはある程度知識いるかもですね (chatGPTに実装・修正方針を説明できないので)
→す、鋭い.... code sandboxでお試しするときにChatGPTに色々聞いてみたものの、結局どうすれば良いのかわからず頓挫しました。。
デザイナーの感想
-
結局、素人じゃ動くものはすぐ作れない
- 適切なライブラリを引っ張ってくる、コスパ良い環境にデプロイする、「データの保存はローカルでいい？」と足りない要件をPOから引き出して作る...
- 動くアプリを作るには上記のようなプラットフォームや言語を超えた総合力が必要なんだなあと実感。それがない僕には、生成AIに何を聞いていいかわからないし聞いた結果の妥当性を判断できませんでした
-
「こういうことがやりたい」と意図を具体的に伝えるのにArtifactはすごく便利
- 今回のような場面以外にも、POがやりたいことをデザイナーに伝えてもらうシチュエーションでもわかりやすく意図を表現できそうでした
- わずか10分の同期コミュニケーションだけでゼロベースのプロダクト開発の要件やり取りが済んだのは感動ものでした
-
こだわりがどこにあるのか、そもそもなぜ「やりたい」のかを正確に伝えるスキルが大事になる
- 生成AIが「それっぽく」動くアプリを作ってくれるからこそ、背景や意図、目的を伝えないと受け手側はどこまでAIのアプリそのままで問題ないのか判断に困りそう
- 人を巻き込んで行くために「何にどう困っているのか」という課題感や「どんな体験を作りたいのか」というTo-be像、「これがあるとどう嬉しいのか」という熱量をクリアに話す、より本質的なコミュニケーションをとる力が価値になると思いました
おわりに
Claudeで生成したアプリが実際に使えるようになるまでのプロセス、感想を書いてみました。
「アプリが3分で完成！！」「エンジニア不要！！」なんてことにはならないですが、意図の伝達や初期のコーディングなどがかなり高速化した次世代のチーム開発を肌で触れて感じることができました。
快くご協力いただいた たかつきさん、ありがとうございましたー！