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

ブランドに合わせる

オムニサインイン体験​

コンソール > サインイン & アカウント > ブランディング

に移動して、サインインページの外観や雰囲気をカスタマイズできます。このセクションでは、主要なブランディング要素を簡単に調整できます。

ブランドカラー​

サインイン体験や標準のアカウントセンター全体で使用されるプライマリカラーを定義します。プライマリボタン、リンク、その他のコンポーネントに適用されます。デフォルトの 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 で利用できない場合は、お問い合わせください。

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