AWS Cognito Hosted UI（マネージドログイン）のカスタマイズ・日本語化と実装手順

Amazon Cognito の Hosted UI は、ログイン・サインアップ・パスワードリセットの画面を Cognito 側が提供する仕組みで、フロントエンドを自作せずに認証を用意できます。ただし2024年以降は新しい「マネージドログイン」とノーコードのブランディングエディタが標準になり、従来の「Hosted UI（クラシック）」とは設定場所もできることも変わりました。さらに、ブランドに深く合わせ込みたい場合は Cognito が用意する画面を使わず、Amplify UI の Authenticator で自前のカスタムUIを作る選択肢もあります。この記事では、マネージドログインの設定・カスタマイズ・日本語化から、カスタムUIとの使い分けまでを実際のコードとともに整理します。前提となるAmazon Cognitoの料金体系や基本的な使い方もあわせて確認してください。

まとめ：Hosted UIのカスタマイズと日本語化の要点

• Hosted UI＝Cognito提供の既製ログイン画面。マネージドログイン（新）とHosted UIクラシック（旧）の2系統があり、新規ユーザープールは既定でマネージドログインを使う。
• カスタマイズは、マネージドログインならノーコードのブランディングエディタ、クラシックならCSSファイル＋ロゴのアップロード。ブランディングエディタは Essentials／Plus ティアで利用できる。
• 日本語化は、マネージドログインが認証URLの lang=ja パラメータに対応（クラシックには言語切替が無い）。細かい文言まで作り込むなら Amplify UI Authenticator の I18n を使う。
• ロゴ・配色程度の調整で足りるなら Hosted UI、独自のレイアウトや画面遷移まで作り込むなら Amplify UI Authenticator（カスタムUI）を選ぶ。
• ソーシャルログインや企業SSOは、Cognito のフェデレーション（外部IdP連携）で Hosted UI／カスタムUIどちらからでも利用できる。

Hosted UI・マネージドログイン・カスタムUIの違いと選び方

この分野でつまずく最大の原因は、名前の近い3つの選択肢が混同されることです。まず全体像を1枚で押さえます。

マネージドログインとHosted UIクラシックの違い

マネージドログインは2024年に追加された新しい画面体験で、AWS マネジメントコンソール上のブランディングエディタから配色・ロゴ・背景・フォームの見た目をノーコードで編集できます。対して従来の Hosted UI（クラシック）は、CSSファイルとロゴ画像をアップロードする方式で、細かなスタイルは自分でCSSを書く必要があります。ブランディングエディタは Essentials／Plus ティア、クラシックの基本的なブランディングは Lite ティアでも使えます。両者はブランディング設定を切り替えられますが、切り替えるとユーザーのセッションは維持されず、再ログインが必要になる点に注意してください。

Hosted UIを使うべきでない場面

Hosted UIは「認証画面を早く用意する」ことに最適化されており、次のような要件では向きません。ログインフォームを自社サービスの画面デザインへ完全に溶け込ませたい、入力項目やステップを独自に増減させたい、ログイン処理の途中に独自のUIやバリデーションを差し込みたい——こうした要件はブランディングエディタやCSSの範囲を超えます。この場合は Cognito の画面を使わず、後述する Amplify UI Authenticator でカスタムUIを実装する方が、結果的に手戻りが少なくなります。逆に、ロゴと配色を変える程度で十分なら、自前実装の保守コストを負う理由はありません。

マネージドログイン（Hosted UI）のセットアップ手順

Hosted UIを使うには、ユーザープールとアプリクライアント、そしてログイン画面を配信するドメインが必要です。

ユーザープールとアプリクライアントの準備

Cognito コンソールでユーザープールを作成し、アプリクライアントを1つ登録します。アプリクライアントには、認証後にユーザーを戻すコールバックURL（redirect_uri）とサインアウト後のURL、有効化するOAuthスコープ（openid email profile など）、許可する認可フロー（Authorization code grant を推奨）を設定します。次に「ドメイン」設定で Cognito 提供のプレフィックスドメイン、または独自ドメインを割り当てると、ログイン画面のURLが有効になります。独自ドメインを使う場合は AWS Certificate Manager でSSL証明書を用意し、DNSにCNAMEを設定します。

サインインURLとトークン取得の流れ

フロントエンドからは、ドメイン配下の /oauth2/authorize エンドポイントへリダイレクトしてログイン画面を表示します。ログイン成功後、コールバックURLに認可コードが返るので、それを /oauth2/token でIDトークン・アクセストークンに交換します。日本語で表示したい場合は、下記のように lang=ja を付けます。

https://your-domain.auth.ap-northeast-1.amazoncognito.com/oauth2/authorize
  ?client_id=xxxxxxxxxxxxxxxxxxxx
  &response_type=code
  &scope=openid+email+profile
  &redirect_uri=https://app.example.com/callback
  &lang=ja

認可コードをトークンに交換する処理は自作もできますが、React などのSPAでは Amplify のライブラリに任せるとリフレッシュトークンの管理まで含めて簡潔になります。バックエンドの認証設定を一気に用意する方法はAmplify Gen2の使い方で解説しているので、あわせて参照してください。

ログイン画面のカスタマイズ手順

見た目の作り込みは、使っている画面がマネージドログインかクラシックかで手順が分かれます。

ブランディングエディタでの調整（マネージドログイン）

マネージドログインでは、ユーザープールの「マネージドログイン」設定からブランディングエディタを開き、ロゴ画像、ボタンやリンクの配色、背景色・背景画像、角丸やフォームの余白などを画面上で編集して保存します。CSSを書かずにブランドカラーへ寄せられるため、デザイナーとの分業もしやすくなります。ライト／ダークの表示や、フォーム要素ごとの色を個別に指定できるので、まずはここで要件を満たせるか確認するとよいでしょう。

Hosted UIクラシックのCSSカスタマイズ

クラシックを使い続ける場合は、Cognito が用意する専用クラス名に対してCSSを当てます。バナー、サインインボタン、ホバー時の色などをまとめたCSSファイルをアップロードする方式です。

/* Hosted UI クラシックの CSS カスタマイズ例 */
.banner-customizable {
  background-color: #0b3d91;
  padding: 24px 0;
}
.submitButton-customizable {
  background-color: #0b3d91;
  border-radius: 6px;
}
.submitButton-customizable:hover {
  background-color: #0a337a;
}

クラス名は Cognito 側で固定されているため、DOM構造そのものは変えられません。レイアウトやフォームの構成まで変更したい場合は、CSSでは限界があるためカスタムUIに切り替えます。

Hosted UIの日本語化

マネージドログインは多言語表示に対応しており、既定は英語ですが、認証URLに lang=ja を付けると日本語で表示されます。初回に lang を付けてアクセスすると、Cognito がブラウザに言語設定のクッキーを保存し、以降は同じ言語で表示されます。マネージドログインは複数言語のローカライズに対応し、日本語も対象言語に含まれます。一方、従来の Hosted UI クラシックには言語切替の仕組みが無く、日本語化したい場合はマネージドログインへ移行するか、次章のカスタムUIで文言を翻訳する必要があります。エラーメッセージまで含めて表現を細かく作り込みたい場合は、カスタムUI側の I18n の方が自由度が高くなります。

外部IdP連携（ソーシャルログイン・企業SSO）

GoogleやFacebookなどのソーシャルログイン、Google Workspace や Microsoft Entra ID を使った企業のシングルサインオンは、Cognito のフェデレーション（外部IdP連携）で実現します。ユーザープールに外部IdPを登録し、クライアントIDやシークレット、SAML／OIDC のメタデータを設定すると、Hosted UI のログイン画面に「Googleでログイン」などのボタンが自動的に追加されます。カスタムUIから使う場合も、Amplify の設定で同じIdPを指定すればソーシャルボタンを表示できます。認証基盤としてCognitoが自社要件に合うかを他サービスと比べて判断したいときは、CognitoとKeycloak・Auth0・Oktaの比較が参考になります。

Amplify UI AuthenticatorによるカスタムUI実装と日本語化

Hosted UI の見た目調整では足りないときは、Amplify UI の Authenticator コンポーネントで認証画面を自前のReactアプリに埋め込みます。ログイン・サインアップ・パスワードリセットの一連のフローが用意されており、自社の画面デザインの中に組み込めます。

Amplify Gen2での認証バックエンド定義

Amplify Gen2 では、認証リソースを amplify/auth/resource.ts にコードで定義します。メール／パスワード認証に加え、外部IdPやコールバックURLもここで指定します。

// amplify/auth/resource.ts
import { defineAuth, secret } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret("GOOGLE_CLIENT_ID"),
        clientSecret: secret("GOOGLE_CLIENT_SECRET"),
      },
      callbackUrls: ["https://app.example.com/callback"],
      logoutUrls: ["https://app.example.com/"],
    },
  },
});

Authenticatorの設置とI18nによる日本語化

フロントエンドでは @aws-amplify/ui-react の Authenticator を配置します。日本語化は、公式が用意する翻訳辞書 translations を読み込み、I18n.setLanguage("ja") で言語を切り替えます。個別の文言は putVocabulariesForLanguage で上書きできます。

// src/App.tsx
import { Authenticator, translations } from "@aws-amplify/ui-react";
import { I18n } from "aws-amplify/utils";
import "@aws-amplify/ui-react/styles.css";

I18n.putVocabularies(translations);
I18n.setLanguage("ja");

// 個別の文言を日本語で上書き
I18n.putVocabulariesForLanguage("ja", {
  "Sign In": "ログイン",
  "Create Account": "アカウント作成",
  "Forgot your password?": "パスワードをお忘れですか？",
});

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <button onClick={signOut}>サインアウト</button>
      )}
    </Authenticator>
  );
}

この方式なら、ログインフォームの文言・配置・バリデーションを自社サービスの世界観に合わせて細かく作り込めます。デプロイ先やホスティングの選択で迷う場合は、AWS Amplify Hostingの料金と特徴も判断材料になります。

よくある質問

Cognitoの Hosted UI は無料で使えますか？

Hosted UI 自体はユーザープールの機能なので、追加料金なく利用できます。ただし Cognito には Lite・Essentials・Plus のティアがあり、マネージドログインのブランディングエディタは Essentials 以上で使えます。月間アクティブユーザー数に応じた課金体系のため、実際のコストはAmazon Cognitoの料金で確認してください。

Hosted UI とマネージドログインは何が違いますか？

マネージドログインは2024年に追加された新しいログイン画面で、ノーコードのブランディングエディタで見た目を編集できます。従来の Hosted UI（クラシック）はCSSファイルとロゴのアップロードで調整する方式です。新規のユーザープールでは既定でマネージドログインが使われます。

Cognitoのログイン画面を日本語化できますか？

マネージドログインは、認証URLに lang=ja を付けることで日本語表示になります。クラシックの Hosted UI には言語切替が無いため、日本語化したい場合はマネージドログインへ移行するか、Amplify UI Authenticator の I18n で自前のカスタムUIを日本語化します。

Hosted UI を使わずカスタムUIにすべきなのはどんな時ですか？

ログインフォームを自社画面のデザインに完全に合わせたい、入力項目やステップを独自に変えたい、認証フローの途中に独自のUIを差し込みたい場合は、Cognito の画面を使わず Amplify UI Authenticator でカスタムUIを実装します。ロゴと配色の変更で足りるなら Hosted UI のままで十分です。

ログイン画面にロゴや独自ドメインを設定できますか？

ロゴはブランディングエディタ（マネージドログイン）またはロゴ画像のアップロード（クラシック）で設定できます。URLを自社ブランドに合わせたい場合は、ユーザープールのドメイン設定で独自ドメインを割り当て、ACMのSSL証明書とDNSのCNAMEを設定します。独自ドメインはフィッシング対策の観点でも有効です。

関連記事

• Amazon Cognito（コグニート）とは？料金・できること・使い方を初心者向けにわかりやすく解説
• Keycloakとは？メリット・デメリットとAuth0・Okta・Cognito比較で導入を判断【2026年版】
• ローカル開発を爆速化するAmplify Gen2の使い方
• AWS Amplify Hostingとは？料金・特徴とS3+CloudFront/App Runnerとの違い