UXデザインのバイブル！ユーザーを魅了する「Laws of UX」の重要原則まとめ

「Laws of UX」は、優れたユーザー体験を設計するためのヒントが詰まった必読のガイドブックです。心理学や認知科学に基づいたデザイン原則が網羅されており、デザイナーやフロントエンドエンジニアが「なぜそのデザインが使いやすいのか」を論理的に説明できるようになるための強力なツールです。直感的なインターフェース構築を目指すなら、必ず目を通しておくべきでしょう。

これよく見かけるよね。デザインとかポスターとしての見栄えは大好き。でも、こうした「法則」の多くが、長年にわたるNielsen Norman Groupのデータや研究に端を発していることにいつも驚かされる。UXのトレンドなんて、その法則から名前が付けられてることすらあるし！ヤコブの法則とか、ノーマン・ドアとかさ。UXの専門家たちは、この特定の観察者たちの影響をかなり強く受けてるんだよね。個人的な意見かもしれないけど、現代のUXやHCI理論って、こうした穏やかなルールによって日々足止めを食らってるんじゃないかな。特に、放送やその他の非対話型メディアにおけるユーザー体験から抽出されたパターンの「ルール」についてはね。

法則0番：自分がクリックしようとしているUI要素をリフローさせたり、勝手に動かしたりするな。

シェアしてくれてありがとう。もう10年近く「フルスタック」としてやってきたけど、ようやくUIの世界に深く入り込み始めたところで、UXについてはまだ触り程度しか理解できてないんだよね。

少し話は逸れるけど、モバイルやWebアプリ向けの一般的なUIデザインやパターン集みたいなリソースってどこかにあるかな？例えばハンバーガーメニューとか、トースト通知とかね。整理されていて網羅的で、視覚的なサンプルがあるサイトを探してるんだ。

このシリーズの前のページは気に入ってたけど、今回はなんだか手抜きに感じるな。最初の項目の多くを見てみてよ、例えばこれ：

「認知バイアス - 判断における思考や合理性の系統的なエラーで、認識に影響を与えるもの」

これって法則じゃないでしょ！ここで提示されている形では、役に立つコンセプトですらないよ。

UIデザイナーや開発者が適用できる便利なルールのコレクションであるべきなのに、単に著者がいくつかの用語を拾ってきて、辞書で定義を調べて、ポスターを売るために適当に詰め込んだだけって感じがする。

これらは良いね（もちろん絶対的なものじゃないけど）。

私は「伝統的、あるいは天性の」デザイナーではないので、ベストプラクティスのレシピや法則集があるのは助かるんだ。こういった法則は頭に入れ続けるのが難しいこともあるし。AIを使って画面を一括チェックするのには、完璧な出発点だと思う。

正直、私はこれをショートカットに割り当てちゃうかな。「ソースコードをフォーマットする」操作をショートカットに割り当てるのと同じ感覚で。業務ソフトを作っているなら、こうした法則（やそれを割り当てたショートカット）は、健全性チェックとしてかなり役に立つよ。

実際、さっきやってみたんだ：

• UX Lawsのスクリーンショットを保存して
• ダッシュボードのスクリーンショットを保存して（ユーザーフォームの方がうまくいったかも）
• 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

「安定性」を追加してはどうかな？単に変化のため、あるいは新しい流行を追うためだけに、絶えずUIを変えるのはやめよう。

ドハーティしきい値：コンピュータとユーザーが（400ms未満で）対話し、双方が待たされることがない場合に生産性が飛躍的に向上する

これこそが、僕がプログラミングに小型モデルを強く推奨する理由だよ。[0] 活動がリアルタイムに感じられるほど高速だからね。

それに、タスクを小さな塊に分割して継続的に検証せざるを得なくなるから、常にアクティブでいられるし、メンタルモデルがズレることもない。

[0] 以前、大きなモデルと小さなモデルの両方に同じシンプルなコード修正を3つ試してみたんだけど、どちらも成功した。でも大きなモデルは3倍時間がかかって、コストは10倍だった。

その瞬間、僕の中での「ベストモデル」の定義が「ベンチマークでトップ」から「実際のタスクを確実にこなせる、最も小さく、速く、安いもの」に切り替わったよ。

意味のないアイコンは使わないこと。

ユーザーがいちいち箱を開かなければならないツリー構造ではなく、直線的なフローで情報を提示すること。

意見を事実として提示しないこと。

素晴らしいリソースだと思う。

ただ、項目2については：

選択の過負荷
多くの選択肢を提示されたときに圧倒されるという傾向。しばしば「選択のパラドックス」という言葉と同義で使われる。

ページ上の視覚スペースの半分を占めるような、どうでもいい画像の下に30個ものテキストベースの「法則」が埋もれているんだよね。

見た目はきれいだけど、これらを学ぶための効率的な方法とは言えないな。

アジア最大級のECプラットフォームを再設計するためのUX戦略で、これらの法則をいくつか使ったよ。