Tahoeのアイコンは擁護しがたい
原文は Nikita Prokopov により に公開されました。 このブログを購読する
1992年の『Macintosh Human Interface Guidelines』を読んでいて、こんな素敵な図を見つけた:
添えられていた説明がこちら:
時は流れて2025年。AppleはmacOS Tahoeをリリースした。目玉は？ あらゆるメニュー項目に、不快で、注意を散らし、判読不能で、雑然とし、ごちゃごちゃして、混乱させ、イライラさせるアイコン（私の言葉ではなく、彼らの言葉だ！）を追加することだった:
ひどい出来だ。だが、具体的に何がどうひどいのか？ 掘り下げてみよう！
注意: スクリーンショットはmacOS 26.1と26.2が混在しており、システムにプリインストールされている純正Appleアプリのみから取得したものだ。システム設定は一切変更していない。
アイコンは区別できなければならない
アイコンの主な役割は、探しているものを見つけるのを速くすることだ。
一見すると直感に反するかもしれないが、すべてにアイコンを付けるのはまったくの逆効果だ。目立たせるには、他と違わなければならない。だが、すべてにアイコンが付けば、何も目立たなくなる。
色についても同じことが言える。白黒のアイコンはすっきりして見えるが、探し物を速くする役には立たない！
かつてのMicrosoftはそれをわかっていた:
右側のバリエーションでSaveやShareをどれだけ速く見つけられるか見てほしい:
そのうえ、よりすっきり見える。ごちゃごちゃ感が少ない。
色を付ければさらに良くなる（テキストとアイコンの分離がより明確になり、より速く見つけられる）:
見た目は好きになれないだろう。私も好きではない。これらのアイコンは扱いが難しい。きれいに見せるには、ちゃんと色を前提にデザインする必要がある。だが、原則は変わらない。こちらの方が圧倒的に使いやすいのだ。
アプリ間の一貫性
アイコンを機能させたいなら、一貫性が必要だ。何を探せばいいのかを学習できる必要がある。
例えば、「Cut」というコマンドの横に 
があったとする。なるほど、と思う。次に「Cut」を探すときは、少し時間を節約して、代わりに を探し始められるかもしれない。
その点、Tahoeはどうだろうか？ お見せしよう。「“New”の五十通りの影」だ:
わざわざ全部集めて並べてみたので、状況の馬鹿馬鹿しさがよりはっきりわかるはずだ。
もちろん、中には別の操作なのでアイコンが違うものもある。スマートフォルダの作成とジャーナルエントリーの作成が違うのはわかる。だが、これはどうだろう？
あるいはこれは:
あるいはこれは:
言い訳のしようがない。
「Open」も同じだ:
「Save」:
そう。そのうちの一つはチェックマークだ。しかも、矢印の向きすら揃えられていない！
「Close」:
「Find」（時にSearch、時にFilterと呼ばれる）:
「Delete」（あのCut-Copy-Paste-DeleteのDeleteだ）:
ウィンドウの最小化。
これらは何かマイナーで特殊な操作ではない。OSの基本中の基本だ。すべてのアプリにあり、常に同じ場所にある。それなのに見た目がバラバラなのはおかしい！
同じアプリ内での一貫性
アイコンはツールバーでも使われる。概念的に、ツールバーでの操作はメニューから呼び出す操作と同一であり、したがって同じアイコンを使うべきだ。これが最も実装しやすいケースだ。同じアプリ内、しかも多くの場合同じ画面上にある。一貫性を保つのがどれほど難しいというのか？
プレビュー:
写真: 同じ 
と 
の不一致だが、今度は逆だ ¯\_(ツ)_/¯
マップなどでは、ズームに異なる記号が使われていることが多い:
アイコンの使い回し
もう一つの大罪は、同じアイコンを異なるアクションに使うことだ。想像してほしい。私は 
が「New」を意味することを学習したとする:
そして別のアプリを開いて を見つける。「よし」と思う。「もう意味はわかってるぞ」:
引っかかった！
こう思うだろう。「なるほど、
はクイックルックの意味だな」:
時には、確かにそうだ。だが別の時には、 は「完了を表示」を意味する:
時には 
が「読み込む」だったり:
時には が「アップデート」だったりする:
一貫性の問題と同様に、アイコンの使い回しはアプリ間だけで起こるわけではない。ツールバーで 
を見かけることもある:
そして同じアプリのメニューに行くと、 が別の意味になっている:
時には同一のアイコンが同じメニュー内で鉢合わせすることもある。
時には隣り合わせで。
時には同じアイコンの弾幕をずらりと並べてくる:
これは誰の役にも立たない。アイコンがすべて同じでは、誰もメニュー項目を速く見つけられないし、機能をよりよく理解できるわけでもない。
これまでのところ、アイコン使い回しの最悪の例は「写真」アプリだ:
すべてのメニュー項目にユニークなアイコンを選ぶことを任された人が、単にネタ切れを起こしたようにしか見えない。
わからなくもない。
ニュアンスが細かすぎる
私たちはアイコンを見るとき、通常、細かい描き方の違いは許容する。だからこそ、例えばこれらの厳密には異なる道路標識が同じ意味だと理解できる:
アイコンでも同じだ。ある場所で箱から出ていく矢印を描き、別の場所でも矢印と箱を描くのだが、角度が少し違ったり、線の太さが違ったり、一方を塗りつぶしたりしても、私たちは同じ意味だと理解する。
例えば、 が 
とは別の意味だというのか？ 勘弁してほしい！
あるいは、フォントサイズがわずかに違うだけの二つの文字A:
鉛筆が「名前変更」で、少し太い鉛筆が「ハイライト」？
異なる対角線の角度の矢印？
スペースの3分の2を占める三つの点と、全体を占める三つの点。冗談だろう？
わずかに濃い点？
角が折れているか、中に線があるかで意味が変わる紙？
だがラスボスは矢印だ。全部違う:
どうやらユーザーは、円がどれだけ潰れているか、右上から始まるのか右下から始まるのか、矢印の先端がどこまで伸びているかを見分けるエキスパートにならなければならないらしい。
気にするか？ 正直、しない。もしAppleがこれらを一貫して適用していたら、頑張ってみようと思えたかもしれない。だがAppleは、ある場所では と 
を同じ意味とみなしておきながら、別の場所ではこんな微細な違いに気づけと求めてくるのか？
悪いが、信用できない。これまで見てきたことを考えれば、とても。
ディテールの詰め込みすぎ
アイコンは離れたところからでも容易に認識できるべきだ。どんなアイコンデザイナーも知っている。小さなディテールは御法度だ。美的目的なら時には入れてもいいかもしれないが、それに頼ってはいけない。
そしてTahoeのメニューアイコンはとてつもなく小さい。そのほとんどが12×12ピクセルの正方形に収まる（Retinaのため実解像度は24×24）うえ、多くが正方形ではないため、一辺はたいてい12よりさらに小さい。
作業できるスペースは決して広くない！ Windows 95ですら16×16のアイコンだった。当時の典型的なDPIを72dpiとすると、物理的なアイコンサイズは0.22インチ（5.6mm）になる。一方、最新のMacBook Proの254DPIでは、Tahoeの24×24アイコンは0.09インチ（2.4mm）だ。確かに24は16より大きいが、実際にはアイコンの面積は4分の1になっている！
だから、これを見たとき:
戸惑う。違うことはわかる。だが、何が描かれているのかは到底わからない。
20倍に拡大しても、まだごちゃごちゃしている:
あるいはこれ。これらは三つの異なるアイコンだ:
ここでプラス記号とキラキラを区別しろというのか？
これらの線の中には、他の線より半ピクセルだけ太いものがあり、それが肝だというのだから:
これは矢印のつもりなのだろうか？
絵筆？
ほら、小さなカメラだ。
さらに小さなファインダーまで付いていて、20倍に拡大すればかろうじて見える:
あるいはこれ。箱があり、その中に円があり、その中に高さわずか2ピクセルの小さな文字iがある:
見えないだろう？
私にも見えない。だが、そこにあるのだ……
そしてこれはウィンドウだ！ 信号機まで付いている！ なんとも愛らしい:
思い出してほしい。これらはRetinaピクセル、つまり1物理ピクセルの4分の1だ。Steve Jobs自身が、それらは見えないと主張していた。
300ppi付近にマジックナンバーがあることがわかった。目から10〜12インチ（約25〜30cm）離して持ったときに、人間の網膜がピクセルを識別できる限界なのだ。
それなのに、Tahoeのアイコンはそれが見えることを前提にしている。
ピクセルグリッド
使えるスペースがこれだけ少ないと、1ピクセル1ピクセルが重要になる。良いアイコンを作ることはできるが、ピクセルを非常に慎重に選ばなければならない。
Tahoeのアイコンでは、Appleは昔ながらのビットマップの代わりにベクターフォントを使うことにした。Appleのリソースは節約できる。一度描けば、どこでも使える。どんなサイズでも、どんな解像度でも、どんなフォント幅でも。
だが欠点もある。フォントは垂直方向の配置が難しく、サイズはピクセルに直接対応しないし、線の太さもピクセルグリッドに1対1で対応しない、などだ。つまり、どこでも機能するが、どこでもぼやけて凡庸に見える:
より多くのピクセルを与えれば、確かにまともに機能し始める。
あるいはグラフィックをシンプルにすれば。だが、小さなディテールと極小のアイコンサイズの組み合わせは致命的だ。だから、Appleが380 DPI以上のMacBookを出すまでは、残念ながら今でもピクセルグリッドを気にしなければならない。
混乱を招くメタファー
アイコンにはもう一つの役割があるかもしれない。ユーザーがコマンドの意味を理解するのを助けることだ。
例えば、文脈（ウィンドウの移動）がわかっていれば、これらのアイコンは言葉よりも速く何が起きているかを説明してくれる:
だが、これが機能するには、ユーザーがアイコンに何が描かれているかを理解できなければならない。コンピュータ上の操作へ明確に置き換えられる身近なモノ（ゴミ箱→削除のような）、広く使われている記号、あるいはわかりやすい図でなければならない。HIGより:
初心者がやりがちなミスは、対象を誤って表現することだ。例えば、選択範囲はこんな見た目だ:
だが、そのアイコンはこんな見た目になっている:
正直、この文章を一週間かけて書いているが、なぜこんな見た目なのかまったく見当がつかない。こんな見た目のオブジェクトはあるにはあるが、それはFreeformやプレビューでのテキストブロックだ:
SF Symbolsではcharacter.textboxと呼ばれている:
なぜそれが「すべてを選択」のメタファーになったのか？ 私の推測は、単なる間違いだということだ。
別の箇所では、iOSのテキスト選択をメタファーとして使っている。Macでだ！
中には明白な、あるいは確立されたメタファーを持つ概念もある。その場合、それを使わないのは間違いだ。例えばブックマークなら 
だ。Appleはなぜか本を選んだ:
すでにインターフェース要素があるなら、それをアイコンに流用できることもある。だが、ユーザーを混乱させないようにしてほしい。矩形の中の点は、権限ではなくパスワード入力に見える:
ここのアイコンは「チェック」と言っているが、アクションは「チェックを外す」だ。
ひどい間違いだ。アイコンは役に立たないどころか、積極的にユーザーを混乱させる。
オブジェクトと何らかのインジケーターを組み合わせた二層構造のアイコンを作りたくなる誘惑もある。例えば、チェックボックスとバツ印で「チェックボックスを削除」を意味するような:
あるいはユーザーとチェックマークで「ユーザーを確認」のように:
残念ながら、このような構成はめったにうまくいかない。ユーザーはあなたが提供する構成要素から文章を組み立てたりはしない。そんなパズルを解きたいとは思っていないのだ。
メタファーを見つけるのは難しい。名詞は動詞より簡単だが、メニュー項目はほとんどが動詞だ。「開く」はどんな見た目だろう？ 右上に伸びる矢印？ なぜ？
「開く」にAppleが見落とした明白なメタファーがあると言いたいわけではない。そんなものは存在しない。だが、それが要点だ。良いメタファーが見つからないなら、悪い、混乱させる、あるいはナンセンスなアイコンを使うより、何も付けない方がましなのだ。
メタファーの質を試すために私がよくやるゲームがある。ラベルを外して、意味を当ててみるのだ。試してみてほしい:
一生懸命考えればすべてのアクションに良いアイコンがあるはずだと思うのは妄想だ。そんなものはない。最初から負け戦なのだ。いくら金をかけても、「経営判断」を下しても、それは変わらない。問題は100%自業自得だ。
とはいえ、Appleを褒めるべきところは褒めなければならない。メタファー選びがうまいときは、本当にうまい:
対称的なアクション
混乱を招くメタファーの特殊なケースとして、互いに正反対のアクションに異なるメタファーを使うことが挙げられる。元に戻す／やり直す、開く／閉じる、左／右のような。
それらのアイコンが同じメタファーを使っていると良い:
そうすれば時間と認知リソースを節約できるからだ。一つ覚えれば、もう一つはタダで手に入る。
だからこそ、関連するアクションに共通のメタファーを使わないのは間違いだ:
あるいはここ:
もう一つの間違いは、対称性がないところに対称性を作り出すことだ。「戻る」と「すべてを表示」？
Tahoeの一部のメニューは両方の間違いを犯している。例えば、「表示／非表示」間の対称性の欠如と、「完了／サブタスク」間の偽の対称性:
「読み込む」に対応するのが「書き出す」ではなく「共有」になっている:
アイコン内のテキスト
再びHIGより:
HIGの著者たちは、アイコンの一部としてテキストを含めることに反対している。つまり、こんなものは:
あるいはこんなものは:
1992年には認められなかっただろう。
私も同意見だが、Tahoeにはもっと深刻な問題がある。テキストだけで構成されたアイコンだ。例えばこれ:
「文字通りに読むことを意図しない、比喩的で抽象的なアイコン内のテキスト」がどこで終わり、実際のテキストがどこから始まるのかが不明瞭だ。同じフォント、同じ色を使っているのだから、どうやって区別しろというのか？ アイコンはただ邪魔なだけだ。A...Complete？ AaFont？ どういう意味だ？
や 
は何とか理解できる。点が何かを表しているのだろう。
に至った思考も想像できる。だが 
はどうだ？ 装飾もなければ、エフェクトもない。ただのプレーンなAbc。本気なのか？
テキストの変形
テキストの変形を説明するのにアイコンを使うのは良いアイデアだと思うかもしれない。
例えば、これを見ると:
あるいはこれ:
あるいはこれ:
アイコンだけを見て、テキストに何が起こるかを理解できる。アイコンがアクションを図解しているのだ。
しかも、BIUはワープロではすっかり定着している。なら良いことずくめだろうか？
そうでもない。問題は同じだ。テキストのアイコンはアイコンではなくテキストに見えるのだ。加えて、これらのアイコンは過剰だ。最初の文字を取って繰り返すことに何の意味がある？ 「Bold」という単語はすでに文字「B」で始まっており、同じように簡単に読めるのに、なぜ二重にするのか？ もう一度見てほしい:
それはショートカットとしてももう一度繰り返されている……
このメニューにはより良いデザインがある:
そしてそれは少なくとも33年前からAppleに知られていた。
アイコン内のシステム要素
もちろん、オペレーティングシステムは自身の目的のためにいくつかの視覚要素を使っている。ウィンドウのコントロール、サイズ変更ハンドル、カーソル、ショートカットなどだ。それらをアイコン内で使うのは間違いだろう。
残念ながら、Appleもこの罠にはまってしまった。矢印を再利用したのだ。
キーショートカット:
HIGには省略記号（…）について丸ごと一つの章があり、メニュー内の他の場所でそれを使うことがいかに危険かが説明されている。
そしてまさにこの問題がTahoeにも存在する。
アイコンは走査を妨げる
アイコンがなければ、メニューを上から下へざっと眺め、頭文字だけを読めばいい。すべてが揃っているからだ:
だがTahoeでは、一部のメニュー項目にはアイコンがあり、一部にはなく、配置もバラバラだ:
中にはチェックマークとアイコンの両方を持つ項目もあれば、どちらか一方だけのもの、全くないものもあるため、こんな状況が生まれる:
うんざりだ。
特別賞
このメニューは独自のカテゴリーに値する:
異なるアクションに同じアイコン。明白なメタファーの欠如。なぜか一つ目だけを二つ目・三つ目よりわずかに小さくする。おめでとう！ 全部盛りだ。
HIGは今でも通用するのか？
ここまでHIGに何度も触れてきたが、こう思うかもしれない。1992年のインターフェースマニュアルは今でも通用するのか？ コンピュータはすっかり変わり、まったく新しい原則やデザイン、イディオムが適用されるのではないか、と。
答えはイエスでもありノーでもある。もちろん、白黒ディスプレイにアイコンを適応させる方法といったアドバイスは時代遅れだ。だが、原則は——それが良い原則である限り——今でも通用する。なぜならそれらはコンピュータがどう動くかではなく、人間がどう動くかに基づいているからだ。
人間に毎年の新バージョンはない。記憶力が倍になることもなければ、視力が鋭くなることもない。注意の働きは昔と変わらない。視覚的認識も、運動能力も、すべて1992年当時とまったく同じだ。
だから、直接脳にチップを埋め込むインターフェースができるまでは、HIGは色あせない。
結論
私見では、Appleは不可能な課題に取り組んだ。すべてのメニュー項目にアイコンを付けるという課題だ。そんなことをするのに十分な良いメタファーは、そもそも存在しない。
仮にあったとしても、前提自体が疑わしい。すべてにアイコンがあれば、ユーザーが探し物を見つけるのが速くなるわけではない。
仮に前提が正しかったとしても、「目標に対して最善を尽くした」と言いたかった。だがそれも違う。彼らはメタファーを一貫して適用することにおいても、アイコン自体のデザインにおいても、お粗末な仕事をしたのだ。
Appleが一つのOSリリースに集約してみせた、アイコンデザインにおけるよくある間違いを避ける上で、この記事が役立つことを願う。私はコンピュータが好きだし、インターフェースが好きだし、視覚的コミュニケーションが好きだ。30年前にはすでに手に入った素晴らしい知識が、今まったく無視され、捨て去られているのを見るのは悲しい。
良い面もある。今やAppleより良いデザインをするのはそれほど難しくない！ それに乾杯しよう。良いお年を！
注記
この投稿をレビューしている間にJim Nielsen氏の記事を教えてもらい、私と多くの同じ点を指摘していることを知った。私たちの推論の背後に何らかの共通の真実がある証拠だと受け止めている。
追記: Safari → ファイルメニューは26.0以降に悪化した。以前はアイコンが4つだけだったのが、今では18個になっている！
この投稿の下書きを読んでくれたKevin、Ryan、Nickiに感謝する。
コメント
ログインしてコメントする