Microsoft Entra External IDで外部テナントを用意したら、次にやることになるのがユーザーフローの作成です。ざっくり言うと、顧客が実際に目にするサインアップ／サインイン画面を組み立てる作業ですね。「メールアドレスで会員登録できる画面を出したい」「登録時に会社名も入力してもらいたい」「ログイン画面に自社のロゴを載せたい」——このあたりを実現するのが、この記事のテーマです。
ところが公式のMicrosoft Learnを開くと、「ユーザーフロー」「IDプロバイダー」「ユーザー属性」「カンパニーブランディング」と用語が次々に出てきて、しかも記事が細かく分割されているので、「結局どの順番で、どこを触れば1つのサインアップ画面が完成するの？」と手が止まりがちです。私自身、External IDを触りはじめた頃にここで迷いました。
「ユーザーフローって具体的に何を作るの？ 登録画面のロゴや入力項目って、自由に変えられるの？」
この記事では、External IDの外部テナントで①基本的なユーザーフローを作ってアプリに紐付ける→②サインイン画面をカスタムブランディングする→③サインアップ時に集める属性を構成するという3ステップを、公式Learnの正確さは押さえつつ、初心者がつまずく所を日本語で噛み砕いて解説します。読み終わるころには、「顧客が見る登録・ログイン画面を、自分で組み立てて自社ブランドに仕立てる」ところまで一通りイメージできるようになります。
なお、そもそもExternal IDが何者なのか、B2Bと顧客向け（CIAM）の違いやテナントの使い分けがあやふやな方は、先に Microsoft Entra External IDとは？B2BとCIAMの違い・テナントの使い分け に目を通しておくと、この記事の位置づけがはっきりします。本記事はそのシリーズの中で、「外部テナントで実際にユーザーフローを組む」ところを深掘りする子記事です。
そもそもユーザーフローとは何か
手を動かす前に、「ユーザーフロー」という言葉の正体をつかんでおきましょう。ここが腑に落ちると、あとの手順がずっと迷いにくくなります。
ユーザーフローとは、顧客がたどるサインアップ／サインインの一連の流れを、GUIの設定だけで定義できる”できあいの認証画面”のことです。飲食店にたとえるなら、券売機のようなものだと思ってください。お客さん（顧客）が来たときに、「どんな支払い方法（＝サインイン方法）を選べるか」「注文時にどんな情報（＝属性）を入力してもらうか」を、あなたが券売機のパネル設定であらかじめ決めておく。顧客はその決まった画面に沿って登録・ログインするだけ、という関係です。
ここで大事なのは、認証画面を自分でHTMLからコーディングする必要がないという点です。Microsoftがホストする標準の画面が用意されていて、あなたは「どの方式でログインさせるか」「何を入力させるか」「見た目をどうするか」を選ぶだけ。これがExternal IDのユーザーフローの一番おいしいところです。
アプリとの関係もシンプルです。1つのアプリには、ユーザーフローを1つだけ紐付けられます。逆に、1つのユーザーフローを複数のアプリで共有することはできます。「Web版とスマホ版で同じ登録体験にしたい」なら1つのフローを両方に紐付ければいいし、「アプリごとに集める情報を変えたい」なら別々のフローを作る、というイメージです。
前提として、この記事の操作はすべてExternal ID の「外部テナント（external tenant）」で行います。ふだん社員管理に使う社内テナント（従業員テナント）とは別物なので、まだ用意していない方は無料試用版の外部テナントを作ってから読み進めてください。
基本的なユーザーフローを作成してアプリに紐付ける
それでは、いちばん基本となる「メールアドレスでサインアップ／サインインできる画面」を作っていきます。作業は Microsoft Entra管理センター で行います。
まず外部テナントに切り替える
最初の落とし穴がここです。複数のテナントにアクセスできる場合、管理センターは既定でどこか1つのテナントを開いています。右上の設定（歯車）アイコンから「ディレクトリ＋サブスクリプション」を開き、操作対象の外部テナントに切り替えておいてください。社内テナントのまま作業して「ユーザーフローのメニューが見当たらない」と悩むのは、初回あるあるです。
ユーザーフローを新規作成する
外部テナントに切り替えたら、次のメニューをたどります。
- Entra ID ＞ External Identities（外部ID） ＞ ユーザーフロー を開く
- 新しいユーザーフロー を選択
作成画面では、まず名前を付けます（例：SignUpSignIn）。あとで見返したときに用途が分かる名前にしておくと管理が楽です。
続いてIDプロバイダー（Identity providers）を選びます。これは「顧客に何でログインさせるか」の設定です。基本は Emailアカウント にチェックを入れ、次の2つのどちらかを選びます。
- メールとパスワード：メールアドレスをID、パスワードを認証手段にする、いちばんなじみのある方式。
- メールワンタイムパスコード：パスワードを持たせず、ログインのたびにメールに届く使い捨てコードで認証する方式。パスワードの使い回しリスクを避けたいときに向いています。
GoogleやFacebook、Appleといったソーシャルログインも選べますが、これらは事前にそれぞれのフェデレーション（連携）設定を済ませておかないと選択肢に出てきません。「Googleが一覧にない」というときは、まだIDプロバイダーの登録が終わっていないのが原因です。まずはメール方式でフローを完成させ、ソーシャルは後から足すのがおすすめです。
その下のユーザー属性（User attributes）では、サインアップ時に顧客から集める情報を選びます。ここは次章で詳しく扱うので、いったん表示名（Display Name）あたりだけチェックしておけば十分です。あとはOK→作成を押せば、ユーザーフロー自体は完成です。拍子抜けするほど簡単ですが、これで「メールで登録・ログインできる画面」の中身はもうできています。
「作っただけだと、どのアプリでこの画面が使われるの？」——そこが次のステップです。
ユーザーフローをアプリに紐付ける
ユーザーフローは、作っただけでは「どこにも使われていない券売機」の状態です。実際に顧客に見せるには、アプリと紐付ける必要があります。作成したユーザーフローを開き、「アプリケーション」→「アプリケーションの追加」から、External IDに登録済みのアプリを選んで結び付けます。
紐付けが終わると、そのアプリからサインインを開始したときに、いま作ったユーザーフローの画面が表示されるようになります。ここで「ユーザーフローの実行（テスト）」を使うと、顧客が実際に見るサインアップ画面をその場でプレビューできます。まだアプリを用意していない段階でも、このテスト機能で画面の見た目や入力項目を確認できるので、まずは動かしてみるのがおすすめです。
なお、External IDのアプリ登録（OIDC／SAMLでの統合）やMFA・条件付きアクセスといった「アプリ側からどう認証させるか」の話は、この記事では深追いしません。話が大きくなるので、姉妹記事にゆずります（末尾のリンク参照）。ここでは「フローを作る→アプリに紐付ける→テストで確認する」という一連の流れをつかめれば十分です。
サインイン画面をカスタムブランディングする
ユーザーフローが動いたら、次は見た目です。既定のままだと、顧客が見るサインイン画面にはMicrosoftの汎用的なデザインが出ます。ここを自社のロゴ・色に差し替えるのがカスタムブランディング（カンパニーブランディング）です。
これは地味に効きます。会員登録の途中で急にMicrosoftのロゴが出てくると、顧客は「あれ、いま何のサイトに情報を入れてるんだっけ？」と不安になり、離脱の原因になります。ログイン画面まで自社ブランドで統一しておくことは、信頼感とコンバージョンに直結する大事な仕上げなんです。
ブランディングの設定場所
設定は外部テナントの次の場所で行います。
- Entra ID ＞ 会社のブランド化（Company branding） を開く
- 既定のサインインエクスペリエンス の 編集 を選択
編集画面はいくつかのタブに分かれていて、次のような要素を差し替えられます。
- 背景画像：サインイン画面の背景に敷く大きな画像。
- 背景色：背景画像が表示できない環境（回線が遅い等）で代わりに使われる単色。ブランドカラーを指定しておきます。
- バナーロゴ：画面上部に出す自社ロゴ。
- お気に入りアイコン（ファビコン）：ブラウザのタブに表示される小さなアイコン。
- サインインページのテキスト：画面下部に出せる補足文（利用規約への案内やサポート窓口の一言など）。
画像類には推奨サイズやファイル形式・容量の上限が決まっています。ここを外すとアップロード時にエラーになったり、表示が崩れたりします。たとえばバナーロゴは横長の小さめPNG、背景画像はある程度大きな解像度、といった具合に用途ごとに条件が違うので、設定画面に表示される推奨値に素直に合わせて用意するのが結局いちばん早いです。デザイナーに素材を頼むときは、この推奨サイズをそのまま渡すと手戻りが減ります。
言語ごとの出し分けもできる
顧客が多言語にまたがる場合は、言語ごとにブランディングを用意することもできます。まず「既定」のブランディングを作っておき、その上で日本語・英語といった言語別のバリエーションを追加しておくと、顧客のブラウザ言語に応じて表示が切り替わります。まずは既定だけしっかり作り込み、多言語対応は必要になってから足す、という順番で問題ありません。
1つ注意点として、ブランディングの反映には少し時間がかかることがあります。「設定を保存したのにサインイン画面が変わらない」と焦る前に、数分待ってからブラウザのキャッシュをクリアして確認してみてください。設定ミスではなく、単に反映待ちだったというケースがよくあります。
サインアップ時に集める属性を構成する
最後は、サインアップ時に顧客からどんな情報を集めるかの構成です。会員登録画面でおなじみの「表示名」「会社名」「利用規約への同意チェック」といった入力欄を、コードを書かずに組み立てられます。
属性には2種類あります。組み込み属性（built-in）とカスタム属性（custom）です。
- 組み込み属性：表示名、姓、名、メールアドレス、役職、郵便番号など、最初から用意されている定番の項目。
- カスタム属性：「会員番号」「利用規約への同意」「どこで当社を知ったか」など、自社独自に増やしたい項目。
組み込み属性を集める
定番の項目だけでよければ簡単です。ユーザーフローの作成画面（または作成後のフローの「ユーザー属性」）で、集めたい属性にチェックを入れるだけ。「さらに表示」を押すと、役職・表示名・郵便番号などフルの一覧が出てくるので、必要なものを選びます。ここで選んだ項目が、そのままサインアップ画面の入力欄になります。
カスタム属性を作って集める
独自の項目が欲しいときは、先にテナントレベルでカスタム属性を作成してから、フローに追加します。順番はこうです。
- Entra ID ＞ External Identities（外部ID） ＞ 概要（Overview） を開き、カスタムユーザー属性 を選択する。
- 追加 を押し、属性の名前（例：
会員番号）とデータ型を指定する。データ型は 文字列（String）／ブール値（Boolean）／整数（Int） から選ぶ。 - 作成すると、そのテナント内のどのユーザーフローでも使えるようになる。
- 対象のユーザーフローの「ユーザー属性」を開くと、作ったカスタム属性が一覧に出てくるので、チェックを入れて保存する。
データ型は入力欄の見た目に直結します。たとえばブール値にすると「利用規約に同意する」のようなチェックボックス1つになり、文字列にすると自由入力欄になります。文字列は後述の設定でラジオボタンや複数選択チェックボックスに変えることもできます。「同意チェックが欲しいならBoolean」「選択肢から選ばせたいならStringをラジオに」と覚えておくと選びやすいです。
入力欄のラベル・並び順・必須を整える
集める属性を選んだら、見た目の微調整です。ユーザーフローの「カスタマイズ」→「ページレイアウト（Page layouts）」を開くと、選んだ属性が並んでいて、次のことができます。
- ラベルの変更：「Given Name」のような英語ラベルを「お名前」など好きな表記に書き換える。
- 並び順の変更：属性を選んで「上へ／下へ」で表示順を入れ替える。
- 必須の指定：「必須」列にチェックを入れると、その項目は入力しないと登録を進められなくなる。
- 入力形式の変更：文字列属性をラジオボタンや複数選択チェックボックスに変え、選択肢の文言と保存される値を定義する。
ラベルにはMarkdown記法でリンクを埋め込めるので、たとえば同意チェックのラベルに「[利用規約](https://example.com/terms)に同意します」と書けば、規約ページへのリンク付きチェックボックスになります。利用規約やプライバシーポリシーへの同意を取りたいケースで重宝します。
集めた値はどこに保存されるのか
「入力してもらった値は結局どこに入るの？」という疑問が残りますよね。組み込み属性はそのままユーザーオブジェクトのプロパティに、カスタム属性の値もユーザーオブジェクトに紐付けて保存されます。あとからMicrosoft Graph API経由で読み書きできます。
ここで1つ知っておくと混乱しない事実があります。カスタム属性は内部的に b2c-extensions-app という名前のアプリに保存され、Graphから参照するときの属性名は extension_{アプリID}_{属性名} という長い命名規則になります。たとえば 会員番号 というカスタム属性なら、実体は extension_xxxxxxxx_会員番号 のような名前です。管理センターの画面上ではシンプルな名前に見えるので、「GraphでユーザーのカスタムプロパティをAPI取得したら、見慣れない長い名前になっていて驚く」のはこれが理由です。仕組みを知っていれば慌てずに済みます。
さらに、集めた属性をサインイン時にアプリへ返すトークン（IDトークン）のクレームに含めることもできます。「登録時に入力してもらった会社名を、ログイン後のアプリ側でそのまま使いたい」といったときは、トークンにその属性を追加する設定を行えばOKです。ここまで来ると、単に情報を集めるだけでなく、アプリの中でその情報を活用できるようになります。
まとめ
この記事では、Entra External IDの外部テナントで顧客が見るサインアップ／サインイン画面を組み立てる流れを、実際の作成手順に沿って見てきました。要点を振り返っておきます。
- ユーザーフロー：顧客がたどる登録・ログインの流れをGUIで定義する”できあいの認証画面”。External Identities ＞ ユーザーフローから作成し、アプリに紐付けて初めて顧客に表示される。アプリ1つにフロー1つ。
- 作成前に外部テナントへ切り替える。社内テナントのままだとメニューが見つからず迷う。
- カスタムブランディング：会社のブランド化から背景画像・背景色・ロゴ・ファビコン・補足テキストを差し替え、自社ブランドで統一する。反映には少し時間がかかることがある。
- 属性収集：組み込み属性はチェックするだけ。独自項目はテナントでカスタム属性を作成→フローに追加。データ型で入力欄の形（チェックボックス・自由入力・ラジオ）が決まる。
- ページレイアウトでラベル・並び順・必須・入力形式を整えられる。集めた値はユーザーオブジェクトに保存され、Graphでは長い命名規則になる点に注意。
ここまでできれば、「顧客が見る登録・ログイン画面を、自分で組み立てて自社ブランドに仕立てる」という土台は固まりました。次のステップは、そうして作ったユーザーフローを実際のアプリ（OIDC／SAML）とどう統合し、MFAや条件付きアクセスでどう守るかという世界です。そちらは姉妹記事で扱います。
あわせて読みたい：
