AIでアプリをデザインする方法：10分で全画面をつくる
アプリのアイデアはあるけれど、まだデザイナーがいない。AIのアプリデザイン生成なら、約10分で主要な画面がすべてそろい、ユーザーや投資家に見せられるクリック可能なプロトタイプになります。最初の一文から書き出しまで、具体的な手順を紹介します。
最後に手に入るもの
この手順を終えると、次のものがそろいます。
- ページ計画：アプリに必要な画面の一覧と、それぞれの役割
- ひとつのデザインシステム（色、フォント、余白、コンポーネント）でそろった全画面
- パソコンでもスマホでも見せられるクリック可能なプロトタイプ
- 次の作業に使えるファイル：Figmaのレイヤー、HTML、FlutterやJetpack ComposeのUIキット
例はカフェのモバイルオーダーアプリですが、予約アプリ、マーケットプレイス、フィットネスアプリ、社内ツールでも手順は同じです。
0〜2分：AIが理解しやすい依頼文を書く
Lyxvo Designを開き、アプリデザインを選んで、スマートフォンのプラットフォームでiOSかAndroidを選びます。アプリの説明は自分の言葉で書けば大丈夫です。良い依頼文には4つの要素があります。
- 何を、誰のために：「大学近くのカフェ『珈琲あさひ』（京都）のモバイルオーダーアプリ」
- ユーザーがすること：「メニューを見る、ドリンクをカスタマイズする、支払う、注文状況を確認する」
- 必須の画面：「メニュー、商品詳細、カート、決済、注文状況、プロフィール」
- 雰囲気：「温かくモダン、クリーム色とこげ茶、角の丸いカード、大きな写真」
これをひとつの段落にまとめます。特別な言葉は不要です。デザイナーに説明するつもりで書いてください。
ヒント：ロゴやブランドカラーがすでにあるなら、ブランドパネル（ブランド → マイブランド）に保存しておきましょう。新しいデザインに自動で使われます。
2〜3分：ページ計画を確認する
矢印を押すと、エージェントは何かを描く前にページ計画を書きます。各画面とその目的の一覧です。流れが決まるのはここなので、いちばん大事な1分です。
ユーザーになったつもりで読みましょう。アプリを開く、ドリンクを探す、カートに入れる、支払う、待つ。足りないものはありませんか？ログイン、空のカート、注文履歴など。足りなければページを追加で「注文履歴」のような短い名前を付けて追加します。
3〜7分：すべての画面をデザインする
すべてのページを作成を押します。エージェントが画面を順番にデザインし、右側のログに進み具合（「7 ページ中 2 完了」）が表示されます。いつでも止められますし、次のページで1画面ずつ確認しながら進めることもできます。
新しい画面はすべて同じデザインシステムと同じタブバーを使うので、バラバラのモックアップではなく、ひとつの製品に見えます。エージェントは、新しい画面が既存の画面の繰り返しになっていないかも確認します。
7〜9分：クリックできるようにして直す
プレゼンを押すとプロトタイプが開きます。メニュー → 商品 → カート → 決済とクリックしてみてください。ボタンやタブは、行き先の画面にすでにつながっています。
まだデザインされていない画面に向かうボタンがあると、Lyxvoが知らせてフローを完成させるを提案します。押すと足りない画面がデザインされ、プロトタイプ全体を最後までクリックできるようになります。
気になった点を直しましょう。画面を選び、下の入力欄に変更を書きます。
- 「カートに追加ボタンを画面下に固定して」
- 「価格を円で表示して。例：¥550」
- 「プロフィールにスタンプカードを追加して」
細かい修正は、画面をダブルクリックして直接編集します。文字を変える、アップロードから写真を差し替える、矢印キーでカードを動かす、などです。右クリックするとバリエーション（レイアウト・色・スタイルが異なる3案）や、iOS画面のAndroid版（またはその逆）をつくる他のプラットフォーム版も使えます。
9〜10分：共有または書き出し
共有でリンクを送れます。共同作業ではメールで相手を招待し、同じデザインをリアルタイムで一緒に編集できます。見てもらうだけなら公開リンクで十分です。
書き出しからデザインを次の工程に渡します。
| やりたいこと | 選ぶもの |
|---|---|
| Figmaで続きをデザインする | Figmaにコピー、または Figma (SVG + トークン) |
| Web開発者に画面を渡す | .zip (HTML + DESIGN.md) |
| Flutterアプリを始める | Flutter UIキット |
| ネイティブのAndroidアプリを始める | Jetpack Compose UIキット |
| ピッチデッキに画面を載せる | PNGをダウンロード |
ダウンロードできる内容はプランによって異なります。料金ページをご覧ください。Figmaへのコピーはすべてのプランで使えます。
よりよい結果を出すコツ
- 1つのデザインに1つの製品。 2つ目のアプリは新しいデザインで始めると、計画が混ざりません。
- 実際の内容を書く。 「抹茶ラテ ¥550」と書くほうが「商品1」よりずっとリアルな画面になります。
- 変更は1回に1つ。 短く具体的な依頼ほど、結果を確認しやすくなります。
- 流れを完成させる。 人に見せる前に、プレゼンモードですべてのボタンを一度押してみましょう。
AIが代わりにはならないこと
AIでつくったプロトタイプは、アイデアの検証、プレゼン、開発者への説明に最適です。ただし、検証そのものはしてくれません。想定ユーザー5人に見せ、どこで迷うかを観察してください。また、バックエンドはつくりません。ログイン、決済、データは開発者やノーコードツールが必要です。
次のステップ
試してみましょう。AIアプリデザインを開くか、下のボタンからスタジオで始められます。画面ができたらアプリアイコン生成でアイコンをつくり、ピッチデッキの構成で発表資料を準備しましょう。
Lyxvo AIで試す
自分の言葉で説明すれば、デザインエージェントが最適なフローで始めます。無料で始められます。
関連ツール: iOS・AndroidアプリをまるごとデザインするAI
アプリやウェブサイト全体は、デザインプランとは別にレンタルする Lyxvo Engine で作ります。どのアカウントも2ページまで無料で試せます。