AI活用100本ノック

#018

デザインツール初心者がGemini活用でモック作成!

企画の解像度アップ!AIとの対話でモックアップ作成が3日も早くなった

#Gemini#モックアップ#UIデザイン
デザインツール初心者がGemini活用でモック作成!
実践プロセス(AIによる自動生成)

1.要件の相談

企画案をGeminiに入力し、「最低限必要な画面構成は?」といった観点で壁打ちしました。

プロンプト例
新規会員登録フローを設計しています。ユーザー体験を損なわない最小限の画面構成を提案してください。入力項目は氏名、メールアドレス、パスワードです

2.たたき台の生成

Geminiに画面構成・ボタン配置・入力フィールドのレイアウトをASCIIアートやMarkdown形式で出力させ、6割完成度のワイヤーフレームを作成しました。

プロンプト例
提案された画面構成に基づいて、各画面のワイヤーフレームをテキストで表現してください

3.ツールの操作補助

デザインツール(Figma等)の使い方がわからない箇所を、スクリーンショットを撮ってAIに質問し解決しました。

プロンプト例
Figmaでこのボタンに角丸を付けたいのですが、どこを操作すればよいですか?

4.モックの完成

AIの案を基にツール上で形にし、動くプロトタイプとしてチーム共有しました。