【AI駆動開発日記】少し進展があったので更新
昨日までの状況
前回の記事で通勤電車内でAI駆動開発をやっていくと意気込んで、ここ3カ月でいろいろ試してみた。正直スマホだけだと設計・実装が難しいことが分かってきた。
これまでの迷走具合はこんな感じ。
- とりあえず要件定義
- Figmaでデザイン起こし
- コンポーネント設計して...あれ、起こしたデザインだと機能が成り立たない...
- 最初に戻る
を繰り返した。
Figmaでデザイン化するにしても、余白設定やカラー選定、そもそもPC用とスマホ用に別々に作って、というのはあまりにも時間が掛かりすぎる。
機能レベルのアイデアばかり溜まっていくばかりの3カ月だった。
Figma Sitesとの出会い
とりあえずFigmaでデザインを作っていたところ、ふと他の機能も見てみようと思った。
そして出会った。
Figma Sites
この機能、よくあるチャットAIがWebサイトのモックを作成してくれる、Figmaの公式機能らしい。
過去にGeminiやMS Copilotでも試したが、Webサイトのモックはうまく出来上がらなかった。
今回もどうせ大したことないんだろうとこんなプロンプトを入れてみた。
スマホ・PCで使用するためのWebアプリを作成したい。機能はレシピ登録・閲覧と１週間分の朝昼晩の食事メニューをリストにして登録できるページを盛り込む。ログイン画面を採用し、会員登録がまだなら新規登録画面へ遷移できるようにする
するとこうなった
ログイン画面
ホーム画面（指示してない）
週間メニュー
レシピ画面
正直驚いた。
あれだけのインプットでこれだけのものが出来上がるとは...。
しかもちょっとオシャレ。今の私では到底作れないデザイン力。
複数画面を作るよう指示したので、どうやって他の画面に遷移するのか、と色々試してみると...
ぼ、ボタンが動く...！
TextFieldやButtonコンポーネントもちゃんと機能するよう、tsxでコードが組まれてる...
全てをそのまま使えるわけではなさそうだけど、ほとんどのコードや構成自体は真似しても問題ないクオリティに見える。
少しイメージと違ったり、欲しい機能が入ってなかったりしたが、指示してないので当然の話。
...。
ここでふと思いついた。
このFigma Sitesをプロセスに組み込めば、自分のしたい事が達成できるのでは、と。
- 要件定義
- Figmaでデザイン生成
- 足りない機能、観点をAIへ指摘
- 指摘を繰り返して、理想のデザインを構築
- コンポーネント設計
- VSCodeで実装
今までブロッカーだったFigmaデザイン起こしが効率化され、先行きが見えてきた。
当然AIのデザインなので、プロが作成したものに比べて品質や魅力度は平均的なものなんだと思う。
人間に刺さるデザインにするために、Webデザインの勉強をする必要がある。
Figmaが作ったページのコードは無理に1つに詰め込んだような実装になってるようなので、コンポーネント設計や外部接続設定はちゃんとやる必要もありそう。
ただ、アプリ作りとしてはかなり大きな一歩を踏み出せたと思う。
次回は要件定義とデザイン検討を更に煮詰めていきます。
いよいよ開発パート！
追記
Figma Sitesの無料枠だと1日あたり4回しかチャットで指示できないみたい。
有料プランに変更するかはもう少し無料枠で使ってみてから決めようと思う。
Discussion