第１０章


アイコン


この章はアクアアイコンの背景にある全体的な哲学を説明し、アプリケーション、文書、ツールバー、その他の種類のMac OS Xのためのアイコンをどのようにデザインするかを示します。

アクアは写実的なアイコンの形式を提供します—それは写真の現実性に近づく一方、小さな空間で多くを伝えるためにイラストの特徴を利用します。アイコンは詳細な描写のための広大な空間を可能とするために、128 x 128ピクセルへ描かれることができます。アンチエイリアス処理は曲線や直線でない線を可能とします。アルファチャネルと透過処理は、複雑な陰影と立体感を可能にします。これらの品質のすべては、あなたに鮮やかなアイコンを作成することを可能にする、豊かなイメージへの道を開くでしょう。

あなたのアプリケーションをMac OS Xで表すためには、アイコンが現れるさまざまな場所—Dock、Finderのプレビュー、警告ダイアログ、その他—に合わせて、適切に縮尺を変化させる、高品位なアクア形式のアプリケーションアイコンを作成することがその真髄です。

Carbon:アプリケーションと文書のカスタムアイコンを提供するための情報はO’Reillyが発行するLearning Carbonの“Desktop Icons”を参照してください。

アイコンの分類と系統

アイコンの分類は、あなたがアプリケーションを開く前に、あなたはそれを用いて何ができるかを伝達する助けとなります。アプリケーションは役割によって分類され—ユーザアプリケーション、ソフトウェアユーティリティ、その他のように—それぞれの区分、もしくは分類はその独自のアイコン形式を持ちます。この区別は、ユーザがDockに並ぶアイコンの種類を簡単に見分けることを助けるためにたいへん重要です。

図 10-1 Dock上に現れるときのように示した、異なる分類—ユーザアプリケーションとユーティリティ—のアプリケーションアイコン

たとえば、ユーザアプリケーションのためのアイコンは色鮮やかで魅力的ですが、一方ユーティリティはより真面目な外見を持ちます。図 10-2はユーザアプリケーションアイコンを上の行に、そしてユーティリティアイコンを下の行に示します。これらの分類はこの先の「ユーザアプリケーションアイコン」（133ページ）と「ユーティリティアイコン」（134ページ）で解説します。

図 10-2 2つのアイコンの分類：ユーザアプリケーションアイコンは上の行、ユーティリティアイコンは下の行

アクアアイコンの視覚的な柔軟性は、ユーザがアプリケーションに関連付けられたファイルを見分けるためにも役立ちます。たとえばiTunesにおいて、アプリケーションアイコンで提供される視覚的な手がかりは、iTunesに関連付けられたほかのファイルへと持ち越され、図 10-3に示す通り、アイコン系統を形成します。

図 10-3 アイコン系統：iTunesのアプリケーションアイコンとその関連アイコン

iTunesアプリケーションアイコン

文書アイコン プレイリストアイコン プラグインアイコン

アプリケーションアイコン

アプリケーションアイコンは最もユーザの目に触れます。あなたのアプリケーションが実行中でないときも、FinderやDockで見られているため、これらはユーザの第一印象の主要な部分を形成します。

ユーザアプリケーションアイコン

Mac OS Xのユーザアプリケーションアイコンは鮮やかかつ魅力的でなければいけません。なおかつアプリケーションの目的をすぐに伝える必要があります。たとえばテキストエディットのアイコンは、このアプリケーションは文字による文書を作成するためのものであることを明確に表しています。

図 10-4 テキストエディットのアプリケーションアイコンはこのアプリケーションが何のためのものかを明らかにしています

もし、あなたのアプリケーションの主な機能が、メディアの作成や取り扱いであれば、そのアイコンはアプリケーションが作成したり表示するメディアを表している必要があります。適切であれば、アイコンはアプリケーションがユーザにできるようにする、作業の性質を伝えるような道具【の絵】も含めるべきでしょう。

たとえばプレビューのアイコンは、このアプリケーションは写真を見るために使うことができる、ということを伝える助けとするために、拡大鏡の図を利用しています。もしあなたが補助的な道具の要素を含めるのであれば、それを支える基礎オブジェクトに密接に関連させる必要があります。

図 10-5 プレビュー アプリケーションアイコン：道具要素の例

けれども、スティッキーズ アプリケーションアイコンでは、黄色い四角形が付箋紙であると容易に見分けることができるので、アイコンは道具を含んでいません。アイコンの素性を伝えるために必要ないからです。

図 10-6 スティッキーズ アプリケーションアイコン：道具を加えることなく効果的である

スティッキーズアイコンの中の文字列は実際の文字列であり、単純な波線で文字列を表現しているのではない点に注意してください。もしあなたがアクアアイコンの中に「ギリシャ語」の文字列を必要とするなら、実際の文字列を用いて、それを縮小したりレイヤーを重ねて読めなくしてください【？】。

一般的に、Mac OS Xのユーザアプリケーションアイコンは、あたかも、あなたの目の前の机の上に乗っている風に見えるように、デザインされています。これらは微妙に小さくなる構図（下のほうが広くなる）を持ちます。詳細は、「アイコンの構図と素材」（139ページ）を参照してください。

ビューア、プレイヤー、アクセサリのアイコン

QuickTimeプレイヤーや計算機といった、オブジェクトを表現するようなアプリケーションは、そのオブジェクト自体によって最も簡単に認識されます。このようなアプリケーションのためのアイコンを作成するときは、ソフトウェアの実際のスクリーンショットを用いる代わりに、単純化、理想化されたオブジェクトを作成することで、より美観が心地よいものとなります。オブジェクトの【単純化した】作り直しは、ユーザがアイコンと、実際のインタフェースを混同する怖れのあるときに特に重要です。

図 10-7 QuickTimeプレイヤー、DVDプレイヤー、計算機のアイコン

これらのアイコンの多くは、あなたがアプリケーションを開いたときに見るはずのものの前身であり、正面からの構図を使用しています（「卓上」のユーザアプリケーション形式ではなく）。たとえば、あなたは画面上の計算機を3次元で見ることはありえないので、アイコンをそうした方法で描いてはいけません。

ユーティリティアイコン

ユーティリティアプリケーション—それほど頻繁に使用されず、単なる娯楽や創造的な活動を目的としていない—のためのアイコンは、ユーザアプリケーションのためのアイコンよりも真面目な傾向を伝えます。これらのアイコンにおける色彩は彩度が低く、主に灰色で、アプリケーションが何をするかを明確に伝達するために必要なときのみに【他の色が】加えられます。

図 10-8 アクティビティモニタとプリンタ設定ユーティリティのアイコンにおける色使いの区別

ユーティリティアプリケーションは、作業の狭い範囲に焦点を合わせているのが普通なので、アイコンの中の要素の数は最小限に保つのが最適です。焦点はユーティリティが何をするかを表す、単一のオブジェクトとすべきです。ユーティリティアイコンの構図は、これらがあたかもあなたの目の前の棚に置かれているように、正面にします。詳細は、「アイコンの構図と素材」（139ページ）を参照してください。

文書アイコン

伝統的に、文書アイコンは右上の角が折れた1枚の紙のような姿をしています。前述の通り、アクアの文書アイコンは、関連付けられているアプリケーションを明白にする必要があります。たとえばプレビュー文書は、アプリケーションアイコンで用いられているメディア（写真）の画像を含んでいます。単純化のためと、文書とアプリケーション自身との混同を避けるため、表示するための道具【（この例では拡大鏡）】を文書アイコンの中では繰り返しません。

図 10-9 プレビュー アプリケーションとプレビュー文書のためのアイコン

文書アイコンは文書の後ろに影を加えることで、あたかも机の上に浮かんでいるかのように表示されます。詳細は、「アイコンの構図と素材」（139ページ）を参照してください。

あなたが文書アイコンの上に識別バッジを付けたいときは、土台となる絵の上に乗せて文書全体の輪郭をはみ出したりするのではなく、文書の内部の要素になじむようにバッジを処理してください。

図 10-10 文書アイコンにバッジを付ける正しくない例と正しい例

こうしてはいけません。 こうしてください。

プラグインのためのアイコン

プラグインアイコンは、左側面に関連付けられたアプリケーションの目印と、右側にはプラグイン特有の図のついた、積み重ねできる部品のように見えます。

図 10-11 プラグインアイコン

ハードウェアと取り外し式メディアのアイコン

ハードウェアアイコンは、装置をあなたが最もよく目にするように表現します。つまり机の上にあるようにです。また、これらの装置は頻繁に手に取ったり持ち運ばれるので、人々はこれらを重さを持った3次元の物体として慣れ親しんでいます。アクアのハードウェアアイコンの扱いは、これらと実物との関連性を強めます。

図 10-12 外付け（上の行）と内蔵のハードウェア装置のためのアイコン

ユーザが外付け装置同士を見分けることを助けるために、これらのアイコンは識別記号（FireWire、SCSI、その他）のための領域を提供します。

CD、フロッピーディスク、PCカードのような取り外し式メディアは、あなたがこれらを目の前で手にしているときの見え方で描かれます。つまり、構図は正面からのものになります。

図 10-13 取り外し式メディアのためのアイコン

ツールバーアイコン

ツールバーの第一の目的は、ユーザに頻繁に使用されるコマンドへの、簡便なアクセスを提供することです。ツールバーアイコンは画面の面積を大事に使う必要があります（推奨される大きさは32ピクセル x 32ピクセルです）が、魅力的で簡単に区別がつけられないといけません。ツールバーアイコンの構図は、あたかもあなたの目の前の棚に置かれているかのように、正面からのものとなります。

理想的には、各ツールバーアイコンは、それが表しているコマンドに直接的に関連付けられた、固有のオブジェクトか、動作を表していなければなりません。またツールバーは、あなたのアプリケーションの文脈において意味を成すときには、システムの別の場所からも認識されるインタフェース要素（情報ボタンやiDiskアイコンといった）を表すアイコンを含んでいてもかまいません。

もし、あなたが情報ボタンのようなアイコンを搭載することを選んだら、確実にその意味を維持してください。ユーザは、そのようなアイコンはどの文脈においても同じ事柄を意味するためのものであると想定しているので、これらをあなたのツールバーで使用する際に、【別の意味に】定義しなおしてはいけません。

重要：黄色い警告アイコン等のシステムアイコンを、あなたのツールバーで使用してはいけません。システムアイコンは警告ウインドウをはじめとする、特定の文脈でユーザに重要な情報を提供します。従ってこれらをツールバーで使用することはアイコンの意味がぶれて、システムにおける有効性を薄めてしまいます。図 10-14はXcodeのツールバーで利用できるいくつかのアイコンを示します（XcodeはMac OS Xの統合開発環境、もしくはIDEです）。

図 10-14 Xcodeツールバーアイコン

図10-14のアイコンのいくつかは日用品（かなづち、殺虫スプレーの缶、ほうき）を、頻繁に使用されるXcodeコマンド（それぞれ、プロジェクトをビルドする、コードをデバッグする、ターゲットをクリーンする）のための隠喩として使用しています。実行という動作を表すために、XcodeはユーザがiTunes、Keynote、Automatorといったアプリケーションで再生や実行と関連付けている、右を差す三角形を用います。

Xcodeのツールバーはまた、ユーザがFinderやその他のMac OS Xのアプリケーションで見慣れた、情報ボタンも搭載しています。一般的な規則の通り、ツールバーアイコンは見分けられるように、その機能への手がかりを初見のユーザに与え、経験を積んだユーザがそれを忘れないための助けとなる、実世界のオブジェクトやユーザインタフェース要素を描きます。

各ツールバーアイコンを作ることは、ユーザがアイコンと、その目的と、位置をすばやく結びつけるために明らかに役立ちます。形状、色、図のバリエーションはいずれもあるツールバーアイコンを他のものと区別する役に立ちます。

けれども、同時に、あるアプリケーションのツールバーアイコンはできるだけその構図、色使い、大きさ、視覚的な比重といった点で互いに調和する必要があります。たとえば、図 10-14における各アイコンは個性的ですが、すべて同一の一般的な大きさ、構図、色の彩度（強さ）であり、他のものより重要なものは現れません。

ツールバー内専用にデザインされたアイコンは、あたかもあなたの目の前の棚に置かれているように現れますが、もしあなたがインタフェースのどこか別のところから認識できるコントロール（ポップアップメニューといった）を使うのであれば、そのコントロールは、その標準の外見と構図を維持していなければいけません。つまり、よく知られたインタフェース要素の、ツールバー版をデザインし直してはいけません。

図 10-15 円で囲われたアイコンはインタフェースの他のところでも現れるため、ツールバーで用いられるときも遠近法を維持します

視覚的に関連付けられたツールバーアイコンの系統を作ることは、あなたのアプリケーションがよくまとまっており、よくデザインされているというユーザの認識を強くすることができます。これを行う方法のひとつは、アイコンの形式と外見の一貫したテーマを用いることから始め、次にそれが意味を成すときにバリエーションを取り入れるというものです。

また、アプリケーションアイコンのバリエーションやあなたのアプリケーションの目的を象徴する図を、ツールバーアイコンでの共通要素として用いることを検討してもよいでしょう。たとえば、プレビューは図 10-16に示すとおり、自分のアプリケーションアイコンから写真の図をツールバーアイコンのいくつかにおいて再利用しています。

図 10-16 ツールバーアイコンでのアプリケーションアイコンの図の再利用

ツールバーの実装についての情報は、「ツールバー」（184ページ）を参照してください。

アイコンの構図と素材

さまざまな種類のアイコンを描くために用いられる視点と影は、オブジェクトが現実にはどのように現れるかを反映すべく意図されています。すべてのアクア インタフェース要素は、Mac OS 9以前のように左上角からではなく、真上からの共通の光源を持ちます。アイコンを捕らえている想像上のカメラの位置を変えることで、さまざまな構図が実現されます。

アプリケーションアイコンはあなたの目の前の机の上に乗っているかのように見えます。

図 10-17 アプリケーションアイコンのための構図：あなたの目の前の机の上に乗っている

ユーティリティアイコンはあなたの目の前の棚の上にあるかのように描かれます。平面的なオブジェクトは背後に適切な影を加えることで、後ろに壁があるかのように見えます。

図 10-18 平面的なユーティリティアイコンのための構図

ですが、ロケットのような実際に3次元の物体は、地上に置かれている状態で見られるほうがより現実味が増すでしょう。そのため、そのアイコンは下に影を落とすことで、棚の上に乗っているロケットを表します。

図 10-19 3次元物体のための構図

ツールバーアイコンについては、構図はこれまた正面からの、下に影を加えた、あたかもオブジェクトがあなたの目の前の棚の上にあるかのようにします。

図 10-20 ツールバーアイコンのための構図

実在する物体を表現するアイコンは、実際の素材でできているかのように見える必要があります。さまざまな物体を調査し、プラスチック、ガラス、紙、金属の特徴を学びましょう。あなたのアイコンは、その外見と同じくらいに重さと質感を伝えることに成功すれば、より写実的に見えることでしょう。

透過処理は、それが説得力があり、アイコンが語る素性を完成させる役に立つときにだけ使用してください。たとえば、あなたは透き通った運動靴なんて見たことがないでしょうから、あなたのアイコンではそれを使用しないでください。

図 10-21 素材：透過処理は意味を伝えるために使用されます

アクア アイコン作成のために提案する工程

あなたは最低限以下のファイルを提供する必要があります…

  • 128 x 128の画像（Finderアイコン用）
  • オペレーティングシステムがクリックできる領域を判断するための、画像の輪郭を定義するマスク画像

Finderに表示されるアイコンは、さまざまな大きさで見られます。Dockでは拡大されることがあり、実際の大きさでプレビューすることができ、またユーザは好みの大きさを指定できます。

どの大きさでも最適に見えるアイコンのためには、あなたはこのほかに32 x 32と16 x 16という、2つの異なる大きさでカスタム画像ファイル（「ヒント」）を提供する必要があります。Dockはヒントを使用しません（128 x 128版に洗練されたアルゴリズムを使用します）が、ヒントはFinderアイコンにおいて要となる細密描写を保つために重要です。

もしあなたが、決して大きさを変更しないつもりのアイコン—たとえば傾斜ボタン上の—を作成するなら、実際の大きさの画像だけで十分です。

ここでアイコン作成のために提案する手順を紹介します…

  1. アイコンの下書きをしましょう。

    あなたのデザインの概念と詳細を、ソフトウェアを用いるのではなく、紙に書き出しましょう。あなたは【アイコン編集の】アプリケーションを開くときまでには、考えを実行に移す準備ができている必要があります。

  2. アイコンのソフトウェア的な作図をしましょう。

    あなたは最終的なアイコンを、写真のように見せたいかも知れませんが、ほとんどの場合、実際の写真から始めるのはお勧めできません。【写真ではない】図版は、とても小さな空間に概念を伝えるための、より多くの柔軟性を提供します。また、図版はあなたに、過剰な細密描写、遠近法、明暗、質感、その他に対して必要な抑制を与えてくれます。

  3. 細密描写と色彩を加えましょう。

    あなたがより大きいバージョンのアイコンを作成する拡張のたびに、それが本当にアイコンの利便性に何かを加えるのか、それとも単に複雑さや乱雑さを加えるだけなのかを検討してください。

  4. 影を加えましょう。

    影は物体に立体感と現実味を与えます。またコラージュのようには見えなくなるため、アイコンの要素を互いに結びつける役に立ちます。光源は上方かつ物体のやや前方にする必要があります。その結果生じる影は、アイコンが平面上にあるという感覚を作り出さなければいけません。

  5. 画像編集プログラムにおいて、正確な効果を得るために画像を処理し、アイコンマスクを作成しましょう。
  6. アイコンを.icnsファイルに変換しましょう。あなたはこの手順をMac OS Xに含まれる開発者向けツールであるXcode Toolsに含まれるIcon Composerで完了できます。また、この手順を完了するために利用できる、3rdパーティ製のツールもいくつか存在します。

アクア アイコンをデザインするための秘訣

ここで、あなたのアプリケーションのために作り出されるその他の画像—たとえば、ラベルや一覧の項目を増やすための—にも適用される多数の提案を挙げておきましょう。

  • すばらしい外見のアクア アイコンのために、これらを作成する専門のグラフィックデザイナーを用意しましょう。
  • 構図と影は優れたアクア アイコンを作成するために最も重要な構成要素です。アイコンの上方からの単一光源を用いましょう。
  • 人々が容易に認識できる、普遍的なイメージを用いましょう。ある要素の、2次的な方向性に焦点を合わせることは避けてください。たとえば、メールアイコンのために、田舎の郵便箱は郵便スタンプよりもわかりにくいでしょう。
  • 単純化するために努力しましょう。アイコンの動作を捕らえた、もしくはコントロールを表現した単一のオブジェクトを使うようにしてみてください。基本的な図形から始めましょう。
  • アイコンがその素性を伝える助けとなるように、色彩を賢明に用いましょう。アイコンをよりカラフルにするためだけに色を使わないでください。滑らかな階調は、一般的に鋭い色の図形よりもよい方向に作用します。
  • あなたのアイコンの中でアクア インタフェース要素を用いることは避けましょう。実際のインタフェースと混同される怖れがあります。
  • あなたのアイコンの中では、アップルのハードウェア製品の複製を使用しないでください。これらのシンボルには著作権があり、ハードウェアのデザインは頻繁に変更されます。
  • あなたのインタフェースの中では、Mac OS Xのシステムアイコンを流用しないでください。同一のアイコンが複数の場所で、微妙に異なる事柄を意味しているのを見たユーザを混乱させる怖れがあります。
  • ツールバーアイコンは、その実際の大きさ（32 x 32）でデザインしましょう。その他のアイコンは、128 x 128であなたのアイコンの外見を完成させることに集中し、そこから各縮小版を展開しましょう。アイコン全体を一度に縮小するよりも、要素を個別に縮小し、次にこれらを結合する方が、通常は最適な結果となります。
←第９章：文字列
→第１１章：カーソル