この記事では、デザイナーが適切なアプリケーション アイコンを送信するのに役立つ、アプリ エコシステムにアイコンを作成するためのガイドラインを示します。 これらのガイドラインに従うと、アプリ エコシステムに均一性とバランスが生み出され、アプリ アイコンのアートワークが強調されます。
アプリ アイコン
アプリ パッケージを提出するときは、2 つの PNG バージョンのアプリ アイコン、色アイコン、アウトライン アイコンを含めます。 アプリがストア レビュー Microsoft Teams渡すには、これらのアイコンが特定のサイズ要件を満たしている必要があります。 手順に従って、アプリ アイコンが Teams ストアの標準に合っていることを確認します。
バランスの取れたレイアウト
アイコンは、均一なレイアウトを作成することを目的としています。 これらのガイドラインは、申請用のアプリ アイコンを作成するのに役立ちます。
アセットの作成
アプリMicrosoft Teamsアイコンを生成するには、アプリの申請中に 2 つの資産が必要です。
カウンター | 説明 |
---|---|
1 | 192 x 192 ピクセルのフル ブリード PNG 形式。 完全なアセット領域を背景として利用します。 これは、Teams ストアまたはポップアップで使用されます。 |
2 | 既定または残りの PNG 形式アイコン (32 x 32 ピクセル)。 このアイコンは、アプリ バーや製品内の他の場所で rest/default 状態として使用されます。 |
色アイコンのアーキテクチャ
カラー アプリ アイコンのサイズは、192 x 192 ピクセルである必要があります。 ロゴ アイコンがある場合、ロゴは中央の 120 x 120 の安全な領域に収まる必要があります。
送信されたアイコンは、完全な正方形である必要があります。 Teams では、アプリ全体で一貫性のあるアイコン図形にマスクが自動的に適用されます。
アイコン属性
カラー
白い背景
アプリ アイコンの使用率
アプリの種類または機能に応じて、製品にアイコンが表示されるコンテンツ領域については、この一覧を参照してください。
個人用アプリ
アプリのポップアップ
ボット (チャネル ビュー)
メッセージ拡張機能のポップアップ
会議アプリのポップアップ
会議 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の安全な領域にくっつきます。
しない: アイコンをスキューまたはストレッチする
アイコンを安全な領域内に保持します。 アイコンを一方向または別の方向に引き伸ばさないでください。
Platform Docs