AIでアプリをデザイン

🔄 前回のおさらい: レッスン2では、プロジェクトに最適なAIアプリビルダーの選び方を学びました。今回は、実際にアプリを作る前の重要なステップ——デザインに取り組みます。

スクリーン生成の前にやること

AIにスクリーンを生成させる前に、2つの重要なステップがあります：

1. ユーザージャーニーのマッピング： ユーザーがアプリで何をしたいか、どの順番で操作するかを図示。例：フードデリバリーなら「メニュー閲覧→料理選択→カートに追加→注文確定→配達追跡」。

2. デザインシステムの定義： フォント（2種類）、色（3-5色）、スペーシング、ボタンスタイルを事前に決める。AIにこの制約を伝えることで一貫性が保たれます。

AIデザインツール

非デザイナーのための4原則

1. ホワイトスペース — 要素間にたっぷりの余白。詰め込みすぎは素人感の最大の原因
2. 1画面1主要アクション — 各画面でユーザーにしてほしいことは1つだけ。ボタンが5つある画面は混乱を招く
3. 一貫したコンポーネント — 同じ種類のボタン、カード、リストは全画面で同じスタイル
4. タッチターゲット最小48px — 指で確実にタップできるサイズ。小さすぎるボタンは最大のUX問題

✅ 確認クイズ: デザインシステムを事前に定義してからAIにスクリーン生成を依頼すべき理由は？（AIにデザインシステムの制約なしでスクリーンを生成させると、各画面で異なるフォント、色、スタイルを使う可能性が高い。後から統一するのは修正コストが大きい。最初から制約を明示すれば、AIが一貫したデザインを出力し、プロフェッショナルな見た目が保証される。）

まとめ

• スクリーン生成前にユーザージャーニーをマッピングし、デザインシステム（フォント、色、スタイル）を定義
• AIデザインツール（Figma Make、Uizard）でプロ品質の画面を数秒で生成、反復改良
• AIは個別画面は得意だが、画面間の一貫したフローは人間が設計する必要がある
• 4原則：ホワイトスペース、1画面1アクション、一貫したコンポーネント、最小48pxタッチターゲット

次のレッスン

次は「最初のアプリを作る」——AIアプリビルダーで実際にプロトタイプを構築するステップバイステップのプロセスを学びます。