AIで画面を作る方法は、ツールの紹介やデモ動画ではいくらでも見つかります。でも、実際の案件で「どこまでAIに任せて、どこから人が決めるのか」を、最初から最後まで見せている例はほとんどありません。
この記事では、ある管理画面の改修を題材に、依頼を受けてから画面を仕上げるまでの手順を、すべて公開します。使った指示文と、途中で捨てた案も含めています。
このページはサンプルです。題材と数字は架空です。
続きは会員向けの記事です
制作メソッドは、全文を会員向けに公開しています。この記事の続きでは、次の内容を扱います。
- 5つの手順と、AIに任せた範囲・人が決めた範囲
- 途中で捨てた案と、その理由
- そのまま使える指示文のテンプレート
全体の流れ
- 依頼を、構造にする依頼文と既存の画面をAIに渡し、画面の目的・利用者・やりたいことを表に整理させる。ここで抜けている情報を、人が依頼者に確認する。
- ワイヤーを、AIで10案出す整理した表をもとに、情報の並べ方が違う10案を出させる。見た目ではなく、構造の違いで比べられるようにする。
- 1案を選ぶ（ここは人が決める）利用者が一番よく行う操作から逆算して選ぶ。選ばなかった案の理由も、依頼者向けに1行ずつ書いておく。
- デザインシステムに載せる選んだ案を、既存のトークンとコンポーネントで組み直させる。指示の書き方は別の記事で詳しく解説しています。
- 仕上げと説明は、人がやる余白、文言、例外の状態を人が整え、「なぜこの形か」を依頼者の言葉で説明する。
この回で使ったもの画面生成ツール、デザインツールのAI機能、文章生成AI。具体的な製品名と設定は [ ]
時間はどう変わったか
初稿までの時間は、これまでの半分ほどになりました。一方で、1案を選ぶ工程と、依頼者への説明にかけた時間は変わっていません。AIで速くなるのは「作る」部分で、「決める」「伝える」部分はむしろ重みが増す、というのが今回の結論です。
指示文のテンプレート
手順1と手順2で使った指示文を、そのまま使える形で載せています。[テンプレートの本文]