#018
デザインツール初心者がGemini活用でモック作成!
企画の解像度アップ!AIとの対話でモックアップ作成が3日も早くなった
#Gemini#モックアップ#UIデザイン

実践プロセス(AIによる自動生成)
1.要件の相談
企画案をGeminiに入力し、「最低限必要な画面構成は?」といった観点で壁打ちしました。
プロンプト例
新規会員登録フローを設計しています。ユーザー体験を損なわない最小限の画面構成を提案してください。入力項目は氏名、メールアドレス、パスワードです2.たたき台の生成
Geminiに画面構成・ボタン配置・入力フィールドのレイアウトをASCIIアートやMarkdown形式で出力させ、6割完成度のワイヤーフレームを作成しました。
プロンプト例
提案された画面構成に基づいて、各画面のワイヤーフレームをテキストで表現してください3.ツールの操作補助
デザインツール(Figma等)の使い方がわからない箇所を、スクリーンショットを撮ってAIに質問し解決しました。
プロンプト例
Figmaでこのボタンに角丸を付けたいのですが、どこを操作すればよいですか?4.モックの完成
AIの案を基にツール上で形にし、動くプロトタイプとしてチーム共有しました。