ハクソク

世界を動かす技術を、日本語で。

UXの法則

11日前原文(lawsofux.com)

概要

本記事では、ユーザー体験やインターフェース設計に関する主要な心理学的法則や効果を日本語で解説します。各法則の概要と実践的なポイントを箇条書きでまとめています。デザインやUXに関わる方の参考資料として最適な内容です。重要キーワードや原則名は太字で強調しています。理解しやすいよう簡潔に整理されています。

ユーザー体験・インターフェース設計の心理学的法則と効果

  • Aesthetic-Usability Effect ・ 美的なデザイン は、 使いやすさ も高いとユーザーに認識されやすい傾向 ・見た目の良さが機能性の評価にも影響

  • Choice Overload（パラドックス・オブ・チョイス） ・ 選択肢が多すぎる と、 ユーザーが圧倒 されやすい現象 ・最適な選択肢数の設計が重要

  • Chunking ・情報を 意味のある単位でグルーピング することで、 記憶や理解 をサポート ・複雑な情報を小分けに整理

  • Cognitive Bias ・ 認知バイアス は、 判断や意思決定 に影響を及ぼす 系統的な思考の歪み ・デザイン時の配慮が必要

  • Cognitive Load ・ インターフェース理解・操作 に必要な 精神的負荷 ・負荷を減らす設計がユーザー体験向上に寄与

  • Doherty Threshold ・ 400ms未満 の応答速度で 生産性が飛躍的に向上 ・ユーザーとシステムが互いに待たされない設計が理想

  • Fitts’s Law ・ ターゲットまでの距離 と サイズ で 操作時間 が決定 ・重要なボタンやリンクは大きく近く配置

  • Flow ・ 作業に没頭し集中 している心理状態 ・適切な難易度と明確な目標設定で誘発

  • Goal-Gradient Effect ・ 目標達成に近づくほど、 努力やモチベーション が高まる傾向 ・進捗バーや段階表示による演出が有効

  • Hick’s Law ・ 選択肢が多いほど、 意思決定にかかる時間 が増加 ・選択肢を絞ることで操作性向上

  • Jakob’s Law ・ ユーザーは他サイトの経験 を基準に 新しいサイト を評価 ・既存の慣例やパターンを踏襲した設計が好まれる

  • Law of Common Region ・ 明確な境界線内の要素 は 同じグループ として認識 ・枠や背景色でグループ化を明示

  • Law of Proximity ・ 近接して配置された要素 は 関連性が高い と認識 ・関連情報の物理的な近さが重要

  • Law of Prägnanz ・人は 複雑な図形や情報 を 最も単純な形 で認識しやすい ・シンプルなデザインが理解を助ける

  • Law of Similarity ・ 見た目が似ている要素 は 同じグループ として認識 ・色や形の統一感がグループ化に寄与

  • Law of Uniform Connectedness ・ 線や枠で繋がれた要素 は 関連性が高い と判断 ・ビジュアル的な繋がりを活用

  • Mental Model ・ユーザーが持つ システムの理解・予測モデル ・直感的な操作体系の設計

  • Miller’s Law ・ 人が一度に記憶できる情報数は7±2個 ・メニューや項目数の最適化

  • Occam’s Razor ・ 同等の予測力 を持つ仮説なら、 最も単純なもの を選択 ・無駄な要素を排除した設計

  • Paradox of the Active User ・ ユーザーはマニュアルを読まずに、 すぐ操作を始める傾向 ・直感的で説明不要なUI設計

  • Pareto Principle（80/20の法則） ・ 全体の80%の成果 は 20%の原因 から生じる傾向 ・主要機能やコンテンツに集中

  • Parkinson’s Law ・ 作業は与えられた時間まで膨張 する現象 ・締切や制約の設定が効率化に寄与

  • Peak-End Rule ・ 体験のピーク時と終了時 の印象が 全体評価 を大きく左右 ・最後の印象作りが重要

  • Postel’s Law ・ 受け入れは寛容に、出力は保守的に ・柔軟な入力対応と堅実な出力設計

  • Selective Attention ・ 目的に関連する情報 のみに 注意を集中 する現象 ・重要情報の強調表示が有効

  • Serial Position Effect ・ 最初と最後の情報 が 最も記憶に残りやすい ・重要項目は先頭または末尾に配置

  • Tesler’s Law ・ システムには削減できない複雑性 が必ず存在 ・複雑さをユーザーに押し付けない設計

  • Von Restorff Effect（アイソレーション効果） ・ 類似要素の中で異なるもの が 記憶に残りやすい ・強調したい情報の差別化

  • Working Memory ・ 作業中に一時的に保持・操作される情報 を管理する認知システム ・短時間で処理できる情報量に配慮

  • Zeigarnik Effect ・ 未完了または中断された作業 が 記憶に残りやすい ・継続を促すインターフェース設計

各法則や効果を意識することで、 ユーザー中心設計 や UX改善 がより効果的に実現可能。

Hackerたちの意見

これ、よく見かけるね。デザインとポスターの要素が好きなんだ。これらの「法則」が、ニールセン・ノーマングループのデータや研究に基づいていることにいつも驚かされるよ。多くのUXトレンドは、彼らの名前が付けられているしね！ジャコブの法則とか、ノーマンドアとか。UXの専門家たちは、この観察者セットに大きく影響を受けていると思う。個人的な意見だけど、現代のUXやHCI理論は、穏やかなルールのセットによって日々制約されている気がする。特に、放送や他の非インタラクティブメディアでのユーザー体験に基づくパターンからの「ルール」がね。

└

読者の注意はどこに向けるべきだと思う？

法則 #0: クリックするUI要素を再配置したり、動かしたりしないで。

└

あと、不要で無関係なグラフィックで気を散らさないでね。

└

これに関してはGoogle検索が大嫌い。あのバカみたいな「人々も質問しています」とか、生成に時間がかかるジェミニの回答が全体のコンテンツを押し下げるのが本当にイライラする。

└

これがiOSの写真アプリに入ってしまったのはどういうことなんだろう。デザインの企業アバターがこれを見逃すなんて、業界に何か深刻な問題があるに違いない。

└

これには本当にイライラする。UXやフロントエンド開発者がこれを真剣に受け止めない限り、OSレベルやブラウザレベルのUXライブラリで「クリック可能な状態」を20ms前に追跡する方法があるのかずっと疑問に思ってる（ユーザーの反応時間に合わせて設定可能）。そうすれば、クリックしたものが脳が思っていたものと一致するんだ。もっと良い解決策は、開発者やデザイナーがこういうことに誇りを持って取り組むことだと思う。私の嫌いなインターフェースの多くは、アプリのバックエンドにギガビット接続がある環境で設計・実装されているから、問題に気づかないんだろうね。

共有してくれてありがとう。約10年「フルスタック」やってきたけど、最近になってUIにもっと深く入ってきたところで、UXにはほとんど触れてないんだ。ちょっと話がそれるけど、特にモバイルやウェブアプリ向けの一般的なUIデザインやパターンのリソースってある？例えば、ハンバーガーメニューやトースト通知とか。整理されていて、包括的で、ビジュアル例があるサイトを探してるんだ。

└

大学で受けたUIのコース（2009年頃）では、ジェニファー・ティドウェルの本があって、まさに君が求めているものだったけど、スマホが出たばかりでモバイルには特化してなかったんだ。最近の版はモバイルに焦点を当てているみたいだよ： https://www.oreilly.com/library/view/designing-interfaces-3r...

└

shadcnやcoss、base uiなんかをチェックしてみればいいよ。彼らには勉強用のコンポーネントライブラリがあるから。

このシリーズの前のページは好きだったけど、これはちょっと中途半端な感じがする。最初のエントリーのいくつかを考えてみてよ。「認知バイアス - 判断における思考や合理性の系統的なエラーで、私たちの認識に影響を与える」って、これ法則じゃないよ！ここに示されている形では、ほとんど役に立たない概念だし！UIデザイナーや開発者が適用できる有用なルールのコレクションではなくて、著者がいくつかの用語を選んで辞書で定義を調べて、ポスターを売るためにまとめただけのように感じる。

これ、いいね（もちろん、固定されたものじゃないけど）。自分は「伝統的な」デザイナーじゃないから、ベストプラクティスのレシピや法則があった方がいいな。これらの法則は、常に頭に入れておくのが難しいかもしれない。AIが「一括チェック」するための完璧な出発点だと思う。正直、ショートカットにマッピングしたいくらいだよ。「ソースコードをフォーマットする」をショートカットにマッピングするみたいに。ビジネスソフトウェアを作るなら、法則のセットやそれにマッピングされたショートカットは、サニティチェックとして本当に役立つと思う。実際にやってみたんだ： - UX法則をスクリーンショットでダウンロード - ダッシュボードのスクリーンショットをダウンロード（ユーザーフォームの方が良かったかも） - ChatGPTとClaudeに、その法則を考慮してレビューを依頼し、その推奨に基づいて新しいモックアップを作成してもらった。プロジェクト1: CMMSダッシュボード（ファーストフードチェーン） - 古いダッシュボード: https://imgur.com/a/R3wrMpr - 新しいダッシュボード（Claude）: https://imgur.com/a/cYq4gE8 プロジェクト2: https://swellslots.com（サーフ予報アプリ、アーケード風） - 古い予報: https://imgur.com/a/W3daZrP - 新しい予報: https://imgur.com/a/kNi2Nvg

└

「あなたの地域ではコンテンツが利用できません。イギリスにおけるImgurのアクセスについて詳しくはこちら」

└

プロジェクト1に関しては、古いダッシュボードの方が新しいものより良い気がする。このような相互に矛盾する法律のセットの問題は、優れたデザイナーがどれを無視し、どれを特定のプロジェクトに使うべきかを直感的に理解できることです。

└

最初のプロジェクトでは、古いダッシュボードは報告を行うマネージャー向け、新しいダッシュボードは実際にチケットを処理するスタッフ向けに設計されているように見えるけど、プロンプトには特定の目的や役割について何かありましたか？それともオープンなままでしたか？

「安定性」も追加した方がいいかも？変化のために常に物事を変えたり、新しい流行に従ったりしないでね。

ドハティ閾値：コンピュータとそのユーザーが互いに待つ必要がない速度（<400ms）でやり取りすると、生産性が急上昇します。だから、プログラミングには小さいモデルの方が断然好きです。[0] それらはリアルタイムで活動を維持できる速さですし、作業を小さなチャンクに分けて、常に確認することを強制されます。そうすれば、アクティブで関与し続けられ、メンタルモデルがずれないんです。--- [0] 一度、大きなモデルと小さなモデルに3つの簡単なコード変更を与えたことがあります。どちらもタスクを成功裏に完了しましたが、大きなモデルは3倍の時間がかかり、10倍のコストがかかりました。その瞬間、私の「ベストモデル」の定義が「ベンチマークでトップ」から「実際の仕事を信頼できるようにこなせる最小・最速・最安のもの」に変わりました。

意味のないアイコンは使わないで。情報はツリー形式ではなく、線形の流れで提示して、ユーザーがすべてのボックスを開かないといけないようにはしないで。意見を事実として提示しないでほしい。

これは素晴らしいリソースだと思う。ただ、項目#2について言うと、

「選択過多」 「多くの選択肢が提示されると人々が圧倒される傾向のこと。選択の逆説という言葉と同じ意味で使われることが多い。」 30個の「法則」があって、それが30枚の関係ない画像の下に埋もれてるから、視覚的に半分もスペースを取ってる。見た目はきれいだけど、勉強するにはあまり効果的じゃないよね。

これらの法則のいくつかを、アジアの大手ECプラットフォームのUX戦略の再設計に使ったことがあるよ。