Office アドインの新しいスタイル アイコンのガイドライン

永続的な Office 2016 以降では、Microsoft の新しいスタイルの図像が使用されます。 アイコンが Microsoft 365 の Monoline スタイルと一致することを希望する場合は、「 Office アドインの Monoline スタイル アイコン ガイドライン」を参照してください。

Office Fresh ビジュアル スタイル

Fresh アイコンには、重要なコミュニケーション要素のみが含まれます。 遠近法、グラデーション、および光源など、重要でない要素が削除されています。 アイコンが簡略化されたことで、コマンドやコントロールの解析をより高速に行うことができるようになっています。 このスタイルに従って、Office パーペチュアル クライアントに最適です。

ベスト プラクティス

アイコンを作成するときは、次のガイドラインに従ってください。

するべきこと	してはいけないこと
コミュニケーションの重要な要素に焦点を当てて、ビジュアルをシンプルかつ明確に保ちます。	アイコンが乱雑に見える成果物は使用しないでください。
Office アイコンの言語を使用して、動作や概念を示します。	Office アプリ リボンまたはコンテキスト メニューのアドイン コマンドに Fabric Core グリフを再利用しないでください。 Fabric Core アイコンはスタイルが異なり、一致しません。
書式設定用のペイントブラシや検索用の虫眼鏡など、一般的な Office の視覚的メタファーを再利用します。	異なるコマンドで、同じ視覚的メタファーを再利用しないようにします。 異なる動作や概念に同じアイコンを使用すると、混乱が生じる可能性があります。
アイコンを小さくしたり大きくしたりするために、アイコンを再描画します。 カットアウト、角、および丸角のエッジの線をできる限り明瞭にするために、再描画を行う手間を省かないでください。	縮小または拡大してアイコンのサイズを変更しないでください。 これにより、視覚的品質が低くなり、動作が不明瞭になることがあります。 再描画せずにサイズを小さくすると、より大きなサイズで作成された複雑なアイコンから明瞭さが失われることがあります。
アクセスしやすくするために、白の塗りつぶしを使います。 アイコンのオブジェクトは、Office UI のテーマのハイ コントラスト モードで読みやすさを保つために、たいていは背景を白にする必要があります。	アドイン コマンドで何をするかを伝えるために、ロゴやブランドに頼らないようにします。 ブランド マークは、サイズの小さいアイコンにしたり、修飾子を適用したりすると、しばしば認識不可能になります。 ブランド マークは、多くの場合、Office アプリのリボン アイコン スタイルと競合し、飽和状態の環境でユーザーの注意を引く可能性があります。
透明背景の PNG 形式を使用します。	なし。
アイコンに、表記文字、段落のラグ、および疑問符などの、ローカライズ可能なコンテンツを含めないようにします。	なし。

アイコン サイズについて推奨事項と要件

Office のデスクトップ アイコンは、ビットマップ画像です。 ユーザーの DPI 設定やタッチ モードに応じて異なるサイズで表示されます。 サポートされている 8 つのサイズすべてを組み込んで、すべての解像度とコンテキストで最高のエクスペリエンスを提供します。 サポートされているサイズは次のとおりです。3 つが必要です。

• 16 px (必須)
• 20 px
• 24 px
• 32 px (必須)
• 40 px
• 48 px
• 64 ピクセル (推奨、Mac に最適)
• 80 px (必須)

重要

アドインの代表的なアイコンである画像については、サイズやその他の要件については、「AppSource と Office 内の有効な一覧をCreateする」を参照してください。

それぞれのアイコンを、サイズに合わせて縮小するのではなく再描画します。

アイコンの構造とレイアウト

Office アイコンは、通常、アクションと概念修飾子がオーバーレイされた基本要素で構成されます。  アクション修飾子は、追加、開く、新規、閉じるなどの概念を表します。 概念的修飾子は、ステータス、変更、またはアイコンの説明を表します。

Office UI と協調するコマンドを作成するために、基本要素と修飾子のレイアウト ガイドラインに従ってください。 これにより、コマンドがプロフェッショナルな仕上がりになり、アドインに対する顧客の信頼度もあがります。 場合によっては、意図的にこれらのガイドラインに対して例外を設けることもできます。

以下の図は、Office のアイコンの基本要素と修飾子のレイアウトを表しています。

• 基本要素をピクセル フレームの中央に配置し、周囲に余白をとります。
• アクション修飾子は、左上に配置します。
• 概念的修飾子は、右下に配置します。
• アイコン内の要素の数を制限します。 32 px で、修飾子の数を最大 2 に制限します。 16 px で、修飾子の数を 1 に制限します。

基本要素のパディング

基本要素は、どのサイズでも同じ配置にします。 基本要素をフレームの中央に配置できない場合は、左上にそろえ、余分のピクセルは右下に残します。 最適な結果を得るには、次のセクションの表に示すパディング ガイドラインを適用します。

修飾子

すべての修飾子には、背景を含む各要素の間に 1 px の透明な切り抜きが必要です。 要素は直接重なってはいけません。 ルールとエッジの間に余白を作ります。 修飾子はサイズが少しずつ異なっている場合がありますが、開始点としてこれらのサイズを使用します。

アイコンのサイズ	基本要素の周囲のパディング	修飾子のサイズ
16 px	0	9 px
20 px	1px	10 px
24 px	1px	12 px
32 px	2px	14 px
40 px	2px	20 px
48 px	3px	22 px
64 px	5px	29 px
80 px	5px	38 px

アイコンの色

注:

これらの色のガイドラインは、アドイン コマンドで使用されるリボン アイコン用です。 これらのアイコンは Fluent UI ではレンダリングされず、カラー パレットは Microsoft UI Fabric で説明されているパレットとは異なります。 |色 |共有。

Office のアイコンには、限定されたカラー パレットがあります。 Office UI とのシームレスな統合を保証するために、以下の表に記載されている色を使用してください。 色の使用には、次のガイドラインを適用します。

• 色は、装飾のためというよりも、意味を伝える目的のために使用します。 アクション、ステータス、または明示的にマークを区別する要素を、色によってハイライトまたは強調します。
• 可能であれば、グレー以外の 1 色のみを追加で使用します。 追加する色は最大 2 色までに制限します。
• すべてのサイズのアイコンで、色を統一する必要があります。 Office のアイコンのカラー パレットは、アイコンのサイズによってわずかな違いがあります。 16 ピクセルと小さいアイコンは、32 px と大きなアイコンよりも少し暗く、より鮮やかです。 これらの微妙な調整をしないと、サイズによって色の見え方が変わってしまいます。

色の名前	RGB	16 進数	色	カテゴリ
テキスト グレー (80)	80、80、80	#505050		テキスト
テキスト グレー (95)	95、95、95	#5F5F5F		テキスト
テキスト グレー (105)	105, 105, 105	#696969		テキスト
ダーク グレー 32	128、128、128	#808080		32 px 以上
ミディアム グレー 32	158、158、158	#9E9E9E		32 px 以上
ライト グレー オール	179、179、179	#B3B3B3		すべてのサイズ
ダーク グレー 16	114、114、114	#727272		16 px 以下
ミディアム グレー 16	144、144、144	#909090		16 以下
ブルー 32	77、130、184	#4d82B8		32 px 以上
ブルー 16	74、125、177	#4A7DB1		16 px 以下
イエロー オール	234、194、130	#EAC282		すべてのサイズ
オレンジ 32	231、142、70	#E78E46		32 px 以上
オレンジ 16	227、142、70	#E3751C		16 px 以下
ピンク オール	230、132、151	#E68497		すべてのサイズ
グリーン 32	118、167、151	#76A797		32 px 以上
グリーン 16	104、164、144	#68A490		16 px 以下
レッド 32	216、99、68	#D86344		32 px 以上
レッド 16	214、85、50	#D65532		16 px 以下
パープル 32	152、104、185	#9868B9		32 px 以上
パープル 16	137、89、171	#8959AB		16 px 以下

ハイコントラスト モードのアイコン

Office のアイコンは、ハイコントラスト モードで適切に表示されるように設計されています。 前景の要素は背景と区別され、読みやすさを最大限に高め、色の変更を可能にします。 ハイコントラスト モードでは、Office は赤、緑、または青の値が 190 未満のアイコンのすべてのピクセルを、完全な黒に変更します。 それ以外のピクセルは、すべて白になります。 つまり、各 RGB チャンネルは 0 から 189 の値が黒、190 から 255 の値が白と評価されます。 その他のハイコントラスト テーマも同じ 190 値のしきい値を使用して色の変更が行われますが、ルールは異なります。 たとえば、白のハイコントラスト テーマでは、190 よりも大きい不透明のピクセルすべての色を変更しますが、その他のピクセルはすべて透明になります。 ハイ コントラスト設定で読みやすさを最大化するには、次のガイドラインを適用します。

• 190 値のしきい値に沿って、前景と背景の要素を区別するようにします。
• Office アイコンの表示スタイルに従います。
• 色はアイコン パレットから使用します。
• グラデーションの使用を避けます。
• 同じ様な値を持つ大きな色のブロックを避けます。

関連項目

• アイコン マニフェスト要素
• IconUrl マニフェスト要素
• HighResolutionIconUrl マニフェスト要素
• アドイン用のアイコンの作成