アイコン

デザイン コンセプト
ガイドライン
   遠近法
   光源
   影
   色と彩度
   サイズ要件
   細部描写のレベル
   アイコンの開発
   リスト ビュー、ツール バー、ツリー ビューなどのコンテキスト内のアイコン

"アイコン" は、オブジェクトを画像で表現したものです。プログラムの視覚的なアイデンティティとしての外観面だけでなく、ユーザーがほぼ一瞬で把握できる形で意味を伝える手段という実用面でも重要です。Windows Vista® には新しいスタイルのアイコン表現が導入され、Windows にさらなるディテールと洗練性を加えています。

注: 標準アイコンに関するガイドラインは、別の項目として記載しています。

デザイン コンセプト

Aero とは、Windows Vista のユーザー エクスペリエンスの呼称です。美しいデザインとしての価値と、ユーザー インターフェイス (UI) を背後から支えているビジョンの両方を表現しています。Aero は、"Authentic、Energetic、Reflective、Open" の略です。Aero での目標は、プロフェッショナルかつ美しいデザインを確立することです。Aero の美しさは高品質でエレガントなエクスペリエンスを生み出し、ユーザーの生産性を向上するばかりでなく、感情的な反応も呼び起こします。

Windows Vista のアイコンは、Windows® XP スタイルのアイコンと次の点が異なります。

• イラスト風スタイルから抜け出してより写実的なスタイルになっていますが、写真ほどリアルではありません。アイコンは象徴化されたイメージであるため、写真のようなリアルさよりも見栄えの良さが重視されます。
• アイコンの最大サイズは 256 × 256 ピクセルで、高 dpi 表示に適しています。これらの高解像度アイコンを使用することで、リスト ビューで大きなアイコンを高画質で表示できます。
• 通常は決められたドキュメント アイコンが表示されますが、実用的な場合は常にコンテンツのサムネイルで置き換えられるため、ドキュメントを容易に識別し、発見できるようになります。
• ツール バーのアイコンは、小さいサイズおよび視覚的な区別のために最適化されるので、描画は詳細ではなく遠近法も適用されていません。

優れたデザインのアイコンとは、次のようなものです。

• プログラムの視覚的な情報伝達性を高める。
• ユーザーの、プログラムのデザインに対する全体的な印象と操作性の評価に大きな影響を与える。
• プログラム、オブジェクト、アクションなどの識別、習得、探索を容易にし、ユーザビリティを向上する。

次のイメージは、Windows Vista のアイコン表現である Aero style と、Windows XP で使用されるアイコン表現スタイルの違いを示しています。

Windows Vista のアイコン (左側の錠と鍵) は美しく明確、かつ細部が描写されています。これらのアイコンは、描画されたというよりもレンダリングに近いものですが、写真のような完全なリアルさはありません。

Windows Vista のアイコン (左側の 2 つ) は、プロフェッショナルで美しく、細部まで注意が行き届いていることによりアイコンの品質が向上しています。

Windows Vista のアイコンでは、光のバランスが表現され、遠近表現とディテールを正確に認知できるようになっています。そのため、アイコンの大小にかかわらず、間近から見ても遠くから見ても見栄えの良いものになっています。さらに、このアイコン表現スタイルは高解像度の画面に有効です。

これらの例では、さまざまなタイプのアイコン (遠近法で表現された 3D オブジェクト、正面からの (フラットな) アイコン、およびツール バー アイコン) を示しています。

ガイドライン

遠近法

• Windows Vista のアイコンは、3D で立体的なオブジェクトとして遠近法で表現されるか、または真正面から見た 2D オブジェクトとして表現されます。ドキュメントや紙など、実際に平面的なファイルやオブジェクトには、フラット アイコンを使用します。

  

  典型的な 3D アイコンとフラット アイコン

• 3D オブジェクトは、低い俯瞰から見た、2 つの消失点を持つ立体オブジェクトとして遠近法で表現します。

  

  この例では、3D アイコンで一般的な遠近法と消失点を示しています。

• 同じアイコンでも、小さいサイズの場合は、遠近法表示から真正面の表示に変更できます。大きさが 16 × 16 ピクセル以下の場合は、アイコンを真正面からレンダリングします。大きいアイコンの場合は、遠近法表示を使用します。
  • 例外: ツール バーのアイコンは、大きいサイズであっても常に正面向きで表示します。

  

  この例では、同じアイコンのサイズ別の扱いを示しています。

光源

• 遠近法グリッド内のオブジェクトに対する光源は、オブジェクトからわずかに手前、かつわずかに左側の上方に設定します。
• この光源による影を、オブジェクトの底部から後方および右側にわずかに伸ばします。
• すべての光線は平行にし、太陽光線のようにオブジェクトに同じ角度で当てます。すべてのアイコンおよびスポットライト効果で、同じライティング条件にすることを目標にします。平行な光線を当てることで、均一な長さと濃さで影が入り、複数のアイコン間の一貫性が向上します。

影

全般

• 影を使用して、背景から視覚的にオブジェクトを浮き出させ、3D オブジェクトを宙に浮いているのではなく接地しているように表示します。
• 影の不透明度は、30 ～ 50% の範囲にします。アイコンの形状や色に応じて、異なる不透明度の影を使用することが必要な場合もあります。
• アイコン ボックスのサイズで影が切り詰められないように、必要に応じて影をぼかしたり、短くします。
• 24 × 24 以下の小さなサイズのアイコンには、影を使用しないでください。

  

  典型的なアイコンの影

フラット アイコン

• フラット アイコンは、通常、ファイル アイコンおよび平らな現実世界のオブジェクトを示すアイコンに使用します。これにはドキュメントや紙などが含まれます。
• フラット アイコンに対しては光源を左上 130 度に設定します。
• 小さなアイコン (たとえば 16 × 16 や 32 × 32) は、見やすいように単純化されます。ただし、アイコン内に反射がある場合に、小さな影を使用することもあります (反射も多くの場合は単純化されます)。影には、不透明度 30 ～ 50% を使用します。
• フラット アイコンにレイヤー効果を使用できますが、他のフラット アイコンとの比較で使用する必要があります。最適な外観、および同じサイズのアイコンや Windows Vista の他のアイコンとの一貫性を考慮して、オブジェクトの影は多少変化します。影の修正が必要となる場合もあります。特に、オブジェクトが他のオブジェクトの上に重なっている場合です。
• 目的の効果を得るためには、ごく少量の色を使用します。影は、オブジェクトの収まりを良くするためのものです。色によって影は重くも軽くも見え、重すぎる場合はイメージをゆがめることもあります。

  

  [レイヤー スタイル] ダイアログ ボックスでの [ドロップ シャドウ] (影) オプション、およびフラット アイコンでの典型的な影

基本的なフラット アイコンでの影の範囲

特性	範囲
色	黒
描画モード	乗算
不透明度	アイテムの色に応じて 22 ～ 50%
角度	120 ～ 130 (グローバル光源使用の場合)
距離	3 (256 × 256 の場合） ～ 1 (32 × 32 の場合)
スプレッド	0
サイズ	7 (256 × 256 の場合) ～ 2 (32 × 32 の場合)

3D アイコン

• 状況に応じて 3D アイコンの影を作成します。影は投影距離の範囲内に収まるようにし、完全な透明になるまでぼかします。影を付ける必要があるサイズの場合は、アイコン全体のサイズより少し小さめな画像を作成し、影を付ける領域を確保します。アイコンの端で影が途切れないようにします。

これらの例では、オブジェクト自体の形状や配置に基づいて作成された各種アイコンを示しています。アイコン ボックスのサイズによって切り詰められないように、影をぼかしたり、短くすることが必要な場合もあります。

色と彩度

• 通常、Windows Vista の色の彩度は Windows XP より低くなっています。
• グラデーションを使用して、よりリアルな外観のイメージを作成します。
• 標準アイコン用のカラー パレットはありませんが、多くのコンテキストやテーマと調和して表示されるようにする必要があります。色の標準セットを優先し、警告アイコンなどの標準アイコンの配色は変更しないでください。ユーザーが意味を解釈する際に混乱が生じます。その他のガイドラインについては、「色」を参照してください。
• アイコン ファイルには、8 ビットおよび 4 ビットのパレットを使用したバージョンが必要です。これは、リモート デスクトップでの既定の設定をサポートするためです。これらのファイルはバッチ処理で作成できますが、より見やすくするために修整が必要な場合があるため、確認が必要です。

  

  カラー パレットに厳密な制限はありませんが、最も高い彩度となる純色 (右上) の使用は避けます。

• ビット レベル: ICO デザイン、32 ビット (アルファを含む) + 8 ビット + 4 ビット (自動ディザリング、ピクセル拡大用途のみで最重要)。256 × 256 ピクセル イメージの 32 ビット コピーのみ含めます。また、256 × 256 ピクセル イメージのみファイル サイズを小さく保つために圧縮します。いくつかのアイコン ツールでは、Windows Vista 向けの圧縮が提供されています。
• ビット レベル: ツール バー用、24 ビット + アルファ (1 ビット マスク)、8 ビットおよび 4 ビット。
• ツール バーまたは AVI ファイル: 透明色の背景として、マゼンタ (R255 G0 B255) を使用します。

サイズ要件

全般

• 目につく場所のアイコンには特に注意を払う必要があります。これらには、メイン アプリケーションのアイコン、Windows エクスプローラーで表示されるファイル アイコン、スタート メニューやデスクトップに表示されるアイコンなどが含まれます。
  • アプリケーション アイコンおよびコントロール パネルのアイテム: 16 × 16、32 × 32、48 × 48、256 × 256 でフル セットとなります。(コードで 32 ～ 256 に拡大縮小します)。.ico ファイル形式である必要があります。クラシック モードの場合、フル セットは 16 × 16、24 × 24、32 × 32、48 × 48 および 64 × 64 になります。
  • リスト アイテムのアイコンのオプション: ファイルの種類 (.doc など) のライブ サムネイルまたはファイル アイコンをフル セットで使用します。
  • ツール バーのアイコン: 16 × 16、24 × 24、32 × 32。ツール バーのアイコンは、サイズが 32 × 32 であっても、3D ではなく常にフラットにすることに注意してください。
  • ダイアログ ボックス アイコンおよびウィザード アイコン: 32 × 32 および 48 × 48。
  • オーバーレイ: 主要なシェル コード (たとえばショートカットを表すもの) は 10 × 10 (16 × 16 用)、16 × 16 (32 × 32 用)、24 × 24 (48 × 48 用)、128 × 128 (256 × 256 用)。形状や視覚的なバランスにより、少し小さめにする場合も、このサイズに近くなるようにします。
  • クイック起動領域: Alt + Tab キーを押したときに動的なオーバーレイでアイコンが表示されますが、これらは 48 × 48 から縮小されたものです。より鮮やかに表示するには .ico ファイルに 40 × 40 を追加します。
  • バルーン アイコン: 32 × 32 および 40 × 40。
  • 追加のサイズ: 128 × 128、96 × 96、64 × 64、40 × 40、24 × 24、22 × 22、14 × 14、10 × 10、および 8 × 8。注釈、ツール バー ストリップ、オーバーレイ、高 dpi、特別な用途向けなどのファイルを作成するリソースとして、これらのサイズを用意しておくと便利です。その領域内のコードにより、.ico、.png、.bmp、またはその他のファイル形式を使用できます。

高 dpi 用

• Windows Vista では、96 dpi と 120 dpi が対象とされています。

次の表に、2 つの一般的なサイズのアイコンに適用された拡大縮小比率の例を示します。これらのサイズのすべてが .ico ファイルに含まれる必要はないことに注意してください。大きなアイコンは、コードによってスケール ダウンされます。

dpi	アイコンのサイズ	拡大縮小の係数
96	16 × 16	1.0 (100%)
120	20 × 20	1.25 (125%)
144	24 × 24	1.5 (150%)
192	32 × 32	2.0 (200%)

dpi	アイコンのサイズ	拡大縮小の係数
96	32 × 32	1.0 (100%)
120	40 × 40	1.25 (125%)
144	48 × 48	1.5 (150%)
192	64 × 64	2.0 (200%)

.ico ファイルのサイズ (標準)

.ico ファイルのサイズ (特別な場合)

注釈とオーバーレイ

• 注釈はアイコンの右下隅に表示し、アイコン領域の 25% を占める必要があります。
  • 例外: 16 × 16 のアイコンには 10 × 10 の注釈が必要です。
• アイコン上には複数の注釈を使用しないでください。
• オーバーレイはアイコンの左下隅に表示し、アイコン領域の 25% を占める必要があります。
  • 例外: 16 × 16 のアイコンには 10 × 10 のオーバーレイが必要です。

細部描写のレベル

• これらのアイコンの多くでは、16 × 16 サイズが依然として広く使用されています。したがってこのサイズは重要なサイズとなっています。
• このサイズのアイコンの細部描写では、アイコンの要点が明確に示される必要があります。
• アイコンが小さくなるにつれ、大きいサイズに見られる透明度や一部の特別な細部描写は、単純化して要点を伝えるために省く必要があります。
• 属性や色を誇張し、重要な形を強調する必要があります。

  

  16 × 16 では、ポータブル オーディオ デバイス用のアイコンが携帯電話用のアイコンと間違われやすくなります。そのため、イヤホンは重要な細部描写であり表示させる必要があります。

• 256 × 256 サイズから単にスケール ダウンするだけではうまくいきません。
• すべてのサイズには、サイズに応じたレベルの細部描写が必要となります。アイコンが小さくなればなるほど、重要な細部描写を誇張する必要があります。

  

  

アイコンの開発

アイコンのデザインと作成

• 経験豊富なグラフィック デザイナーに依頼します。優れたグラフィックス、イメージ、およびアイコンを作成するには、専門家と協力してください。ベクター アートや 3D プログラムを使用したイラストの作成経験がある専門家との協力をお勧めします。
• 繰り返しの処理で一連のセットを作成するための計画を立てます。最初のコンセプト スケッチから、コンテキスト内での模擬表示、最終段階でのレビュー、および運用製品での表示と仕上がりまでを想定します。
• アイコンの作成はコストがかかる可能性があるため、前もって検討します。既存の詳細情報および要件を収集します。これには、必要とされるアイコン セット、主要機能とそれぞれの意味、セット内で明確に表現するファミリ (群)、ブランド要件、正確なファイル名、コード内で使用するイメージ形式、サイズ要件などが含まれます。デザイナーとの作業時間を最大限に活用できるように、事前に準備します。
• デザイナーが製品をよく知らない場合もあるので、必要に応じて、機能情報、スクリーン ショット、仕様書などを提供します。
• 必要に応じて、地政学面および法務面のレビューを計画します。
• スケジュールを綿密に計画し、定期的に連絡を取り合います。

コンセプト スケッチから作成完了まで

• コンセプト スケッチを作成します。
• 異なるサイズでコンセプトを試します。
• 必要に応じて 3D でレンダリングします。
• 異なる背景色で各サイズをテストします。
• 実際の UI のコンテキスト内でアイコンを評価します。
• 最終の .ico ファイルまたはその他のグラフィック リソース形式を作成します。

ツール

• 鉛筆と紙: 最初のコンセプト アイデアを一覧にし、スケッチを作成します。
• 3D Studio Max: 3D オブジェクトをレンダリングし、遠近感を持たせます。
• Adobe Photoshop: スケッチと繰り返しの処理を行い、コンテキスト内で模擬表示をして、細部を完成させます。
• Adobe Illustrator/Macromedia Freehand: スケッチと繰り返しの処理を行い、詳細描画を完成させます。
• Gamani Gif Movie Gear: .ico ファイルを作成します (必要に応じて圧縮します)。
• Axialis IconWorkshop: .ico ファイルを作成します (必要に応じて圧縮します)。
• Microsoft Visual Studio® では、Windows Vista のアイコンはサポートされていません (アルファ チャネルや 256 色以上はサポートされていません)。

作成

ステップ 1: コンセプト化

• 可能であれば確立したコンセプトを使用し、アイコンの意味および他の用途との関連性が一貫性を持つようにします。
• UI のコンテキスト内でアイコンがどのように表示されるか、および一連のアイコンの中でそれがどのように機能するかを検討します。
• 既存のアイコンを修正する場合は、複雑さを軽減できるかどうかを検討します。
• グラフィックの文化的な影響を検討します。アイコン内での文字、語句、手、顔などの使用は避けます。人やユーザーを表現することが必要な場合は、できる限り一般化して描写します。
• 複数のオブジェクトをアイコンの単一イメージにまとめる場合は、イメージが小さなサイズに縮小される場合を考慮します。1 つのアイコン内に使用するオブジェクトは 3 つ以内とします (2 つ以内を推奨)。16 × 16 サイズについては、認識しやすくするためにオブジェクトの削除やイメージの単純化を検討します。
• アイコン内では Windows フラグを使用しないでください。

ステップ 2: イラスト化

• Windows Aero style のアイコンのイラスト化には、Macromedia Freehand、Adobe Illustrator などのベクター ツールを使用します。このトピックで既に説明したように、パレットやスタイルの特性を使用します。
• Freehand や Illustrator を使用してイメージをイラスト化します。ベクター イメージをコピーして Adobe Photoshop に貼り付けます。
• Photoshop でテンプレート レイヤーを作成して使用し、規定されたサイズの正方形の領域内で作業するようにします。
• 影を付ける必要があるサイズの場合は、アイコン全体のサイズより少し小さめの画像を作成し、影を付ける領域を確保します。
• ディレクトリ内のすべてのアイコンの位置が同じになるように、正方形の底辺に合わせてイメージを配置します。影が途切れないようにします。
• 1 つのイメージや一連のイメージに別のオブジェクトを追加する場合は、メイン オブジェクトを固定位置に保ち、小さめのサイズのフラット イメージを状況に応じて左下や右上などの固定位置に配置します。

ステップ 3: 24 ビット イメージの作成

• Photoshop に各サイズを貼り付けたら、特に 16 × 16 以下のサイズのイメージの見やすさを確認します。色の比率を使用したピクセル拡大が必要な場合や、透明度を下げることが必要な場合があります。小さめのサイズの場合、キー ポイントに焦点を当てるために、ある特徴を誇張したり、ある特徴を削除することが一般的に行われています。
• 8 ビット アイコンは、32 ビット未満のカラー モードで表示され、8 ビット アルファ チャネルを持ちません。アンチエイリアスは行われないので、アイコンの端がギザギザになったり、イメージが見にくくなることがあります。そのため、アイコンの端などの部分をきれいに整える必要があります。
• Photoshop で、24 ビット イメージ レイヤーを複製し、4 ビット イメージ用にそのレイヤーの名前を変更します。4 ビット イメージを Windows の 16 色パレットでインデックス化します。
• このパレットの 16 色だけを使用してイメージを整えます。輪郭線には、灰色や黒よりも、オブジェクトの色を明るくした、または暗くした色を使用することをお勧めします。
• ビットマップの場合は、背景色が透過色になるので、イメージ自体に背景色と同じ色が使用されていないことを確認します。多くの場合、マゼンタ (R255 G0 B255) が背景の透過色に使用されます。

ステップ 4: 8 ビット イメージおよび 4 ビット イメージの作成

• 24 ビット イメージを 32 ビット アイコンにする準備が整ったので、次は 8 ビット版を作成する必要があります。
• ここで各アイコンを並べてコンテキスト内でのスクリーン ショットを確認することをお勧めします。コンテキスト内の他のアイコンやアイコン ファミリを確認することで思わぬ発見をすることがあります。この工程により、時間とコストを節約できます。また、ファイルが作成されて引き渡される前に問題を把握できます。
• 影を必要とするサイズのイメージに、影を追加します。
• 影と 24 ビット イメージを結合します。
• 各サイズ用の新しい Photoshop ファイルを作成します。適切なイメージをコピーして貼り付け、各ファイルを .psd ファイルとして保存します。
• イメージ レイヤーを背景レイヤーと結合しないでください。ファイル名にサイズや色深度を含めると作業中は便利ですが、最終的にはファイル名の変更が必要になる場合があります。

ステップ 5: .ico ファイルの作成

• 作成者のニーズやスキルに最も適したアプリケーションを選択します。出荷製品に使用するアイコンは、正規購入したツールまたはライセンスされたツールで作成する必要があることに注意してください。試用版は使用できません。
• 以下の製品はいずれも、Windows Vista のアイコンを作成したデザイナーが使用しています。また、両製品共に、Adobe Photoshop CS へのエクスポート機能を備えています。
  • Gamani Gif Movie Gear: .ico ファイルの作成
  • Axialis IconWorkshop: .ico ファイルの作成
• Visual Studio では、Windows Vista のアイコンはサポートされないため (アルファ チャネルや 256 色以上はサポートされません)、使用は推奨しません。
• アイコン (.ico 形式) ファイルには、24 ビット + アルファだけでなく、4 ビット版や 8 ビット版を含める必要があります。
• 使用するアイコン作成プログラムにかかわらず、"Windows アイコン (.ico)" としてファイルを保存します。
• アイコン資産の中には、実際にビットマップ ストリップ (ツール バー用などにアルファ チャネルが必要) で構成されるものや、透明度付きで保存された .png ファイルを使用するものがあります。すべての場合に .ico 形式が必要とは限りません。コードでサポートされている形式を確認してください。

ステップ 6: 評価

• すべてのサイズを確認します。
• ファミリをまとめて確認し、ファミリの類似性、視覚的なバランス、識別性などを評価します。
• コンテキスト内で確認し、相対的な重みと視認性を評価します (あるアイコンだけがひどく目立ったりしていないことを確認します)。
• 現在は使用されていなくても、近い将来に使用される可能性があるケースを検討します。アイコンに注釈が付けられたり、オーバーレイが表示されたりする可能性を考慮してください。
• コードを確認します。

リスト ビュー、ツール バー、ツリー ビューなどのコンテキスト内のアイコン

リスト ビュー

• Windows Vista では、小さいサイズのコンテンツ表示でもユーザーが目的のファイルを直接認識できるようなファイルに対しては、サムネイルを使用します (このためには、Windows サムネイル アプリケーション プログラミング インターフェイスを使用します)。

  

• サムネイル上にアプリケーション アイコン オーバーレイ (ここでは表示されていません) があると、ファイルのプレビュー表示に加えて、ファイルの種類とアプリケーションの関連をわかりやすく示すことができます。

注: 視覚的に識別しやすいコンテンツがファイルに含まれていない場合は、サムネイルを使用しないでください。代わりに、オブジェクトを画像化し、関連付けられているアプリケーションや種類を示す、従来のシンボリックなファイル アイコンを使用します。

ツール バー

• ツール バーに表示されるアイコンでは、サイズ、色、複雑さなどにおいて、視覚的なバランスをとる必要があります。
• コンテキスト内でアイコンの候補をスクリーン ショットで確認し、必要以上に目立つものや、バランスが悪いものの使用を避けます。
• スクリーン ショットでテストすると、繰り返しのコードを作成するためにかかるコストを回避できます。
• アイコンはコード内でも確認します。アニメーションやその他の要因がアイコンの成功の鍵となることがあります。場合によってはさらに繰り返しの処理が必要となる場合があります。

上の例では、視覚的なバランスがとれていません。

コンテキストにおける繰り返しの処理を試します。

ツリー ビュー

• ツリー ビュー コントロール内の階層を保つには、視覚的なバランスが必要となります。
• したがって、このコンテキストで一般的に使用されるアイコンは、ツリー ビュー内で評価する必要があります。形状によって他のアイコンよりも目立つ特定の 16 × 16 アイコンは、小さめに作成することが要求される場合があります。
• 視覚的なアンバランスを補正することは、高品質なアイコンを作成する上で重要です。