Office アドインのモノライン スタイル アイコンのガイドライン

  • [アーティクル]

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

Office Monoline ビジュアル スタイル

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

重要

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

レイアウト

修飾子を持つアイコン レイアウトの例を次に示します。

右下に修飾子があるアイコン。ベース、修飾子、パディング、およびカットアウトのグリッド背景と吹き出しが追加された同じアイコン。

要素

  • 基本: アイコンが表すメイン概念。 通常、これはアイコンに必要な唯一のビジュアルですが、セカンダリ要素である修飾子を使用してメイン概念を拡張できる場合があります。

  • 修飾子 ベースをオーバーレイする任意の要素。つまり、通常はアクションまたは状態を表す修飾子です。 追加、変更、または記述子として機能することで、基本要素を変更します。

ベース領域と修飾子領域が呼び出されたグリッド。

建設

要素の配置

基本要素は、パディング内のアイコンの中央に配置されます。 完全に中央揃えできない場合は、ベースが右上に誤りがあります。 次の例では、アイコンが完全に中央揃えされています。

完全に中央揃えのアイコン。

次の例では、アイコンが左に誤って表示されています。

左に 1 ピクセルずつエラーが表示されるアイコン。

修飾子は、ほとんどの場合、アイコン キャンバスの右下隅に配置されます。 まれに、修飾子が別のコーナーに配置される場合があります。 たとえば、ベース要素が右下隅の修飾子で認識できない場合は、左上隅に配置することを検討してください。

右下に修飾子を持つ 4 つのアイコンと、左上に修飾子を持つ 1 つのアイコン。

Padding

各サイズ アイコンには、アイコンの周囲に指定された量のパディングがあります。 基本要素はパディング内にとどまりますが、修飾子はキャンバスの端まで突き合わせ、パディングの外側からアイコンの境界線の端まで拡張する必要があります。 次の図は、各アイコン サイズに使用する推奨されるパディングを示しています。

16px 20px 24px 32px 40px 48px 64px 80px 96px
0px パディングを含む 16 px アイコン。 1 ピクセルのパディングを含む 20 px アイコン。 1 ピクセルのパディングを持つ 24 ピクセル のアイコン。 32 ピクセル のアイコンと 2px のパディング。 40 px アイコンと 2px パディング。 3 ピクセルのパディングを含む 48 px アイコン。 64 ピクセルのアイコンと 4 ピクセルのパディング。 5 ピクセルのパディングを持つ 80 px アイコン。 96 ピクセルのアイコンと 6 ピクセルのパディング。

線の太さ

モノラインは、線と輪郭を描いた図形によって支配されるスタイルです。 生成するサイズに応じて、アイコンは次の線の太さを使用する必要があります。

アイコンのサイズ: 16px 20px 24px 32px 40px 48px 64px 80px 96px
線の太さ: 1px 1px 1px 1px 2px 2px 2px 2px 3px
アイコンの例: 16 px アイコン。 20 px アイコン。 24 px アイコン。 32 px アイコン。 40 px アイコン。 48 px アイコン。 64 px アイコン。 80 px アイコン。 96 px アイコン。

切り 欠き

アイコン要素が別の要素の上に配置されると、主に読みやすくするために、2 つの要素の間にスペースを提供するために(下部要素の)カットアウトが使用されます。 これは通常、基本要素の上に修飾子が配置されている場合に発生しますが、どちらの要素も修飾子でない場合もあります。 2 つの要素間のこれらのカットアウトは、"ギャップ" と呼ばれることもあります。

ギャップのサイズは、そのサイズで使用される線の太さと同じ幅にする必要があります。 16 ピクセルのアイコンを作成する場合、ギャップ幅は 1px で、48 px アイコンの場合、ギャップは 2px になります。 次の例は、修飾子と基になるベースの間に 1px のギャップがある 32 px アイコンを示しています。

修飾子と基になるベースの間に 1px のギャップがある 32 px アイコン。

場合によっては、モディファイヤが対角線または曲線エッジを持ち、標準ギャップで十分な分離が得られない場合、ギャップを 1/2 px 増加させることができます。 これは、線の太さが 16 ピクセル、20 px、24 px、32 px のアイコンにのみ影響する可能性があります。

背景の塗りつぶし

Monoline アイコン セットのほとんどのアイコンには、背景の塗りつぶしが必要です。 ただし、オブジェクトに自然に塗りつぶしがない場合があるため、塗りつぶしを適用する必要はありません。 次のアイコンには白い塗りつぶしがあります。

白塗りの 5 つのアイコンのコンパイル。

次のアイコンには塗りつぶしがありません。 (中央の穴が埋められていないことを示す歯車アイコンが含まれています)。

塗りつぶしなしの 5 つのアイコンのコンパイル。

塗りつぶしのベスト プラクティス
するべきこと
  • 定義された境界を持ち、自然に塗りつぶしがある要素を塗りつぶします。
  • 背景の塗りつぶしを作成するには、別の図形を使用します。
  • カラー パレットから背景の塗りつぶしを使用します。
  • 重複する要素間のピクセル分離を維持します。
  • 複数のオブジェクト間を塗りつぶします。
してはいけないこと
  • 自然に塗りつぶされないオブジェクトを塗りつぶさないでください。たとえば、クリップです。
  • 角かっこを埋めないでください。
  • 数字やアルファ文字の後ろに入力しないでください。

色

カラー パレットは、シンプルさとアクセシビリティのために設計されています。 4つのニュートラルカラーと、青、緑、黄、赤、紫の2つのバリエーションが含まれています。 オレンジは、モノライン アイコンのカラー パレットには意図的に含まれません。 各色は、このセクションで説明するように特定の方法で使用することを目的としています。

パレット

単線の灰色の 4 つの濃淡:スタンドアロンまたはアウトラインの場合は濃い灰色、アウトラインまたはコンテンツの場合は中程度の灰色、背景の塗りつぶしには非常に淡い灰色、塗りつぶしの場合は淡い灰色。

モノラインのカラー パレットには、スタンドアロン、アウトライン、塗りつぶし用の青、緑、黄色、赤、紫の網掛けが含まれています。

色の使い方

モノライン カラー パレットでは、すべての色にスタンドアロン、アウトライン、塗りつぶしのバリエーションがあります。 一般に、要素は塗りつぶしと罫線で構成されます。 色は、次のいずれかのパターンで適用されます。

  • 塗りつぶしのないオブジェクトのスタンドアロンカラー。
  • 境界線にはアウトラインの色が使用され、塗りつぶしには塗りつぶしの色が使用されます。
  • 境界線にはスタンドアロンカラーが使用され、塗りつぶしには背景色が使用されます。

色の使用例を次に示します。

境界線または塗りつぶしまたはその両方の色を持つ 3 つのアイコンのコンパイル。

最も一般的な状況は、背景の塗りつぶしで濃い灰色のスタンドアロンを使用する要素を持つことです。

色付きの Fill を使用する場合は、常に対応する [アウトライン] 色にする必要があります。 たとえば、青塗りつぶしは青いアウトラインでのみ使用する必要があります。 ただし、この一般的な規則には 2 つの例外があります。

  • 背景の塗りつぶしは、任意の色のスタンドアロンで使用できます。
  • 淡い灰色の塗りつぶしは、2 つの異なるアウトライン 色 (濃い灰色または中灰色) で使用できます。

色を使用する場合

色は、装飾ではなくアイコンの意味を伝えるために使用する必要があります。 ユーザーへの アクションが強調表示 されます。 色を持つ基本要素に修飾子を追加すると、通常、基本要素は濃い灰色と背景の塗りつぶしに変わり、次のセットの左端のアイコンの画像のベースに "X" 修飾子が追加されている場合など、修飾子を色の要素にすることができます。

色を使用する 5 つのアイコンのコンパイル。

アイコンは、上記のアウトラインと塗りつぶし以外の 1 つの 追加の色に制限する必要があります。 ただし、メタファーに不可欠な場合は、より多くの色を使用できます。灰色以外の 2 つの追加色の制限があります。 まれに、より多くの色が必要な場合は例外があります。 1 色のみを使用するアイコンの良い例を次に示します。

それぞれ 1 つの色を使用する 5 つのアイコンのコンパイル。

ただし、次のアイコンでは色が多すぎます。

それぞれが複数の色を使用する 5 つのアイコンのコンパイル。

スプレッドシートのアイコンのグリッド線など、内部の "コンテンツ" には Medium Gray を使用します。 コンテンツがコントロールの動作を表示する必要がある場合は、追加の内部の色が使用されます。

中灰色の内部要素を持つ 5 つのアイコンのコンパイル。

テキスト行

テキスト行が "コンテナー" 内にある場合 (ドキュメント上のテキストなど)、中灰色を使用します。 コンテナーに含まれていないテキスト行は 濃い灰色にする必要があります。

テキスト

アイコンでテキスト文字を使用しないでください。 Office 製品は世界中で使用されているため、アイコンは可能な限り言語に依存しません。

生産

アイコン ファイル形式

最終的なアイコンは、.png イメージ ファイルとして保存する必要があります。 背景が透明で、深度が 32 ビットの PNG 形式を使用します。

関連項目