同じ視覚的な合図には、同じ意味を持たせる
請求画面には、情報を比較しやすい密度と明確な金額表示が必要です。記事ページには、読みやすい文章のリズムが必要です。両方をまったく同じレイアウトにすれば、それぞれの役割を無視することになります。一方で、タイポグラフィ、操作の決まり、意味に基づいた色の使い方を共有すれば、同じプロダクトの一部としてまとまりを感じられます。
視覚的な合図の意味が予期せず変わると、問題が生じます。あるページでは主要な操作、別のページでは選択中のフィルター、さらに別のページではエラーをアクセント表現で示すと、訪問者はそのたびに意味を読み解き直さなければなりません。色の値だけでなく、意味を確認しましょう。
同じ条件のものを比べる
同じ状態、同じ幅で、役割が同等のコントロールを並べて比較します。無効状態のボタンを有効状態のものと比べるべきではありません。また、表の中の小さな操作ボタンと、ページ上で目立つ操作ボタンが同じ寸法である必要もありません。
違いを見つけたら、ルールに基づいているかを確認しましょう。「データ行では小さな操作ボタンを使う」はルールです。「この画面では小さいボタンのほうがよく見えた」は局所的な好みで、プロダクトが成長すると維持しにくくなります。
繰り返し生じる違いの原因を探す
間隔がばらばらなカードが12個あるとします。そのうち10個は共通コンポーネントから作られ、2個は個別に実装されています。12ページすべてを編集すると、この構造上の違いが見えなくなります。変更範囲を決める前に、共通カードの間隔と、例外がある理由を確認しましょう。
デザイントークンは繰り返し使う値を明示できますが、名前だけでは使いどころまで伝わりません。共通の値に短い使用ルールと、妥当な例外の例を添えましょう。新しい画面を作るたびに方針を議論することなく、デザインシステムを役立てられます。
理想的な例以外も確認する
長い見出し、画像がない状態、検索結果が空の状態、文字量の多い本文を使って確認しましょう。こうした状態を見ると、コンポーネントに一貫したレイアウトルールがあるのか、それとも設計時のサンプル内容に合わせただけなのかが分かります。
守りたいルールを記録しましょう。たとえば、同等の選択肢には同じ強さを持たせる、コンテンツのまとまりを明確に分ける、次の操作を常に同じ場所に置く、といったルールです。スクリーンショットに合わせるという指示よりも、後から参加する人の役に立ちます。