UIデザイン入門 — 画面設計とコンポーネントの考え方

ここでは、講座の申し込みフォーム画面をゼロから設計した実例をもとに、UIデザインで最初につまずきやすい「コンポーネント」と「状態」の考え方を確認します。デジタルデザインの基本 — レイアウト・余白・視線誘導で扱ったレイアウトの土台ができている前提で、その上に置く部品をどう設計するかという話です。

最初の設計 — 画面としてまとめて作った失敗

最初のバージョンでは、フォーム画面を1枚の絵として描き、入力欄・ボタン・エラーメッセージをその場その場でデザインしていました。結果として、名前欄とメール欄で角丸の半径が微妙に違い、送信ボタンの色も他の画面のボタンと揃っていない、という状態になりました。画面ごとに部品を作り直していたことが原因です。

コンポーネント単位で考え直す

そこで、画面を描く前に「入力欄」「ボタン」「チェックボックス」という部品を先に定義し、それぞれに固定のスタイル（角丸、余白、文字サイズ）を1つずつ決めました。部品を先に固定してから画面に配置する順番にすると、後から別のページを作るときも同じ部品を使い回せます。UIをコンポーネント単位で捉え、一貫したルールを適用する考え方は、一貫性と標準化に関するUXの解説でも基本原則として扱われています※1。

状態を先に洗い出す

部品を決めるときに見落としがちなのが「状態」です。ボタンなら通常・ホバー・押下中・無効の4状態、入力欄なら空・入力中・入力済み・エラーの4状態を、最初にすべて書き出してからデザインします。Material Designのインタラクション状態に関する指針でも、部品ごとに複数の状態を体系的に定義することが示されています※2。今回のフォームでは、送信ボタンの「送信中」状態を作り忘れていたことに気づき、二重送信を防ぐための無効表示を後から追加しました。

実例で見る — 変更前と変更後

変更前は、必須項目が未入力のままボタンを押すと画面が固まったように見え、エラーメッセージも赤文字が一瞬出るだけで見落とされていました。変更後は、エラーのある入力欄の枠を赤くし、欄のすぐ下に理由を常時表示する状態に変え、送信ボタンは送信中だけラベルを「送信しています…」に切り替えて無効化しました。変更したのは色と文言と状態の切り替えだけですが、迷わず入力を完了できる画面に変わりました。

部品集は完璧を目指さなくてよい

もっとも、最初から汎用的な部品集（デザインシステム）をすべて設計してから画面を作るのは、小規模な制作では非効率です。実際に必要になった部品から少しずつ切り出し、似た部品が2〜3個できた時点でルールを揃える、という順番の方が現実的です。ボタンや入力欄の設計は単発では終わらず、制作ワークフローの設計 — Create → Experiment → Build → Presentのように、繰り返し使う工程の一部として位置づけると管理しやすくなります。フォームに顔写真などユーザー自身の画像をアップロードさせる設計にする場合は、利用規約とデータの扱いを事前に明記しておく必要があります。

コンポーネント単位の画面設計を実案件で練習したい方向けに、有料の「クリエイティブAI基礎講座」でも演習として扱っています。詳しくは講座ページをご覧ください。

参考文献

1. Nielsen Norman Group. "Consistency and Standards in UI Design." nngroup.com, https://www.nngroup.com/articles/consistency-and-standards/
2. Material Design. "States: Overview." m3.material.io, https://m3.material.io/foundations/interaction/states/overview