第4章 人間は、似たものを仲間だと思う
Web サイトを使っていると、私たちは同じ見た目のものに同じ使い方を期待します。青い角丸のボタンを押して次のページへ進めたなら、別の場所にある同じボタンを見たときも、似たことが起きると思うでしょう。
ところが、その一つだけが入力内容を消すボタンだったらどうでしょう。押す前には違いが分かりません。見た目が教えた規則と、実際の働きが食い違っているからです。
反対に、どれも同じ「詳細を見る」ボタンなのに、一つだけ赤かったり、背が低かったりすると、そこだけ別の意味があるように見えます。人は、似たものを仲間として受け取り、違うものには違う理由があると考えやすいのです。
この章では、同じ見た目がどのように使い方を教えるのかを、実際の画面で追います。そして、何をそろえ、何を違わせるとよいのかを考えます。
4.1 見た目は、次に起きることを予告する
ボタンの色、形、大きさ、文字の太さ、アイコン、置かれた場所。私たちはこうした手がかりを一つずつ数えてから操作しているわけではありません。画面を見た瞬間に、似たものを見つけ、「これは同じ種類だろう」と予想します。
ただし、同じ色だから同じ働きだと決まるわけではありません。青はサイト全体のテーマカラーかもしれません。丸い形は、押せることを示しているだけかもしれません。ボタンに書かれた言葉や置かれた場所も一緒に見て、初めて使い方を予想できます。
大切なのは、見た目と働きを対応させることです。同じ働きには共通する見た目を与え、違う働きには見分けられる手がかりを残します。次の例では、同じ操作なのに見た目だけが変わると、何が起きるかを見ていきます。
4.2 同じ役割なのに違うボタン
文化祭サイトに「詳細を見る」というボタンが四つあります。どれも出演者カードから詳細プレビューを開く操作です。それなのに外観が少しずつ違うと、状態や重要度まで違うように見えることがあります。
比較の基準になるカードを、図 4-2A に示します。以降の三枚でも、画像の大きさ、カードの外形、ボタンの文言と位置は変えません。
図 4-2B では、ボタンの色だけを赤へ変えました。高さも角丸も同じですが、危険な操作や警告を表すボタンのように見える可能性があります。
図 4-2C は高さだけを低くした案です。補助的な操作や、別の部品のように見える可能性があります。
図 4-2D は角丸だけを強くした案です。同じ青色でも、外形の違いによって別の部品群に属するように見えることがあります。
小さな違いにも、意味があるように見える
図 4-2A〜4-2D では、ボタンに書かれた言葉と置かれた場所を変えず、色、高さ、角丸を一つずつ変えました。いくつもの部分を同時に変えると、何が印象を変えたのか分からなくなるからです。
赤いボタンを見ると、削除や警告を思い浮かべる人がいるでしょう。背の低いボタンは、少し重要度の低い操作に見えるかもしれません。丸みの強いボタンは、別の種類の部品に見えることがあります。実際の働きは同じでも、見た目の差には意味があるように感じられます。
もちろん、全員が同じ受け取り方をするとは限りません。それでも、理由のない違いを増やすほど、利用者が考えなければならないことは増えていきます。
差は情報になる
一つだけ異なる見た目は、例外として注意を引く可能性があります。その差が選択中、危険な操作、主要な行動、読込中を一貫して示すなら、必要な情報です。
問題は、差があることそのものではありません。
この差は、利用者が知る必要のある何の違いと対応しているのか。
答えられない差は、制作の途中で偶然残ったものかもしれません。ただし、画面だけを見て決めつけることはできません。選択中や読み込み中など、まだ説明されていない状態を表している場合もあるからです。
同じ役割の範囲を決める
「すべてボタンだから同じ見た目」にする必要もありません。送信、削除、閉じる、カード全体の補助操作は、いずれもボタンであっても役割、重要度、危険性、配置が違います。
そろえるべきなのは、HTML で同じ button を使っているもの全部ではありません。押した後に同じ種類の結果が起きるか、重要度や危険性が同じかを考えます。「次へ進む」と「すべて削除する」は、どちらもボタンですが、同じ見た目にしない理由があります。
4.3 違う役割なのに同じ見た目
角丸の枠に短い文字が入ったピル状の要素を考えます。次の要素が、ほぼ同じ見た目を持っています。
- 別ページへ移動するリンク
- フィルターを適用するボタン
- 現在選択中の条件を示す文字
- 条件を解除するボタン
図 4-3A の「送信する」はフォームの内容をサーバーへ送ります。
図 4-3B の「音楽」は、同じページにある一覧を絞り込みます。
図 4-3C の「詳細を見る」は、別のページへ移動するリンクです。
三つの図では、青い角丸という見た目はほとんど同じです。しかし、押した後に起きることは違います。
「送信する」は、入力したメールアドレスを送ります。「音楽」は、今いるページの一覧を変えます。「詳細を見る」は、別のページへ移動します。ボタンに書かれた言葉を読めば違いは分かりますが、形だけを眺めると、すべて同じ種類の操作に見えます。
同じ見た目を使うこと自体が間違いなのではありません。三つとも「押せる場所」だと知らせるには、共通する形が役立ちます。ただし、押した後の違いを文字や置き場所でも伝える必要があります。送信ボタンはフォームの最後に置き、絞り込みは選択肢として並べ、詳細リンクはカードの内容に続けて置く。このように周りとの関係まで設計すると、同じ青を使いながら役割を分けられます。
HTML でも役割を分ける
見た目が同じでも、HTML まで同じにする必要はありません。別ページへ移動する「詳細を見る」にはリンクの <a>、その場で送信や絞り込みを行うものには <button> を使います。これにより、キーボードや読み上げソフトにも役割が伝わりやすくなります。
CSS を使えば、リンクとボタンをよく似た形にできます。それでも、共有しているのは見た目です。押した後の働きまで同じになったわけではありません。
4.4 類同の原則と一貫性
似たものを同じまとまりとして見やすい傾向を、類同の原則と呼びます。色、形、大きさ、向きなどが似ていると、離れていても仲間に見えることがあります。
文化祭サイトの「音楽」「演劇」「展示」が同じ形で並んでいれば、同じ種類の選択肢だと分かりやすくなります。Web デザインでは、このように同じ役割へ同じ表現を繰り返すことを、一貫性のあるデザインと呼びます。
ただし、類同の原則は、そろえれば何でも分かりやすくなるという決まりではありません。赤い丸が並んでいても、それが削除、エラー、飾りのどれなのかは、形だけでは決まりません。書かれた言葉や置かれた場所、押した後の結果も必要です。
また、重要な違いまで消してはいけません。普通の操作、選ばれている状態、押せない状態、危険な操作をすべて同じにすると、利用者は見分けられなくなります。一貫性とは、すべてを同じにすることではなく、同じ理由でそろえ、違う理由があるところだけを違わせることです。
4.5 UI は使われながら自分の規則を教える
初めて見る Web サイトでも、利用者は完全に知識がないわけではありません。過去の Web 利用から、青い下線付き文字はリンク、歯車は設定、虫眼鏡は検索、といった期待を持ち込みます。この外部の慣習は第15章で扱います。
同時に、一つのサイト内でも規則を学びます。
最初に「音楽」という青いボタンを押すと、一覧が音楽企画だけに絞られます。
次に同じ外観の「演劇」を押すと、同じように一覧が絞られます。二回の経験から、この青い形は企画の種類を選ぶ操作だという規則が見えてきます。
その後で初めて「展示」を見ると、まだ押していなくても同じ結果を予想しやすくなります。画面は説明文だけでなく、外観と結果の反復によって使い方を教えています。
この三枚は、「二回使えば必ず覚える」と証明する図ではありません。覚えるまでの回数は人や画面によって変わります。ここで大切なのは、サイトが操作の繰り返しによって、自分自身の使い方を少しずつ教えていることです。
一貫性が破れたとき
もし四つ目だけ、同じ青い形なのにフィルターを解除したら、覚えた規則が裏切られます。間違えて押した人は、自分のせいだと思うかもしれません。しかし、同じ見た目で違う結果を隠していたのは画面の側です。
予想を裏切る表現が、いつも悪いわけではありません。削除や公開のように結果が大きく違う操作なら、あえて色や形を変えて注意を促すことがあります。その場合は、見た目だけに頼らず、「削除する」のような具体的な言葉や確認画面も使います。例外には、例外だと分かるだけの理由と手がかりが必要です。
4.6 共通部品で、同じ規則を守る
同じボタンをページごとに手作りすると、少しずつ違いが生まれます。あるページでは高さが 40 ピクセル、別のページでは 42 ピクセルというように、理由のない差が増えていきます。
そこで、同じ種類のボタンを共通部品として作ります。表示する言葉だけを入れ替えて使えば、高さ、内側の余白、角丸、キーボードで選んだときの輪郭などを同じ規則にできます。
色や余白の値へ名前を付け、複数の部品で共有する方法もあります。この名前付きの値をデザイントークンと呼びます。サイトの基本となる青へ名前を付ければ、その色を使う場所をまとめて見直せます。
ただし、共通部品やデザイントークンが、役割まで決めてくれるわけではありません。「詳しく見る」というリンクと「絞り込む」というボタンが同じ青を使っていても、HTML と押したあとの働きは異なります。共有する部分と、役割に合わせて分ける部分を選びます。
4.7 必要な違いは、きちんと見せる
選択中、押せない状態、読み込み中、エラー、成功は、普通の状態と同じ見た目では伝わりません。削除や公開も、気軽にやり直せる操作とは結果の重さが違います。このような差は、消すのではなく、はっきり見せる必要があります。
ただし、色だけに意味を背負わせないようにします。選択中ならチェック印や「選択中」という文字を添える。押せないなら、なぜ押せないのかを近くに書く。削除なら、赤くするだけでなく「削除する」と具体的に書き、必要なら確認や取り消しも用意する。色を見分けにくい人や読み上げソフトを使う人にも、同じ状態が伝わるようにします。
一つだけ違う部品を見つけたときは、すぐに色や形をそろえず、なぜ違うのかを考えます。役割や状態が違うなら、その差は必要かもしれません。同じ役割なのに理由の分からない差があるなら、CSS までたどって直します。一貫性とは、差を全部消すことではなく、必要な差だけが残っている状態です。
同じ役割には、同じ見た目と同じ結果を繰り返します。異なる役割には、言葉、形、置き場所のどれかで見分けられる差を残します。色だけをそろえること、外形までそろえること、HTML の部品をそろえることは別々に考えます。
次章へ
似た見た目は、離れた要素にも共通の規則を感じさせます。しかし、画面のすべてを境界線、背景、影で囲めば、既に距離や類似で見えていた構造を重ねて説明することになります。
次章では、人が足りない輪郭を補い、共通の領域からまとまりを作り、前景と背景を分ける仕組みを扱います。
参考資料
- 入口: York University, “Max Wertheimer, Laws of Organization in Perceptual Forms（英訳）.” 類同を含む古典的な知覚的組織化の原典英訳です。
- 発展: Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception I,” 2012. 色、形、大きさ、向きによる類同を含むレビューです。
- 研究: Claessens and Wagemans, “Grouping principles in direct competition,” 2013. グルーピング手がかりの競合を扱います。UI の固定順位表としては使いません。
- 仕様: WHATWG, “The button element” and “The a element.” 見た目とは別に HTML 要素の意味を確認します。
- 仕様: W3C, “CSS Custom Properties for Cascading Variables Module Level 1.” カスタムプロパティの定義、カスケード、継承、
var()を確認する仕様です。 - 仕様候補: Design Tokens Community Group, “Design Tokens Format Module.” トークン交換形式の草案です。公開状態と版を再確認してください。
- 調査資料: Open UI. 部品の構造、状態、振る舞いを横断的に調査する資料への入口です。Web 標準として確定した全ての部品仕様という意味ではありません。
検索キーワード：類同の原則、grouping by similarity、perceptual grouping competition、UI consistency、design token format、CSS custom properties cascade、component variant state