次の方法で共有

Teams ストアとアプリ バーの Teams アプリ アイコン

  • [アーティクル]

この記事では、デザイナーが適切なアプリケーション アイコンを送信するのに役立つ、アプリ エコシステムにアイコンを作成するためのガイドラインを示します。 これらのガイドラインに従うと、アプリ エコシステムに均一性とバランスが生み出され、アプリ アイコンのアートワークが強調されます。

アプリ アイコン

アプリ パッケージを提出するときは、2 つの PNG バージョンのアプリ アイコン、色アイコン、アウトライン アイコンを含めます。 アプリがストア レビュー Microsoft Teams渡すには、これらのアイコンが特定のサイズ要件を満たしている必要があります。 手順に従って、アプリ アイコンが Teams ストアの標準に合っていることを確認します。

バランスの取れたレイアウト

アイコンは、均一なレイアウトを作成することを目的としています。 これらのガイドラインは、申請用のアプリ アイコンを作成するのに役立ちます。

例は、アプリ アイコンの均一なレイアウトを示しています。

アセットの作成

アプリMicrosoft Teamsアイコンを生成するには、アプリの申請中に 2 つの資産が必要です。

例は、アプリ アイコンを生成する 2 つの資産を示しています。

カウンター 説明
1 192 x 192 ピクセルのフル ブリード PNG 形式。 完全なアセット領域を背景として利用します。 これは、Teams ストアまたはポップアップで使用されます。
2 既定または残りの PNG 形式アイコン (32 x 32 ピクセル)。 このアイコンは、アプリ バーや製品内の他の場所で rest/default 状態として使用されます。

色アイコンのアーキテクチャ

カラー アプリ アイコンのサイズは、192 x 192 ピクセルである必要があります。 ロゴ アイコンがある場合、ロゴは中央の 120 x 120 の安全な領域に収まる必要があります。

送信されたアイコンは、完全な正方形である必要があります。 Teams では、アプリ全体で一貫性のあるアイコン図形にマスクが自動的に適用されます。

例は、ロゴ アイコンのカラー アプリ アイコンのサイズを示しています。

アイコン属性

カラー

例は、色付きアイコンのアイコン属性を示しています。

白い背景

例は、白い背景を持つアイコンの色属性を示しています。

アプリ アイコンの使用率

アプリの種類または機能に応じて、製品にアイコンが表示されるコンテンツ領域については、この一覧を参照してください。

個人用アプリ

例は、個人用アプリのアプリ アイコンを示しています。

アプリのポップアップ

例は、アプリ ポップアップのアプリ アイコンを示しています。

ボット (チャネル ビュー)

例は、ボットのチャネル ビューにアプリ アイコンを示しています。

メッセージ拡張機能のポップアップ

例は、メッセージ拡張機能のポップアップにアプリ アイコンを示しています。

会議アプリのポップアップ

例は、会議アプリのポップアップにアプリ アイコンを示しています。

会議 U バー

例は、会議の 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の安全な領域にくっつきます。

例は、傾斜または拡大されたアプリ アイコンを示しています。

しない: アイコンをスキューまたはストレッチする

アイコンを安全な領域内に保持します。 アイコンを一方向または別の方向に引き伸ばさないでください。