アイコンは、動作や概念を視覚的に表現するものです。 多くの場合、コントロールやコマンドに意味を追加するために使用されます。 環境内でユーザーが移動するのにサインが役立つのと同じように、リアルなビジュアルや象徴的なビジュアルにより、ユーザーは UI 間を移動できるようになります。 お客様がコントロールを選択するときの動作をすばやく解析できるにように、必要な詳細のみを含む、シンプルで明確なビジュアルにする必要があります。
注:
この記事では、リボン ボタンのアイコンの設計について説明します。 Microsoft 365 アプリケーションのアプリの取得と管理 UI のアドインを表すアイコンに関するガイダンスについては、「 アドインの取得と管理のためのアイコンの設計」を参照してください。
Office アプリのリボン インターフェイスには、標準のビジュアル スタイルがあります。 これにより、Office アプリとの間で一貫性と親和性を保つことができます。 この記事のガイドラインは、Office の自然な部分として適合するソリューションの PNG アセットのセットを設計するのに役立ちます。
モノライン スタイル
Monoline スタイルの目標は、シンプルなビジュアルでアクションと機能を伝え、アイコンがすべてのユーザーがアクセスできることを確認し、Windows の他の場所で使用されているものと一致するスタイルを持つ、一貫性のある明確でアクセス可能な図像を持つことです。
次のガイドラインは、Office 製品に既に存在するアイコンと一致する機能のアイコンを作成するサード パーティの開発者向けです。
デザインの原則
- シンプル、クリーン、クリア。
- 必要な要素のみを含みます。
- Windows アイコン スタイルに触発されました。
- すべてのユーザーがアクセスできます。
意味を伝える
- 文書を表すページや、メールを表す封筒などの説明的な要素を使用します。
- 同じ要素を使用して、同じ概念を表します。 たとえば、メールは常にスタンプではなく封筒で表されます。
- 概念開発時にコアメタファーを使用します。
要素の削減
- メタファーに不可欠な要素のみを使用して、アイコンをコアの意味に減らします。
- アイコンのサイズに関係なく、アイコン内の要素の数を 2 に制限します。
一貫性
アイコンのサイズ、配置、色は一貫している必要があります。
スタイリング
Perspective
モノライン アイコンは、既定では前方に表示されます。 キューブなど、パースペクティブや回転を必要とする特定の要素は許可されますが、例外は最小限に抑える必要があります。
装飾
モノラインは、クリーン最小限のスタイルです。 すべてがフラットな色を使用します。つまり、グラデーション、テクスチャ、または光源がないことを意味します。
設計
サイズ
高 DPI デバイスをサポートするには、これらすべてのサイズで各アイコンを生成することをお勧めします。 絶対に 必要な サイズは 16 px、20 px、32 px です。これは 100% のサイズです。
16 px, 20 px, 24 px, 32 px, 40 px, 48 px, 64 px, 80 px, 96 px
重要
特定の書式設定要件に準拠するアドインのアイコンを作成する方法のガイダンスについては、「 Microsoft Marketplace と Office 内で効果的なリストを作成する」を参照してください。
レイアウト
修飾子を持つアイコン レイアウトの例を次に示します。
要素
基本: アイコンが表す主な概念。 通常、これはアイコンに必要な唯一のビジュアルですが、主な概念を修飾子であるセカンダリ要素で強化できる場合があります。
修飾子: ベースをオーバーレイする任意の要素。つまり、通常はアクションまたは状態を表す修飾子です。 追加、変更、または記述子として機能することで、基本要素を変更します。
建設
要素の配置
基本要素は、パディング内のアイコンの中央に配置されます。 完全に中央揃えできない場合は、ベースが右上に誤りがあります。 次の例では、アイコンが完全に中央揃えされています。
次の例では、アイコンが左に誤って表示されています。
修飾子は、ほとんどの場合、アイコン キャンバスの右下隅に配置されます。 まれに、修飾子が別のコーナーに配置される場合があります。 たとえば、ベース要素が右下隅の修飾子で認識できない場合は、左上隅に配置することを検討してください。
Padding
各サイズ アイコンには、アイコンの周囲に指定された量のパディングがあります。 基本要素はパディング内にとどまりますが、修飾子はキャンバスの端に合わせ、パディングを超えてアイコンの境界線の端まで拡張する必要があります。 次の図は、各アイコン サイズに使用する推奨されるパディングを示しています。
| 16px | 20px | 24px | 32px | 40px | 48px | 64px | 80px | 96px |
|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
線の太さ
モノラインは、線と輪郭を描いた図形によって支配されるスタイルです。 生成するサイズに応じて、アイコンは次の線の太さを使用する必要があります。
| アイコンのサイズ: | 16px | 20px | 24px | 32px | 40px | 48px | 64px | 80px | 96px |
|---|---|---|---|---|---|---|---|---|---|
| 線の太さ: | 1px | 1px | 1px | 1px | 2px | 2px | 2px | 2px | 3px |
| アイコンの例: |
|
|
|
|
|
|
|
|
|
切り 欠き
アイコン要素が別の要素の上に配置されると、主に読みやすくするために、2 つの要素の間にスペースを提供するために(下部要素の)カットアウトが使用されます。 これは通常、基本要素の上に修飾子が配置されている場合に発生しますが、どちらの要素も修飾子でない場合もあります。 2 つの要素間のこれらのカットアウトは、"ギャップ" と呼ばれることもあります。
ギャップのサイズは、そのサイズで使用される線の太さと同じ幅にする必要があります。 16 ピクセルのアイコンを作成する場合、ギャップ幅は 1px で、48 px アイコンの場合、ギャップは 2px になります。 次の例は、修飾子と基になるベースの間に 1px のギャップがある 32 px アイコンを示しています。
場合によっては、モディファイヤが対角線または曲線エッジを持ち、標準ギャップで十分な分離が得られない場合、ギャップを 1/2 ピクセル増やすことができます。 これは、線の太さが 16 ピクセル、20 px、24 px、32 px のアイコンにのみ影響する可能性があります。
背景の塗りつぶし
Monoline アイコン セットのほとんどのアイコンには、背景の塗りつぶしが必要です。 ただし、オブジェクトに自然に塗りつぶしがない場合があるため、塗りつぶしを適用する必要はありません。 次のアイコンには白い塗りつぶしがあります。
次のアイコンには塗りつぶしがありません。 (中央の穴が埋められていないことを示す歯車アイコンが含まれています)。
塗りつぶしのベスト プラクティス
するべきこと
- 定義された境界を持ち、自然に塗りつぶしがある要素を塗りつぶします。
- 背景の塗りつぶしを作成するには、別の図形を使用します。
- カラー パレットから背景の塗りつぶしを使用します。
- 重複する要素間のピクセル分離を維持します。
- 複数のオブジェクト間を塗りつぶします。
してはいけないこと
- 自然に塗りつぶされないオブジェクトを塗りつぶさないでください。たとえば、クリップです。
- 角かっこを埋めないでください。
- 数字やアルファ文字の後ろに入力しないでください。
色
カラー パレットは、シンプルさとアクセシビリティのために設計されています。 4つのニュートラルカラーと、青、緑、黄、赤、紫の2つのバリエーションが含まれています。 オレンジは、モノライン アイコンのカラー パレットには意図的に含まれません。 各色は、このセクションで説明するように特定の方法で使用することを目的としています。
パレット
色の使い方
モノライン カラー パレットでは、すべての色にスタンドアロン、アウトライン、塗りつぶしのバリエーションがあります。 一般に、要素は塗りつぶしと罫線で構成されます。 色は、次のいずれかのパターンで適用されます。
- 塗りつぶしのないオブジェクトのスタンドアロンカラー。
- 境界線にはアウトラインの色が使用され、塗りつぶしには塗りつぶしの色が使用されます。
- 境界線にはスタンドアロンカラーが使用され、塗りつぶしには背景色が使用されます。
色の使用例を次に示します。
最も一般的な状況は、要素が背景の塗りつぶしで濃い灰色のスタンドアロンを使用する場合です。
色付きの Fill を使用する場合は、常に対応する [アウトライン] 色にする必要があります。 たとえば、青塗りつぶしは青いアウトラインでのみ使用する必要があります。 ただし、この一般的な規則には 2 つの例外があります。
- 背景の塗りつぶしは、任意の色のスタンドアロンで使用できます。
- 淡い灰色の塗りつぶしは、2 つの異なるアウトライン 色 (濃い灰色または中灰色) で使用できます。
色を使用する場合
色は、装飾ではなくアイコンの意味を伝えるために使用する必要があります。 ユーザーへの アクションが強調表示 されます。 色を持つ基本要素に修飾子を追加すると、通常、基本要素は濃い灰色と背景の塗りつぶしに変わり、次のセットの左端のアイコンの画像のベースに "X" 修飾子が追加されている場合など、修飾子を色の要素にすることができます。
アイコンは、上記のアウトラインと塗りつぶし以外の 1 つの 追加の色に制限する必要があります。 ただし、メタファーに不可欠な場合は、より多くの色を使用できます。灰色以外の 2 つの追加色の制限があります。 まれに、より多くの色が必要な場合は例外があります。 1 色のみを使用するアイコンの良い例を次に示します。
ただし、次のアイコンでは色が多すぎます。
スプレッドシートのアイコンのグリッド線など、内部の "コンテンツ" には Medium Gray を使用します。 コンテンツがコントロールの動作を表示する必要がある場合は、追加の内部の色が使用されます。
テキスト行
テキスト行が "コンテナー" 内にある場合 (ドキュメント上のテキストなど)、中灰色を使用します。 コンテナーに含まれていないテキスト行は 濃い灰色にする必要があります。
テキスト
アイコンでテキスト文字を使用しないでください。 Office 製品は世界中で使用されているため、アイコンは可能な限り言語に依存しません。
Production
アイコン ファイル形式
最終的なアイコンは、.png イメージ ファイルとして保存する必要があります。 背景が透明で、深度が 32 ビットの PNG 形式を使用します。
アドインでのアイコンの使用
アドイン コマンドは、Office UI にボタン、テキスト、およびアイコンを追加します。 アドイン コマンドのボタンには、ユーザーがコマンドを使うときに、実行しようとするアクションを明確に識別できる、分かりやすいアイコンとラベルをつける必要があります。 Office とシームレスに統合するアイコンを設計するには、この記事のスタイルと運用のガイドラインに従ってください。
多くの HTML コンテナーには、コントロールとアイコン画像が含まれています。 Fabric Core のカスタム フォントを使用して、アドインで Office スタイルのアイコンをレンダリングします。 Fabric Core によって提供されるアイコン フォントには、一般的な Office メタファー用のグリフが多数含まれており、ニーズに合わせてスケーリング、色、スタイルを調整できます。 独自のアイコンのセットで既存のビジュアル言語を使用している場合、HTML キャンバスでも自由に使用できます。 アイコンの標準セットを使用して独自のブランドの継続性を築くことは、すべてのデザイン言語の重要な一部をなしています。 Office メタファーとの競合により、お客様が混乱することのないように注意してください。
関連項目
統合マニフェストリファレンス
アドインのみのマニフェスト参照
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Office Add-ins