メインコンテンツまでスキップ

ブランドに合わせる

オムニサインイン体験​

サインインページの見た目や雰囲気をカスタマイズするには、コンソール > サインイン体験 > ブランディング に移動してください。このセクションでは、主要なブランディング要素を簡単に調整できます。

ブランドカラー

サインイン体験全体で使用されるプライマリカラーを定義します。プライマリボタン、リンク、その他のコンポーネントに適用されます。デフォルトの Logto パープルカラーをブランドカラーに置き換えましょう。ダークモード用には別のブランドカラーも指定できます。

会社ロゴ

ロゴはサインインホームページ、サインアップホーム、ローディングページ、その他のインターフェースで表示されます。

  • 画像にはいくつかの制限があります：500KB 未満で、SVG、PNG、JPG、JPEG、ICO 形式である必要があります。
  • ロゴ欄を空白にすると、インターフェースにロゴは表示されません。
  • ダークモード用のロゴもアップロードできます。

ファビコン

ファビコンはウェブサイトを表す小さなアイコンで、ブラウザのタブやブックマーク、その他のブラウザインターフェースで表示されます。

  • 画像は 500KB 未満で、SVG、PNG、JPG、JPEG、ICO 形式である必要があります。見栄えを良くするために正方形の画像をアップロードすることを推奨します。
  • ダークモード用のファビコンもアップロードできます。
  • また、各フロー（サインイン / サインアップ / パスワード忘れなど）でブラウザタイトルがカスタムタイトルの代わりに使用されます。

ダークモード

ダークモードを有効にすると、ユーザーのシステム設定に基づいてサインインページの外観が自動的に調整されます。

アプリ固有のブランディング​

複数アプリを展開している場合、アプリごとにサインイン体験を設定できます。アプリケーション詳細ページで設定可能です。コンソール > アプリケーション に移動してください。

「アプリレベルのサインイン体験」をオンにすると、各アプリごとに特定のブランドロゴ、ファビコン、カラー、さらには カスタム CSS まで設定できます。アプリレベルのブランディングが有効なアプリからサインインが開始された場合、そのアプリのブランディング設定に従ってサインイン体験がカスタマイズされます。そうでない場合は、デフォルトのオムニサインイン体験設定が適用されます。

アプリレベルのブランディングには、ライトモードとダークモードの両方の設定が利用可能です。ダークモードの設定は、オムニサインイン体験 設定でダークモードが有効な場合のみ反映されます。

組織固有のブランディング​

クライアントの組織ロゴをサインイン体験で動的に表示するには、組織設定ページでロゴをアップロードできます。コンソール > 組織 に移動してください。

「組織レベルのサインイン体験」をオンにすると、アプリレベルのブランディングと同様に、各組織ごとに特定のブランドロゴ、ファビコン、カラー、カスタム CSS を設定できます。

その後、サインインをトリガーする際に organization_id パラメーターで組織 ID を渡すことで、どの組織ロゴを表示するか Logto に伝えることができます。たとえば、組織 ID 123456 のロゴを表示したい場合：

  • Logto SDK を利用している場合は、signIn メソッドの extraParams オブジェクトに organization_id パラメーターを渡せます。
  • OIDC クライアントを利用している場合は、認可エンドポイント へのリクエスト時に organization_id パラメーターを渡せます。

組織レベルのブランディングにも、ライトモードとダークモードの両方の設定が利用可能です。ダークモードの設定は、オムニサインイン体験 設定でダークモードが有効な場合のみ反映されます。

注記:

アプリレベルのブランディングと組織レベルのブランディングの両方が有効な場合、組織レベルのブランディングが優先されます。優先順位は以下の通りです： 組織レベルのブランディング → アプリレベルのブランディング → オムニサインイン体験

Logto ブラウザ SDK を使って signIn メソッドで organization_id パラメーターを渡す例を紹介します：

index.ts

logtoClient.signIn({
  // ...他のパラメーター
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
注記:

extraParams 機能は順次すべての Logto SDK に展開中です。まだ SDK に表示されていない場合は、お問い合わせください。

各アプリや組織ごとにサインイン体験をカスタマイズする方法