アイコン (設計の基本)

Note

この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。

アイコンはオブジェクトの絵のような表現であり、プログラムの視覚的アイデンティティの一部としての美的な理由だけでなく、ユーザーがほぼ瞬時に知覚することを意味する意味を伝える短縮形としての実用的な理由のために重要です。 Windows Vista では、より詳細で洗練された Windows を実現する新しいスタイルの図像が導入されています。

メモ：標準アイコンに関連するガイドラインは、別の記事で示されています。

設計概念

Aero は、Windows Vista のユーザー エクスペリエンスの名前であり、美学のデザインに具体化された値と、ユーザー インターフェイス (UI) の背後にあるビジョンの両方を表します。 エアロは、本物、エネルギー、反射、オープンの略です。 エアロは、プロフェッショナルで美しいデザインを確立することを目指しています。 エアロの美学は、ユーザーの生産性を促進し、さらには感情的な反応を促進する高品質でエレガントな経験を作成します。

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

• スタイルは説明より現実的ですが、フォトリアリスティックではありません。 アイコンは、フォトリアリスティックよりも見た目が良い象徴的な画像です。
• アイコンの最大サイズは 256 x 256 ピクセルで、高 dpi (1 インチあたりのドット数) ディスプレイに適しています。 これらの高解像度アイコンを使用すると、大きなアイコンを含むリスト ビューで高いビジュアル品質を実現できます。
• 実用的な固定ドキュメント アイコンは、コンテンツのサムネイルに置き換えられ、ドキュメントの識別と検索が容易になります。
• 小さいサイズと視覚的な特徴を最適化するために、ツール バー アイコンの詳細が少なく、遠近感はありません。

適切に設計されたアイコン:

• プログラムの視覚的なコミュニケーションを改善します。
• プログラムのビジュアルデザインに対するユーザーの全体的な印象と、そのフィット感と仕上げに対する評価に強く影響します。
• プログラム、オブジェクト、アクションを識別、学習、検索しやすくすることで、使いやすさを向上させます。

次の図は、Windows Vista のアイコンの Aero スタイルが Windows XP で使用されているものと異なる点を示しています。

Windows Vista アイコン (左側のロックとキー) は、本物で鮮明で詳細です。 描画ではなくレンダリングされますが、完全にフォトリアリスティックではありません。

Windows Vista アイコン (左側の 2 つ) はプロフェッショナルで美しく、アイコンの制作品質を向上させる詳細に注意を払っています。

これらの Windows Vista アイコンは、遠近感と詳細で光学バランスと知覚精度を示します。 これにより、大小、アップクローズ、または遠くから見ることができます。 さらに、このスタイルの図像は高解像度の画面に適しています。

アイコン アイコンの画像

これらの例では、パースペクティブ内の 3 次元オブジェクト、前面 (フラット) アイコン、ツール バー アイコンなど、さまざまな種類のアイコンを示しています。

ガイドライン

パースペクティブ

• Windows Vista のアイコンは、3 次元で透視的なオブジェクトとして表示されるか、または直線上に表示される 2 次元オブジェクトです。 ファイルや、ドキュメントや紙など、実際にフラットなオブジェクトにはフラット アイコンを使用します。

  

  一般的な 3D アイコンとフラット アイコン。

• 3 次元オブジェクトは、2 つの消失点を持つ低い鳥瞰図から見た、立体オブジェクトとして遠近感で表されます。

  

  この例では、3D アイコンの典型的な視点と消失点を示します。

• 小さいサイズでは、同じアイコンが遠近法からストレートオンに変わる場合があります。 16 x 16 ピクセル以下のサイズで、アイコンを直接レンダリングします (前面)。 大きなアイコンの場合は、パースペクティブを使用します。

  • 例外： ツール バー アイコンは、サイズが大きい場合でも常に前面に表示されます。

  

  この例では、サイズに応じて同じアイコンがどのように異なる方法で処理されるかを示します。

光源

• パースペクティブ グリッド内のオブジェクトの光源は、オブジェクトの上、少し前、少し左にあります。
• 光源は、オブジェクトのベースの背面と右側にわずかに影を投影します。
• すべての光線は平行で、同じ角度 (太陽など) に沿ってオブジェクトに当たります。 目標は、すべてのアイコンとスポットライト効果にわたって均一な照明の外観を持つことです。 平行光線は、すべて同じ長さと密度を持つ影を生成し、複数のアイコン間でさらに一貫性を提供します。

シャドウ

全般

• 影を使用してオブジェクトを背景から視覚的に持ち上げ、空間にぎこちなく浮かび上がるのではなく、3D オブジェクトを地面に配置します。

• 影には 30 ~ 50% の不透明度範囲を使用します。 アイコンの形状や色に応じて、異なるレベルの影を使用する必要がある場合があります。

• 必要に応じて影を羽または短くして、アイコン ボックスのサイズでトリミングされないようにします。

• 24 x 24 以下のサイズのアイコンでは、影を使用しないでください。

  

  一般的なアイコンの影。

フラット アイコン

• 一般に、フラット アイコンは、ドキュメントや紙などのファイル アイコンやフラットな現実世界のオブジェクトに使用されます 。
• フラット アイコンの照明は、左上から 130 度で取得されます。
• 小さいアイコン (16x16 や 32x32 など) は、読みやすくするために簡略化されています。 ただし、アイコン内に反射が含まれている場合 (多くの場合、簡略化されています)、ドロップ シャドウが狭い場合があります。 ドロップ シャドウは、不透明度が 30 ~ 50% の範囲です。
• レイヤー効果はフラット アイコンに使用できますが、他のフラット アイコンと比較する必要があります。 オブジェクトの影は、サイズ セット内で最も一貫性があり、Windows Vista の他のアイコンと最も一貫性のあるものに応じて、多少異なります。 場合によっては、影を変更する必要がある場合もあります。 これは、オブジェクトが他のオブジェクトの上に配置されている場合に特に当てはまります。
• 望ましい結果を得るために、微妙な色の範囲を使用できます。 シャドウは、オブジェクトが空間内に配置されるのに役立ちます。 色は影の見える重さに影響を与え、重すぎると画像が歪む可能性があります。

[レイヤー スタイル] ダイアログ ボックスの [ドロップ シャドウ] オプションと、フラット アイコンの一般的な影。

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

特徴	範囲
Color	Black
ブレンド モード	乗算
Opacity	項目の色に応じて 22 ~ 50%
Angle	120-130 (グローバル ライトを使用)
Distance	256 x 256 の場合は 3、32 x 32 の場合は 1 まで
分散	0
サイズ	256 x 256 の場合は 7、32 x 32 の場合は 2 まで

3 次元アイコン

• 3D アイコンの影をケースバイケースで作成し、キャスト距離の範囲内に収まり、羽が完全に透明になるようにします。 ドロップ シャドウのスペースを許可するために、アイコンの全体的なサイズよりも少し小さいサイズでイメージを作成します (必要なサイズの場合)。 影がアイコンの端で突然終わらないことを確認します。

これらの例は、オブジェクト自体の形状と位置に基づいて作成されたバリエーションを示すのに役立ちます。 影は、アイコン ボックスのサイズでトリミングされないようにするために、羽または短くする必要がある場合があります。

色と彩度

• 色は一般に、Windows XP よりも飽和状態が少なくなります。

• グラデーションを使用して、よりリアルなイメージを作成します。

• 標準アイコン用の特定のカラー パレットはありませんが、多くのコンテキストやテーマでうまく連携する必要があることに注意してください。 標準的な色のセットを好みます。警告アイコンなどの標準アイコンは再色付けしないでください。これは、ユーザーが意味を解釈する機能を中断するためです。 ガイドラインの詳細については、「 色」を参照してください。

• アイコン ファイルでは、リモート デスクトップでの既定の設定をサポートするために、8 ビットと 4 ビットのパレット バージョンも必要です。 これらのファイルはバッチ プロセスを通じて作成できますが、読みやすくするためにレタッチが必要になるファイルがあるため、確認する必要があります。

  

  厳密なカラー パレットの制限はありません。 完全飽和 (右上) のみが回避されます。

• ビット レベル: 32 ビット (アルファを含む) + 8 ビット + 4 ビット用の ICO 設計 (自動的にディザリングダウンされたピクセルは最も重要なもののみ)。 256 x 256 ピクセルイメージの 32 ビット コピーのみを含める必要があり、ファイル サイズを下げるには 256 x 256 ピクセルの画像のみを圧縮する必要があります。 いくつかのアイコン ツールは、Windows Vista の圧縮を提供します。

• ビット レベル: ツール バー 24 ビット + アルファ (1 ビット マスク)、8 ビットおよび 4 ビット。

• ツールバーまたは AVI ファイル: 背景の透過性の色として magenta (R255 G0 B255) を使用します。

サイズの要件

全般

• メインアプリケーション アイコン、Windows エクスプローラーに表示できるファイル アイコン、スタート メニューまたはデスクトップに表示されるアイコンなど、可視性の高いアイコンに特に注意してください。
  • アプリケーションアイコンとコントロール パネル項目: 完全なセットには、16x16、32x32、48x48、256x256 (コードは 32 から 256 の範囲でスケーリングされます) が含まれます。 .ico ファイル形式が必要です。 クラシック モードの場合、フル セットは 16x16、24x24、32x32、48x48、64x64 です。
  • リスト アイテム アイコンのオプション: ファイルの種類 (たとえば、.doc) のライブ サムネイルまたはファイル アイコンを使用します。完全なセット。
  • ツール バー アイコン: 16 x 16、24 x 24、32 x 32。 ツールバーアイコンは、32x32サイズであっても、常に3Dではなくフラットであることに注意してください。
  • ダイアログとウィザードのアイコン: 32 x 32 および 48 x 48。
  • オーバーレイ： コア シェル コード (ショートカットなど) 10x10 (16x16 の場合)、16x16 (32x32 の場合)、24x24 (48x48 の場合)、128x128 (256x256 の場合)。 これらの一部は若干小さくなりますが、形状と光学バランスに応じて、このサイズに近い点に注意してください。
  • サイド リンク バー領域: アイコンは Alt + Tab 動的オーバーレイの 48 x 48 から縮小されますが、より鮮明なバージョンの場合は、.ico ファイルに 40 x 40 を追加します。
  • バルーン アイコン: 32 x 32 および 40 x 40。
  • その他のサイズ: これらは、他のファイル (注釈、ツールバー ストリップ、オーバーレイ、高 dpi、特殊なケースなど) を作成するためのリソースとして役立ちます。128x128、96x96、64x64、40x40、24x24、22x22、14x14、10x10、8x8。 その領域のコードに応じて、.ico、.png、.bmp、またはその他のファイル形式を使用できます。

高 dpi の場合

• Windows Vista のターゲットは 96 dpi と 120 dpi です。

次の表は、2 つの一般的なアイコン サイズに適用されるスケーリング比率の例を示しています。 これらのサイズの一部を .ico ファイルに含めなければならないわけではないことに注意してください。 このコードでは、より大きなスケールダウンが行われます。

dpi	アイコンのサイズ	スケール ファクター
96	16x16	1.0 (100%)
120	20 x 20	1.25 (125%)
144	24 x 24	1.5 (150%)
192	32x32	2.0 (200%)

dpi	アイコンのサイズ	スケール ファクター
96	32x32	1.0 (100%)
120	40 x 40	1.25 (125%)
144	48 x 48	1.5 (150%)
192	64 x 64	2.0 (200%)

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

.ico ファイル サイズ (特殊なケース)

注釈とオーバーレイ

• 注釈はアイコンの右下隅に配置され、アイコン領域の 25% を埋める必要があります。
  • 例外: 16 x 16 のアイコンは 10 x 10 の注釈を受け取ります。
• アイコンの上に複数の注釈を使用しないでください。
• オーバーレイはアイコンの左下隅に配置され、アイコン領域の 25% を埋める必要があります。
  • 例外: 16x16 アイコンは 10 x 10 のオーバーレイを受け取ります。

詳細レベル

• これらのアイコンの多くの 16 x 16 サイズは、まだ広く使用されているため、重要です。

• このサイズのアイコンの詳細には、アイコンのキー ポイントが明確に表示されている必要があります。

• アイコンが小さくなり、透明性が向上し、より大きなサイズで見つかったいくつかの特別な詳細を犠牲にして、ポイントを簡素化し、ポイントを得る必要があります。

• 属性と色は誇張し、主要なフォームを強調するために使用する必要があります。

  

  16x16では、ポータブルオーディオデバイスのアイコンは携帯電話と間違えられやすいため、耳の部分は表示する重要な視覚的な詳細です。

• 256 x 256 サイズからスケールダウンするだけでは機能しません。

• すべてのサイズには、関連する詳細レベルが必要です。アイコンが小さいほど、定義の詳細を誇張する必要があります。

  

  

アイコンの開発

アイコンの設計と生成

• 経験豊富なグラフィック デザイナーを雇います。 優れたグラフィックス、画像、アイコンは専門家と連携します。 ベクター アートや 3D プログラムを使用したイラストの経験をお勧めします。
• 初期の概念スケッチからコンテキスト内モックアップ、最終的な生産レビュー、作業製品のアイコンの適合と仕上げまで、一連のイテレーションを計画します。
• アイコンの作成はコストがかかる可能性があると考えてください。 必要なアイコンの完全なセットなど、既存のすべての詳細と要件を収集します。メイン関数と意味、明らかにしたいセット内のファミリまたはクラスター、ブランド要件、正確なファイル名、コードで使用されるイメージ形式、サイズ要件。 デザイナーで時間を最大限に活用できるように、前もって確認してください。
• デザイナーは製品に慣れていない可能性があるので、必要に応じて機能情報、スクリーン ショット、仕様セクションを提供してください。
• 必要に応じて、地政学的および法的レビューを計画します。
• 時間枠をマップし、定期的なコミュニケーションを取ります。

概念スケッチから最終製品まで

• 概念スケッチを作成します。
• さまざまなサイズで概念を試してみてください。
• 必要に応じて 3D でレンダリングします。
• さまざまな背景色でサイズをテストします。
• 実際の UI のコンテキストでアイコンを評価します。
• 最終的な .ico ファイルまたはその他のグラフィック リソース形式を生成します。

ツール

• 鉛筆と紙: 最初の概念のアイデア(一覧表示およびスケッチ)。
• 3D Studio Max: 3D オブジェクトをパースペクティブでレンダリングします。
• Adobe Photoshop: スケッチと反復、コンテキストでのモックアップ、詳細の最終処理。
• Adobe Illustrator/ Macromedia Freehand: スケッチと反復処理を行い、詳細を確定します。
• ガマニ GIF ムービー ギア: .ico ファイルを生成します (必要に応じて圧縮を使用)。
• 軸軸アイコンワークショップ: .ico ファイルを生成します (必要に応じて圧縮を使用)。
• Microsoft Visual Studio では、Windows Vista アイコンはサポートされていません (アルファ チャネルまたは 256 色を超える色はサポートされていません)。

運用

ヒント

複数の画像サイズと色深度を含む 1 つの .ico ファイルを作成するには、次の手順に従います。

手順 1: 概念化

• アイコンの意味とその他の用途との関連性の一貫性を確保するために、可能な限り確立された概念を使用します。
• アイコンが UI のコンテキストでどのように表示されるか、およびアイコンのセットの一部としてどのように機能するかを検討します。
• 既存のアイコンを変更する場合は、複雑さを軽減できるかどうかを検討してください。
• グラフィックの文化的影響を考慮してください。 アイコンで文字、単語、手、顔を使用しないようにします。 必要に応じて、ユーザーまたはユーザーの表現を可能な限り一般的に表します。
• アイコン内の 1 つのイメージに複数のオブジェクトを組み合わせる場合は、イメージのサイズを小さくする方法を検討してください。 アイコンには 3 つ以下のオブジェクトを使用します (2 つを使用することをお勧めします)。 16 x 16 サイズの場合は、オブジェクトを削除するか、画像を簡略化して認識を向上することを検討してください。
• アイコンで Windows フラグを使用しないでください。

手順 2: 図

• Windows Aero スタイルのアイコンを説明するには、Macromedia Freehand や Adobe Illustrator などのベクター ツールを使用します。 この記事で前述したように、パレットとスタイルの特性を使用します。
• フリーハンドまたはイラストレーターを使用して画像を示す。 ベクター画像をコピーして Adobe Photoshop に貼り付けます。
• Photoshop のテンプレート レイヤーを作成して使用して、規制されたサイズの正方形の領域内で作業が行われるようにします。
• ドロップ シャドウのスペースを許可するために、アイコンの全体的なサイズよりも少し小さいサイズでイメージを作成します (必要なサイズの場合)。
• 画像を四角形の下部に配置して、ディレクトリ内のすべてのアイコンが一貫して配置されるようにします。 影を切り落とさないようにします。
• 画像または系列に別のオブジェクトを追加する場合は、メインオブジェクトを固定位置に保持し、ケースに応じて左下や右上などの固定位置に小さいサイズの画像を配置します。

手順 3: 24 ビット イメージを作成する

• Photoshop にサイズを貼り付けたら、特に 16 x 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 にエクスポートする機能を提供しています。
  • ガマニ GIF ムービー ギア: .ico ファイルを生成する
  • 軸図アイコンワークショップ:.icoファイルを生成する
• Visual Studio では Windows Vista アイコンがサポートされていないため (アルファ チャネルまたは 256 色を超える色はサポートされていません)、その使用はお勧めしません。
• アイコン (.ico 形式) ファイルには、4 ビットバージョンと 8 ビット バージョン、および 24 ビット + アルファが含まれている必要があります。
• 使用するアイコン作成プログラムに関係なく、ファイルを "Windows アイコン (.ico)" として保存します。
• 一部のアイコン資産は、実際にはビットマップ ストリップである場合があり、アルファ チャネル (ツール バーなど) も必要です。また、透明度で保存されたファイル.png。 すべてが必ずしも .ico 形式であるとは限りません。コードでサポートされている形式のチェック。

手順 6: 評価する

• すべてのサイズを見てください。
• 家族を一緒に見て、家族の類似性、光学バランス、区別を評価します。
• 相対的な重みと可視性を評価するには、コンテキストで を確認します (重みが優先されないようにしてください)。
• 現在は使用できないが、近い将来に使用される可能性があるケースを検討してください。 このアイコンに注釈を付けたり、オーバーレイを付けたりできますか?
• コードでを見てください。

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

リスト ビュー

• Windows Vista では、ユーザーが探しているファイルを直接認識できるように、小規模で視覚的に異なるコンテンツを保持するファイルのサムネイルを使用します。 (これには Windows サムネイル アプリケーション プログラミング インターフェイスを使用します)。

  

• サムネイル上のアプリケーション アイコン オーバーレイ (ここには示されていません) は、ファイルのプレビューを表示するだけでなく、ファイルの種類のアプリケーションとの関連付けに役立ちます。

メモ： 視覚的に異なるコンテンツがないファイルの場合は、サムネイルを使用しないでください。 代わりに、オブジェクト表現と関連付けられたアプリケーションまたは型を示す従来のシンボリック ファイル アイコンを使用します。

[ツール バー]

• ツール バーに表示されるアイコンは、サイズ、色、複雑さの光学式のバランスが必要です。
• 望ましくない支配や不均衡を回避するために、コンテキストスクリーンショットで潜在的なアイコンをテストします。
• スクリーン ショットでのテストは、コード内のコストのかかるイテレーションを簡単に回避するのに役立ちます。
• コード内のアイコンも確認します。 動きやその他の要因は、アイコンの成功に影響を与える可能性があります。場合によっては、さらに反復が必要になる場合があります。

上記の例では、光学バランスはまだ達成されていない。

コンテキストでイテレーションを試します。

ツリー ビュー

• ツリー ビュー コントロールの階層を保持するには、光のバランスが必要です。
• そのため、このコンテキストで通常使用されるアイコンは、そこで評価する必要があります。 場合によっては、特定の 16 x 16 アイコンを小さくする必要があります。これは、その形状が他のアイコンよりも光学的に優勢であるためです。
• 光学不均衡の補償は、最高品質のアイコンを生成する上で重要な部分です。