UIデザインは、使うアセットを決め、紙でアイデアを描き、コンポーネントに分け、Figmaで組み、AIで広げる。この順番なら、画面全体のイメージを自分で持ったまま、部分ごとの判断と制作を進められる。途中で違和感が出たら、必要な工程へ戻って直す。
1. アセットを準備する
最初に、今回のUIで使うアセットを決める。
- 色
- 見出し、本文、補助テキストなどの文字スタイル
- アイコン
- 線の太さ、スタイル、色
- 角丸の大きさ
- 必要に応じて、写真やイラスト、ロゴ
ここで用意するのは、今回の画面で使う最小限のセットである。アセットが決まっていれば、コンポーネントを作るたびに色や線の太さを考え直さず、その部品の役割と形に集中できる。画面を組んだ後も、共通の値を変えることで全体を調整しやすい。
UIデザインにあるスタイルガイドの考え方を、制作前の素材準備に使う。アセットを先に準備する手順は、素材を用意してから組み合わせ、反復するデザインプロセスのうち、制作に入る前の準備を短く切り出したものだ。
2. 紙にアイデアを描く
次に、自分の中にある「こういう画面になりそうだ」というイメージを紙に描く。きれいに描く必要はない。四角、線、矢印、短い言葉があれば、画面の構成や操作の流れは考えられる。
自分の案を一度出した後で、Mobbinなどの参考サイトを見る。似た画面の情報量、余白、ナビゲーション、見せ方を見ながら、使えそうな考えをラフへ足していく。参考先はデザインリファレンスを集める時に使うサイトにまとめてある。
最初のラフを自分で描くのは、制作の方向を自分で持つためである。クリエイティブの初手は必ず人間がラフを描くことから始めるで扱っているように、手を動かす途中で、頭の中だけでは見えなかった違和感や不足に気づける。紙の粗さには、色や細部に気を取られず、アイデアが全体として成立しているかを見る利点もある。
3. コンポーネントに分けて時間を見積もる
紙のラフを、ヘッダー、カード、ボタン、入力欄などのコンポーネントに分ける。それぞれについて、どんな形にするか、どのくらいの時間で作れそうかを考え、ラフの横に「約何分」と書いておく。
画面をひとまとまりのまま扱うと、どこに時間がかかるのかを判断しにくい。作業を実行できる単位まで分けることで、作る順番と作業量が見える。時間を置きにくいコンポーネントがあれば、まだ形のイメージが足りないか、分け方が大きすぎる可能性がある。
デザインには試行錯誤があるため、時間は粗く置く。デザインタスクの見積もりとその特性にあるように、見積もりは途中で更新してよい。ここでの見積もりは、制作前に複雑さと順番を見直すための仮置きである。
4. Figmaで作って組み上げる
分けた単位ごとに、Figmaでコンポーネントを作る。できたものから画面に置き、まずは全体が見えるところまでざっと組み上げる。
この段階では、個々の部品を作る作業と、部品同士の関係を見る作業を行き来する。単体では成立していたコンポーネントも、画面に並べると情報の強弱、余白、読み順に違和感が出ることがある。全体を早めに組むことで、細部へ時間を使う前に直せる。
Figmaは完成画面を置く場所であると同時に、組み合わせを試す場所でもある。デザインファイルは試行錯誤のためのキャンバスであると考えると、最初から一つの形へ決め込まず、並べて比べながら調整しやすい。
5. AIでバリエーションと動きを広げる
Figmaで組み上げた画面をもとに、AIへバリエーションや動きの案を作らせる。レイアウトの違い、余白や大きさの違い、画面遷移や操作時の反応など、比較したい対象を決めて展開する。
この時点では、アセット、紙のラフ、コンポーネント、Figmaの画面がすでにある。それらがAIへの具体的な材料になる。AIを使ったデザインでは視覚的な仮説をコンテキストにすることで、AIが探す方向を絞れる。Figmaも、AIへ見た目の意図を伝えるための道具として使える。
AIが出した案は、何を残すか、何を捨てるか、どこを直すかを自分で決める。より良い方向が見つかったら、Figma、コンポーネント、アセットのうち必要なところへ戻る。一周目を早く回し、作ったものを見て判断する回数を増やす。