Copilot エージェントは Microsoft 365 用のアプリであり、その アプリ パッケージ には、Teams、Office、Copilot、およびその他の Microsoft 365 アプリケーションのアプリの取得と管理 UI のエージェントを表す 2 つのアイコン ファイルが含まれている必要があります。 この記事では、これらのアイコンを作成するための要件とベスト プラクティスについて説明します。
Microsoft 365 用アプリアイコン
Microsoft 365 用アプリ パッケージには、次のようないくつかの場所で拡張機能を表す 2 つのアイコンが含まれている必要があります。
- アプリストアは、Teams アプリ ストアなど、さまざまな Microsoft 365 アプリケーションに格納されます。
- さまざまな Microsoft 365 アプリケーションからアクセスできる [アプリの管理 ] ページ。
- Teams、Outlook、Microsoft 365 Copilot アプリケーションのアプリ バー。
そのうちの 1 つはカラー アイコンで、もう 1 つはアウトライン アイコンで、両方とも PNG 形式である必要があります。 これらのアイコンは、特定のサイズ要件を満たす必要があります。 この記事では、これらのアイコンを設計するための要件とベスト プラクティスを指定します。
バランスの取れたレイアウト
アイコンは、均一なレイアウトを作成することを目的としています。 これらのガイドラインは、アプリ アイコンの作成に役立ちます。
アセットの作成
Microsoft 365 では、アイコンを生成するために、アプリの申請中に 2 つの資産が必要です。
| カウンター | 説明 |
|---|---|
| 1 | 192 x 192 ピクセルのフル ブリード PNG 形式。 完全なアセット領域を背景として利用します。 これは、たとえば Teams ストアやポップアップで使用されます。 |
| 2 | 既定または残りの PNG 形式アイコン (32 x 32 ピクセル)。 このアイコンは、アプリ バーや製品内の他の場所で rest/default 状態として使用されます。 |
色アイコンのアーキテクチャ
カラー アプリ アイコンのサイズは、192 x 192 ピクセルである必要があります。 ロゴ アイコンがある場合、ロゴは中央の 120 x 120 の安全な領域に収まる必要があります。
送信されたアイコンは、完全な正方形である必要があります。 Teams では、アプリ全体で一貫性のあるアイコン図形にマスクが自動的に適用されます。
アイコン属性
カラー
白い背景
アプリ アイコンの使用率
Microsoft 365 アプリケーションの他の場所にアイコンが表示される場合は、Microsoft 365 用アプリに含まれている拡張機能や機能の種類に応じて異なります。 以下はその一例です。
個人用アプリ
アプリのポップアップ
ボット (チャネル ビュー)
メッセージ拡張機能のポップアップ
会議アプリのポップアップ
会議 U バー
ベスト プラクティス
操作: 安全領域の推奨事項に従います (120 x 120)
ロゴがある場合は、192 x 192 PNG 形式アイコン内の 120 x 120 の安全な領域内に保持します。
しない: アイコンを安全な領域よりも大きくする
次に示すのは、PNG 形式アイコン内のロゴの例であり、安全な領域内にありません。 アイコンの周囲に不均一なパディング (負の領域) が作成されます。
Do: 丸みを帯びた角にフル ブリードを提供する
フルブリード画像がある場合は、192 x 192の正方形のPNG形式をアップロードしてください。 角は動的に丸められます。
しない: アイコンの角を丸めます
角を丸めないでください。 192 x 192で完璧な正方形で提出し、角は動的に丸められます。
実行: 境界線のないアイコンをアップロードする
罫線は自動的に追加されます。 この場合は、白い背景にある場合でも、罫線なしで PNG 形式をアップロードするだけです。
しない: 罫線を追加する
境界線は動的に追加されます。 PNG 形式に罫線を含める場合、白い背景に不要な重複が表示されます。
Do: 十分なコントラストを提供する
アイコンの背景とのコントラストが十分であることを確認します。 アクセシビリティを最適にするため、比率は 4.5:1 にすることをお勧めします。
しない: アイコンをフェードする
アイコンのコントラストを低くしないでください。 PNG 形式で使用する背景とアイコンに十分なコントラストがあることを確認します。
実行: ブランドを昇格させる
背景として完全なフラットな色を使用して、ブランドに焦点を当てます。
しない: ブランド アイコンを円に入れないようにする
96 x 96 の安全なエリア内にブランド アイコンを保持することで、ブランドを昇格させます。
実行: アプリ アイコンで長い単語を省略する
長いアプリ名がある場合は、アイコンのサイズが 32 x 32 サイズに変更されたときに読みやすくするために省略してください。
しない: アプリ アイコンに複数の単語を含める
アイコンで複数の単語を使用しないでください。 アイコンのサイズが小さい場合 (32 x 32 や 36 x 36 など) テキストを読み取ることは不可能です。
実行: 残高の作成 (96 x 96)
バランスを保つことでブランドを高めます。 平衡感のために96 x 96の安全な領域にくっつきます。
しない: アイコンをスキューまたはストレッチする
アイコンを安全な領域内に保持します。 アイコンを一方向または別の方向に引き伸ばさないでください。