こんにちは！mizuki（@kikapyon）です。
特に初心者の方は先輩や周りの人から「一貫性を持たせたUIにしてほしい/した方がいい」と言われたことはありませんか？
そんな時は、類似性の原則を使うと直感的に認知しやすいUIデザインを作ることができます。
初心者の方にもわかりやすいように、事例と共に色・形・サイズにわけて紹介していきますのでぜひご覧ください。
なぜ一貫性をもたせるべきか
人間は、視覚的特徴を共有するアイテムを無意識にグループとして理解したり、近くに配置されているものをセットで認識します。そのため、一貫性があるとユーザーがインターフェースをより早く理解しやすくなるのです。
つまり、一貫性を持たせたデザインはユーザーが間違った認識をしないようにするために効果的ということ。
このお問い合わせフォームを例として見ていきましょう。
同じ色のボタンは、同じレベルの重要性を共有していると認識されます。そのため、主要な行動（送信）を促すフレーズには別の色を用意して、ボタンの中で目立つようにする必要があります。
この例では、同じ紫色のボタンが3つあり特別目立つ要素がないため、フォームを送信するためのボタンを認識するのに時間がかかってしまいます。
さらに言うと、送信ボタンはテキスト入力エリアから遠く、離れています。フィッツの法則によれば、この距離さえもユーザーのタスク進行速度を低下させます。
フィッツの法則について知りたい方はこちらも合わせてどうぞ！
【関連記事】押しにくいボタンデザインとはおさらば！ユーザーの動きとターゲット要素の最適化
このように意図せずユーザーの混乱を招いてしまう場合があるので、今からご紹介する類似性の原則を頭の隅に置いておくとサクサクタスクが進むUIをデザインできます。
類似性の原則とは
まず類似性の原則を説明します。
類似性の原則とは、アイテムが何らかの視覚的特徴を共有している場合、それらは何らかの形で関連していると見なされるという単純な原則です。アイテムは全く同一である必要はありませんが、同じグループの一部として認識されるように、色、形、サイズなどの目に見える特徴を少なくとも1つ共有するだけです。
「引用：Similarity Principle in Visual Design/Signify Relationships Using Shared Characteristics（著者翻訳）」
類似性の原則はゲシュタルトの法則のうちの一つであり、デジタルプロダクトだけで無く、あらゆる場面で使われています。無意識にグループとして理解したり、似ているものをセットで認識する習性を利用したものです。簡単に一貫性を持たせることができ、デザインに生かしやすい単純で便利な原則です。
意識するべきデザイン要素
類似性の原則は、散らばっていたとしても共有された特性（カラー、形、色など）によって要素をまとめることができるという点で、近接の原則や対称の法則などの他の視覚的グループ化の原則とは異なります。
さらに、視覚的に類似したアイテムは、近接性などの位置による他のグループ化にも含まれることがあります。そのため、類似性の原則は他のグループ化原則に圧倒されることもあり、必ずしも最強のグループ化原則ではないですが、最も応用がきく原則であると考えることができます。
色
共通の色を使用することは、項目同士が関連していて、同様に機能する可能性があることを示すために効果的です。共通の色は、形などの他の特性よりも目立つ傾向があります。そのためさまざまな要素を一致させ、それらが実際に関連していることを伝えるために使用することができます。
UIデザインでは、共通の機能を示すために色を使用します。例えば、クリック可能テキストだということをユーザーに伝える主な方法として、一つのリンクカラーを使用することがよくあります。
共有したカラーによって、ページ上のリンクの位置にかかわらず、クリック可能な要素がグループとして目立つようになり、デフォルトのテキストカラーで表示される非インタラクティブテキスト（クリック不可能なテキストなど）とより差がつきます。
このリンクカラーは、インタラクティブなテキストやその他のクリック可能な要素にのみ使用することがおすすめです。ユーザーはこの特性を共有するすべてのアイテムが関連し、同じように機能すると認識するからです。
そのため、リンクカラーは、キーワード、クリックできない見出し、実際にクリックできない近くのアイコンなどには使用しないようにしましょう。
アップロードアイコンとその下のアップロードボタンは同じ色で、1つのグループのように見えます。このようなデザインでは、ユーザーはアイコンかボタンのどちらかをクリックすれば同じことが起こると思いがちですが、このアイコンは純粋な飾りであり、クリック可能な要素ではなかったりします。
形
類似性の原則を使えば、形状でグループを表すこともできます。UIデザインでは、特定の要素に同じ長方形の形を使い、それらがすべてボタンであることを示したり、カテゴリのリンクを円や角の丸い長方形にして、関係を強く結びつけることがよくあります。
実際にそれらが異なる要素でも、同じ形をしていると同じものだと思い込んでしまい、付属のラベルや小さな文字、形状のわずかな違いなど、細かい部分を見落としてしまうことがあります。
例えば、ナビゲーションのアイコンがよく似ているパターンです。視覚的な類似性によって、ユーザーにはこれらのカテゴリが関連していると誤認させてしまう可能性があります。
意図せず要素に類似性を持たせないようにも注意しましょう。
サイズ
サイズの共有によっても、関係を示すことができます。同じサイズの要素は、関連性があると認識される可能性が高く、多くの場合、同じ重要性の要素として認知されます。
UIでは、サイズを使用してコンテンツのどの部分が最も重要であるかを強調することがよくあります。同じサイズであれば、視覚的に目立つだけでなく同じ属性を持つすべての要素を結びつけることが可能です。サイズを統一することで、視覚的な階層が生まれ、ページを読みやすくすることができます。
例でいうと、商品一覧のページでは、個々の商品一覧を同じサイズ（同じ形）で表示することです。この一貫したビジュアルが、そのエリアにあるすべてのアイテムが商品であることを認識させ、同じサイズであることが他の異なるUI要素とは違うということを認識しやすくします。
このリスト内でサイズや形が異なるアイテムが表示されると、そのアイテムは商品グループには属さないものとして目立ちます。
例えば、以下のようにプロモーションを商品アイテムの2倍のサイズで表示するなどです。
そして、同じようなサイズで表示されると、それらは異なっていたとしても関連していると誤認識されることがよくあります。
この問題は、実際のコンテンツと広告の両方が同じようなサイズで表示されるWebサイトでよく起こります。ユーザーは右側のレールに広告が表示されると思い込んでいるため、デザインスタイルが似ているとページのコンテンツだったとしても見落としてしまう可能性が高いです。
そのため、以下のようなWebサイトでは右側に配置された、メインコンテンツに付随するビデオを認識できない人が多くいます。
その他
類似性を示す方法は、今回ご紹介した色、形、サイズだけではありません。特定の要素が関連していることを伝えるために活用できる視覚的特徴は他にもたくさんあります。
例えば同じフォントオプション（太字、斜体など）を共有すると、同じ種類の情報を表していることを示します。同様に、方向や動きによって要素が同じグループに属し、共通の意味や機能を持つ可能性があることを伝えることができます。
類似性の原則はビジュアルデザインに広く浸透しており、現在のほぼすべてのUIデザインで見ることができます。
おわりに
いかがでしたでしょうか？デザインをする上で、一貫性がユーザーにもたらす影響を、ゲシュタルトの原則を参考にまとめました。
簡単で単純な原則なので意図せず知らずにデザインしてしまうと誤認を招きかねませんが、正しく知識を持っていれば分かりやすさを探求できます。普段のデザインにすぐ活かせる一貫性、ぜひ参考にしてみてください。
