AIを活用した8時間のプロダクトデザイン
AI活用ワークフロー
デザインシステム
概要
1日の実際の勤務時間（8時間）を想定し、AIをどのように作業フローに取り入れることができるか検証した自主プロジェクトです。架空プロダクト「AI投資アシスタント」を題材に、現実的な時間の制約の中でAIを使って、どのように作業を進めることができるか試しました。
担当とデザインの焦点
アイデア出しとUIなどデザインのたたき台はAIでスピードを上げ、優先順位付け・ブラッシュアップ・品質の担保はデザイナーとして自分で判断しました。
チーム
ChatGPT：戦略・アイデア出し
無料AIツール：ビジュアル検討、UIデザイン、開発への引き渡し準備
成果
AIでUI検討とデザインシステムの初期作業を加速
繰り返し使えるAI活用ワークフローを確立
AIで速くなる工程と、人の判断が必要な工程を明確化
なぜ8時間？
8時間という時間を選んだのは、ハッカソンではなく、実際の1日の仕事を再現するためです。
UIにフォーカスした理由？
現在のAIツールは、レイアウトやビジュアル検討、UIパターンなど「型」がある作業が得意です。一方、課題発見のフェーズにはまだ深い思考と文脈の判断が必要と考えているため、アウトプット重視の範囲にフォーカスしました。
8時間で作成したもの
3画面のUIデザイン
小規模なデザインシステム（基礎要素＋コンポーネント）
ビジュアルの方向性
開発にそのまま渡せるよう整理したFigmaファイル
Kickoff meeting
スコープ設定
最初にChatGPTと相談して、8時間で作る範囲と成果物を決めました。
成果物
UI
入力画面（投資目標額＋予算＋CTA）
ローディング画面
投資プラン提案画面
小規模なデザインシステム（基礎要素＋コンポーネント）
ビジュアルテーマの検討
Wireframing
AIが作成したワイヤーフレームを元に改善
AI
複数のワイヤーフレームを素早く作成
私
各案をレビューし、改善
Visual direction & Design tokens
AIが作成した複数のアイデアから選択
AI
複数のビジュアル案とカラーパレットを提案
私
ビジュアルを決定し、Figmaにトークンを登録
Components
AIが作成したドラフトをもとに、ブラッシュアップ
AI
白黒のベーシックなコンポーネントを作成
私
トークンを適用し、パターンを再構成して仕上げ
Design review & Final mockups
AIと共にレビューし、デザインを完成
AI
デザインのレビュー・フィードバック
私
AIのフィードバックを参考に、必要箇所を改善
Clean up & Organize
開発チームに渡せるようにFigmaファイルを整理
AI
レイヤー名の整理、トークンのドキュメント作成
私
整理したファイルとドキュメントを確認
Figma AI：レイヤー名の整理
Figmaプラグイン：Auto Documentation
AIを使用した成果
普段の作業内容と比べて、以下の作業時間が大幅に短縮されました。
ワイヤーフレーム
約70%短縮
コンポーネントの作成
約50%短縮
ファイル整理
約80%短縮
これらは客観的なベンチマークではなく、AIを使わない場合の私の普段の作業時間との比較です。
AIのおかげで時間ができたので、情報の優先順位付けなど判断が必要な部分に集中できました。AIが素早くデザインのアイデア出しを行い、方向性と意図に合うデザインを私が判断・選択しました。
振り返り
今回の検証を通し、「AIはアイデア出しやUIデザインの作成などのスピードを加速し、デザイナーは選択し、方向性や意図を守る」という構図が見えました。
AIが得意・役に立つ部分
様々なパターン・選択肢を素早く生成
複数の選択肢から検討できる
デザイナーの判断が欠かせない部分
情報の構造
デザインの意図・理由
デザイン・プロダクトの方向性の確認
AIが苦手な部分
文脈の解釈
情報の優先順位付け
気付いたこと
AIは「幅（Breadth）」を出すのが得意で、デザイナーは「深さ（Depth）」を与える。組み合わせることで、品質を落とさず、素早くデザインすることができる。
今後やりたいこと
次は、以下のような上流のフェーズでAIをどう活かせるかを探りたいです。
リサーチ分析
インサイトの抽出
仮説を立てる
