Vibe Coding でワイヤーレベルの図示化に Playground を書かせてみた

週末ふと思いついたアイデアを、Claude Code を使ってかたちにしてみようと思った。

仕事でも Claude Code を使っていて、実装は99%手で書くことがなくなったのだが、どのように指示しているかというと、まず要件レベルのドキュメントを Claude に与え、詳細設計レベルの仕様書に落とし込んでもらい、それをもとに質疑を交わしたり認識合わせを経てから、コーディングに落とし込んでもらっている。

いっぽう個人開発は、よりふわっとしたアイデアからスタートするので、数行のアイデアメモから始まる。これを実現するために、AIにとっての不足情報を質問形式で引き出し、それに答えながら構想を詳細化していく。

ちなみに筆者の場合、この質疑応答はチャット上ではなくテキストファイル上で行っている。質問が書き出された .md ファイルに筆者が回答を記載し、追加で質問があればさらに書き込んでもらい、、というラリーをひたすら繰り返す。質疑以外のコミュニケーションもコンテクストに溶けないよう、かたちに残るファイル上で行っている(特別な方法ではないはずだ)。

ドキュメントベースでレビューできる内部ロジックに限らず、外見の画面イメージがAIと認識が揃っているかも、本実装の前にきちんと把握しておきたい。そこでAIに図示を依頼すると、大抵ASCIIアートで描いてくるきらいがある。しかし文字列で表現できるレベルなんてたかが知れているし、そもそも表示が崩れまくるので使い物にならない。

そこで Swift Playground でモック実装させてみたら、これがうまくいった。例えばオーディオデータを扱う筆者のアイデアは、波形を描画して、範囲選択をし、編集操作を行う要件がある。これを人間の手でサクッと作るのはガワだけでも結構大変だ。だがAIなら、アイデアの壁打ちを始めてからたった10分足らずで次のような絵に仕上がった。ほぼ一発で、バシッと筆者のイメージを具現化してくれた。

あとはボタンの配置がどうの、配色がどうのと細かい部分を指示し、随時 Preview 上で反映を確認しながら、ワイヤーレベルのデザインを固めていった。


ちなみにこのアイデアだが、アプリとしてきちんと形にしようと思うと、音声処理に関する実装知識が必要だし、インタラクションや機能の複雑さもあるため、日曜大工感覚で1ヶ月くらいは掛かるだろうと見込んでいた。が、Claude Code を使えば日曜の夕方2時間程度でほぼほぼ完成形までこぎつけられた。(といっても、今更このスピード感に驚くこともないのだが、、)

この時点でバグは多いものの、実際に手に取って動かせることで、UIやインタラクションの課題が浮き彫りになり、アイデアのブラッシュアップに繋げられた。まさに Vibe Coding 的な体験だった。

Screenshot

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です