1. はじめに
今回は、資格学習サポートアプリのUIをFigmaのAI「Figma make」に作ってもらいました。
プロンプトを打つだけで、トップ画面・進捗バー・タスク表示まで全部作ってくれるのを見て驚きました。
2. 作りたかったアプリの概要（軽くおさらい）
AIが資格学習計画を自動生成してくれるアプリ
日々の進捗をもとに提案を調整する
React＋Node.js＋AWSで構築予定
→ 今回はUIモックをAIで作ってみる段階
3. プロンプト入力例
実際にAIに入力したプロンプトはこんな感じ👇
スマホ向けのワイヤーフレームを作成してください。
「資格学習サポートアプリ」で、AIが学習計画を自動生成し、毎日の進捗をもとに提案を調整する仕組みを想定しています。
主な画面構成：
目標設定画面：
・資格を選択（AWS認定ソリューションアーキテクトを想定）
・試験日を設定
・「AIで学習計画を立てる」ボタン
・AIが出した週ごとのテーマ（例：セキュリティ／高可用性）を一覧表示し、編集・保存できる
トップ画面（ダッシュボード）：
・試験日までの残り日数、進捗バー
・「今日のタスク」チェックリスト
・「日報を書く」ボタン
日報画面：
・「今日やったこと」テキスト入力
・送信後にAIコメントやフィードバックを表示
・過去3件の記録を下に表示
カレンダー：
・計画と実績を週・月単位で色分け表示
デザイン方針：
・最小限で直感的なUI（統一された配色）
・分析よりも「行動とフィードバック」に焦点
・ユーザーが迷わず「次にやるべきこと」が見える設計
目的：
・ユーザーが「AIに伴走されながら資格学習を進めていく」体験をデザインすること
「資格学習サポートアプリ」で、AIが学習計画を自動生成し、
毎日の進捗をもとに提案を調整する仕組みを想定しています。
ユーザーは資格名と試験日を入力し、進捗バーやタスクを確認できます。
スマホ向けのワイヤーフレームを作成してください。
4. 実際に生成された画面
正直、初期段階としてはかなり完成度が高かった。
進捗バー、タスク一覧、ボトムナビまで自動で構成されていたのは驚き。
少し色味の調整やカード配置を変えるだけで、すぐ実装に使えるレベル。
スマホ用画面かどうかは微妙ですが…
5. 感想と今後の展望
思っていた以上に「AIがUI設計を代行できる」時代になってきた。
今後はFigma→Reactの組み込み工程を進めつつ、
AI生成デザインをどこまで実装に落とし込めるか試していく予定。
コードも生成してくれるので、実装時もたたき台として使えそう…！
