Communitygithub.com

ali-kk/uxlaws

30のエビデンスベースのUX原則をエージェントスキルとして提供 — メカニズム、適用方法、落とし穴、および各原則の実例を含みます。

uxlaws とは?

このスキルは、人間がどのように**見る、記憶する、決定する、行動する**かに関する30のUX原則を、AIエージェントがUIデザインの意思決定に直接活用できる形で提供します。各原則は、単なる定義ではなく、その背後にある認知科学・知覚研究のメカニズム、具体的な適用方法、よくある落とし穴、そして実際のインターフェースにおける事例を含んでいます。Claude Code、Cursor、CodexなどのAIエージェントで利用でき、新しいUIの設計、既存画面の問題診断、あるいはデザイン決定を「好み」ではなく「理由」で裏付けるために役立ちます。スキルは5ステップのUXパス手順に従って活用し、症状から関連原則を引き出し、具体的な変更を提案し、原則間の競合を解決し、必要に応じてユーザーテストで検証します。また、「画面のデクラッター」「遅いフローの改善」「混乱する新機能の修正」などのレディメイドコンビネーションも用意されており、複数の原則を効果的に組み合わせて適用できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add ali-kk/uxlaws

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Laws of UX

人がどのように見る、記憶する、決定する、行動するかに関する30の原則を実用的なツールキットとして提供します。それぞれの原則は、実際のインターフェースで行う意思決定に変換されています。これらはスタイルの好みではなく、知覚と認知の研究に基づいており、プラットフォーム、時代、ビジュアルトレンドを超えて有効です。

このスキルを使用して、新しいUIを設計したり、既存の画面が「しっくりこない」理由を診断したり、デザインの決定を好みではなく理由で裏付けたりできます。

UXパスの実行方法

  1. 症状を特定する。 「ボタンが多すぎる」「遅く感じる」「フォームを離脱する人がいる」「誰もCTAに気づかない」。症状は原則にマッピングされます。以下のインデックスはそのように整理されています。
  2. 関連する1~3の原則を引き出し、reference/laws.mdの完全なエントリを読む。定義だけでなく、メカニズムと落とし穴を読んでください。そこに有用なニュアンスが詰まっています。
  3. この画面に対する具体的な変更を提案し、原則名を引用して、理由が監査可能になるようにする。「コントラストを高める」ではなく、「フォン・レストルフ効果:プライマリアクションを唯一の塗りつぶしボタンにして、周囲の3つのゴーストボタンと競合しないようにする」のように。
  4. 競合を確認する。 原則は互いに引き合います。余白が多い(プラグナンツの法則) vs. より多くの可視オプション(発見可能性)。シンプルさ(オッカムの剃刀)には下限がある(テスラーの法則)。意図的に解決し、一つの法則を盲目的に適用しない。
  5. 重大な場合はユーザーと検証する。 これらの原則は行動をよく予測しますが、テストの代替にはなりません。特に美的ユーザビリティ効果は、見た目の良いデザインが壊れたタスクを隠す可能性があることを警告しています。

30の原則:分類別

知覚とビジュアルグルーピング(ゲシュタルト) — 誰も言葉を読む前に、目が画面をどのように整理するか。

  • 近接の法則・共通領域の法則・類似性の法則・一様連結性の法則・プラグナンツの法則・フォン・レストルフ効果・選択的注意・美的ユーザビリティ効果

記憶と注意 — UIを使用中に人が頭の中に保持できるもの。

  • ミラーの法則・ワーキングメモリ・チャンキング・系列位置効果・認知負荷・ツァイガルニク効果・ピークエンドの法則

意思決定 — 選択がどのように行われ、どこで停滞するか。

  • ヒックの法則・選択過多・認知バイアス・オッカムの剃刀・パレートの法則

インタラクションとパフォーマンス — 速度、労力、動き、勢い。

  • フィッツの法則・ドハティの閾値・フロー・目標勾配効果・パーキンソンの法則

期待とメンタルモデル — ユーザーが到着する前に何を想定しているか。

  • ヤコブの法則・メンタルモデル・アクティブユーザーのパラドックス・ポステルの法則・テスラーの法則

インデックス — こんな時に活用しよう…

原則こんな時に…
美的ユーザビリティ効果なぜより美しいデザインが「より簡単」と評価されるのか、そしてそれがなぜ罠なのかを知る必要があるとき。
選択過多選択肢が多すぎて、人が固まったり、判断を誤ったり、離脱したりするとき。
チャンキング密度の高いコンテンツや長い文字列を、スキャンしやすくグループ化する必要があるとき。
認知バイアス決定が「合理的」から歪むとき — フレーミング、デフォルト、アンカリング、確証バイアス。
認知負荷インターフェースが脳に一度に保持または処理させる情報が多すぎるとき。
ドハティの閾値何かが遅く感じられる、応答が約400msを超える、ローディング状態が必要なとき。
フィッツの法則ボタン、リンク、タッチターゲットのサイズと配置を決めるとき。
フローユーザーを没入させ続ける、チャレンジとスキルを一致させる、摩擦を取り除くとき。
目標勾配効果完了を動機付ける、終わりに近づくにつれて加速する進捗のため。
ヒックの法則選択肢の数と複雑さに応じて決定時間が急増するとき。
ヤコブの法則ユーザーがあなたのUIが他の既知のUIと同様に動作することを期待するとき。
共通領域の法則境界線、カード、背景、コンテナでグループ化するとき。
近接の法則間隔だけでグループ化する — 近いものは関連していると読まれる。
プラグナンツの法則視覚的な複雑さを減らす — 目は最も単純な読み方を好む。
類似性の法則見た目が似ていることは機能が似ていることを示唆する(リンク vs. プレーンテキスト)。
一様連結性の法則線、枠、共有コンテナで関連アイテムを結びつける。
メンタルモデルユーザーが既にその仕組みがどう動くべきだと信じているかに合わせる。
ミラーの法則ワーキングメモリは小さい(約7±2チャンク)。チャンク化するが、制限しすぎない。
オッカムの剃刀その存在価値を証明できないすべての要素を削除する。
アクティブユーザーのパラドックスユーザーはドキュメントを読まない。コンテキスト内で、インラインで、ジャストインタイムで教える。
パレートの法則価値の約80%を生み出す約20%の機能に労力を集中する。
パーキンソンの法則タスクは与えられた時間いっぱいに膨張する。ステップを短縮し、自動入力し、期待値を設定する。
ピークエンドの法則最も強烈な瞬間とエンディングを意図的にデザインする。
ポステルの法則入力を寛大に受け入れ、出力はクリーンで予測可能にする。
選択的注意人は多くのものを無視する。バナーブラインドネスと変化盲を避ける。
系列位置効果最初と最後の項目が記憶に残る。主要なアクションは端に配置する。
テスラーの法則一部の複雑さは削減できない — システムに負わせ、ユーザーには負わせない。
フォン・レストルフ効果重要なものを視覚的に際立たせる(広告のように偽らないで)。
ワーキングメモリ想起よりも再認をサポートする。画面間で状態を引き継ぐ。
ツァイガルニク効果未完了のタスクは注意を引く。進捗キューを使って完了を促す。

レディメイドコンビネーション

  • 混雑した画面を整理する → オッカムの剃刀 + 近接の法則 + ミラーの法則。
  • 遅く感じるフローを解消する → ドハティの閾値 + 目標勾配効果 + 楽観的UI。
  • 混乱する新機能を修正する → ヤコブの法則 + メンタルモデル + アクティブユーザーのパラドックス。
  • 放棄されたフォームを救う → ヒックの法則 + パーキンソンの法則 + ポステルの法則 + 進捗キュー(ツァイガルニク効果 / 目標勾配効果)。
  • ランディングページを磨く → フォン・レストルフ効果 + 選択的注意 + 系列位置効果 + ピークエンドの法則。

各原則の完全なエントリ(メカニズム、適用方法、落とし穴、実例)は、reference/laws.md にあります。

関連スキル