ツールを覚える前に、まずは言葉で描く
アプリを作るとき、一番の悩みどころは「画面のデザイン」ではないでしょうか。 ネットで調べると「まずはFigmaで設計しましょう」というアドバイスをよく目にします。しかし、多機能なFigmaを使いこなすこと自体、非エンジニアにとっては新たな高いハードルになりがちです。
僕は今回、Figmaを一切使わずにアプリの画面を完成させました。専門ツールに頼らず、AIとの「対話」だけで理想の形に近づける方法を共有します。
専門知識はいらない、AIに「見えているもの」を伝えるだけ
結論から言うと、Antigravity（AI）に言葉でイメージを伝えるだけで、十分に実用的な画面ができ上がります。 例えば、僕はAIにこんなふうに指示を出しました。
ホーム画面には、登録した習慣をリスト形式で並べてください。それぞれの横にはチェックボックスを置きます。画面の上部には、今の継続日数を大きな数字で表示したいです。全体の色使いは、白と黒を基調とした、清潔感のあるシンプルなデザインでお願いします。
これだけの指示で、AIは意図を汲み取り、最初から「それらしい」画面を生成してくれました。
理想の100点に近づける「言葉の微調整」
最初に出力されたデザインが完璧である必要はありません。そこから自分好みに「お直し」を依頼していくのが、この設計スタイルの醍醐味です。
- 「ボタンの周りにもう少し余白を広げて、ゆったりさせて」
- 「文字を少し太くして、読みやすくして」
- 「ボタンの角を丸くして、柔らかい印象に変えて」
- 「夜でも眩しくないように、ダークモードの切り替えをつけて」
このように、日本語で具体的に伝えれば伝えるほど、画面の精度は目に見えて上がっていきます。
Figmaが必要になるのは、もっと先の話
もちろん、Figmaが全く不要というわけではありません。 例えば、ストア掲載用の凝った画像を作りたいときや、ロゴデザインを細部まで詰めたいときには、専門ツールの力が欲しくなるはずです。
しかし、最初のアプリを形にする段階では、高度なスキルは必要ありません。 デザインにこだわりすぎて手が止まってしまうくらいなら、まずはAIに言葉で伝えて、とりあえず「動く画面」を手に入れてしまう。 非エンジニアの個人開発において、これほど手軽で確実な方法はないと感じています。
