共通デスクトップ環境スタイル・ガイド

第 4 章視覚的な設計

共通デスクトップ環境は視覚的なものが豊富な環境です。この章では、デスクトップ・スタイルと一致するアイコンやその他の視覚的な設計について説明します。デスクトップの背後にあるいくつかの設計思想を説明し、デスクトップのアイコンを作成するためのいくつかの有用なヒントを示します。

アイコンは、グラフィカル・ユーザ・インタフェース (GUI) の中に存在するオブジェクト (アプリケーション、ファイル、およびデバイス) を表現するグラフィックです。アプリケーションをデスクトップに適合させるということは、アプリケーションを表すアイコンと、そのアプリケーションが作成するデータ・ファイルを表すアイコンを設計するということです。これらのアイコンは、いくつかのサイズとカラーの濃さのものを作成しなければなりません。

この章では、アイコンが使用されるデスクトップ・コンポーネントと環境の要件について説明し、設計プロセスについて論じます。読者の実装の事情を考慮した一連の例が用意されています。

カラーの思想

他のほとんどの GUI では、カラーは、個々のアイコンや、ウィンドウ境界やタイトル・バーなどの特定のコントロール領域の中で、ローカルに、かつ特定の意味で使用されます。デスクトップでは、ほとんどすべてがカラーで描画され、黒い線が見あたらないほどカラーが使われています。

この環境でも、ほとんどのアイコンは、カラーをあまり使わず、主にグレーを使用します。このように、カラーの使用を制限することにより、デスクトップのパレットで使用する色数を最小限に抑えており、また視覚的にも優れた効果を得ています。アイコンは多くの場合カラーを持たず、つねにカラーの付いたバックグラウンドの上に表示されるため、より際立って見えます。

アイコンとは何か

アイコンは、通常は直接の操作によって、移動、コピー、削除、開くなどの操作ができる具体的なグラフィカルな要素と定義できます。

デスクトップ内の数多くのグラフィカル要素は操作不可能なので、技術的にいえばアイコンではありませんが、それでもアプリケーションの中では必要になります。このマニュアルでは、読者が用意しなければならない、あらゆる種類のグラフィカル要素を扱います。

図 4-1 デスクトップ環境の画面

アイコンは次の役割を果たします。

データおよびアプリケーション・オブジェクトの識別
オブジェクトの直接操作の支援
オブジェクトの状態を示す (選択など)
製品がユーザにわかるようにする
製品のオブジェクト間の関係を示す

ここに示したアイコンの目的は、いずれもアイコンを設計する上でのガイドラインとして使用できます。特には、視覚上の設計者は、これらの要件に関して大きな責任を負います。たとえば、オブジェクトの直接操作と、オブジェクトの状態と位置の表示はデスクトップ・システムによって処理されますが、製品の識別と伝達や、オブジェクト間の関係は、おもに視覚上の設計者の責任です。

推奨

ey:

アイコンはオブジェクトとアプリケーションを表すためにのみ使用する。

アイコンはオブジェクトの視覚的な表現であり、直接操作を支援します。アイコンが、ユーザによるドラッグや選択などができない図などの他の目的に使用されると、一貫性がなくなって混乱が起こります。

アイコンの設計の際には、上記のような設計ガイドラインのセットの適用を考慮する必要があります。ユーザのデスクトップに新しい製品を導入することは、すでに存在するアイコンに新しいアイコンのセットを追加するということです。これらのガイドラインに従うことにより、新しいアイコンがユーザの期待どおりになるでしょう。

アイコン中心のコンポーネント

ファイル・マネージャ

ファイル・マネージャは、ユーザのファイル構造の表示と構成を担当するツールです。ファイル・マネージャにアイコンで表示されるオブジェクトの基本型は、ファイル、ディレクトリ (フォルダ)、実行可能ファイル、およびアクションです。この章では、これらのオブジェクトをドキュメント、フォルダ、およびアプリケーションと呼びます。ファイル・マネージャはアイコンを 2 つのサイズで表示します。これらは [表示オプションの設定] ダイアログ・ボックスの中で [大型アイコン] と [小型アイコン] と呼ばれます。[大型アイコン] のサイズは 32*32 で、[小型アイコン] のサイズは 16*16 です。

図 4-2 ファイル・マネージャで使用されるサイズ 3232 と 1616 のアイコン

ドキュメント、フォルダ、およびアプリケーションは、3 種類の形状で表現されます。ドキュメントは、紙のように見える縦型の長方形です。フォルダはファイル・フォルダのように見える、タブが付いた横型の長方形です。アプリケーションは任意の形状を取ることができ、アイコン・スクエア全体を使用します。ファイル・マネージャの中のすべてのオブジェクトは、ユーザに操作が可能であること、つまりドラッグ＆ドロップが可能であることを示さなければなりません。

アプリケーション・マネージャ

このウィンドウはファイル・マネージャに似ていますが、焦点はドキュメントではなく保持しているアプリケーションにあります。デスクトップ内のネットワーク・アクセス可能なすべてのアプリケーションは、フォルダではなくアプリケーション・グループと呼ばれるコンテナに格納されています。

アプリケーション・マネージャは「ネットワーク上の店」に似ています。これはユーザがシステム上で使用可能な最新のアプリケーションを探す場所です。

図 4-3 アプリケーション・マネージャのアプリケーション・グループ・アイコンの例

図 4-3 のようなアプリケーション・グループ・アイコンは、オブジェクトのコレクション、この例では関連するオブジェクトのコレクションを表すという点で、フォルダに似ています。たとえば、アプリケーションがサポート・ファイルを必要としていたり、サンプル・ファイルを付属させたりする場合は、ユーザがアプリケーションの関連ファイルを探す場所を表す独自のアプリケーション・グループ・アイコンを設計できます。

フロントパネルとサブパネル

フロントパネルはデスクトップの「コントロール」パネルであり、通常は画面の一番下に表示されます。フロントパネルのアイコンを使って、ユーザが最もよく使用するアプリケーションに速やかにアクセスできます。

図 4-4 [個人アプリケーション] サブパネルを開いたフロントパネルの画面の一部

フロントパネルは、フロントパネルの矢印ボタンでアクセスできるアイコンのサブパネルも持っています。サブパネルは概念上、フロントパネルのアイコンの拡張です。たとえば、図 4-4 は [個人アプリケーション] サブパネルを開いた様子を示しています。ユーザは [アイコンのインストール] ドロップ領域上にアプリケーションをドロップすることにより、このサブパネルにアプリケーションを追加できます。ユーザはポップアップ・メニューを介して、サブパネルのアイコンをフロントパネルに置くこともできます。

アイコン化されたウィンドウのアイコン

アイコン化されたウィンドウのアイコンは、ウィンドウがアイコン化されているときにデスクトップに表示されます。アイコンはアイコン化されたウィンドウを制御しているアプリケーションを表さなくてはなりません (図 4-5 を参照)。これらのアイコンは、フロントパネルで使用されているアイコンとサイズは同じですが、実行中のアプリケーションを表しているという点が異なります。

図 4-5 端末エミュレータ、テキスト・エディタ、カレンダ、ファイル・マネージャのアイコン化されたウィンドウ・アイコン

その他のグラフィック

このカテゴリの主な要素には、ボタン・グラフィック、ツール・バー・グラフィック (図 4-6 を参照)、およびラベルとして使用されるグラフィックがあります。ペイント・プログラムのツール・パレットも、この一例です。プリンタ・ダイアログ・ボックスのドキュメントの方向ボタン (ランドスケープまたはポートレート) も、この一例です。これらはアプリケーションのために作成する、他の場所では使用されないグラフィックです。

図 4-6 カレンダ・アプリケーションで使用されるツール・バーの例

アイコンでのカラーの使用

デスクトップ・アプリケーション用のアイコンを設計するときには、使用可能なカラー・パレットと、カラーの動的マッピングに注意する必要があります。

アイコン・カラー・パレット

デスクトップのアイコンは 22 色のパレットを使用します。

8 種類のグレー
8 色のカラー: 白、黒、赤、青、緑、シアン、マゼンタ、および黄色
5 種類のダイナミック・カラー: [フォアグラウンド]、[バックグラウンド]、[トップシャドウ]、[ボトムシャドウ]、[選択]
バックグラウンドが透けて見える透明な「カラー」

これらのカラーは、デスクトップ・アイコンを作成するための推奨ツールであるアイコン・エディタのデフォルトのカラーです (図 4-7 を参照)。このカラーのセットは、アイコンを作成するのに適切なパレットです。この限定されたパレットは、必要以上に多くのカラーを使わずに、アイコンの魅力とわかりやすさを最大限に高めるために選ばれました。

ここに示した以外のカラーを使用する場合、アイコンはカラー点滅効果を起こして、アイコンが読めなくなることがあります。アイコンの外観を確実に予想できるようにする最もいい方法は、デスクトップ・パレットの 22 色だけを使用することです。

推奨

ez:

アイコンは 22 色のカラーだけを使用する。

図 4-7 アイコンに使用できる 22 種類の共通デスクトップ環境カラーを表示しているアイコン・エディタ

ダイナミック・カラー

ダイナミック・カラーの限定された役割を理解することは重要です。これらは、表示されたアイコン上のユーザ・インタフェース要素を表示するのに使用されるカラーを表します。ファイル・マネージャ内でアイコンを表示する場合に、バックグラウンド・カラーはファイル・マネージャが決定します。ユーザがスタイル・マネージャでカラー・パレットを変更した場合は、ユーザ・インタフェースのカラーもそれに応じて変化し、そこにアイコンを表示するバックグラウンド・カラーが変化します。

一般に、これらのカラーは大部分のアイコンでほとんど使用されません。これらが使用される方法としては、次の 2 つがあります。

アイコンが区切られた領域全体を覆っていない場合は、未使用の領域を透明カラーで塗りつぶします。
アイコンの下にシャドウを描くことができます。これはフロントパネル・スタイルのアイコンでのみ推奨されます。ファイル・マネージャのアイコンには使用しないようにします。詳細は、「フロントパネルのアイコン・スタイルのオプション」を参照してください。

図 4-8 ダイナミック・カラー・シャドウの例

設計思想と有用なヒント

視覚上の設計者は、アイコンの設計に際し、個別的と全体的の両方のアプローチをしなくてはなりません。各アイコンは、そのオブジェクトのメタファに従って個別に設計されなくてはなりません。アプリケーションのアイコンのセット全体によって作り出される視覚的効果に注意を払います。それらはアイコン・ファミリとして協調して動作しなければなりません。

アイコンの設計は反復プロセスです。紙を使うにせよ、コンピュータを使うにせよ、その反復の中で、できるだけ多く保存することをお勧めします。ユーザを対象にしてアイコンをテストするときには、いくつもの選択肢を用意しておくと便利です。

デスクトップのグラフィック言語の背景にある思想は、コンピュータの世界が実世界に近ければ、ユーザにとって便利だということです。これはプッシュ・ボタンやメニュー・バーなど、ウィンドウやコントロールの 3 次元的外観から、アイコンの一般的な外観にまで広がる問題です。

アプリケーション・アイコンには、ロゴから、図 4-12 に示したペンキ用のバケツのようなものまで、さまざまなものが考えられます。「リアル」に見えるアイコンは、ドラッグ＆ドロップなどの操作が実際に可能に思えるような外観をしています。

カラーを使った設計

アイコンは、主に 8 種類のグレーを使用し、8 色のカラーはたいていの場合アクセントとして使用します。8 色のカラーは非常に鮮明で、すぐに使いすぎる傾向があります。グレーを中心として使うことで、すでにカラフルなデスクトップ環境とうまく調和するようになります。カラーはグレーでディザリングをかけ、カラーの色調を抑えて、より広い領域をカバーすることもできます。また、グレーはアイコンの境界をスムーズにするためにも使えます。これは「平滑化」と呼ばれることがあります。

ユーザがカラー・パレットを変更するとアイコンの外観が変わるので、ファイル・マネージャ・アイコンにはダイナミック・カラーを使わないようにすることを推奨します。このような変化は不適切であり、また予期しない見苦しい配色になる可能性があります。

アイコン・スタイル

アイコンにはあらゆるグラフィカル・スタイルが使用されます。最も初期の GUI の時代においては、単純な黒のアウトラインのスタイルが好まれていました。カラーが追加されるにつれ、黒い線の中にカラーを入れて、色の付いた本のようになりました。これは、特に白のバックグラウンドの上に置かれるときは、自然な描画スタイルだといえます。アイコンには写実的なものが多いですが、抽象的なものもあります。

図 4-9 カレンダ・アイコン。白黒のアウトライン・スタイル (左) とデスクトップのグレー・スタイル (右)

デスクトップは、カラーの付いた中間調のバックグラウンドを普遍的に使用し、明るいシャドウと暗いシャドウの両方を使って、かなり現実的なイメージを作り出しています。読者も、この表現スタイルを研究してみてください。

図 4-10 デスクトップの 3 次元アイコンの例

スタイルのもう 1 つの要素が、オブジェクトを描くときの視点です。共通デスクトップ環境は、図 4-10 に示すように、対象となるオブジェクトがプリンタのように 3 次元の物体である場合には、少し上から見た視点を使用します。アイコンはドラッグ＆ドロップが可能であることがわかるように、3 次元的な感じが出るような処理を少しだけ加えるのが一番です。

図 4-11 共通デスクトップ環境スタイルに変換された XPM と XBM フォーマットのアウトライン・スタイル

アプリケーション・アイコンの設計

アプリケーション・アイコンは、読者が設計する中でも最も重要なアイコンです。これは製品のアイデンティティが現われる場所であり、アプリケーションの行う作業をユーザに明確に知らせる機能も持っています。アプリケーション・アイコンは、ユーザがアプリケーションを実行するときに開くアイコンです。

アプリケーション・アイコンの形状に関して決まった規則はありません。アイコンの領域全体を占めることも、不規則な形を取ることもできます。アイコンには 3 次元的なスタイルを持たせることを推奨します。図 4-12 に示したアイコンは、デスクトップで使用されているアプリケーション・アイコンですが、独自のアイコンを設計するときにテンプレートとしても使用できます。

図 4-12 デスクトップで使用されるアプリケーション・アイコンの例

アプリケーション・グループ・アイコンの設計

アプリケーション・グループ・アイコンは、ユーザがアプリケーションや、ReadMe ファイルやサンプル・ファイルなどの、開発者が添付した他のファイルを探すコンテナを表します。このアイコンは、ユーザがコンテナだとわかるように、フォルダやボックスなどの形にします。

図 4-13 アプリケーション・グループ・アイコンの例

アプリケーション・マネージャで使用されている概念は、図 4-13 に示すように、アコーディオン・スタイルのフォルダに基づいたアイコンです。このアイコンは十分に大きく、ユーザがその中に何があるか判るようにイメージをフォルダの表面に表示しています。

ドキュメント・アイコンの設計

ドキュメント・アイコンは、そのドキュメント・アイコンに格納されているデータの種類と、そのドキュメントに関連付けられているアプリケーションを、ユーザが理解できるように作成していなければなりません。図 4-14 に、デスクトップで使用されているいくつかのドキュメント・アイコンを示します。これらは、独自のドキュメント・アイコンを設計する際のテンプレートとして使用できます。

図 4-14 デスクトップで使用されているドキュメント・アイコンの例

複数のファイル・フォーマットをサポートするアプリケーションは、各種の出力形式に応じて、異なるドキュメント・アイコンを必要とします。各フォーマットでまったく異なるグラフィックを作成するのではなく、基本ファイルに使用するグラフィックに「タグ」を追加することで、各種のフォーマットのグラフィックを作成することもできます。

ドキュメント・アイコンの場合、ドキュメントの基本の長方形は、アイコンの正方形の領域の中で左に寄せられています。タグのアプローチを使う場合は、タグをアイコンの右側に、ちょうど半分が基本アイコンに重なるように、ただし内容を説明するグラフィックが隠れないように配置します。図 4-14 を参照してください。

国際的アイコン

プログラムを複数の国で使用する場合は、全世界で使用されるアイコンを設計するか、国ごとに別のアイコンを作成します。

全世界的なアイコンは、普遍的に理解されるものでなければなりません。たとえば、ドキュメント・アイコンは、世界のあらゆる場所で使用される紙を表しているので、世界のどこでも理解されます。メールボックスやごみ箱のようなもののアイコンは、国によって異なる外観をしているため、世界共通ではありません。

ユーモアは翻訳しにくいものです。テキストとシンボルも国ごとに違うので、アイコンでは使用するべきではありません。動物や体の部分 (頭、手など) は、さまざまな意味を持ち、一部の文化では不快な意味合いを持つこともあるので、避けるようにします。

推奨

fa:

アイコンは国際的に使用できるように設計しなければならない。

他のプラットフォームとの違い

デスクトップは、読者が慣れているアプリケーションの世界と、次の点で異なっています。

デスクトップは、より高解像度のディスプレイに対応して、より大きな 48*48 のサイズを必要とします。
デスクトップのアイコンのためのカラー空間は異なっています。他の環境のアイコンを再利用することも可能ですが、アイコンにカラーが含まれている場合は、デスクトップ・パレットにマッピングするために一部のカラーを変更しなければならない可能性があります。基本的な設計は問題なく再利用できるはずです。カラーを変換するときは、表 4-1 を参照してください。
最も重要な違いは、デスクトップ・アイコンはほとんどの場合、白以外のバックグラウンド・カラーの上に表示されるのに対し、他の環境では通常、白のバックグラウンドに表示されるという点でしょう。このため、他の環境のアイコンを単にコピーするだけでは、アイコンが読めなくなる可能性があります。他の環境のアイコンをデスクトップで使用する前に、アイコンをテストしてください。

表 4-1 共通デスクトップ環境アイコン・カラーの RGB 値


カラー	RGB 値	グレー	RGB 値
黒	0, 0, 0	Gray1	225, 225,225
白	255,255, 255	Gray2	200, 200,200
赤	255, 0, 0	Gray3	175, 175,175
緑	0, 255, 0	Gray4	150, 150,150
青	0, 0, 255	Gray5	125, 125,125
黄	255, 255, 0	Gray6	100, 100, 100
シアン	0, 255, 255	Gray7	75, 75, 75
マゼンタ	255,0,255	Gray8	50, 50, 50

必要なアイコンの実装

この節では、デスクトップ環境で正確に表示されるアイコンを作成するために知っておかなくてはならない、フォーマット、解像度、サイズ、名前の付け方などについて説明します。

フォーマット

デスクトップはカラー・モードとモノクロ・モードの両方で動作するので、アイコンはカラーの XPM とモノクロの XBM の 2 つのフォーマットで作成しなければなりません。アイコン・エディタはアイコン・ファイルを両方のフォーマットで保存します。

注 -

アイコン・エディタが作成するモノクロ・アイコンは、通常はさらに手を加える必要があります。たとえば、カラーとグレーを黒と白に変換する際に、アイコンの一部が消えてしまったり、黒く見えるようになったりすることがあります。

デスクトップでは、ボタンとパレットは XBM フォーマットと XPM フォーマットのどちらも使用できます。ボタン、パレット、およびツール・バー・グラフィックでは、可能な限り XPM フォーマットを使用することをお勧めします。

XBM ファイル・フォーマットは、フォアグラウンドとバックグラウンドの 2 つのカラーしか持ちません。デスクトップでは、フォアグラウンド・カラーは固定されておらず、バックグラウンド・カラーに応じて変化します。あるカラー・スキームでは、バックグラウンド・カラーは暗いグレーで、すべてのテキストとグラフィックは白で表示されます。しかし、明るいグレーのバックグラウンドを持つカラー・スキームでは、テキストとグラフィックは黒で表示されます。

このようなフォアグラウンド・カラーの反転は、一部のアイコンでは奇妙な効果を生み出します。矢印のような単純な形状では、悪影響はありません。しかし、他のイメージでは、フォアグラウンド・カラーの反転によって作成された「ネガ」が判別不可能になるため、使用不可能になることがあります。

たとえば、フォアグラウンドが白のアイスクリーム・コーンのグラフィックで、アウトラインで描かれたコーンの上に白いアイスクリームの固まりが盛られているものは、アイスクリーム・コーンが黒のアウトラインになり、アイスクリームも黒になると、かなり違った風に見えます。ユーザがアイスクリームの味を選択できるというようなアプリケーションでは、カラーが変化すると、ユーザに奇妙なメッセージが伝わってしまいます。

図 4-15 フォアグラウンドが反転されたモノクロ (XBM) ビットマップ

解像度

デスクトップのディスプレイ解像度は、低解像度 (640*480)、中解像度 (800*600)、および高解像度 (メガピクセル) の 3 つです。フロントパネルや一部のアイコンのサイズは、ディスプレイの解像度に応じて自動的に変化します。このため、アプリケーションは複数のサイズのアイコンを用意しなければなりません。

推奨

ew:

アプリケーションが表示するすべてのアイコンやグラフィックは、低 (640*480)、中 (800*600)、および高 (メガピクセル) 解像度で判別できなければならない。言い換えれば、低、中、および高解像度のディスプレイのために、複数のサイズの視覚的要素を用意する。

サイズ

デスクトップ・アイコンには、16*16、32*32、および 48*48 の 3 つのサイズがあります。これらは、それぞれ 16、32、48 と呼ばれます (拡張子はそれぞれ .t、.m、.l です)。PC ドメインに由来するアプリケーションの場合、デスクトップで使用されるサイズ 16 と 32 のアイコンはよく知っているサイズです。表 4-2 に、各サイズの使用場所の定義を示します。

表 4-2 アイコンのサイズと使用方法


コンポーネント	低解像度	中解像度	高解像度
ファイル・マネージャ	32, 16	32, 16	32, 16
アプリケーション・マネージャ	32, 16	32, 16	32, 16
フロントパネル	32	48	48
サブパネル	16	32	32
フロントパネル・コントロール	16	16	16
アイコン化されたウィンドウ	32	48	48

注 -

24*24 のアイコン (拡張子は .s) は、ツールバー・グラフィックなどの内部アプリケーション・グラフィックに使用され、デスクトップ・アイコンの標準セットには含まれていません。

表 4-3 に、アプリケーションの作成に必要なアイコンのリストを示します。各タイプとサイズについて、1 つずつと仮定すると、合計で 16 個のアイコン・ファイルが必要となります。図 4-16 に、アイコン・セットの例があります。

表 4-3 最小限必要なアイコン・セット


アイコンのタイプ	カラー	カラー	カラー	モノクロ	モノクロ	モノクロ
	16	32	48	16	32	48
アプリケーション・アイコン	v	v	v	v	v	v
ドキュメントまたはファイル・アイコン	v	v		v	v
アプリケーション・コンテナ・アイコン	v	v		v	v
アイコン化されたウィンドウ			v			v

推奨

ex:

アプリケーションが表示するアイコンやグラフィックは、白黒のモニタとグレースケール・モニタできれいに表示されるように設計されていなければならない。これらの視覚的要素は、色数の少ない (16 色) システムでもきれいに表示されなければならない。

アイコンの命名規則

アイコンのベース名は 7 文字以下でなければなりません。表 4-4 に示すように、サイズおよびカラーの拡張子が名前に追加されます。

表 4-4 アイコン名の規則


サイズ	カラー	白黒	白黒マスク
48	Iconame`.l.pm`	Iconame`.l.bm`	Iconame`.l_m.bm`
32	Iconame`.m.pm`	Iconame`.m.bm`	Iconame`.m_m.bm`
24	Iconame`.s.pm`	Iconame`.s.bm`	Iconame`.s_m.bm`
16	Iconame`.t.pm`	Iconame`.t.bm`	Iconame`.t_m.bm`

拡張子.pm はカラー XPM フォーマットを表します。拡張子 .bm は XBM フォーマットを表します。拡張子 _m は、白黒アイコンのマスクを表します。

これらすべての構成のアイコンを用意する必要はないということに注意してください。表 4-3 に必要なアイコンのリストを示します。たとえば、.s アイコンは主にツールバーのようなオブジェクトに使用されますが、アプリケーションによってはツールバーがないこともあります。

図 4-16 メール・プログラムのために最小限必要なアイコン・セットの例

揃え方

アイコンに使用するグラフィックによっては、ビットがアイコンに割り当てられたスペース全体を占有しないこともあります。空のスペースをデスクトップ・アイコンのどこに置くかを決めるための推奨規則を、図 4-17 に示します。これらの規則に従うことで、ファイル・マネージャやフロントパネルにアイコンを表示したときに、他のアイコンと視覚的に揃って表示されることが保証されます。

推奨	fb:	1616 アイコンと 3232 は左揃えである。空のビットは、アイコン領域の右側に置かれる。
推奨	fc:	48*48 アイコンはアイコン領域内で中央に揃えられる。

図 4-17 右側にタグを付けた、左揃えされた 32*32 アイコンの例

アイコン・サイズのオプション

ドキュメント・アイコンやアプリケーション・グループ・アイコンは、アイコン化されたウィンドウ・アイコンに使用されることがなく (代わりにツールのアイコンが使用されます)、フロントパネルでも使用されないので、サイズ 48 のアイコンを作成する必要はありません。しかし、ユーザがこれらのアイコンをフロントパネルに配置する可能性はあります。

サイズ 48 のアイコンが使用できない場合には、フロントパネルは代わりにサイズ 32 のアイコンを使用します。アイコンがフロントパネルで使用される可能性がある場合は、サイズ 48 のアイコンを用意することもできます。

フロントパネルのアイコン・スタイルのオプション

フロントパネルにデフォルトで表示されるアイコンは、ファイル・マネージャのアイコンとは若干異なる外観をしています。これらのアイコンは表面にエッチングが施されたように見えます。これらのアイコンはドラッグ＆ドロップできないため、このように安定した外観になっています。

デスクトップのデフォルト・アイコンのようにエッチングが施された外観を持つ、サイズ 48 のアイコンを用意する必要はありません。アイコンがフロントパネルで使われるか、使われるとしたらどういうときなのかを判定するのは簡単なことではありません。このため、この使用法のために設計を行うのではなく、より一般的なファイル・マネージャでの使用のために設計を行うことを推奨します。

フロントパネルのアイコンを設計することを決めた場合は、次に示すエッチングが施された外観を作成するための指示を参考にしてください。このスタイルを実装する際には、視覚上の設計者の協力を得ることを強く推奨します。

エッチングの施された外観の実現

エッチングを適用するためには、ダイナミック・カラーのことを理解しておく必要があります。まず、48*48 のスペースを完全には使用していないサイズ 48 のアイコンから作業を始めます。アートワークは、エッチング用に、すべての辺に 2、3 ピクセルの余裕を持たせておく必要があります。

図 4-18 左上から照らされたアイコンの例

アイコンは明るいカラーと暗いカラーの両方で、できればグレーで描かれなければなりません。アイコンは左上から照らされていなければなりません。上と左の辺には明るいカラーを、下と右の辺には暗いカラーを使用します。図 4-18 に、エッチングを適用する前のデスクトップのテキスト・エディタ・アイコンを示します。

図 4-19 `ボトムシャドウ・カラー`および`トップシャドウ・カラー`の適用

エッチング効果は、アイコンのアートワークの上と左の辺のすぐ外に 1 ピクセルのボトムシャドウ・カラーの行を描き、アイコンのアートワークの下と右の辺のすぐ外に 1 ピクセルのトップシャドウ・カラーの行を描くことによって実現されます。

アイコンとエッチングの影の照明モデルに一貫性がないと効果が出ません。アイコンが黒い線で描かれている場合、上と左の辺に黒い線を重ねるとエッチングの外観はおかしくなります。

外観に適切なエッチング効果を与えて、アイコンをフロントパネルの他のアイコンと調和させるには、アイコンのスタイルが非常に重要です。デスクトップに付属するフロントパネルのアイコンを参考にして研究してください。遠近感のあるアイコン、黒いアウトラインを持つアイコン、および「板」が浮き出たようなアイコンは使用できません。

エッチングの外観の発展

エッチングは、アイコンをエッチングが施されている表面の一部に見せかける 1 つの手段です。アイコンのすべての部分が表面にエッチングされている必要はありません。選択的なエッチングを施して、オブジェクトのアンカーの一部をパネルの中に固定し、別の一部をパネルの上に置いたり、少しだけ飛び出しているように見せかけることもできます。

図 4-20 鉛筆を表面から突き出して、ページのアンカー処理を行う例

たとえば、[ヘルプ] アイコンは、右側の本の下と横のトップシャドウ・カラーで作られたエッチングを取り除き、これを選択カラーのシャドウに置き換えています。これにより、1 冊の本が本棚から若干飛び出しているように見えます。プリンタ・アイコンでは用紙トレーが突き出しています。[スタイルマネージャ] アイコンでは、パレット、文字、およびマウスが、エッチングされたウィンドウ枠の上方にあります。[ファイルマネージャ] アイコンはさらに先に進んで、オープニングの端だけがエッチングされており、引き出しの前面と、そこから出ているフォルダは飛び出して、影さえも付いています。

原理としては、アートワークの中の何かをアンカー処理し、オブジェクトの 3 次元的な性質も強調することが重要です。アイコンの中の可変的な内容、たとえばプリンタ・ページや [メール・プログラム] アイコンのメール封筒などは、アンカー処理するべきではありません。

第 4 章 視覚的な設計