DESIGN CONSISTENCY
値を集める前に、使う理由をそろえる。
ページを増やすたびに、少し違う青、少し違う余白、少し違う角丸が増えていく。制作が進むほど、どれを使えばよいか分からなくなることがあります。共通ルールを作るときは、値を一覧にするだけでなく、その値を使う役割も整理してみましょう。
この記事では、小規模なWebサイトを想定し、色や余白の使い分けを記録する方法を紹介します。大きなデザインシステムを一度に作るのではなく、実際に繰り返し使う部品から始める進め方です。
1. 見た目が同じでも役割を確認する
たとえば、主な操作の背景色と、本文中のリンク色が同じ青だったとします。今は同じ値でも、後で主ボタンだけ変更することはあり得ます。「青」という名前だけでは、その変更がどこへ及ぶべきか判断しにくくなります。
そこで「主操作の背景」「本文リンク」「補足文」のように、使う場所と意味を記録します。こうした役割名があれば、値を変更するときも、どの画面を確認するべきかを追いやすくなります。
2. 基本の値と、用途の名前を分ける
| 基本の値の例 | 用途の名前の例 | 確認する場所 |
|---|---|---|
| 青の濃い色 | 主操作の背景 | 申込ボタン、主要な入口 |
| 同じ青の濃い色 | 本文リンクの文字 | 本文内リンク |
| 小さめの間隔 | ラベルと補足の間 | カード、フォーム周辺 |
表の分類は運用例です。細かく分けすぎると使う人が迷うため、実際に別々に変更する可能性や、使い分ける必要があるかで判断します。名前を増やすこと自体を目的にしないようにしましょう。
3. まず一つの部品に当てはめる
最初からサイト全体を整理するより、よく使うカードや主ボタンを一つ選びます。文字、背景、枠、内部の余白、他の部品との距離を書き出し、同じ役割のものが別の設定になっていないかを見ます。
カードの内容が違うからと毎回余白を変えているなら、文章量や見出しの長さに原因があるかもしれません。値を統一するだけで崩れる場合は、部品が扱う内容と例外の条件も一緒に整理します。
4. 通常状態以外もルールに含める
操作部品は、通常表示だけで完結しません。選択中、操作できない状態、フォーカスがある状態など、画面に必要な状態を列挙します。見た目の差だけでなく、その状態で何ができるかも説明しておきます。
たとえば「無効なボタンは薄い色」とだけ書くと、どの条件で無効になるかが抜けます。「必要な入力が不足するとき」などの条件は、実際の仕様を確認して記録してください。状態を色だけで説明しきれない場合は、文言や形も検討します。
5. 例外を認める条件を残す
すべてを同じにすれば、常に良い画面になるわけではありません。強調が必要な注意事項や、別の目的を持つキャンペーン画面では例外が必要になることがあります。その際は、なぜ例外にするか、どこまで適用するかを残します。
「今回は特別」だけで終わらせず、「この案内枠の中だけ」「期限が終わったら基本に戻す」のように範囲を決めると、例外が知らないうちに標準へ広がることを防ぎやすくなります。
練習：一画面から小さなルール表を作る
- 同じ役割で使われる色を三つ選ぶ。
- 値と用途の名前を並べて書く。
- 同じ値でも別々に変える必要があるか考える。
- 部品一つに適用し、長い文章でも成立するか確認する。
ルールは作って終わりではありません。新しい部品が加わったとき、既存の用途で足りるかを確認して更新します。役割と使い方が読める小さな記録から始めると、制作する人が増えても判断を共有しやすくなります。