アドイン コマンドのアイコンをデザインする

アドイン コマンドは、Office UI にボタン、テキスト、およびアイコンを追加します。アドイン コマンドのボタンには、ユーザーがコマンドを使うときに、実行しようとするアクションを明確に識別できる、分かりやすいアイコンとラベルをつける必要があります。この記事では、Office とシームレスに統合するアイコンをデザインするための、スタイルと運用に関するガイドラインを提示します。

Office のアイコン デザインの原則

Office のデスクトップ クライアントの Office 2013 リリースでは、図像が更新されています。スタイルについての大きな変更は、内容が削減されたことです。新しいアイコンには、コミュニケーションに関する不可欠の要素だけが含まれてます。遠近法、グラデーション、および光源など、重要でない要素が削除されています。アイコンが簡略化されたことで、コマンドやコントロールの解析をより高速に行うことができるようになっています。このスタイルは、Office に最適です。

Office のアイコンは、次のデザインの原則に基づいています。

  • Office のアイコン コレクションに関する現在の採用方針
  • 新鮮で、かつなじみ深いもの
  • シンプルで、わかりやすく、直接的

以下の図は、現在のデザインの原則を適用したアイコンです。

Office の古いアイコンと、現在の採用方針に基づいて更新されたアイコンを示す図

アイコン ガイドライン

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

  • 最適な状態に仕上げるため、必ず 1px グリッドにし、ビットマップ編集ツールを使用します。 
  • サイズ変更ではなく、再描画してください。アイコンのサイズを大きくしたり小さくしたりする場合は、カットアウト、角、および丸角のエッジの線をできる限り明瞭に出すために、再描画を行う手間を省かないでください。
  • アイコンを乱雑に見せる成果物は削除します。
  • Office のリボンまたはコンテキスト メニューにある Office UI Fabric のアイコンは、再利用しないでください。Fabric のアイコンはスタイルが異なるので、適合しません。
  • アドイン コマンドで何をするかを伝えるために、ロゴやブランドに頼らないようにします。ブランド マークは、サイズの小さいアイコンにしたり、修飾子を適用したりすると、しばしば認識不可能になります。ブランド マークは、多くの場合、Office のリボン アイコンのスタイルと競合し、アイコンがたくさんある環境ではユーザーの関心を奪い合うおそれがあります。
  • アクセスしやすくするために、白の塗りつぶしを使います。アイコンのオブジェクトは、Office UI のテーマのハイ コントラスト モードで読みやすさを保つために、たいていは背景を白にする必要があります。 
  • 透明背景の PNG 形式を使用します。
  • アイコンに、表記文字、段落のラグ、および疑問符などの、ローカライズ可能なコンテンツを含めないようにします。
  • さまざまなコマンドで、同じ視覚的メタファーを再利用しないようにします。さまざまなアクションに同じアイコンを使用すると、混乱を招くおそれがあります。
  • ボタンのラベルを明確で簡潔なものにします。意味を伝えるには、ビジュアルとテキストの情報を組み合わせます。

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

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

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

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

アイコンの縮小ではなく、アイコンのサイズ変更が推奨されていることを示す図

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

Office のアイコンは、基本要素に、アクション修飾子と概念的修飾子を重ね合わせた構成になっています。 アクション修飾子は、追加、開く、新規、閉じるなどの概念を表します。概念的修飾子は、ステータス、変更、またはアイコンの説明を表します。

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

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

中央にアイコンの基本要素、右下に修飾子、左上にアクション修飾子を配した画像

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

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

アイコンのサイズ 基本要素の周囲のパディング
16px 0
20px 1px
24px 1px
32px 2px
40px 2px
48px 3px
64px 5px
80px 5px

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

アイコンのサイズ 修飾子のサイズ
16px 9px
20px 10px
24px 12px
32px 14px
40px 20px
48px 22px
64px 29px
80px 38px

アイコンの色

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

  • 色は、装飾のためというよりも、意味を伝える目的のために使用します。アクション、ステータス、または明示的にマークを区別する要素を、色によってハイライトまたは強調します。 
  • 可能であれば、グレー以外の 1 色のみを追加で使用します。追加する色は最大 2 色までに制限します。
  • すべてのサイズのアイコンで、色を統一する必要があります。Office のアイコンのカラー パレットは、アイコンのサイズによってわずかな違いがあります。16px 以下のアイコンでは少し濃く、32px 以上のアイコンではより鮮やかな色になっています。これらの微妙な調整をしないと、サイズによって色の見え方が変わってしまいます。
色の名前 RGB 16 進数 分類
テキスト グレー (80) 80、80、80 #505050 テキスト グレー 80 のカラー イメージ テキスト
テキスト グレー (95) 95、95、95 #5F5F5F テキスト グレー 95 のカラー イメージ テキスト
テキスト グレー (105) 105, 105, 105 #696969 テキスト グレー 105 のカラー イメージ テキスト
ダーク グレー 32 128、128、128 #808080 ダーク グレー 32 のカラー イメージ 32 以上
ミディアム グレー 32 158、158、158 #9E9E9E ミディアム グレー 32 のカラー イメージ 32 以上
ライト グレー オール 179、179、179 #B3B3B3 ライト グレー オールのカラー イメージ すべてのサイズ
ダーク グレー 16 114、114、114 #727272 ダーク グレー 16 のカラー イメージ 16 以下
ミディアム グレー 16 144、144、144 #909090 ミディアム グレー 16 のカラー イメージ 16 以下
ブルー 32 77、130、184 #4d82B8 ブルー 32 のカラー イメージ 32 以上
ブルー 16 74、125、177 #4A7DB1 ブルー 16 のカラー イメージ 16 以下
イエロー オール 234、194、130 #EAC282 イエロー オールのカラー イメージ すべてのサイズ
オレンジ 32 231、142、70 #E78E46 オレンジ 32 のカラー イメージ 32 以上
オレンジ 16 227、142、70 #E3751C オレンジ 16 のカラー イメージ 16 以下
ピンク オール 230、132、151 #E68497 ピンク オールのカラー イメージ すべてのサイズ
グリーン 32 118、167、151 #76A797 グリーン 32 のカラー イメージ 32 以上
グリーン 16 104、164、144 #68A490 グリーン 16 のカラー イメージ 16 以下
レッド 32 216、99、68 #D86344 レッド 32 のカラー イメージ 32 以上
レッド 16 214、85、50 #D65532 レッド 16 のカラー イメージ 16 以下
パープル 32 152、104、185 #9868B9 パープル 32 のカラー イメージ 32 以上
パープル 16 137、89、171 #8959AB パープル 16 のカラー イメージ 16 以下

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

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

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

その他のリソース