アプリケーションのブランド化ガイドラインBranding guidelines for applications

Azure Active Directory (Azure AD) を使用してアプリケーションを開発する場合は、(Azure AD で管理されている) 職場や学校のアカウントまたは個人のアカウントをサインアップやサインインに使用したいと考えているアプリケーションの利用者に案内する必要があります。When developing applications with Azure Active Directory (Azure AD), you'll need to direct your customers when they want to use their work or school account (managed in Azure AD), or their personal account for sign-up and sign-in to your application.

この記事では、次のことについて説明します。In this article, you will:

  • Microsoft によって管理される 2 種類のユーザー アカウントと、アプリケーションで Azure AD アカウントを参照する方法の詳細Learn about the two kinds of user accounts managed by Microsoft and how to refer to Azure AD accounts in your application
  • アプリで使用するために Microsoft ロゴを追加する必要があるものの確認Find out what you need to do add the Microsoft logo for use in your app
  • アプリで使用する公式のサインインまたはMicrosoft アカウントでサインインのイメージのダウンロードDownload the official Sign in or Sign in with Microsoft images to use in your app
  • ブランド化とナビゲーションの注意事項の詳細Learn about the branding and navigation do's and don'ts

Microsoft の個人アカウントと職場または学校アカウントPersonal accounts vs. work or school accounts from Microsoft

Microsoft は次の 2 種類のユーザー アカウントを管理しています。Microsoft manages two kinds of user accounts:

  • 個人アカウント (以前の Windows Live ID):Personal accounts (formerly known as Windows Live ID). このアカウントは、"個々の" ユーザーと Microsoft の関係を表し、コンシューマー向けデバイスや Microsoft のサービスにアクセスする際に使用されます。These accounts represent the relationship between individual users and Microsoft, and are used to access consumer devices and services from Microsoft. このアカウントは個人的に使用するためのものです。These accounts are intended for personal use.
  • 職場または学校アカウント:Work or school accounts. このアカウントは、Azure Active Directory を使用する組織に代わって Microsoft が管理しています。These accounts are managed by Microsoft on behalf of organizations that use Azure Active Directory. このアカウントは、Office 365 や Microsoft の他のビジネス サービスにサインインする際に使用されます。These accounts are used to sign in to Office 365 and other business services from Microsoft.

通常、Microsoft の職場または学校アカウントは、組織 (企業、学校、政府機関) がエンド ユーザー (従業員、学生、公務員) に割り当てます。Microsoft work or school accounts are typically assigned to end users (employees, students, federal employees) by their organizations (company, school, government agency). このアカウントは、Azure AD プラットフォームのクラウドで直接管理されるか、Windows Server Active Directory などのオンプレミス ディレクトリから Azure AD に同期されます。These accounts mastered directly in the cloud (in the Azure AD platform) or synced to Azure AD from an on-premises directory, such as Windows Server Active Directory. 職場または学校アカウントの " 管理人 " は Microsoft ですが、アカウントは組織が所有し、管理しています。Microsoft is the custodian of the work or school accounts, but the accounts are owned and controlled by the organization.

アプリケーションでの Azure AD アカウントの呼び方Referring to Azure AD accounts in your application

Microsoft は、Azure または Active Directory のブランド名をエンド ユーザーに表示していません。開発者もこれらを表示しないようにする必要があります。Microsoft doesn’t expose end users to the Azure or the Active Directory brand names, and neither should you.

  • ユーザーがサインインしたら、できるだけ組織の名前とロゴを使用します。Once users are signed in, use the organization’s name and logo as much as possible. "組織" のような総称を使用するのではなく、この方法をお勧めします。This is better than using generic terms like “your organization.”
  • ユーザーがサインインしていないときは、アカウントを "職場または学校アカウント" と呼び、Microsoft のロゴを使用して、Microsoft がこれらのアカウントを管理していることを伝えます。When users aren't signed in, refer to their accounts as “Work or school accounts” and use the Microsoft logo to convey that Microsoft manages these accounts. "企業アカウント"、"ビジネス アカウント"、"会社アカウント" などの言葉はユーザーの混乱を招くので使用しないでください。Don’t use terms like “enterprise account,” “business account,” or “corporate account,” which create user confusion.

ユーザー アカウントのピクトグラムUser account pictogram

以前のバージョンのガイドラインでは、"ブルー バッジ" のピクトグラムを使用することを推奨していました。In an earlier version of these guidelines, we recommended using a “blue badge” pictogram. ユーザーと開発者のフィードバックに基づき、現在は代わりに Microsoft のロゴを使用することを推奨しています。Based on user and developer feedback, we now recommend the use of the Microsoft logo instead. Microsoft のロゴを使用することにより、ユーザーは、アプリケーションにサインインするときに、Office 365 や他の Microsoft ビジネス サービスで使用しているアカウントを再利用できることを理解しやすくなります。The Microsoft logo will help users understand that they can reuse the account they use with Office 365 or other Microsoft business services to sign into your app.

Azure AD によるサインアップとサインインSigning up and signing in with Azure AD

アプリケーションでは、サインアップとサインインに別々のパスを示すことがあります。以下のセクションでは、この 2 つのシナリオの表示に関するガイダンスを示します。Your app may present separate paths for sign-up and sign-in and the following sections provide visual guidance for both scenarios.

アプリがエンド ユーザーのサインアップをサポートしている場合 (無料試用版やフリーミアム モデルなど) : ユーザーが、職場アカウントまたは個人のアカウントを使用してアプリにアクセスできるようにするためのサインイン ボタンを表示できます。If your app supports end-user sign-up (for example, free to trial or freemium model): You can show a sign-in button that allows users to access your app with their work account or their personal account. Azure AD は、ユーザーがアプリケーションに初めてアクセスしたときに同意プロンプトを表示します。Azure AD will show a consent prompt the first time they access your app.

アプリに管理者だけが同意できるアクセス許可が必要な場合、またはアプリに組織のライセンスが必要な場合: 管理者による取得をユーザー サインインから分離します。If your app requires permissions that only admins can consent to, or if your app requires organizational licensing: Separate admin acquisition from user sign-in. "このアプリケーションを入手" ボタン で管理者をサインインにリダイレクトし、組織のユーザーに代わって同意するよう求めることにより、エンドユーザーにアプリケーションで同意画面が表示されないという追加のメリットもあります。The “get this app” button will redirect admins to sign in then ask them to grant consent on behalf of users in their organization, which has the added benefit of suppressing end-user consent prompts to your app.

アプリケーションの取得の表示に関するガイダンスVisual guidance for app acquisition

"アプリケーションの入手" リンクでは、ユーザーを Azure AD のアクセス権の付与 (承認) ページにリダイレクトする必要があります。これにより、組織の管理者は、Microsoft がホストする組織のデータへのアクセス権をアプリケーションに付与できます。Your “get the app” link must redirect the user to the Azure AD grant access (authorize) page, to allow an organization’s administrator to authorize your app to have access to their organization’s data, which is hosted by Microsoft. アクセス権の要求方法の詳細については、記事「Azure Active Directory とアプリケーションの統合」を参照してください。Details on how to request access are discussed in the Integrating Applications with Azure Active Directory article.

管理者は、アプリケーションに同意したら、ユーザーの Office 365 アプリ起動ツール (ワッフルおよび https://portal.office.com/myappsからアクセス可能) にアプリケーションを追加することを選択できます。After admins consent to your app, they can choose to add it to their users’ Office 365 app launcher experience (accessible from the waffle and from https://portal.office.com/myapps). この機能を公表する場合は、"このアプリケーションを組織に追加" のような言葉を使って、次のようなボタンを表示できます。If you want to advertise this capability, you can use terms like “Add this app to your organization” and show a button like the following example:

Microsoft ロゴと "Add to my organization" というテキストが表示されたボタン

ただし、ボタンに頼るのではなく、説明文を作成することをお勧めします。However, we recommend that you write explanatory text instead of relying on buttons. 次に例を示します。For example:

Office 365 や Microsoft の他のビジネス サービスを既にお使いの場合は、組織のデータへのアクセス権を <your_app_name> に付与できます。これにより、ユーザーは既存の職場アカウントを使用して <your_app_name> にアクセスできるようになります。If you already use Office 365 or other business service from Microsoft, you can grant <your_app_name> access to your organization’s data. This will allow your users to access <your_app_name> with their existing work accounts.

公式の Microsoft ロゴをダウンロードしてアプリで使用するためには、使用するロゴを右クリックして、コンピューターに保存します。To download the official Microsoft logo for use in your app, right-click the one you want to use and then save it to your computer.

AssetAsset PNG 形式PNG format SVG 形式SVG format
Microsoft のロゴMicrosoft logo PNG 形式のダウンロード可能な Microsoft ロゴ SVG 形式のダウンロード可能な Microsoft ロゴ

サインインの表示に関するガイダンスVisual guidance for sign-in

アプリケーションでは、Azure AD との統合に使用するプロトコルに対応するサインイン エンドポイントにユーザーをリダイレクトするサインイン ボタンを表示する必要があります。Your app should display a sign-in button that redirects users to the sign-in endpoint that corresponds to the protocol you use to integrate with Azure AD. 次のセクションでは、ボタンの外観について詳しく説明します。The following section provides details on what that button should look like.

ピクトグラムと "Microsoft でサインイン"Pictogram and “Sign in with Microsoft”

これは、Microsoft のロゴと "Microsoft でサインイン" という言葉とを関連付けたものであり、アプリケーションがサポートするさまざまな ID プロバイダーの中で Azure AD を一意に表します。It’s the association of the Microsoft logo and the “Sign in with Microsoft” terms that uniquely represent Azure AD amongst other identity providers your app may support. スペースが狭く "Microsoft でサインイン" という文字列が収まりきらない場合は、単に "サインイン" としても問題ありません。If you don’t have enough space for “Sign in with Microsoft,” it’s ok to shorten it to “Sign in.” ボタンには、薄い色調または濃い色調を使用できます。You can use a light or dark color scheme for the buttons.

次の図は、アプリで資産を使用する場合に Microsoft が推奨する赤線です。The following diagram shows the Microsoft-recommended redlines when using the assets with your app. 赤線は "Microsoft アカウントでサインイン" や短縮バージョンの "サインイン" に適用します。The redlines apply to "Sign in with Microsoft" or the shorter "Sign in" version.

"Microsoft アカウントでサインイン" の赤線の画像

公式の画像をダウンロードしてアプリで使用するためには、使用する画像を右クリックして、コンピューターに保存します。To download the official images for use in your app, right-click the one you want to use and then save it to your computer.

AssetAsset PNG 形式PNG format SVG 形式SVG format
Microsoft アカウントでサインイン (濃い色調)Sign in with Microsoft (dark theme) ダウンロード可能な濃い色調の "Microsoft アカウントでサインイン" ボタン PNG ダウンロード可能な濃い色調の "Microsoft アカウントでサインイン" ボタン SVG
Microsoft アカウントでサインイン (薄い色調)Sign in with Microsoft (light theme) ダウンロード可能な薄い色調の "Microsoft アカウントでサインイン" ボタン PNG ダウンロード可能な薄い色調の "Microsoft アカウントでサインイン" ボタン SVG
サインイン (濃い色調)Sign in (dark theme) ダウンロード可能な濃い色調の "サインイン" 短縮版ボタン PNG ダウンロード可能な濃い色調の "サインイン" 短縮版ボタン SVG
サインイン (薄い色調)Sign in (light theme) ダウンロード可能な薄い色調の "サインイン" 短縮版ボタン PNG ダウンロード可能な薄い色調の "サインイン" 短縮版ボタン SVG

ブランド化に関する注意事項Branding Do’s and Don’ts

"職場または学校アカウント" は、"Microsoft でサインイン" ボタンと組み合わせて使用してください。補足的な説明を与えることで、その使用の可否をエンド ユーザーが認識しやすいようにします。DO use “work or school account” in combination with the "Sign in with Microsoft" button to provide additional explanation to help end users recognize whether they can use it. "企業アカウント"、"ビジネス アカウント"、"会社アカウント" などの言葉は使用しないでくださいDON’T use other terms such as “enterprise account”, “business account” or “corporate account.”

"Office 365 ID" または"Azure ID" を使用しないでくださいDON’T use “Office 365 ID” or “Azure ID.” Office 365 は、Azure AD を認証に使用しない Microsoft のコンシューマー向け製品の名前でもあります。Office 365 is also the name of a consumer offering from Microsoft, which doesn’t use Azure AD for authentication.

Microsoft のロゴを変更 しない でください。DON’T alter the Microsoft logo.

Azure または Active Directory のブランドをエンド ユーザーに表示しないでください。DON’T expose end users to the Azure or Active Directory brands. ただし、開発者、IT プロフェッショナル、管理者に対しては、これらの用語を使用してもかまいません。It’s ok however to use these terms with developers, IT pros, and admins.

ユーザーがサインアウトし、別のユーザー アカウントに切り替える方法を提供してくださいDO provide a way for users to sign out and switch to another user account. ほとんどのユーザーは Microsoft/Facebook/Google/Twitter の個人アカウントを 1 つ持っていますが、多くの場合、ユーザーは複数の組織に関係しています。While most people have a single personal account from Microsoft/Facebook/Google/Twitter, people are often associated with more than one organization. 間もなく、複数のサインイン ユーザーがサポートされるようになります。Support for multiple signed-in users is coming soon.