アイコン (設計の基本)
Note
この設計ガイドは、Windows 7 用に作成されたもので、新しいバージョンのWindows用に更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
アイコンは、プログラムの視覚的アイデンティティの一部としての美的な理由だけでなく、ユーザーがほぼ瞬時に知覚する意味を伝える短縮形としての実用的な理由のためにも重要な、オブジェクトの視覚的表現です。 Windows Vista では、より高いレベルの詳細と洗練されたWindowsをもたらす新しいスタイルの図像が導入されています。
メモ：標準アイコンに関連するガイドラインについては、別の記事で説明します。
設計概念
Aero は、Windows Vista のユーザー エクスペリエンスの名前であり、美学のデザインに具体化された値と、ユーザー インターフェイス (UI) の背後にあるビジョンの両方を表します。 エアロは本物、エネルギー、反射性、オープンを意味します。 エアロはプロと美の両方のデザインを確立することを目指しています。 エアロの美学は、ユーザーの生産性を促進し、さらには感情的な反応を促進する高品質でエレガントな経験を作り出します。
Windows Vista のアイコンは、次の点で XP スタイルのアイコンWindows異なります。
- スタイルは説明よりも現実的ですが、それほどフォトリアリスティックではありません。 アイコンは、フォトリアリスティックよりも見た目が良いシンボリックイメージです。
- アイコンの最大サイズは 256 x 256 ピクセルで、高 dpi (1 インチあたりのドット数) ディスプレイに適しています。 これらの高解像度アイコンを使用すると、大きなアイコンを含むリスト ビューで高い表示品質を実現できます。
- 実用的な場所では、固定されたドキュメント アイコンがコンテンツのサムネイルに置き換えられ、ドキュメントの識別と検索が容易になります。
- ツールバーのアイコンは、小さいサイズと視覚的な特徴を最適化するために、詳細度が低く、遠近感はありません。
適切に設計されたアイコン:
- プログラムの視覚的なコミュニケーションを改善します。
- プログラムのビジュアルデザインに対するユーザーの全体的な印象と、そのフィット感と仕上げに対する評価に強く影響します。
- プログラム、オブジェクト、アクションを識別、学習、および検索しやすくすることで、使いやすさを向上させます。
次の画像は、Windows XP で使用されているものとは異なるWindows Vista のアイコンのエアロ スタイルを示しています。
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 度で取得されます。
- 小さいアイコン (16 x 16 や 32 x 32 など) は、読みやすくするために簡略化されています。 ただし、アイコン内に反射 (多くの場合簡略化) が含まれている場合は、狭いドロップ シャドウを持つ可能性があります。 ドロップ シャドウの不透明度の範囲は 30 ~ 50% です。
- レイヤー効果はフラット アイコンに使用できますが、他のフラット アイコンと比較する必要があります。 オブジェクトのシャドウは、最適な外観に応じて多少異なり、サイズ セット内で最も一貫性があり、Windows Vista の他のアイコンと一致します。 場合によっては、シャドウを変更する必要がある場合もあります。 これは特に、オブジェクトが他のオブジェクトの上に置かれる場合に当てはまります。
- 望ましい結果を得るために、微妙な色の範囲を使用できます。 シャドウは、オブジェクトが空間に配置されるのを助けます。 色は影の認識された重みに影響し、重すぎると画像が歪む可能性があります。
[レイヤー スタイル] ダイアログ ボックスの [ドロップ シャドウ] オプションと、フラット アイコンの一般的な影。
基本的なフラット アイコンの影の範囲
| 特徴 | Range |
|---|---|
| Color |
Black |
| ブレンド モード |
乗算 |
| Opacity |
項目の色に応じて 22 ~ 50% |
| Angle |
120-130 (グローバル ライトを使用) |
| 距離 |
256 x 256 の場合は 3、32 x 32 の場合は 1 まで |
| 分散 |
0 |
| サイズ |
256 x 256 の場合は 7、32 x 32 の場合は 2 まで |
3 次元アイコン
- 3D アイコンの影をケースバイケースで作成し、キャスト距離と羽の範囲内に収まるようにして完全に透明にします。 (1 つを必要とするサイズの) ドロップ シャドウの領域を許可するために、全体的なアイコン サイズの要求よりも少し小さいサイズの画像を作成します。 影がアイコンの端で突然終了しないようにします。
これらの例は、オブジェクト自体の形状と位置に基づいて作成されたバリエーションを示すのに役立ちます。 シャドウは、アイコン ボックスのサイズでトリミングされないように、羽または短くする必要がある場合があります。
色と彩度
一般に、色は XP Windowsよりも飽和状態が少なくなります。
グラデーションを使用して、より現実的なイメージを作成します。
標準アイコン用の特定のカラー パレットはありませんが、多くのコンテキストやテーマでうまく連携する必要があることに注意してください。 標準的な色のセットを優先します。これにより、ユーザーが意味を解釈する機能が中断されるため、警告アイコンなどの標準アイコンの色を変更しないでください。 ガイドラインの詳細については、「 色」を参照してください。
アイコン ファイルでは、リモート デスクトップでの既定の設定をサポートするために、8 ビットと 4 ビットのパレット バージョンも必要です。 これらのファイルはバッチ プロセスを使用して作成できますが、読みやすくするためにレタッチが必要なファイルがあるため、確認する必要があります。
厳密なカラー パレットの制限はありません。 完全飽和 (右上) のみが回避されます。
ビット レベル: 32 ビット (アルファを含む) + 8 ビット + 4 ビットの ICO 設計 (自動的にディザリングされたピクセルは、最も重要なだけ突きます)。 256 x 256 ピクセル イメージの 32 ビット コピーのみを含める必要があり、256 x 256 ピクセルイメージのみを圧縮してファイル サイズを縮小する必要があります。 いくつかのアイコン ツールは、vista の圧縮Windows提供します。
ビット レベル: ツール バー 24 ビット + アルファ (1 ビット マスク)、8 ビット、4 ビット。
ツールバーまたは AVI ファイル: 背景色としてマゼンタ (R255 G0 B255) を使用します。
サイズの要件
全般
- メイン アプリケーション アイコン、Windows エクスプローラーに表示できるファイル アイコン、スタート メニューまたはデスクトップに表示されるアイコンなど、可視性の高いアイコンには特に注意してください。
- アプリケーション アイコンとコントロール パネル項目: 完全なセットには、16 x 16、32x32、48 x 48、256 x 256 (コードは 32 ~ 256 の範囲) が含まれます。 .ico ファイル形式が必要です。 クラシック モードの場合、フル セットは 16 x 16、24 x 24、32 x 32、48 x 48、64 x 64 です。
- リスト 項目アイコンのオプション: ファイルの種類 (たとえば、.doc) のライブ サムネイルまたはファイル アイコンを使用します。フル セット。
- ツール バー アイコン: 16 x 16、24 x 24、32 x 32。 ツール バー アイコンは、32 x 32 サイズであっても、3D ではなく常にフラットであることに注意してください。
- ダイアログとウィザードのアイコン: 32 x 32 および 48 x 48。
- オーバーレイ： コア シェル コード (ショートカットなど) 10x10 (16x16 の場合)、16x16 (32x32 の場合)、24x24 (48x48 の場合)、128x128 (256 x 256 の場合)。 これらの一部は若干小さくなりますが、形状や光学バランスに応じて、このサイズに近い点に注意してください。
- サイド リンク バー領域: アイコンは Alt + Tab 動的オーバーレイの 48 x 48 から縮小されますが、より鮮明なバージョンの場合は、.ico ファイルに 40x40 を追加します。
- バルーン アイコン: 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% を埋める必要があります。
- 例外: 16 x 16 アイコンは 10 x 10 オーバーレイを受け取ります。
詳細レベル
これらのアイコンの多くの 16 x 16 サイズは、まだ広く使用されているため、重要です。
このサイズのアイコンの詳細には、アイコンのキー ポイントが明確に表示されている必要があります。
アイコンが小さくなったので、透明性と、より大きなサイズで見つかったいくつかの特別な詳細を犠牲にして、ポイントを簡素化し、ポイントを取得する必要があります。
属性と色は誇張し、主要なフォームを強調するために使用する必要があります。
16 x 16 では、ポータブル オーディオ デバイスのアイコンが携帯電話と間違えられやすいため、耳の部分が表示する重要な視覚的な詳細になります。
256 x 256 サイズからスケールダウンするだけでは機能しません。
すべてのサイズには、関連する詳細レベルが必要です。アイコンが小さいほど、定義の詳細を誇張する必要があります。
アイコンの開発
アイコンの設計と生成
- 経験豊富なグラフィック デザイナーを雇います。 優れたグラフィックス、画像、アイコンは専門家と連携します。 ベクター アートまたは 3D プログラムを使用したイラストの経験をお勧めします。
- 初期の概念スケッチからコンテキスト内モックアップ、最終的な生産レビュー、作業製品のアイコンのフィットと仕上げまで、一連のイテレーションを計画します。
- 事前にアイコンを作成するとコストが高くなる可能性があります。 必要なアイコンの完全なセットなど、既存のすべての詳細と要件を収集します。それぞれの主な関数と意味。見せたいセット内のファミリまたはクラスター。ブランドの要件。正確なファイル名。コードで使用されるイメージ形式。とサイズの要件。 デザイナーで時間を最大限に活用できることを前もって確認してください。
- デザイナーは製品に慣れていない可能性があるので、必要に応じて機能情報、スクリーン ショット、スペック セクションを提供してください。
- 必要に応じて、地政学的および法的レビューを計画します。
- 時間枠をマップし、定期的なコミュニケーションを取る。
概念スケッチから最終製品まで
- 概念スケッチを作成します。
- さまざまなサイズの概念をお試しください。
- 必要に応じて 3D でレンダリングします。
- さまざまな背景色でサイズをテストします。
- 実際の UI のコンテキストでアイコンを評価します。
- 最終的な .ico ファイルまたはその他のグラフィック リソース形式を生成します。
ツール
- 鉛筆と紙: 最初の概念のアイデア。一覧表示され、スケッチされています。
- 3D Studio Max: 遠近法で 3D オブジェクトをレンダリングします。
- AdobeShop: スケッチと反復処理、コンテキストでのモックアップ、詳細の最終処理。
- 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: 説明
- Aero スタイルのアイコンWindows説明するには、Macromedia Freehand や Adobe Illustrator などのベクター ツールを使用します。 この記事で既に説明したように、パレットとスタイルの特性を使用します。
- フリーハンドまたはイラストレーションを使用して画像を説明します。 ベクター画像をコピーして AdobeShop に貼り付けます。
- Photoshopのテンプレートレイヤーを作成して使用して、規制されたサイズの正方形の領域内で作業が行われることを確認します。
- (1 つを必要とするサイズの) ドロップ シャドウの領域を許可するために、全体的なアイコン サイズの要求よりも少し小さいサイズの画像を作成します。
- イメージを四角形の下部に配置して、ディレクトリ内のすべてのアイコンが一貫して配置されるようにします。 影を切り落とさないようにします。
- 画像や系列に別のオブジェクトを追加する場合は、メイン オブジェクトを固定位置に保持し、ケースに応じて左下や右上などの固定位置にフラットなサイズの画像を配置します。
手順 3: 24 ビット イメージを作成する
- フォトショップでサイズを貼り付けたら、特に16x16以下のサイズで画像の読みやすさを確認してください。 色の割合を使用したピクセル ポックが必要な場合があります。 透明性の低下も必要な場合があります。 重要なポイントに焦点を当てるには、より小さなサイズで側面を誇張し、側面も排除するのが一般的です。
- 8 ビットのアイコンは、32 ビット未満の任意のカラー モードで表示され、8 ビットのアルファ チャネルがないため、アンチエイリアシングがないため、エッジまたはクリーンアップが必要になる場合があります (エッジがジャグされ、画像が読みにくい場合があります)。
- フォトショップでは、24ビット画像レイヤーを複製し、レイヤーの名前を4ビット画像に変更します。 Windows 16 カラー パレットに 4 ビット イメージのインデックスを付けます。
- 16 カラー パレットの色のみを使用してイメージをクリーンアップします。 オブジェクトの色の濃いバージョンまたは明るいバージョンから作成されたアウトラインは、通常、灰色または黒にすることをお勧めします。
- ビットマップで作業する場合は、その色が透明色になるため、イメージ自体で背景色が使用されていないことを確認してください。 マゼンタ (R255 G0 B255) は、多くの場合、背景色として使用されます。
手順 4: 8 ビットと 4 ビットのイメージを作成する
- 24 ビット イメージを 32 ビット アイコンにするための準備ができたので、8 ビット バージョンを作成する必要があります。
- これは、コンテキストスクリーンショットをテストするのに最適な時期です。 他のアイコンやアイコンのファミリをコンテキストで表示することで発見できることは驚くべきことです。 この手順を実行すると、時間とコストを節約できます。 ファイルが運用環境を通過し、渡される前に問題をキャッチする方がはるかに良いです。
- 必要なサイズの画像にドロップ シャドウを追加します。
- ドロップ シャドウと 24 ビット イメージをマージします。
- サイズごとに新しいPhotoshopファイルを作成します。 適切なイメージをコピーして貼り付けます。 各ファイルを.psd ファイルとして保存します。
- イメージ レイヤーを背景レイヤーとマージしないでください。 作業中にファイル名にサイズと色の深さを含めるのは便利ですが、最終的にはファイルの名前を変更する必要がある場合があります。
手順 5: .ico ファイルを作成する
- アーティストのニーズやスキルに最適なアプリケーションを選択してください。 配送製品で使用するアイコンは、購入またはライセンスが付与されたツールで作成する必要があります。 これは、試用版を使用できないことを意味します。
- 以下に示す両方の製品は、Windows Vista のアイコンを作成したデザイナーによって使用されており、それぞれが AdobePhotoshop CS にエクスポートする機能を提供しています。
- ガマニ GIF ムービー ギア: .ico ファイルを生成する
- 軸アイコンワークショップ:.icoファイルを生成する
- Visual StudioはWindows Vista アイコンをサポートしていないため (アルファ チャネルまたは 256 色を超える色はサポートされていません)、その使用はお勧めしません。
- アイコン (.ico 形式) ファイルには、4 ビットバージョンと 8 ビット バージョン、および 24 ビット + アルファが含まれている必要があります。
- 使用するアイコン作成プログラムに関係なく、ファイルを "Windows アイコン (.ico) として保存します。
- 一部の図像アセットは、実際にはビットマップ ストリップである場合があり、アルファ チャネル (ツールバーなど) や、透明度で保存された.png ファイルも必要です。 すべてが必ずしも.ico形式であるとは限りません。コードでサポートされている形式を確認します。
手順 6: 評価
- すべてのサイズを見てください。
- 家族を一緒に見て、家族の類似性、光学バランス、区別を評価します。
- コンテキストで相対的な重みと可視性を評価します (1 つが支配していないことを確認してください)。
- 現在は使用できないが、近い将来に使用される可能性があるケースを検討してください。 このアイコンに注釈を付けたり、オーバーレイを付けたりできますか?
- コードで見てください。
リスト ビュー、ツール バー、ツリー ビューのコンテキストのアイコン
リスト ビュー
Windows Vista では、ユーザーが探しているファイルを直接認識できるように、小規模で視覚的に異なるコンテンツを保持するファイルにサムネイルを使用します。 (これには Windows Thumbnailing アプリケーション プログラミング インターフェイスを使用します)。
サムネイル上のアプリケーション アイコンオーバーレイ (ここでは示されていません) は、ファイルのプレビューを表示するだけでなく、ファイルの種類のアプリケーションとの関連付けに役立ちます。
メモ： 視覚的に異なるコンテンツがないファイルの場合は、サムネイルを使用しないでください。 代わりに、オブジェクト表現と関連付けられているアプリケーションまたは型を示す従来のシンボリック ファイル アイコンを使用します。
[ツール バー]
- ツールバーに表示されるアイコンは、サイズ、色、複雑さの光学バランスが必要です。
- 望ましくない支配や不均衡を回避するために、コンテキストスクリーンショットで潜在的なアイコンをテストします。
- スクリーン ショットでのテストは、コードでのコストのかかる繰り返しを簡単に回避するのに役立ちます。
- コード内のアイコンも確認します。 動きやその他の要因は、アイコンの成功に影響を与える可能性があります。場合によっては、さらに反復が必要になる場合があります。
上記の例では、光学バランスはまだ達成されていない。
コンテキストでイテレーションを試します。
ツリー ビュー
- ツリー ビュー コントロールで階層を保持するには、光学式バランスが必要です。
- したがって、このコンテキストで通常使用されるアイコンは、そこで評価する必要があります。 場合によっては、特定の 16 x 16 アイコンを小さくする必要があります。その形状は他のアイコンよりも光学的に優勢であるためです。
- 光学不均衡の補償は、最高品質のアイコンを生成する上で重要な部分です。
