グラフィック要素
Note
この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。
グラフィック要素は 、リレーションシップ、階層、および強調を視覚的に示します。 背景、バナー、ガラス、アグリゲーター、区切り記号、影、ハンドルが含まれます。
いくつかの種類のグラフィック要素を含む例。
グラフィック要素は通常、対話型ではありません。 ただし、区切り記号はサイズ変更可能なコンテンツでは対話型であり、ハンドルは対話性を示すグラフィックスです。
メモ：グループ ボックス、アニメーション、アイコン、ブランド化に関連するガイドラインは、別の記事で示されています。
これは適切なユーザー インターフェイスですか?
グラフィック要素はリレーションシップを示す強力な視覚的手段ですが、それらを過剰に使用すると、視覚的な乱雑さが増し、サーフェスで使用できる領域が減ります。 これらは控えめに使用する必要があります。
Microsoft Windows のデザイントレンドは、不要なグラフィックスや線を排除することで、よりシンプルでクリーンな外観です。
グラフィック要素が必要かどうかを判断するには、次の質問を検討してください。
- デザインのプレゼンテーションとコミュニケーションは、 要素なしで同じくらい明確で効果的ですか? その場合は、削除します。
- レイアウトだけを使用してリレーションシップを効果的に伝達できますか? その場合は、代わりに レイアウト を使用します。 関連するコントロールを隣り合せて配置し、関連のないコントロール間に余分な間隔を置くことができます。 インデントを使用して階層リレーションシップを表示することもできます。
この例では、レイアウトのみを使用して、コントロールのリレーションシップを表示します。
使用パターン
グラフィック要素には、いくつかの使用パターンがあります。
| 要素 | 説明 |
|---|---|
|
グラフィックイラスト を使用して、アイデアを視覚的に伝える。 |
グラフィックイラストはアイコンに似ていますが、任意のサイズにすることができ、通常はインタラクティブではありません。 
この例では、グラフィック図を使用して、フィーチャーの性質を提案します。 |
|
背景 を使用して、さまざまな種類のコンテンツを強調または強調解除します。 |
背景を使用して、重要なコンテンツを強調できます。 
この例では、背景を使用して重要なタスクを強調します。 背景を使用して、セカンダリ コンテンツの強調を解除することもできます。 
この例では、セカンダリ タスクは作業ウィンドウ内で見つけることで強調されなくなりました。 |
|
バナー 重要な状態を示すために使用されます。 |
背景とは対照的に、バナーは主に 1 つのテキスト文字列を強調します。 
この例では、バナーを使用して、ページの設定がグループ ポリシーによって制御されていることを示します。 |
|
ガラス を戦略的に使用して、ウィンドウの視覚的な重みを減らします。 |
ガラスは、ウィンドウ自体の代わりにコンテンツに焦点を当てることで、表面の重量を減らすことができます。 
この例では、glass はコントロールではなくコンテンツにユーザーの注意を集中させます。 |
|
アグリゲーター を使用して、強く関連するコントロール間に視覚的な関係を作成します。 |
この例では、アグリゲーターの背景を使用して、エクスプローラーの [戻る] ボタンと [進む] ボタンの関係を強調します。
この例では、境界アグリゲーターを使用してコントロール間の関係を強調し、8 つではなく単一のコントロールのように感じさせます。 |
|
区切り記号 弱く関連するコントロールまたは関連のないコントロールを分離するには、 を使用します。 |
区切り記号は、対話型でも非対話型でもかまいません。 サイズ変更可能なコンテンツ間の対話型の区切り記号は、スプリッターと呼ばれます。 
この例では、サイズ変更可能なコンテンツに対話型の区切り記号を使用します。 
この例では、区切り記号は対話型ではありません。 |
|
Shadows を使用して、コンテンツを背景に対して視覚的に目立たせるために使用します。 |
この例では、影によってアートワークが背景に対して目立つようにします。 |
|
Handles を使用して、オブジェクトを移動またはサイズ変更できることを示します。 |
ハンドルは常に対話型であり、その動作はホバー時のマウス ポインターによって提案されます。 
これらの例では、ハンドルはオブジェクトのサイズを変更できることを示します。 |
ガイドライン
全般
- グラフィック要素だけで重要な情報を伝えないでください。 そうすることで、視覚障または障のあるユーザーにアクセシビリティの問題が発生します。
グラフィック デザイン
グラフィックスは、1 つの単純なアイデアを補強する場合に最も効果的です。 解釈する思考を必要とする複雑なグラフィックスはうまく機能しません。 象形文字は洞窟の図面に最適です。
正しくない:
この例では、Windows XP の複雑なグラフィックは、複雑な信頼の決定を説明しようと試みます。
矢印、シェブロン、ボタン フレーム、または対話型コントロールに関連付けられているその他のアフォーダンスは使用しないでください。 これにより、ユーザーがグラフィックスを操作するように招待されます。
デザインでは、純粋な赤、黄、緑のスワットを避けてください。 混乱を避けるために、状態を伝えるためにこれらの色を予約します。 これらの色を状態以外の色に使用する必要がある場合は、純粋な色ではなくミュートトーンを使用します。
文化的に中立的なデザインを使用します。 ある国、地域、または文化で特定の意味を持つことは、別の国では同じ意味を持たない場合があります。
人、顔、性別、身体の部分、宗教的、政治的、国家的なシンボルは使用しないでください。 このような画像は、簡単に翻訳できないか、不快感を与える可能性があります。
ユーザーまたはユーザーを表す必要がある場合は、それらを一般的に表します。 現実的な描写を避ける。
背景とバナー
コンテンツを強調するには、明るい背景に濃いテキストを使用します。 薄い灰色または黄色の背景の黒いテキストはうまく機能します。
この例では、リンクは黄色の背景にあるため、ユーザーの注意を引きます。
コンテンツの強調を解除するには、濃い背景に薄いテキストを使用します。 濃い灰色または青の背景の白いテキストはうまく機能します。
この例では、濃色の背景でコンテンツが強調解除されています。
グラデーションを使用する場合は、テキストの色がグラデーション全体で良好なコントラストを持っていることを確認します。
バナーに注意を引くには、常に 16 x 16 ピクセルのアイコンを使用します。 バナーを見落とすのが簡単すぎます。 その他のガイドラインと例については、「 標準アイコン」を参照してください。
背景とバナーは注意して使用してください。 背景やバナーの意図はコンテンツを強調することですが、多くの場合、結果は「バナーの失明」と呼ばれる現象とは反対です。
ガラス
- テキストなしでウィンドウ フレームに触れる小さな領域で、戦略的にガラスを使用することを検討してください。 そうすることで、領域がフレームの一部のように見えるようにすることで、プログラムをよりシンプルで軽く、まとまりのある外観にすることができます。
- プレーンウィンドウの背景がより魅力的で使いやすい状況では、ガラスを使用しないでください。
区切り記号
- 区切り記号には垂直線と水平線を使用します。 区切り記号と分離されるコンテンツの間に十分なスペースがあることを確認してください。
- サイズ変更可能なコンテンツ (スプリッター) 間の区切り記号の場合は、ホバー時にサイズ変更ポインターを表示します。
これらの例では、サイズ変更ポインターがホバー時に表示されます。
シャドウ
- プログラムの最も重要なコンテンツやドラッグされているオブジェクトを背景に対して視覚的に目立たせるためにのみ使用します。 他の状況では、影が視覚的に乱雑であると考えてください。
高 dpi のサポート
- 96 および 120 ドット/インチ (dpi) のビデオ モードをサポートします。 起動時に dpi モードを検出し、dpi 変更イベントを処理します。 Windows は 96 および 120 dpi 用に最適化されており、既定では 96 dpi を使用します。
- グラフィックスのスケーリングよりも 96 および 120 dpi 用にレンダリングされた個別のビットマップを提供することを好みます。 最も重要で可視のビットマップに対して少なくとも 96 と 120 dpi のバージョンを提供し、他のビットマップを中心または拡大縮小します。 このようなアプリケーションは"高 dpi 対応" と見なされ、Windows によって自動的にスケーリングされるプログラムよりも全体的なビジュアル エクスペリエンスが向上します。
- 開発者: プログラムのマニフェストで dpi 対応フラグを設定するか、プログラムの初期化中に SetProcessDPIAware() API を呼び出すことによって、プログラムの高 dpi 対応 (および自動スケーリングを防止) を宣言できます。 マクロを使用すると、適切なグラフィックスの選択を簡略化できます。 Win32 ビットマップの場合は、SS_CENTERIMAGEを使用して中央揃えまたはSS_REALSIZECONTROLして拡大縮小できます。
- 96 と 120 dpi の両方でプログラムを確認して、次のことを確認します。
- グラフィックスが小さすぎるか大きすぎます。
- グラフィックスがクリップされている、重複している、または正しくフィットしない。
- 伸びが不十分なグラフィックス ("pixilated")。
- グラフィック背景でクリップされたテキスト、または収まりきらないテキスト。
Text
- アクセシビリティとローカライズの場合は、グラフィックスでテキストを使用しないでください。 例外は、 ブランド化 とテキストを抽象的な概念として表すためにのみ行います。