こんにちは、こんばんは。 webディレクションチームの秋山です。
AIの活用が活発化している今日ですが、デザイナーのワークフローにおけるAIと自身の作業分担について書いてみました！

デザインプロセスの全体像

UIデザインのプロセスを3層フェーズで整理するとこうなります。

フェーズ別：AIに私が任せていること

①考える（上流）

→競合・類似サービスサイトのデザイン分析
競合サイトや類似アプリのスクショを集めて、機能やUI構成を一覧化してもらいます。叩き台レベルの比較表を出してくれるので、自社でマストで取り入れたほうが良い必須要素と任意要素が可視化できます。

②作る（中流）

→レイアウトやデザイン候補の生成
「●●サイトの一般的な画面構成を3パターン出して」のように一般的な構造のパターン出しをAIに任せます。このときに「①のフェーズで出たＵＩ構成の一覧化したものを参照」とプロンプトに追加することで、大分具体化された内容を出力してくれます。人の手によるディテールの調整は必要ですが、内容について一旦現場に了承や確認を得たいとき、ここで出力されたものを添えるだけでも完成形の解像度が上がってやりとりもスムーズです。

→コンポーネントのスタイルバリエーションの提案
例えば入力の不備があったときに出るエラー時の挙動など、ステータスに合わせたスタイルを提案してもらいます。失敗：赤、成功：青　みたいな一般的なカラー思考で提案してくれますが、既に自社でカラーガイドなどがあれば「これを参照して作成してください」と付け加えばそれに倣って生成してくれてありがたいです。

③仕上げる（下流）

→最終デザインへの総評を得る
仕様書や依頼メモと完成したデザインをAIに送って、要件・依頼漏れのない内容になっているかチェックしてもらいます。もちろん自分でもチェックしますが、ダブルチェックすることで依頼者に確認してもらうときに「これ抜けてません？」みたいなやりとりが極力減らせるのでおすすめです！

AI出力のレビューチェックリスト

作る（中流）の過程において、ＡＩの出力結果に対しての調整をする際、この４つをチェックしています。

• ブランド整合性 — デザインシステムの色・タイポ・スペーシングに沿ってるか
• ユーザビリティ — タッチターゲット、視線の流れ、操作導線は自然か
• エッジケース — データ0件、長文、オフライン時の表示は考慮されてるか
• 文脈適合性 — 前後の画面との整合性はあるか（AIは画面単体で最適化しがち）

まとめ

今回は自分の実務を振り返りながら、ＡＩと自身の作業分担について可視化してみました！「時間がかかっているけど、創造的な判断が必要ないタスク」もしくは
「創造的な判断材料や条件を与えたうえで出力させる」ことが効率的なAIとのデザイン制作作業に繋がるのかなと感じます。とはいえ私もまだまだAIに触れながら日々勉強中なのでこれからも精進したいと思います。最後まで読んでくださりありがとうございました！