アイコン (設計の基本)Icons (Design basics)

注意

この設計ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。This design guide was created for Windows 7 and has not been updated for newer versions of Windows. ガイダンスの多くは依然として原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。Much of the guidance still applies in principle, but the presentation and examples do not reflect our current design guidance.

アイコンはオブジェクトを視覚的に表現したものであり、プログラムの視覚的な id の一部として美しい理由のためだけでなく、ユーザーがほぼ瞬時に認識しているという意味を utilitarian にするためにも重要です。Icons are pictorial representations of objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Windows Vista では、より高いレベルの詳細を Windows に提供する新しいスタイルの iconography が導入されています。Windows Vista introduces a new style of iconography that brings a higher level of detail and sophistication to Windows.

注:標準アイコンに関連するガイドラインについては、別の記事で説明します。Note: Guidelines related to standard icons are presented in a separate article.

設計概念Design concepts

Aero は、Windows Vista のユーザーエクスペリエンスの名前であり、外観の設計に組み込まれている値と、ユーザーインターフェイス (UI) の構想の両方を表します。Aero is the name for the user experience of Windows Vista, representing both the values embodied in the design of the aesthetics, as well as the vision behind the user interface (UI). Aero は、本物、energetic、反射、オープンを意味します。Aero stands for: authentic, energetic, reflective, and open. Aero は、プロフェッショナルと美しい両方の設計を確立することを目的としています。Aero aims to establish a design that is both professional and beautiful. Aero では、ユーザーの生産性を向上させるとともに、感情的な対応を促進する、高品質で洗練されたエクスペリエンスを実現します。The Aero aesthetic creates a high quality and elegant experience that facilitates user productivity and even drives an emotional response.

Windows Vista のアイコンは、Windows XP スタイルのアイコンとは次の点で異なります。Windows Vista icons differ from Windows XP-style icons in the following ways:

  • スタイルはわかりやすく、非常に写実的なものではありません。The style is more realistic than illustrative, but not quite photorealistic. アイコンは、フォト画像よりも見栄えが良いシンボルイメージです。Icons are symbolic images they should look better than photorealistic!
  • アイコンの最大サイズは256x256 ピクセルであり、高 dpi (1 インチあたりのドット数) の表示に適しています。Icons have a maximum size of 256x256 pixels, making them suitable for high-dpi (dots per inch) displays. これらの高解像度のアイコンを使用すると、大きなアイコンが表示されたリストビューで、視覚品質を高めることができます。These high-resolution icons allow for high visual quality in list views with large icons.
  • 実際には、固定ドキュメントアイコンがコンテンツのサムネイルに置き換えられるため、ドキュメントの識別と検索が容易になります。Wherever practical, fixed document icons are replaced by thumbnails of the content, making documents easier to identify and find.
  • ツールバーアイコンは、より小さなサイズと視覚 distinctiveness を最適化するために、詳細度が低く、パースペクティブがありません。Toolbar icons have less detail and no perspective, to optimize for smaller sizes and visual distinctiveness.

適切にデザインされたアイコン:Well-designed icons:

  • プログラムの視覚的な通信を改善します。Improve the visual communication of your program.
  • ユーザーのプログラムのビジュアルデザインの全体的な印象に大きな影響を与え、その適合性と完了について感謝します。Strongly impact users' overall impression of your program's visual design, and appreciation for its fit-and-finish.
  • プログラム、オブジェクト、およびアクションを識別、学習、および検索しやすくすることにより、使いやすさを向上させます。Improve usability by making programs, objects, and actions easier to identify, learn, and find.

次の図は、windows Vista で iconography の Aero スタイルが Windows XP で使用されるものと異なっていることを示しています。The following images depict what makes the Aero style of iconography in Windows Vista different from that used in Windows XP.

ロックとキーアイコンの画像

Windows Vista のアイコン (左側のロックとキー) は、本物で、明瞭で詳細なものです。The Windows Vista icons (the lock and key on the left) are authentic, crisp, and detailed. 描画されるのではなく、描画されますが、完全にはフォトリアリスティックではありません。They are rendered rather than drawn, but are not completely photorealistic.

地球とらせんの notebook アイコンの画像

Windows Vista のアイコン (左側の2つ) は professional と美しいで、アイコンの実稼働品質を向上させる詳細に注意しています。The Windows Vista icons (the two on the left) are professional and beautiful, with attention to details that improve icon production quality.

ノートブック、ロック、モニター、用紙の画像

これらの Windows Vista アイコンは、パースペクティブと詳細で光学バランスと認識精度を示しています。These Windows Vista icons show optical balance and perceived accuracy in perspective and details. これにより、非常に大きい、または小さい、アップクローズ、または距離からの検索が可能になります。This allows them to look great big or small, up-close or from a distance. さらに、このスタイルの iconography は、高解像度の画面でも動作します。Moreover, this style of iconography works for high-resolution screens.

ワイヤレスルーターアイコンの画像用紙アイコンの画像大きな緑色の右矢印アイコンの画像

これらの例では、パースペクティブの3次元オブジェクト、前面 (フラット) アイコン、ツールバーアイコンなど、さまざまな種類のアイコンを示しています。These examples show different types of icons, including a three-dimensional object in perspective, a front-facing (flat) icon, and a toolbar icon.

ガイドラインGuidelines

パースペクティブPerspective

  • Windows Vista のアイコンは、3次元で、solid オブジェクトとしてパースペクティブに表示されるか、または直線を表示する2次元のオブジェクトです。Icons in Windows Vista are either three-dimensional and shown in perspective as solid objects, or two-dimensional objects shown straight-on. ファイルのフラットアイコンと、ドキュメントや紙のような実際にフラットなオブジェクトを使用します。Use flat icons for files and for objects that are actually flat, like documents or pieces of paper.

    3d コンピューターのイメージとフラットな2d 用紙images of 3d computer and flat, 2d paper

    一般的な3D アイコンとフラットアイコン。Typical 3D and flat icons.

  • 3次元オブジェクトは、パースペクティブではソリッドオブジェクトとして表され、2つの消点を持つ小さな鳥の視点から見られます。Three-dimensional objects are represented in perspective as solid objects, seen from a low birds-eye view with two vanishing points.

    パースペクティブを示す線が表示されているノートブックの画像

    この例は、3D アイコンの一般的なパースペクティブと消点を示しています。This example shows perspective and vanishing points typical of 3D icons.

  • サイズを小さくすると、同じアイコンがパースペクティブからストレートに変わる場合があります。In the smaller sizes, the same icon may change from perspective to straight-on. 16 x 16 ピクセル以下のサイズでは、描画アイコンがストレート (前面) に表示されます。At the size of 16x16 pixels and smaller, render icons straight-on (front-facing). 大きいアイコンの場合は、[パースペクティブ] を使用します。For larger icons, use perspective.

    • 例外: ツールバーアイコンは、サイズが大きい場合でも常に前面に向いています。Exception: Toolbar icons are always front-facing, even in larger sizes.

    大きな3d コンピューターと小さい2d コンピューターの画像image of large 3d computer and small 2d computer

    この例では、サイズに応じて、同じアイコンが異なる方法で処理される方法を示します。This example shows how the same icon is treated differently, depending on size.

光源Light source

  • パースペクティブグリッド内のオブジェクトの光源が上にあり、少し前に、オブジェクトの左側にわずかに含まれています。The light source for objects within the perspective grid is above, slightly in front of, and slightly to the left of the object.
  • 光源は、オブジェクトの基本の背面および右側に若干ある影をキャストします。The light source casts shadows that are slightly to the rear and right of the object's base.
  • すべての光線は並行しており、同じ角度 (太陽など) に沿ってオブジェクトを打ち消します。All light rays are parallel, and strike the object along the same angle (like the sun). 目標は、すべてのアイコンとスポットライト効果の間で一貫した照明の外観を持つことです。The goal is to have a uniform lighting appearance across all icons and spotlight effects. 平行光線は、すべてが同じ長さと密度を持つ影を生成し、複数のアイコンに対してさらに unity を提供します。Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.

OverloadsShadows

全般General

  • 影を使用すると、背景からオブジェクトを視覚的に持ち上げることができます。また、3D オブジェクトは、awkwardly 浮動小数点型ではなく、接地された状態で表示されます。Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space.

  • 影には、30-50% の不透明度の範囲を使用します。Use an opacity range of 30-50 percent for shadows. アイコンの形状や色によっては、異なるレベルの影を使用することがあります。Sometimes a different level of shadow should be used, depending on the shape or color of an icon.

  • 必要に応じて影をぼかしたり短くしたりして、アイコンボックスのサイズによってトリミングされないようにします。Feather or shorten the shadow if necessary, to keep it from being cropped by the icon box size.

  • 24 x 24 またはそれより小さいサイズのアイコンでは、影を使用しないでください。Don't use shadows in icons at 24x24 or smaller sizes.

    影付き3d アイコンの画像images of 3d icons with shadows

    一般的なアイコンの影。Typical icon shadows.

フラットアイコンFlat icons

  • フラットアイコンは、一般に、ファイルアイコンや、ドキュメントや紙などのフラットな現実世界のオブジェクトに使用さ れます。Flat icons are generally used for file icons and flat real-world objects, such as a document or a piece of paper.
  • フラットアイコンの光源は、130度の左上から取得します。Flat icon lighting comes from the upper-left at 130 degrees.
  • 小さいアイコン (16x16 や32x32 など) は、読みやすくするために簡略化されています。Smaller icons (for example, 16x16 and 32x32) are simplified for readability. ただし、アイコン内に反射がある (多くの場合、簡略化されている) 場合は、ドロップシャドウが密になっている可能性があります。However, if they contain a reflection within the icon (often simplified), they may have a tight drop shadow. ドロップシャドウの範囲は、不透明度が30-50% になります。The drop shadow ranges in opacity from 30-50 percent.
  • レイヤー効果はフラットアイコンに使用できますが、他のフラットアイコンと比較する必要があります。Layer effects can be used for flat icons, but should be compared with other flat icons. オブジェクトの影は、最適なものと、サイズセット内で最も一貫しているもの、および Windows Vista のその他のアイコンによって多少異なります。The shadows for objects will vary somewhat, according to what looks best and is most consistent within the size set and with the other icons in Windows Vista. 場合によっては、影を変更することが必要になることもあります。On some occasions, it may even be necessary to modify the shadows. これは特に、オブジェクトが他のオブジェクトに対してレイアウトされている場合に当てはまります。This will especially be true when objects are laid over others.
  • 色の微妙な範囲を使用して、目的の結果を得ることができます。A subtle range of colors may be used to achieve desired outcome. シャドウのヘルプオブジェクトをスペースに配置します。Shadows help objects sit in space. 色は、認識されている影の太さに影響を及ぼし、大きすぎる場合にはイメージをゆがめてしまう可能性があります。Color impacts the perceived weight of the shadow, and may distort the image if it is too heavy.

ドロップシャドウがオンになっているダイアログボックスのスクリーンショットscreen shot of dialog box with drop shadow checked ドロップシャドウが狭い用紙アイコンのスクリーンショットscreen shot of paper icon with narrow drop shadow

[レイヤースタイル] ダイアログボックスのドロップシャドウオプションと、フラットアイコンの一般的な影。The Drop Shadow option in the Layer Style dialog box, and a typical shadow for a flat icon.

基本的なフラットアイコンの影の範囲Basic flat icon shadow ranges

特徴Characteristic RangeRange
ColorColor
BlackBlack
Blend モードBlend mode
乗算Multiply
OpacityOpacity
項目の色に応じて22-50%22-50 percent, depending on color of the item
AngleAngle
120-130 (グローバルライトを使用)120-130 (use global light)
距離Distance
256x256 の場合は3、32x32 の場合は1まで3 for 256x256, ranging down to 1 for 32x32
分散Spread
00
サイズSize
256x256 の場合は7、32x32 の場合は2まで7 for 256x256, ranging down to 2 for 32x32

3次元アイコンThree-dimensional icons

  • 3D アイコンの影をケースごとに作成し、キャスト距離の範囲内に収まるようにして、完全に透明にするためにぼかします。Create shadows for 3D icons on a case-by-case basis, with an effort to fit within a range of cast distance and feathering to fully transparent. サイズでイメージを作成する場合は、アイコンサイズの全体的な要件よりも少し小さいので、ドロップシャドウの領域を確保します (必要なサイズの場合)。Create the images in a size a bit smaller than the overall icon size demands to allow space for a drop shadow (for those sizes that will require one). アイコンの端に影が急激に終了していないことを確認します。Make sure the shadow doesn't end abruptly at the edge of the icon.

Photoshop での影の作成の図

さまざまな影を持つ4つのオブジェクトの図

これらの例は、オブジェクト自体の形状と位置に基づいて作成されたバリエーションを示すのに役立ちます。These examples help demonstrate variations created based on the shape and position of the object itself. シャドウは、アイコンボックスのサイズによってトリミングされないようにするために、ぼかしや短縮が必要になることがあります。The shadow sometimes needs to be feathered or shortened to keep it from being cropped by the icon box size.

色と鮮やかさColor and saturation

  • 通常、色は Windows XP よりも彩度が低くなります。Colors are generally less saturated than they were Windows XP.

  • グラデーションを使用して、より現実的な外観の画像を作成します。Use gradients to create a more realistic looking image.

  • 標準アイコンには特定の色パレットがありませんが、多くのコンテキストとテーマで、それらを連携させる必要があることに注意してください。Although there is no specific color palette for standard icons, remember that they need to work well together in many contexts and themes. 色の標準セットを優先します。警告アイコンなどの標準アイコンを再設定しないでください。これは、ユーザーが意味を解釈することを中断します。Prefer the standard set of colors; don't re-color standard icons, such as warning icons, because this disrupts users' ability to interpret meaning. 詳細については、「 Color」を参照してください。For more guidelines, see Color.

  • リモートデスクトップで既定の設定をサポートするには 、アイコンファイルに8ビットおよび4ビットのパレットバージョンも必要 です。Icon files require 8-bit and 4-bit palette versions as well, to support the default setting in a remote desktop. これらのファイルはバッチ処理を使用して作成できますが、読みやすくするためにレタッチが必要になるため、確認する必要があります。These files can be created through a batch process, but they should be reviewed, as some will require retouching for better readability.

    [カラーピッカー] ダイアログボックスのスクリーンショットscreen shot of color picker dialog box

    カラーパレットの厳密な制限はありません。There is no strict color palette restriction. 全鮮やかさ (右上) のみが回避されます。Only full-saturation (top right) is avoided.

  • ビットレベル:32 ビット (アルファが含まれている) + 8 ビット + 4 ビット (ディザーダウンされた自動ピクセルからかう最も重要なもののみ) の ICO デザイン。Bit levels: ICO design for 32-bit (alpha included) + 8-bit + 4-bit (dithered down automatically pixel poke only most critical). 256x256 ピクセルイメージの32ビットコピーのみを含める必要があります。また、ファイルサイズを縮小するには、256x256 ピクセルイメージのみを圧縮する必要があります。Only a 32-bit copy of the 256x256 pixel image should be included, and only the 256x256 pixel image should be compressed to keep the file size down. いくつかのアイコンツールは、Windows Vista 用の圧縮機能を提供します。Several icon tools offer compression for Windows Vista.

  • ビットレベル: ツールバー24ビット + アルファ (1 ビットマスク)、8ビットおよび4ビット。Bit levels: Toolbars 24-bit + alpha (1 bit mask), 8-bit and 4-bit.

  • ツールバーまたは AVI ファイル: 背景の透明度の色としてマゼンタ (R255 G0 B255) を使用します。Toolbars or AVI files: Use magenta (R255 G0 B255) as the background transparency color.

サイズの要件Size requirements

全般General

  • 主要なアプリケーションアイコン、エクスプローラーに表示できるファイルアイコン、[スタート] メニューまたはデスクトップに表示されるアイコンなど、高い表示アイコンに特に注意 してください。Pay special attention to high visibility icons, such as main application icons, file icons that can appear in Windows Explorer, and icons appearing in the Start Menu or on the desktop.
    • アプリケーションアイコンとコントロールパネルの項目: 完全なセットには、16x16、32x32、48 x 48、および256x256 が含まれます (コードは32と256の間にスケールされます)。Application icons and Control Panel items: The full set includes 16x16, 32x32, 48x48, and 256x256 (code scales between 32 and 256). .Ico ファイル形式が必要です。The .ico file format is required. クラシックモードの場合、完全なセットは16x16、24 x 24、32x32、48 x 48、および64x64 です。For Classic Mode, the full set is 16x16, 24x24, 32x32, 48x48 and 64x64.
    • リスト項目アイコンのオプション: ライブサムネイルまたはファイルの種類のファイルアイコン (.doc など) を使用します。完全なセット。List item icon options: Use live thumbnails or file icons of the file type (for example, .doc); full set.
    • ツールバーアイコン: 16x16、24 x 24、32x32。Toolbar icons: 16x16, 24x24, 32x32. ツールバーアイコンは、32 x 32 サイズであっても、3D ではなく、常にフラットであることに注意してください。Note that toolbar icons are always flat, not 3D, even at the 32x32 size.
    • ダイアログとウィザードのアイコン: 32x32 および 48 x 48。Dialog and wizard icons: 32x32 and 48x48.
    • オーバーレイ: コアシェルコード (たとえば、ショートカット) 10x10 (16x16 の場合)、16x16 (32x32 の場合)、24 x 24 (48 x 48 の場合)、128x128 (for 256x256) です。Overlays: Core shell code (for example, a shortcut) 10x10 (for 16x16), 16x16 (for 32x32), 24x24 (for 48x48), 128x128 (for 256x256). これらの一部は若干小さくなることに注意してください。ただし、このサイズは、形状と光学バランスによって異なります。Note that some of these are slightly smaller but are close to this size, depending on shape and optical balance.
    • クイック起動領域: アイコンは Alt + Tab 動的オーバーレイで 48 x 48 からスケールダウンされますが、より明瞭なバージョンの場合は、.ico ファイルに 4 0x40 を追加します。Quick Launch area: Icons will scale down from 48x48 in Alt+Tab dynamic overlays, but for a more crisp version, add a 40x40 to .ico file.
    • バルーンアイコン: 32x32 および40x40。Balloon icons: 32x32 and 40x40.
    • 追加のサイズ: これらは、他のファイル (注釈、ツールバーストリップ、オーバーレイ、高 dpi、特殊なケースなど) を作成するためのリソースとして使用する場合に便利です。128x128、96x96、64x64、40x40、24 x 24、22x22、14x14、10x10、および8x8 です。Additional sizes: These are useful to have on hand as resources to make other files (for example, annotations, toolbar strips, overlays, high dpi, and special cases): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10, and 8x8. .Ico、.png、.bmp、またはその他のファイル形式は、その領域内のコードによって使用できます。You can use .ico, .png, .bmp, or other file formats, depending on code in that area.

高 dpi の場合For high dpi

  • Windows Vista は 96 dpi と 120 dpi を対象としています。Windows Vista targets 96 dpi and 120 dpi.

次の表は、2つの一般的なアイコンサイズに適用されるスケーリング比率の例を示しています。The following tables show examples of scaling ratios applied to two common icon sizes. これらのサイズのすべてを .ico ファイルに含める必要はないことに注意してください。Note that not all of these sizes must be included in the .ico file. このコードは、スケールダウンされます。The code will scale larger ones down.

dpidpi アイコンのサイズIcon size スケール ファクターScale factor
9696
16x1616x16
1.0 (100%)1.0 (100%)
120120
20 x 2020x20
1.25 (125%)1.25 (125%)
144144
24 x 2424x24
1.5 (150%)1.5 (150%)
192192
32x3232x32
2.0 (200%)2.0 (200%)
dpidpi アイコンのサイズIcon size スケール ファクターScale factor
9696
32x3232x32
1.0 (100%)1.0 (100%)
120120
40 x 4040x40
1.25 (125%)1.25 (125%)
144144
48 x 4848x48
1.5 (150%)1.5 (150%)
192192
64 x 6464x64
2.0 (200%)2.0 (200%)

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

さまざまな標準サイズのルーターアイコンを示す図。

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

さまざまなサイズのルーターアイコンの図illustration of different-sized router icons

注釈とオーバーレイAnnotations and overlays

  • 注釈はアイコンの右下隅に表示され、アイコン領域の25% になります。Annotations go in bottom-right corner of icon, and should fill 25 percent of icon area.
    • 例外: 16x16 アイコンは10x10 注釈を取得します。Exception: 16x16 icons take 10x10 annotations.
  • アイコンに対して複数の注釈を使用しないでください。Don't use more than one annotation over an icon.
  • オーバーレイはアイコンの左下隅に表示され、アイコン領域の25% になります。Overlays go in bottom-left corner of icon, and should fill 25 percent of icon area.
    • 例外: 16x16 アイコンは10x10 オーバーレイを受け取ります。Exception: 16x16 icons take 10x10 overlays.

詳細レベルLevel of detail

  • これらのアイコンの多くは16x16 サイズで広く使用されているため、重要です。16x16 size of many of these icons is still widely used and therefore important.

  • このサイズのアイコンの詳細では、アイコンの重要なポイントが明確に示されている必要があります。The details in an icon of this size must clearly show the key point of the icon.

  • アイコンが小さくなるにつれて、透明度が大きくなり、より大きなサイズの一部の特殊な詳細情報が、単純化してポイントを取得するために犠牲になる必要があります。As an icon gets smaller, transparency and some special details found in larger sizes should be sacrificed in order to simplify and get the point across.

  • キーフォームを強調するために、属性と色を誇張し、使用する必要があります。Attributes and colors should be exaggerated and used to emphasize the key forms.

    1つの大きいデバイスと2つの小さいデバイスの図illustration of one large and two small devices

    16 x 16 で、ポータブルオーディオデバイスのアイコンが携帯電話に対して簡単に誤って表示されるようになりました。これは、耳が重要な視覚的詳細であることを示しています。At 16x16, the icon for the portable audio device could easily be mistaken for a cell phone so the ear piece is a key visual detail to show.

  • 256x256 サイズからスケールダウンするだけでは機能しません。Simply scaling down from the 256x256 size does not work.

  • すべてのサイズには、関連する詳細レベルが必要です。アイコンが小さいほど、定義の詳細を誇張するために必要な詳細が表示されます。All sizes need relevant level of detail; the smaller the icon the more you need to exaggerate the defining details.

    明確な詳細を含む携帯電話の図illustration of cell phones with clear details

    詳細がぼやけた携帯電話の図illustration of cell phones with blurry details

アイコン開発Icon development

アイコンのデザインと生成Designing and producing icons

  • 経験豊富なグラフィックデザイナーを採用します。Hire an experienced graphic designer. 優れたグラフィックス、画像、アイコンが専門家と連携します。For great graphics, images, and icons work with experts. ベクターアートまたは3D プログラムを使用することをお勧めします。Experience in illustrations using vector art or 3D programs is recommended.
  • 初期の概念スケッチから、コンテキスト内モック作成まで、一連のイテレーションを、作業中の製品の最終的な運用レビューや、正常に完了したアイコンに合わせる 計画を立て ます。Plan to do series of iterations, from initial concept sketches, to in-context mock-ups, to final production review and fit-and-finish of icons in the working product.
  • 前のアイコンの作成にはコストがかかる場合があります。Think ahead icon creation can be expensive. すべての既存の詳細と要件 (必要なアイコンの完全なセットなど) を収集します。main 関数とそれぞれの意味明らかにするセット内のファミリまたはクラスター。ブランドの要件正確なファイル名。コードで使用されるイメージ形式。およびサイズの要件。Gather all existing details and requirements, such as: the complete set of icons needed; the main function and meaning for each; families or clusters in the set you want to be apparent; brand requirements; the exact file names; image formats used in your code; and size requirements. デザイナーで時間を最大限に活用できることを事前に確認してください。Ensure up front that you can make the most of your time with the designer.
  • デザイナーが製品に精通していない可能性があるので、必要に応じて機能情報、スクリーンショット、および仕様セクションを指定してください。Remember that the designer may not be familiar with your product, so provide functional information, screen shots, and spec sections, as appropriate.
  • 必要に応じて、地理的および法的レビューを計画します。Plan for geopolitical and legal reviews as appropriate.
  • 時間枠を割り当てて、通常の通信を行います。Map out a timeframe and have regular communication.

概念のスケッチから終了製品へFrom concept sketch to end-product

携帯電話のスケッチの開発の図illustration of developing sketches of cell phones

  • 概念スケッチを作成します。Create concept sketches.
  • さまざまなサイズの概念を試してみてください。Try out the concept in different sizes.
  • 必要に応じて3D でレンダリングします。Render in 3D if necessary.
  • さまざまな背景色でサイズをテストします。Test sizes on different background colors.
  • 実際の UI のコンテキストでアイコンを評価します。Evaluate icons in the context of the real UI.
  • 最終的な .ico ファイルまたはその他のグラフィックリソース形式を生成します。Produce final .ico file or other graphic resource formats.

ツールTools

  • 鉛筆と紙: 初期の概念、一覧、およびスケッチ。Pencil and paper: Initial concept ideas, listed and sketched.
  • 3D Studio の最大値: 3D オブジェクトをパースペクティブでレンダリングします。3D Studio Max: Render 3D objects in perspective.
  • Adobe Photoshop: スケッチと反復処理、コンテキストでのモックアップ、および詳細の最終処理を行います。Adobe Photoshop: Sketch and iterate, mock-up in context, and finalize details.
  • Adobe Illustrator/ お金を持っているフリーハンド:スケッチと反復処理、詳細の確定。Adobe Illustrator/ Macromedia Freehand: Sketch and iterate, finalize details.
  • Gamani Gif ムービー歯車: .Ico ファイルを生成します (必要に応じて圧縮します)。Gamani Gif Movie Gear: Produce .ico file (with compression if needed).
  • 軸のアイコンのワークショップ: .Ico ファイルを生成します (必要に応じて圧縮します)。Axialis Icon Workshop: Produce .ico file (with compression if needed).
  • Microsoft Visual Studio では、Windows Vista アイコンがサポートされていません (アルファチャネルまたは256色を超える色はサポートされていません)。Microsoft Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors).

運用Production

ヒント

次の手順に従って、複数のイメージサイズと色深度を含む1つの .ico ファイルを作成します。Follow these steps to create a single .ico file that contains multiple image sizes and color depths.

手順 1: 概念Step 1: Conceptualize

  • 可能な限り、確立された概念を使用して、アイコンの意味と他の用途との関連性を確認します。Use established concepts where possible, to ensure consistency of meanings for the icon and its relevance to other uses.
  • UI のコンテキストでアイコンがどのように表示されるか、および一連のアイコンの一部としてどのように動作するかを検討します。Consider how the icon will appear in the context of the UI, and how it might work as part of a set of icons.
  • 既存のアイコンを改訂する場合は、複雑さを軽減できるかどうかを検討してください。If revising an existing icon, consider whether complexity can be reduced.
  • グラフィックスの文化の影響を考慮してください。Consider the cultural impact of your graphics. アイコンでは、文字、単語、ハンド、顔を使用しないようにしてください。Avoid using letters, words, hands, or faces in icons. 必要に応じて、ユーザーまたはユーザーの表現を可能な限り汎用的にします。Depict representations of people or users as generically as possible, if needed.
  • 複数のオブジェクトを1つのアイコンで1つのイメージに結合する場合は、イメージのサイズを小さくする方法を検討してください。If combining multiple objects into a single image in an icon, consider how the image will scale to smaller sizes. アイコンでは、3つのオブジェクトを使用しないでください (2 つが推奨されます)。Use no more than three objects in an icon (two is preferred). 16x16 サイズの場合は、オブジェクトを削除するか、イメージを単純化して認識を向上させることを検討してください。For the 16x16 size, consider removing objects or simplifying the image to improve recognition.
  • Windows フラグをアイコンで使用しないでください。Do not use the Windows flag in icons.

手順 2: 例Step 2: Illustrate

  • Windows Aero のスタイルアイコンについて説明するために、このようなベクターツールを使用します。To illustrate Windows Aero style icons, use a vector tool such as Macromedia Freehand or Adobe Illustrator. この記事で既に説明したように、パレットとスタイルの特性を使用します。Use the palette and style characteristics as outlined earlier in this article.
  • フリーハンドまたは Illustrator を使用してイメージを示します。Illustrate image using Freehand or Illustrator. ベクターイメージをコピーして Adobe Photoshop に貼り付けます。Copy and paste the vector images into Adobe Photoshop.
  • Photoshop でテンプレートレイヤーを作成および使用して、規制されたサイズの四角形の領域内で作業が行われるようにします。Make and use a template layer in Photoshop to make sure that work is done within square regions of the regulated sizes.
  • サイズでイメージを作成する場合は、アイコンサイズの全体的な要件よりも少し小さいので、ドロップシャドウの領域を確保します (必要なサイズの場合)。Create the images in a size a bit smaller than the overall icon size demands to allow space for a drop shadow (for those sizes that require one).
  • 四角形の下部に画像を配置すると、ディレクトリ内のすべてのアイコンが一貫した場所に配置されます。Place images at the bottom of the squares, so that all icons in a directory are positioned consistently. 影を切ることは避けてください。Avoid cutting off shadows.
  • イメージまたは系列に別のオブジェクトを追加する場合は、メインオブジェクトを固定された位置に保持し、大文字と小文字の違いに応じて、左下や右上などの固定された位置にフラットなサイズの画像を配置します。If you are adding another object to an image or a series, keep the main object in a fixed position, and place flat smaller sized images in a fixed position, such as the lower-left or upper-right depending on the case.

手順 3:24 ビットイメージを作成するStep 3: Create the 24-bit images

  • Photoshop でサイズを貼り付けたら、イメージの読みやすさをチェックします (特に、16x16 と小さいサイズの場合)。Once you've pasted sizes in Photoshop, check the readability of images, especially at 16x16 and smaller sizes. 色の割合を使用してピクセルを調査することが必要になる場合があります。Pixel-poking using percentages of colors may be required. 透明度の削減も必要になる場合があります。Reduction of transparency may also be needed. 重要な点に焦点を当てるために、より小さなサイズで側面を誇張し、側面も除去することは一般的です。It is common to exaggerate aspects at smaller sizes and to eliminate aspects as well, in order to focus on the key point.
  • 8ビットのアイコンは、32ビットより低いカラーモードで表示され、8ビットのアルファチャネルは含まれません。アンチエイリアシング (エッジはギザギザになる可能性があり、画像が読みづらくなる可能性があります) がないため、これらのエッジがクリーンアップされる必要がある場合があります。The 8-bit icons will be displayed in any color mode lower than 32-bit and will not have the 8-bit alpha channel, so they may need to have their edges or more cleaned up because there's no anti-aliasing (edges may be jagged and image may be hard to read).
  • Photoshop では、24ビットのイメージレイヤーを複製し、レイヤーの名前を4ビットのイメージに変更します。In Photoshop, duplicate the 24-bit image layer and rename the layer to 4-bit images. Windows 16 のカラーパレットに4ビットイメージのインデックスを作成します。Index 4-bit images to the Windows 16 color palette.
  • 16色パレットの色だけを使用してイメージをクリーンアップします。Clean up images using only the colors from the 16 color palette. オブジェクトの色の濃い色または薄色からの輪郭は、通常、グレーまたは黒にすることをお勧めします。Outlines made from darker or lighter versions of the object's colors are usually preferable to grey or black.
  • ビットマップで作業している場合は、背景色が透明色になるため、イメージ自体で使用されていないことを確認してください。If working on a bitmap, be sure that the background color isn't used in the image itself, because that color that will be the transparent color. マゼンタ (R255 G0 B255) は、多くの場合、背景の透明度の色として使用されます。Magenta (R255 G0 B255) is often used as the background transparency color.

手順 4: 8 ビットおよび4ビットのイメージを作成するStep 4: Create the 8-bit and 4-bit images

  • 24ビットイメージを32ビットアイコンにする準備ができたので、8ビットバージョンを作成する必要があります。Now that the 24-bit images are ready to be made into 32-bit icons, 8-bit versions need to be created.
  • これは、状況に合ったスクリーンショットをテストする絶好の機会です。This is a great time to test contextual screen shots. これは、他のアイコンまたはアイコンのファミリをコンテキストで表示することによって発見できるすばらしい機能です。It's amazing what can be discovered by viewing other icons or a family of icons in context. この手順により、時間とコストを節約できます。This step can save time and money. ファイルが運用環境を経由して渡される前に、問題を発見する方がはるかに適しています。It is much better to catch issues before files go through production and are handed off.
  • イメージに必要なサイズでドロップシャドウを追加します。Add the drop shadow to your images in sizes that require them.
  • ドロップシャドウと24ビットのイメージをまとめて結合します。Merge the drop shadow and the 24-bit images together.
  • 各サイズに対して新しい Photoshop ファイルを作成します。Create a new Photoshop file for each size. 適切なイメージをコピーして貼り付けます。Copy and paste the appropriate image. 各ファイルを .psd ファイルとして保存します。Save each file as a .psd file.
  • イメージレイヤーを背景層と結合しないでください。Do not merge the image layer with the background layer. 作業中はファイル名にサイズと色の深度を含めることをお勧めしますが、最終的にファイルの名前を変更する必要があります。It's helpful to include the size and color depth in the file name while working, but the file may ultimately need to be renamed.

手順 5: .ico ファイルを作成するStep 5: Create the .ico file

  • アーティストのニーズとスキルを最もよく満たすアプリケーションを選択します。Choose the application that best meets needs and skills of artists. 出荷製品で使用されるアイコンは、購入またはライセンス供与されたツールで作成する必要があることに注意してください。Remember that icons to be used in a shipping product must be created in a tool that has been purchased or licensed. これは、評価版を使用できないことを意味します。This means that trial versions cannot be used.
  • 以下に示す製品はどちらも、Windows Vista 用のアイコンを作成したデザイナーによって使用されており、Adobe Photoshop CS にエクスポートする機能を提供しています。Both of the products listed below have been used by designers who have produced icons for Windows Vista, and each offers the ability to export to Adobe Photoshop CS.
    • Gamani Gif Movie 歯車: .ico ファイルを生成します。Gamani Gif Movie Gear: Produce .ico file
    • 軸のアイコンワークショップ: .ico ファイルを生成します。Axialis Icon Workshop: Produce .ico file
  • Visual Studio では、Windows Vista アイコンがサポートされていません (アルファチャネルまたは256色を超える色はサポートされていません)。そのため、使用することはお勧めしません。Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors), so its use is not recommended.
  • アイコン (.ico 形式) ファイルには、4ビットバージョンと8ビットバージョン、および24ビット + アルファが含まれている必要があります。Icon (.ico format) files must contain the 4- and 8-bit versions, as well as the 24-bit + alpha.
  • どのアイコン作成プログラムを使用するかにかかわらず、ファイルを "Windows アイコン (.ico)" として保存します。Save files as a "Windows icon (.ico)" no matter which icon creation program you choose to use.
  • 一部の iconographic アセットは、実際にはビットマップストリップである場合があります。これには、アルファチャネル (たとえば、ツールバーの場合) や、透明度を付けて保存された .png ファイルも必要です。Some iconographic assets may actually be bitmap strips, which also require an alpha channel (for example, for toolbars), or .png files saved with transparency. すべてが .ico 形式であるとは限りません。コードでサポートされている形式を確認します。Not all are necessarily .ico format; check for what format is supported in code.

手順 6: 評価するStep 6: Evaluate

  • すべてのサイズを確認します。Look at all sizes.
  • 家族を見て、家族のあくま、光学バランス、および区別を評価します。Look at the family together to evaluate family resemblance, optical balance, and distinction.
  • コンテキストを調べて、相対的な重みと可視性を評価します (1 つが優位でないことを確認してください)。Look at in context to evaluate relative weights and visibility (make sure that one doesn't dominate).
  • 現在使用されていないケースを検討しますが、近い将来に存在する可能性があります。Consider cases that may not be used now, but could be in the near future. このアイコンに注釈を付けるか、オーバーレイを含めることができますか。Could this icon ever be annotated or have an overlay?
  • コード内のを確認します。Look at in code.

リストビュー、ツールバー、およびツリービューのコンテキストのアイコンIcons in the context of list views, toolbars, and tree views

リスト ビューList views

  • Windows Vista では、ユーザーが探しているファイルをユーザーが直接認識できるように、小さなスケールで視覚的に区別されるコンテンツを保持するファイルにサムネイルを使用します。For Windows Vista, use thumbnails for files holding content that is visually distinct at small scale, such that users can directly recognize the file they are looking for. (このためには、Windows サムネイルアプリケーションプログラミングインターフェイスを使用します。)(Use the Windows Thumbnailing application programming interface for this.)

    フォルダーアイコンが表示される windows エクスプローラーのスクリーンショットscreen shot of windows explorer with folder icons

  • サムネイルにアプリケーションアイコンのオーバーレイ (ここでは示されていません) は、ファイルのプレビューを表示するだけでなく、ファイルの種類のアプリケーションとの関連付けにも役立ちます。Application icon overlays (not shown here) on thumbnails help association with the application for the file type, in addition to showing the file's preview.

注: 視覚的に区別されない内容のファイルの場合は、サムネイルを使用しないでください。Note: For files without visually distinct content, don't use thumbnails. 代わりに、オブジェクト表現と関連付けられているアプリケーションまたは型を示す従来のシンボルファイルアイコンを使用します。Instead, use traditional symbolic file icons showing object representation and the associated application or type.

[ツール バー]Toolbars

  • ツールバーに表示されるアイコンのサイズ、色、および複雑さのバランスを取る必要があります。Icons that appear in a toolbar must have an optical balance in size, color, and complexity.
  • コンテキストスクリーンショットで考えられるアイコンをテストして、望ましくない支配や不均衡を回避します。Test potential icons in a contextual screen shot to avoid any undesired dominance or imbalances.
  • スクリーンショットでのテストは、コード内でのコストのかかるイテレーションの回避に役立ちます。Testing in screen shots easily helps avoid expensive iterations in code.
  • コード内のアイコンも確認します。Review the icons in code as well. モーションやその他の要因は、アイコンの成功に影響を与える可能性があります。場合によっては、さらにイテレーションが必要になることがあります。Motion and other factors can impact the success of an icon; in some cases further iterations may be needed.

小さいアイコンとラベルが表示されたツールバーのスクリーンショットscreen shot of toolbar with small icons and labels

上の例では、光学バランスがまだ達成されていません。In the above example, the optical balance has not yet been achieved.

さまざまな背景のアイコンの図illustration of icons on different backgrounds

コンテキストでイテレーションを試行します。Try iterations in context.

ツリー ビューTree views

  • ツリービューコントロール内の階層を維持するには、光学バランスが必要です。Optical balance is needed to preserve the hierarchy in a tree view control.
  • そのため、このコンテキストで通常使用されるアイコンは、そこで評価する必要があります。Therefore, icons that are typically used in this context should be evaluated there. 場合によっては、特定の16x16 のアイコンを小さくしてください。Sometimes a particular 16x16 icon should be made smaller because its shape has an optical dominance over others.
  • 光学不均衡の補正は、最高品質のアイコンを生成するうえで重要な部分です。Compensation for optical imbalances is an important part of producing top quality icons.

ツリービューの2つのフォルダーセットの図figure of two sets of folders in tree view