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

ブランドに合わせる

オムニサインイン体験​

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

ブランドカラー​

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

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

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

ファビコン​

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

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

ダークモード​

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

Logto ブランディングを非表示​

デフォルトでは、標準のサインイン体験ページの下部に「Powered by Logto」が表示されます。「Logto ブランディングを非表示」オプションを有効にすると、Logto のマークを削除し、自社ブランドのみを強調したクリーンでプロフェッショナルなサインイン体験を実現できます。

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

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

「アプリレベルのサインイン体験」をオンにすると、各アプリごとに特定のブランディングロゴ、ファビコン、カラー、さらには カスタム 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 で利用できない場合は、お問い合わせください。

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