OS Xにおけるツールバーアイコンの使い分け
![[Finder]](../../_dat/image/2013/0426_barheight_color)
![[Finder]](../../_dat/image/2013/0426_barheight_glyph)
Mountain Lion現在、いやその数年前から、Macのツールバーには大きく分けて2種類のタイプが混在している。ひとつはOS Xの当初から用いられていた32px四方のフルカラーアイコン（以下、カラータイプ）、もう1つは比較的新しい、ボタンの枠内に納められた単色のグリフタイプ（以下、グリフタイプ）である。
この2種類のツールバーアイコン、なんとなく「グリフタイプの方が新しくてモダンな感じ」とか「カラータイプの方がかわいい」とかではなく、明確に性質に違いがあり、そのためソフトェアによって適するタイプが異なる。
この2つの違いについて書いてる人みたことないので、それをあらためて私なりにまとめてみたい。
これから書くことは、Appleがそういったガイドラインが定めているわけではないことに留意して頂きたい。また、UIデザイナーの間でそういった暗黙の共通認識があるわけでもない。あくまで私の思想や経験から帰着した結論である。
グリフタイプとカラータイプの違い
ひとまず、2者の違いを表にでもまとめてみよう。
| グリフ | カラー | |
|---|---|---|
| 画像サイズ | 19x19 以下 | 32x32 (small 24x24) |
| 色 | （原則）白黒 | フルカラー |
| 推奨フォーマット | tiff, icns | |
| ツールバーの高さ (アイコンのみ) |
54px
|
61px 53px (small) ![[Finder]](../../_dat/image/2013/0426_barheight_color_s)
|
| グループ化 | ![[Finder]](../../_dat/image/2013/0426_grouping) |
none |
| プルダウン | ![[Finder]](../../_dat/image/2013/0426_pulldown_glyph) |
![[Pages]](../../_dat/image/2013/0426_pulldown_color) |
| 小さいサイズへの 切り替え | 稀1 | あり |
| 識別 | 難 | 易 |
| グラフィック の作成 | 易 | 難 |
| 採用している Apple製ソフト |
|
|
| 採用している 3rdパーティ製ソフト |
|
|
カラーのグリフタイプアイコン
色の欄に"原則" とカッコ書きしたように、一応カラーのグリフボタンも存在する。しかしこれは明確に "色" が必要な場所にしか使われていない。
![[Mail]](../../_dat/image/2013/0426_colorglyph)
ユーザにとっての違い
大きくは表に挙げたとおりである。これからソフトウェアの利用者の視点に立った違いについて少し掘り下げてみよう。
必要なスペース
グリフタイプはカラータイプよりも必要とするツールバーのスペースが小さい。幅に関しては固定ではなくそのグリフアイコンの画像の幅に依存するのだが、高さは固定でグリフタイプを採用した場合のツールバーの高さは54pxとカラータイプの61pxよりも7pxも節約できる。実際のウィンドウで見たときの差はけっこう大きい。
ただ、カラータイプのアイコンには「Use Small Size」という選択肢がある2。これを使えばツールバーの高さはグリフタイプと同等になる。横方向にも小さくなるのでツールバーに表示できるアイコンの数も増える。
しかし、副次的なウィンドウでもない限り、デフォルトでsmallアイコンが用いられることはない。Use Small Sizeはあくまでユーザーが選択できるオプションなのである。
グループ化
![[Mail]](../../_dat/image/2013/0426_grouping2)
(Mail.app)
また、グリフタイプの特異な点として、グループ化がある。"AとBとCの切り替え" などという表現は プルダウンでもしないかぎりカラータイプのツールバーアイコンでは不可能だ。省スペースという利点もあるが、なによりアイコン間の関係性の理解を助けてくれる。モード切り替えの様な排他的な操作以外も、例えばMail.appでは "削除" か "迷惑メール指定" かのような、ユーザ的に感覚の近い操作をまとめるのに使われている。
周りとの調和
グリフタイプはデザイン的な自由度が非常に少なくカラーレスであるため、そのボタンはOS Xの全体のUI体系に溶けこむ。カラータイプと比べてアイコンの自己主張が少ない。それゆえウィンドウのクローズボタンやフルスクリーンボタンと同格でよりベーシックな操作している感覚を受けるかもしれない。
カラータイプはその辺りに関してはデザイナーの力量が試されるが、いずれにせよグリフタイプよりはアイコンの主張がある。
それぞれのアイコンの識別性
そして最大のポイントは識別のしやすさだ。とにかく言いたいのがグリフタイプのツールバーアイコンは識別しづらい、わかりづらいということだ。ユーザにとってもぱっと見わかりづらいのは体感していると思うし、実際にそれぞれを作ってみると、グリフタイプのあのサイズと白黒2色で詰め込める情報は32pxフルカラーのそれとは比べ物にならないくらい制限されている。結果、グリフタイプはかなり抽象度合の高いアイコンになる。またアイコン同士も同じ色、ボタンの角丸枠線によってシルエットも固定されるのでかなり似通って見える。
それぞれのツールバーに適したソフトウェア
以上をふまえて先に挙げた表の 実際に使われているソフトウェア の欄を見てみよう。再掲する。
| グリフ | カラー | |
|---|---|---|
| 採用している Apple製ソフト |
|
|
| 採用している 3rdパーティ製ソフト |
|
|
傾向が見えてくるだろうか。グリフタイプに上がっているソフトウェアはブラウズを主眼としたソフトウェアであり、カラータイプのものは編集をそれとしていないだろうか。また、ボタンタイプのものはより毎日使うような使用頻度が高いソフトウェアでカラータイプはその用途が必要になったときにたまに使うソフトウェアが主である3。
なお、メインウィンドウのツールバーがグリフタイプのソフトウェアでも、環境設定は普通カラータイプであることにも留意したい。
なぜか。
ブラウズ → グリフ
![[Finder]](../../_dat/image/2013/0426_browser)
ブラウズ主体のソフトというのは操作が似通っている。前・後に進む、拡大・縮小、更新する、情報を見る、中止・削除する、編集する、ラベルを付ける、など共通した操作が多い。これらの操作はソフトウェアごとに独創的なグリフを創造せずとも矢印やゴミ箱などの既に共通認識ができ上がっているピクトグラムで代表させることが可能だ。もちろんソフトウェア独自の操作もあるだろうが、それは全体の一部となる。逆にこのような共通な操作に対してアプリケーションごとにデザインが微妙に違ったアイコンが割り当てられるよりも、共通のグリフを用いる方が利用者の混乱もない。
そして、毎日使うようなソフトなので、アイコンの形をいちいち凝視・推測せずとも、アイコンの形やツールバー内での位置から操作が記憶可能で容易である。
また、これらのソフトウェアは編集メインのソフトに比べて比較的各ウィンドウのサイズが小さい。それぞれのウィンドウに占めるツールバーも省スペースを計りたいところだ。
よってこのようなソフトウェアではグリフタイプ最大のネックである "識別しづらい" の障害が少なく、それよりもグリフタイプの利点である "デザイン的に統一感が出てスッキリする"、"省スペース" などの特長が魅力的となる。
編集 → カラー
![[Numbers]](../../_dat/image/2013/0426_editor)
一方、編集が主体のソフトウェアは、ソフトウェア毎に操作がかなり異なりアイコンの種類も多い。新しいスタックを作成する、数式エディタを開く、レーダーグラフを挿入する、階層を1段階深くする、ビルトする。これらのアイコンをそれぞれのディベロッパが簡略化されたグリフで表現したとして、アイコンからその機能を類推するのは結構難しい。
また、使用の間にブランクが空くことも多いので、ブラウズ型ソフトに比べて空気を吸うようにアイコンを選ぶ、という境地には達しづらい。
よってアイコンの絵そのものの説明力に頼る場面が増えてくる。このような場面ではアイコンの抽象化の度合いが高くまた識別もしづらいグリフタイプは不利だ。欲しい機能を慣れない多くのアイコンの中から探し出せるようなフルカラーでの丁寧な説明が必要となる。
傾向
今書いたことを一応まとめるとこうなる。
| グリフ | カラー | |
|---|---|---|
| 用途 | ブラウズ | 編集 |
| 利用頻度 | 高 | 低 |
| ウィンドウサイズ | 小さめ | 大きめ |
あくまで傾向ではあるが、こう考えると比較的説明がいく。
作成の手間
ついでに、これは少し違うベクトルの話だが、グリフタイプとカラータイプではアイコン作成の手間も結構違う。
カラーアイコンに必要な画像 (8つ)
グリフアイコンに必要な画像 (1つ)
ちゃんと作るなら、カラータイプのアイコンは1つ当たり4種類（ノーマル、small、ノーマル for Retina, small for Retina）作る必要がある。これは現在MacがRetinaへの過渡期であるという特殊な状況もあるのだが、それにしても4種類である。さらにそれにon/offの状態がある場合は倍の8種類だ。一方グリフタイプはPDF1個で済む。ベクターデータなのでRetinaでも滲まないし、on/offがある場合もOS側でPDFを元に自動的にそれっぽく修飾してくれる。
グリフタイプでSmall Size版を作ることを考慮してないのはアンフェアだと思われるかもしれないが、ベクターデータは多少縮小しても問題ないケースも多いし、グリフタイプのツールバーでsmallサイズに切り替えられることは実際非常に稀だ。
そもそもグリフタイプは形もシンプルだ。ボタンっぽい陰影はOSが付けてくれる。このくらいなら、グラフィック技術のないプログラマでもアイコンデザイナーに依頼せずともそれっぽいのが用意できる4。フリーのピクトグラム集から流用できるかもしれない。
もちろん、そもそもそれぞれの機能を表すアイコンはどういう意匠であるべきなのかという "シンボルそのもののデザイン" となると話は変わってきて、32pxのフルカラーなら分かりやすくふさわしいアイコンが作れるのにあの白黒しかない狭い空間内で同等の情報を詰め込むのは至難の業だったりする場面もある。
だが、それを差し引きしても全体的に見たらグリフの方が圧倒的に "楽" であろう。これは大きなメリットだ。
総括
というわけで言いたかったのは、ツールバーアイコンがカラータイプかグリフタイプかなのかは、「こっちの方がカッコいいから」などという開発者の好みの問題ではなく、それぞれの特性を理解した上で明確な理由と目的を持って選択されるべきだ、ということである。そして、現在でも（おそらく）この2種のアイコンは棲み分けがされている。
多分OS X的な流れは今後よりカラーレスな方向で進んでいき、私が今立てている仮説などなかったかのように現在カラータイプのツールバーを採用しているApple製ソフトウェアもグリフになったり、ツールバーの仕様が一新されたり、そもそもツールバーなどという共通したフォーマットが存在しえなくなるかもしれない。
だが少なくとも現時点では、カラータイプが旧式でグリフタイプがモダンなどということは決してない。グリフアイコンはカラータイプよりも情報量が少ないのだ。
あと第3の独自の路線のアイコンを採用してる奴らは論外だ。規格は美しい。
- 私が知る限りでは夜フクロウがグリフタイプで且つサイズを切り替えられる。
- 個人的には Use Small Size は好き。ただ専用の画像が用意されていないと悲しい結果になる。
- まぁこの原則は絶対じゃなくてあくまで傾向であり、たとえばTextEditはエディタ系ソフトだけど(変則)グリフタイプだし、とかあるのだが。
- 「ダサい中途半端なツールバーアイコン作ってOS Xの雰囲気壊すくらいなら、こっちがカッコ良くしたるからグリフ用意するだけにしといてくれ」というAppleのメッセージなのではないかと私は密かに勘ぐってる。
- これあんま好きじゃない。