AI時代だからこそ、UXデザインを深く理解する必要がある！
と思い、7月1日から、「Sociomedia ヒューマンインターフェース ガイドライン」を読み進めて、考えたことを記録して、noteマガジンにまとめている。
今日は16個目。まずは引用から。
16. フィッツの法則 (Fitts’s Law)
パソコンで画面上の要素をマウスなどで指し示すのには、現在のポインターからの距離が小さくターゲット面の奥行きが大きいものほど短い時間で済み、ポインターからの距離が大きくターゲット面の奥行きが小さいものほど長い時間がかかる。つまり近くて大きいものほどポイントしやすく、遠くて小さいものほどポイントしにくい。
また通常、マウスカーソルはスクリーンの端で止まるようになっているので、スクリーンの端にあるものはターゲット面が非常に大きな奥行きを持つのと同じことになり容易に指し示すことができる。
https://www.sociomedia.co.jp/9146
言葉で長々と説明してもわかりにくいので、良い図がないか Google 画像検索を英語＆日本語でしてみたが、引用先のソシオメディアの図が一番わかりやすい。
画像元: ソシオメディア
まずは、「近くて大きいものほどポイントしやすい」ことについて。
今、「１」の場所にマウスのカーソルがあるとする。スマホなどのタッチパネルなら、たった今タップした場所が「１」だとする。
この時、「４」の四角の方が、「５」の四角よりも、クリック・タップしやすい。なぜなら、「４」の方が、「１」から近く、かつ、面積が大きいから。
この「フィッツの法則」の応用例の一つが「カードリンク」。カード内のリンク先ページのタイトルだけでなく、カード全体をクリックできるようにすることで、ユーザーがリンク先に行きやすくすることができる。
例えば、Pinterestが流行らせた、このレイアウト。
画像元: Material Design 3
左真ん中の「Moon Harvest」という文字だけをリンクにするより、写真を含めたカード全体をリンクにすることで、クリックできる面積が大きくなり、リンク先にたどり着きやすくなる。
次に、これはマウスを使う場合にしか当てはまらないが「スクリーンの端にあるものはポイントしやすい」について。
もう一度、この図に戻る。
画像元: ソシオメディア
現在、どこにカーソルがあるかにかかわらず、スクリーンの端（「２」および「３」）は、クリックしやすい。なぜなら、クリック可能な範囲が無限に大きいから。
画像元: Nielsen Norman Group
上の図で、左側の灰色の部分がスクリーンだとする。スクリーンの右端にカーソルを動かす時、スクリーンの外側の紫の部分のどこへ向かって動かしても、カーソルはスクリーンの右端で止まる。だから、スクリーンの端はクリックしやすい。
スクリーンの上下左右の端がクリックしやすいことの応用例は、macOSのアプリのメニューバー。Windowsが、アプリのウィンドウ内にメニューバーを配置するのに対し、macOSは、どんなアプリでも、画面の最上部にメニューバーを配置する。（で、WordやExcelのmacOS版は、画面の最上部とアプリのウィンドウ内両方にメニューバーがあるので、どっちをクリックすればいいのかすぐに判断できず、使いづらい。）
もう一つの応用例が、Windowsのスタートボタン。画面左下の角にあるのは、この法則の応用例。スクリーンの角は、スクリーンの端よりも、クリックしやすい。だから、コンピューターの電源を落としたい時に、すぐにクリックできる。なお、macOSの「スタートボタン」である、アップルのロゴボタンは、画面左上の角にある。
なお、私はmacOSユーザーなので知らなかったが、Windows 11 でスタートボタンの場所が移動したらしい。日経パソコン（2025年4月14日号）の記事によれば、「横に広いワイドディスプレーが一般的になり、そうした画面でマウスポインターを移動させる距離が少なくて済むようにとの配慮から」だそうだ。
でも、左端に表示させるように設定を変える人が続出したらしい。「ウィンドウズ11 スタートボタン 左下」でグーグル検索すると山ほど出てくる。
とてもMicrosoftらしいなと思う。UXデザインのルールを堂々と破る。スクリーンが横長になっても、左下は面積が無限に大きいので、距離が遠くてもクリックしやすい、ということにMicrosoftのUXデザインチームは気づかなかったのだろう。
2007年にWindowsからMacに転向して以来、一度たりとも「Windows の方が良かった」と思ったことがない。その一因は、こういうところにありそうだ。
