近年、UI/UXの設計はますます重要になっています。
ノーコード開発の普及もその要因のひとつであり、ノーコード開発により様々な種類のアプリケーションを短期間で再現出来るようになったことで、ユーザーとの対話やUI/UXの設計により多くのリソースを配分するようになったという事業者や開発者も増えてきました。
とは言え、「使いやすいデザインにしよう」「分かりやすい仕組みにしよう」と頭では理解していても、具体的にどこから始めたらよいのかわからないという方も多いのではないでしょうか。
本記事では、サービスを提供する上で押さえておきたいUI/UXの17の法則を紹介します。
1.美的ユーザビリティ効果
美的ユーザビリティ効果とは、ある商品やサービスにおいて、インターフェイスの見た目さえ魅力的に認識されれば、細かい使い勝手の問題には寛容になる傾向があるという効果です。
この効果が上手く利用されている例としては、アップル社の製品が挙げられます。
例えば、iPhoneには取扱説明書が付属されていませんが、直感的に操作すれば最低限のことはできるようなデザインになっています。
徹底的に製品のインターフェイスを洗練させることで、美的ユーザビリティ効果が働き、些細な不便さや使いにくさに意識が向かなくなった結果、取扱説明書を同梱させる必要がなくなっているのです。
つまり、コンテンツ作りにおける見た目の美しさとは、ユーザーのコンバージョン率を上げるために非常に大切な要素であると言えます。ただし、ユーザーから高い評価を得ることができる一方で、本来であれば表出するであろう欠陥や改善点が埋もれてしまうという欠点もあるので、注意が必要です。
２.ドハティの閾値
ドハティの閾値とは、人間が次の行動を行うまでに反応できる時間の閾値のことで、それはおよそ0.4秒以内であることが判明しています。
逆に言えば、ユーザーはシステムの応答にかかる時間が0.4秒を超えると、不快に感じてしまうということになります。
昨今ではスマートフォンを使ってウェブサイトを閲覧する頻度が大きく増えていますが、どの携帯電話会社も「通信の速度が速いこと」を大きく宣伝していますね。
スマートフォンユーザーであれば、ページ移動や読み込みにかかる時間がドハティの閾値を超過してしまい、不快に感じた経験が誰しもあるでしょうから、通信が高速であるという宣伝は、その経験に的確に訴求していると言えるでしょう。
3.フィッツの法則
フィッツの法則とは、「対象の大きさ」「対象までの距離」「対象の選択しづらさ」の相関関係を表す法則で、対象がより大きく、より近くに存在するほど、ユーザーはそれにアプローチしやすいというものです。
例えば、スマートフォンを縦持ちの状態でアプリケーションを操作する場合、親指から近い位置にあって、より大きいボタンほどタップしやすいのがお分かりかと思います。
更に、音楽プレーヤーなど、同じ操作を頻繁に繰り返すようなアプリケーションにおいては、「再生⇔停止」「リスト順に再生⇔ランダムに再生」など、タップで効果が切り替わる仕組みのボタンにすることで、直感的な操作を実現することができます。
4.目標勾配（エンダウド・プログレス）効果
目標勾配（エンダウド・プログレス）効果とは、最初に僅かでも進捗がある状態の方が、何も進捗がない状態よりも、目標に到達したくなるという効果です。
身近な例であれば。スタンプ式のポイントカードなどが分かりやすいでしょう。カードを入手した時点で既にスタンプが1つ押されていると、このスタンプを目標まで増やしたくなるというものです。
また、SaaSなどで個人情報を入力する際に、いきなりすべての項目をすべて入力させるのではなく、３項目ずづ小出しにすることで登録率を上げるという手法も非常に有効です。
ただし、進捗を外部から与えすぎると、逆にモチベーションが下がってしまうことも知られています。進捗の手助けは、大体10%～25%にするのがベストです。
UIに応用するのであれば、例えばユーザーにタスクをクリアして貰うようなアプリケーションを製作する場合、進捗が0%であっても予めプログレスバーを少し進めておくと、ユーザーのタスクを達成したい気持ちが高まることが期待できます。
5.ヒックの法則
ヒックの法則とは、ユーザーは選択肢の数が多ければ多いほど、決定にかかる時間も多くかかってしまうという法則であり、あまりにも選択肢が多いとユーザーの判断力を奪い、購買意欲などを削いでしまうということも知られています。
逆に言えば、選択肢の数が適切であれば、ユーザーの意思決定にかかる時間を短縮できるということになります。
例えば、ブログサイトの構築などにこのヒックの法則を活かすことが可能です。
記事一覧などを見た際、そのままでは記事数が多いとどれを最初に読んだらいいのか分からなくなってしまいますが、冒頭に「初めての方におすすめの記事はこちら」のような記事を用意したり、ブログの内容ごとにカテゴリ分けしてそのカテゴリを選択させたりすると、ユーザーは迷うことなく閲覧を進めてくれるでしょう。
6.ヤコブの法則
ヤコブの法則とは、ユーザーは初めて触れるコンテンツに、既存のものと同じような動作体験を望むという法則です。
例えば、InstagramやFacebookなど、写真の共有がメインとなるSNSはみな似たようなUIをしていることが分かります。
日本では連絡手段としてLINEがよく使われていますが、携帯電話のSMSや、TwitterのダイレクトメッセージのUIは、LINEのものと非常によく似ていますね。
開発の際には、既存のコンテンツを参考にして製作した方が、ユーザーはにとっては扱いやすいでしょう。
7.ミラーの法則
ミラーの法則とは、平均的なユーザーが一度に覚えられる物事の数は、最大で4±1つ程度であるという法則です。以前は7±2つと言われていましたが、現在ではより少ない方が良いとされています。
代表的なものと言えば、電話番号の表記の仕方でしょう。10～11桁の数字を一度に覚えようとすると非常に難しいですが、「3桁－4桁－4桁」のように3つのチャンクに分けて表記することで、覚えやすくなっています。
開発に活かすのであれば、ユーザーIDなどの表記を覚えやすく工夫できるほか、ゲームなどを製作している場合は、プレイ中に常に頭に入れておく必要がある情報の数を絞ることで、ユーザーは快適にプレイできるようになるでしょう。
8.ピーク・エンドの法則
ピーク・エンドの法則とは、「最も感情が動いた時点」と「一連の出来事が終局した時点」での記憶が、その物事全体の印象付けを大きく左右するという法則です。
分かりやすい例としては映画などが挙げられます。ピーク（最も盛り上がる瞬間）とエンド（最後の瞬間）がしっかりしていると、序盤や中盤が少々退屈であっても、名作として認識される事が多いのです。逆に、そのピークとエンドが観ている人にとって満足できるものではなかった場合、途中がどれほど良くても印象は悪くなってしまいます。
アプリケーション開発などのあらゆるコンテンツ作りにおいても、途中にあっと驚く仕掛けを用意する、最後に無料の特典を進呈するなど、ユーザーにとって良質なピークとエンドを用意することは、非常に重要です。
9.系列位置効果
系列位置効果とは、情報の最初と最後は記憶に残りやすい一方で、中間は忘れやすいという現象のことです。
例えばブログサイトなどで文章を執筆する場合、最初に要点を、最後に内容のまとめを述べておくと、読者の頭に残りやすくなります。
製品の販売ページなどであれば、最初に製品を端的に表すビジュアルやキャッチコピーを表示することで、たとえページを離脱しても記憶に残すことができますし、最後の購入ボタン付近には割引セールなど、ユーザーにとって得になる情報を表示することで、購入を後押しすることができます。
10.フォン・レストルフ効果
フォン・レストルフ効果（孤立効果）とは、似たようなパターンの項目が多く並んでいる中で、ひとつだけ変わったものや特徴的なものがある場合、その項目は印象に残りやすいという効果です。
この効果は、購入ボタンや問い合わせボタンなど、アピールしたいポイントを強調する際に役に立ちます。
例えば背景や周りのデザインとは異なった色を用いる、大きく表示する、周りが直線的なデザインであれば円みがかったボタンにする、マウスカーソルを合わせると動くなど、様々なパターンが考えられます。
ただし、目立たせたいものが多すぎてページ全体の統一感がなくなってしまうと逆効果なので、その場合はページを適切に分割するなどの工夫が必要です。
11.ツァイガルニク効果
ツァイガルニク効果とは、達成した事柄よりも、達成できなかった事柄や、中断してしまった事柄の方が気になってしまい、記憶に残りやすいという効果です。
テレビ番組などでこの例を目にすることがあります。例えばクイズ番組の場合、答えが発表される前にCMが挟まるケースが非常に多いですが、視聴者はクイズの答えが気になるので、途中でやめずにそのチャンネルを付けっぱなしにします。これを繰り返すことで番組は最後まで視聴されますし、CM自体も見られるためスポンサーとしても嬉しいということです。
テレビCM自体も、「続きはWEBで」と言ってホームページに誘導することがあります。これもツァイガルニク効果を活用している代表例と言えるでしょう。
テレビのみならず、近年のインターネット上の動画コンテンツでは、前半部分を誰でも見られる無料パート、後半部分が会員限定の有料パートとして分割する例が多くなっています。全編有料にするよりもコンバージョン率が高くなるのです。
12.ゲシュタルト要因
ゲシュタルト要因とは、視界に映った物をある要素・パターンごとにまとめて捉えようとする、人間が持つ性質のことです。
ゲシュタルトとはドイツ語で「形態」という意味があり、「ゲシュタルト崩壊」という単語でも有名ですね。
今回は5つのゲシュタルト要因を紹介します。
（１）共通領域の法則
共通領域の法則とは、境界内に存在する複数の項目はグループとして認識され、何らかの共通の要素・機能を共有するとみなされるという法則です。
例えば、ウェブページ上で、画像と文章をひとつの長方形の枠内に収めると、その画像と文章の間に関連性があることが一目で理解できます。
（２）近接の法則
近接の法則とは、近くにあるもの同士がまとまって見えるという法則です。
前述した共通領域の法則よりも効果は薄くなりますが、余白だけを用いるため、視覚的にスッキリするという利点があります。
（３）プレグナンツの法則
プレグナンツの法則とは、ユーザーは本能的に、情報を最も分かりやすく、まとまった状態で認識しようとするという法則で、複雑な図よりも単純な図の方が覚えやすく、認識しやすいというものです。
例えば、括弧でくくられた要素は関連づいて見えますし、左右対称な形は知覚されやすいと言われています。
（４）類同の法則
類同の法則とは、色や形、向きなどが同じものは、それぞれの要素が異なっていたとしても、同じグループとして認識されるという法則です。
例えば、似た商品の羅列の中で、セール品だけ大きく表示すると、ユーザーはセール品とそれ以外の商品という2つのグループがあるのを理解することができます。
（５）結合の法則
結合の法則とは、線や面、色など、一定の視覚的要素によって結合された項目同士は、結合されていない項目同士よりも関係が深いと認識されるという法則です。
異なる2つの項目を線で結んだり、間に矢印を挟んだりすると、ユーザーは両者に何らかの関連性を見出すことができます。
これらの5つのゲシュタルト要因は、ネットショップや企業のホームページなど、あらゆるウェブサイトに効果的に利用されています。
読みやすく、コンバージョン率の高いウェブサイトを構築するためには、欠かせないと言えるでしょう。
13.オッカムの剃刀
オッカムの剃刀とは、問題解決の際には不要な仮定を削ぎ落し、最も単純なアプローチで解を得るべきであるという思考法です。
あるコンテンツを製作する際に、様々なニーズに応えられるよう、余計な機能を増やしたり、情報量を増やしすぎたりした結果、製作に時間がかかってしまう上に、ユーザーが真に求めているものが欠落してしまう場合があります。
製作側は自身のコンテンツをより良くするために機能を充実させたくなるものですが、ユーザーは複雑で分かりにくい機能を求めてはいないのです。
ユーザーに好まれるコンテンツを製作するためには、時にはオッカムの剃刀を元に、思い切って機能を削ってしまうのもひとつの手です。
14.パレートの法則
パレートの法則（80：20の法則）とは、影響の約80%が原因の20%から発生するという法則であり、少ない労力で多くの成果を出すために必要な考え方です。
例えば、ビジネスにおいては売上の80%は顧客全体の20%が生み出している、仕事の成果の80%は費やした時間の20%で生み出している、といった具合です。
簡単に言うと、重要なことだけやれば成果は上がるので、無駄な事や重要ではないことは極力避けるべきということです。
一見当たり前に思えるかもしれませんが、このパレートの法則を理解していないと、「あれだけ労力をかけて開発したのに、全く成果が出ない」といった事態が起こってしまうかもしれません。
最初にコンテンツの目的やゴールを明確に定めたら、それに直接影響しない作業は可能な限り省くようにしましょう。
15.パーキンソンの法則
パーキンソンの法則とは、仕事の量は締切までの時間を満たす様に膨張してしまうという法則です。
夏休みの宿題を、8月末まで先延ばししてしまった経験はないでしょうか。他にも、時間いっぱいまで会議をダラダラと引き延ばしたり、残業することに抵抗がなくなっていつも残業をしていたりというのも、このパーキンソンの法則の例と言えます。
時間に余裕があるがゆえに、集中力が欠けてしまったり、着手するまでの時間が遅くなってしまったりして、結局締切直前まで終わらないということは、往々にして起こります。
開発においても、大体の所要時間が先に把握できるのであれば、細かいタスクに分割してそれぞれに締切を設けたり、作業時間を明確にしたりなどすると、生産効率は劇的に上昇するでしょう。
16.テスラーの法則
テスラーの法則（複雑さの保存の法則）とは、どれだけシンプルで洗練されたシステムであっても、減らすことのできない複雑さが必ず存在するという法則です。
この法則がある以上、快適なサービスの実現に向けてどうしても発生してしまう複雑性は、なるべくユーザー側ではなくシステム側が負担し、処理するべきだと言えます。
こうすることで、シンプルなユーザー体験が実現できるのです。
17.ポステルの法則
ポステルの法則とは、送信するものに関しては厳密に、受信するものに関しては寛容にすべきであるという、設計や開発における原則のことです。
例えばメールひとつ送る際にも、送信者は相手に明確に伝わる様に文章に気を配ります。対して受信者は、相手の誤字脱字や細かい表現の間違いなどもある程度理解し、寛容に受け取ります。こういった心構えは、昨今の情報社会において成功するためには欠かせない、一種のコミュニケーションスキルです。
開発においても、UIの洗練を怠らず、ユーザーの反応に対して真摯に向き合うことで、より良いコンテンツ作りに繋がるでしょう。
まとめ
今回はサービスを提供する上で最低限知っておきたいUI/UXの法則を紹介しました。コンバージョン率が高く、ユーザーに好まれるコンテンツを実現するためには、実に様々なテクニックがあることがご理解いただけたかと思います。
UI/UXデザインの追求は、奥が深く終わりのない施策ですが、あらゆる事業者にとっての永遠の課題とも言えます。今回紹介した法則を元に、広告媒体やウェブサイトを見てみると、新たな気付きや発見があるかもしれません。
また東京フリーランスの代表取締役社長である船越良太さんの記事では、UI/UXデザインの設計方法や学習方法について紹介されているので参考として頂けますと幸いです。
東京フリーランス代表・船越良太「ユーザーを増やすために一番大切なこと」
NoCode Japanは、今後も開発者をサポートする情報を紹介していきます。
（文・寺澤一輝）
