類似性

定義

類似性とは、色・形・大きさ・向きのように見た目が似ている要素を、目が自然とひとつの グループとしてまとめて見る性質のことです。近接が「距離」でグループをつくるのに対して、 類似性は「見た目」でグループをつくります。だから離れた場所にあっても、同じ色や形を 持つものは同じ仲間として読み取られます。リストのなかで同じアイコンが付いた項目どうし、 同じ色のバッジが付いた項目どうしがひとまとまりに見えるのが、類似性が働いている姿です。 逆に見た目をあえて変えると、その要素は仲間から浮き上がり、別の役割であることを知らせます。 このように類似性は、位置を動かさなくても「似ている・違う」という見た目だけで関係を 調整できる原理であり、画面全体の視覚言語を決める土台になります。

なぜ重要か

類似性は、見た目だけで役割をほのめかす強力な手がかりです。同じ機能を持つボタンを同じ 見た目でそろえておくと、ユーザーは説明を読まなくても、それらが同じ種類だと察します。 逆に、重要な操作とそうでない操作の見た目を変えると、その違いそのものが優先順位になり、 何がメインの行動なのかを伝えてくれます。つまり類似性は、要素をまとめるのにも、分ける のにも使えるのです。一貫した視覚言語を持つUIは、一度覚えたルールを別の画面でもそのまま 使えるので予測しやすくなり、新しく覚えることが減って学習コストも大きく下がります。だから こそ類似性は、デザインの規則性と安心感を支える土台になり、プロダクトが大きくなり画面が 増えるほど、その価値はいっそうはっきりしてきます。

よくある間違い

• 同じ役割のボタンを、画面ごとに少しずつ違う色や大きさでつくってしまうケースです。 わずかな違いがいくつもの画面に積み重なると、ユーザーは本当に同じ機能なのか確信が 持てず、そのたびに見直すことになり、操作が遅くなって疲れてしまいます。
• 逆に、まったく役割の違う要素を同じ見た目にしてしまうケースです。削除ボタンと保存 ボタンが同じ形だと、類似性が二つの機能をひとつの仲間としてまとめてしまい、危険な 勘違いを招いて、取り返しのつかない操作ミスにつながることがあります。
• 装飾のために、無関係な要素へ同じ色をばらまいてしまうケースです。色が同じだと関連が あるかのようにまとまって見え、意図しないグループが生まれて、画面が伝えたい意味が ぼやけてしまいます。

実務のヒント

• 同じ種類は同じスタイルで、違う役割ははっきり違うスタイルで決めましょう。見た目の 似ている・違うを意図して設計すれば、ひとつの画面のなかで優先順位とグループを同時に 表現できます。
• ボタン・バッジ・カードのように繰り返し使う要素は、スタイルをトークンにまとめて再利用 しましょう。一か所で決めたルールが画面全体に広がれば、手をかけなくても類似性が自然に 保たれます。
• 色だけで種類を分けず、形やアイコンといった二つ目の手がかりも一緒に添えましょう。 色の見え方に違いがあるユーザーにも類似性がぶれずに伝わってアクセシビリティが良くなり、 白黒で印刷されたり画面が暗い環境でも、グループの関係が崩れずそのまま読み取れます。

関連概念