このページの中身

認知の法則（人はこう見てしまう）

人の目と手には癖があります。逆らうと使いにくくなり、乗ると説明なしで使えます。

フィッツ・ヒック・ミラー・系列位置・Fパターン・ヤコブの法則を図で並べたもの
図を大きく見る
図の中身を文字で読む
  • フィッツ　近く・大きいほど速く押せる　ヒック　選択肢が増えると迷う　ミラー　かたまりに分けると覚えられる
  • 速い　09012345678　11個
  • 遅い　090-1234-5678　3個
  • 速い　遅い
  • 系列位置　最初と最後が記憶に残る　Fパターン　長文は左に寄って拾い読みされる　ヤコブ　他サイトの動き方を期待される
  • 重要な導線は両端へ　ロゴを押すとトップへ戻る、など
  • 「動き方」の慣習は守る。
  • 「見た目」は独自でよい。
  • どれも「守る規則」ではなく「そうなってしまう傾向」。逆らうなら、逆らうだけの理由が要る。

ひと目で#

フィッツの法則
近くて大きいものほど速く押せる
ヒックの法則
選択肢が増えるほど決めるのが遅れる。伸びは対数で、比例ではない
ミラーの法則
短期記憶に置けるのは数個まで。かたまりに分ければ覚えられる
ヤコブの法則
利用者は、よそのサイトと同じ動き方を期待している
系列位置効果
並んだ項目は、最初と最後が記憶に残る
ピークエンドの法則
体験の評価は、いちばん強い瞬間と終わり方でほぼ決まる
F/Zパターン
長文は左に寄った拾い読みになり、要素の少ない画面では視線が Z を描く
認知負荷
課題そのものの難しさと、提示の仕方が生む負担。前者は減らせず、後者は減らせる

どれも「こう作れ」ではなく「人はこう見る」という観察です。観察に合わせて作ると、説明が要らなくなります。

使い分け#

こう感じたら効く法則
ボタンが押しにくいフィッツ。大きく、直前の操作の近くへ
メニューが多くて選べないヒック。ただし階層を深くすると判断の回数が増える
番号や日付が覚えにくいミラー。区切ってかたまりにする
操作が独特だと言われたヤコブ。挙動の慣習は守る
ナビの並び順を決めたい系列位置。大事な導線を両端へ
長文の後半が読まれないFパターン。段落の冒頭に結論を置く
分かりにくいと言われるが、中身は削れない認知負荷。用語、順序、単位といった提示の仕方を直す
どこに手をかけるか決めたいピークエンド。感情がもっとも動く場面と、最後の画面へ

間違えやすいところ#

減らすか畳むかで迷うのは、たいていヒックの場面です。畳めば1回の選択は速くなり、そのぶん判断の回数が増えます。

12項目を1画面に並べた浅い構成と、項目を減らして3階層にした深い構成の比較図
図を大きく見る
図の中身を文字で読む
  • 広く浅く　狭く深く
  • 選ぶのは1回。目で走査する距離が長い　1回ごとは速い。判断が3回に増える
  • 12件をひと目で比べられるが、走査は長い
  • 1回目　2回目　3回目
  • 減らせば速いとは限らない。階層を1つ足すたびに判断が1回増え、かえって遅くなることがある。
  • よく使う入口ほど浅いところに置き、めったに使わないものだけを畳む。

数値の目安#

法則を実装に落とすときの基準値です。規格に根拠があるものと経験則を、出どころの列で分けています。

対象値出どころ
押す目標の大きさ24×24px が下限WCAG 2.2（2.5.8・AA）
指で押す前提の実務値44×44px経験則
隣り合う操作要素の距離8px 以上経験則
グローバルナビの項目数7項目以下経験則。根拠はミラーではなく、走査の長さと画面幅
短期記憶に置けるかたまり7±2個ミラーの法則。画面に出続ける項目には適用しない
24pxの下限と44pxの実務値の大きさ比べ、隣り合うボタンを8px以上離す距離、当たり判定だけを広げる方法を示した図
図を大きく見る
図の中身を文字で読む
  • 押す目標の大きさ　隣り合う操作　当たり判定だけ広げる
  • 8px 以上
  • 押し間違いは距離で防ぐ
  • 24×24　44×44
  • WCAG 2.2 の下限　指で押す実務値
  • 見た目は小さくても、判定は 44px 相当にできる
  • 見た目の大きさと当たり判定は別。padding か擬似要素で、判定だけを広げられる。

見た目の大きさと当たり判定は別のものです。アイコンを小さく見せたまま、padding か擬似要素で判定だけを 44px 相当に広げられます。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

架空の整骨院予約ページを例にします。メニュー12種が一覧で並び、電話番号は「0312345678」のべた書き、送信ボタンは入力欄から遠い右下に小さく置かれています。予約の完了率が上がらない画面には、法則に逆らった箇所が3つあります。

ヒックから直します。よく選ばれる3メニューを先頭に出し、残り9種は「その他のメニュー」に畳みます。削るのではなく、初回の選択肢を減らすだけです。次にミラー。電話番号を 03-1234-5678 と区切れば、かたまり3つで覚えられます。最後にフィッツ。送信ボタンを最後の入力欄の直下に移し、押す目標を 44px 相当に広げます。どれも中身は1文字も変えていません。提示の仕方だけを直しています。

コピーする#

押し損ないと迷いを減らす土台です。数値の根拠は上の表にあります。

このコードで動いている見本です

このコードで動いている見本です

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字12 語

語の名前から引くなら用語索引へ。

Fパターン
文章量の多いページで、視線が上部を横に走り、次第に左側だけを縦に降りていく F 字型の軌跡を描く傾向。
Zパターン
要素の少ない画面で、視線が左上から右上、そこから斜めに左下、最後に右下へと Z 字を描いて動く傾向。
段階的開示
情報や機能を一度に出さず、まず必要最小限を見せ、要求に応じて詳細を開いていく設計手法。
アフォーダンス
対象が持つ性質と、それを使う主体の能力との関係から生まれる「できること」。
シグニファイア
「ここで何ができるか」を利用者に伝えるための、知覚可能な手がかり。
メンタルモデル
利用者が「この仕組みはこう動くはずだ」と頭の中に持っている、経験由来の理解の枠組み。
マッピング
操作する対象と、その結果として起きることの対応関係。対応が自然なほど学習なしで使える。
制約
利用者ができることを意図的に限定し、誤った操作を最初から起こさせない仕組み。
美的ユーザビリティ効果
見た目が美しいインターフェースは、実際の使いやすさ以上に使いやすいと評価されるという効果。
孤立効果
似たものが並ぶ中で一つだけ違うものがあると、それが際立って記憶に残るという効果。
信号対雑音比
伝えたい情報（信号）と、それ以外の要素（雑音）の比率。比が高いほど内容が届きやすい。
グーテンベルク・ダイアグラム
均質な情報が敷き詰められた面を4象限に分け、左上から右下へ向かう対角線上に視線の重みが偏るとする理論モデル。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

選択肢が多いと決められないと言われる

一度に見せる数を減らす。選ぶ数が増えるほど、決めるまでの時間は伸びる。

一度に見せる数を5件以下に絞る

押し間違いが多い

小さくて遠い的ほど押しにくい。よく使うものを大きくし、動線の近くに置く。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は並べる・揃えるにまとめてある。逆引きには全188件。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。