---
title: "AWS Cognito Hosted UI（マネージドログイン）のカスタマイズ・日本語化と設定手順"
url: "https://www.issoh.co.jp/tech/details/3441/"
published: 2024-09-02
updated: 2026-10-19
categories: ["AWS"]
publisher: "株式会社一創"
---

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

Amazon Cognito の Hosted UI は、サインイン・サインアップ・パスワードリセットの画面を Cognito 側が配信する仕組みです。現在は2系統あり、ノーコードのブランディングエディタで見た目を変えられる「マネージドログイン」と、CSSファイルとロゴで調整する従来の「Hosted UI（クラシック）」をドメイン単位で選びます。コンソールで新しく作ればマネージドログインになりますが、AWS CLI・CDK・Amplify Gen2 でドメインを作ると、指定しない限りクラシックのままです。この記事では、両者の機能差とカスタムUIにすべき条件、マネージドログインを確実に有効にする設定、カスタマイズと日本語化の手順を、公式ドキュメントとライブラリのソースで確かめた値で整理します。Cognito そのものの料金と全体像は[Amazon Cognito（コグニート）とは？料金・できること・使い方をCLIとコード例で解説](/tech/details/3108/)にまとめています。

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

- Hosted UI には**マネージドログイン（ManagedLoginVersion=2）**と**クラシック（=1）**があり、ドメインごとにどちらか一方を選ぶ。選択はそのドメインを使う全アプリクライアントに効く。
- マネージドログインは Essentials／Plus プランが必要。Lite プランではクラシックしか使えない。
- **CLI・CloudFormation・CDK・Amplify Gen2 で作ったドメインは、ManagedLoginVersion を指定しないとクラシックになる**。さらに API で作ったアプリクライアントにはスタイルが無く、`CreateManagedLoginBranding` を呼ぶまでマネージドログインは表示されない。
- 見た目は、マネージドログインならブランディングエディタ（背景画像・ダークモード・ヘッダー/フッター）、クラシックなら決められた18クラスのCSS（3KBまで）とロゴ（100KBまで）。どちらも画面の文言は変えられない。
- 日本語化はマネージドログインの `lang=ja` だけが対応する。クラシックには言語切替が無い。
- 入力項目の追加、カスタム認証チャレンジの Lambda、画面文言の変更が要るなら、Cognito の画面を使わず Amplify UI Authenticator などで自作する。プロフィール編集画面はアプリ側に足せばマネージドログインと併用でき、再認証は `prompt=login` で求められる。Authenticator の日本語辞書は全文言を網羅していないため、足りない分を自分で登録する。

## マネージドログイン・クラシック・カスタムUIの機能差

3つの選択肢は、見た目の自由度だけでなく使える認証機能が違います。次の表は、[マネージドログインの公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html)と、AWS Security Blog の[マネージドログインとカスタムUIの判断表](https://aws.amazon.com/blogs/security/use-the-hosted-ui-or-create-a-custom-ui-in-amazon-cognito/)（2025年10月8日更新）から、判断に効く項目を抜き出したものです。

| 項目                 | マネージドログイン       | クラシック         | カスタムUI |
| ------------------ | --------------- | ------------- | ------ |
| 見た目の変更             | ブランディングエディタ     | CSS（18クラス）＋ロゴ | 自由     |
| 多言語表示              | 12言語            | 非対応           | 自前で実装  |
| パスキー・パスワードレス       | 対応              | 非対応           | 自前で実装  |
| 入力項目の追加            | 不可              | 不可            | 可      |
| カスタム認証チャレンジ        | 不可              | 不可            | 可      |
| セッションCookieの1時間未満化 | 不可              | 不可            | 可      |
| ALB認証との連携          | 可               | 可             | 不可     |
| AWS WAF の CAPTCHA  | 可               | 可             | 不可     |
| 利用できるプラン           | Essentials／Plus | 全プラン          | 全プラン   |

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

マネージドログインは2024年11月に追加された第2世代の画面です。公式ガイドは、クラシックを「第1世代で、画面の設計が簡素で機能も少ない」と位置づけ、例としてパスキーのサインインがクラシックでは使えないことを挙げています。日本語を含む多言語表示、背景画像、ダークモードもマネージドログインだけの機能です。

両者は同じドメインで併用できず、切り替えるとサインイン中の利用者のセッションは引き継がれません。公式ガイドによると、ブランディングバージョンの変更が反映されるまで最大4分かかります。本番で切り替えるなら、利用の少ない時間帯を選び、再サインインが発生することを利用者に告知しておくのが安全です。

### Cognitoの画面を使わずカスタムUIにすべき条件

マネージドログインはサインアップ・サインイン・MFA・パスワードリセットまでを受け持ちますが、公式ガイドが明記している範囲外が3つあります。1つ目は**カスタム認証チャレンジの Lambda トリガー**で、マネージドログインは対応していません。2つ目は**プロフィール管理**で、属性の変更や MFA の設定変更を利用者が自分で行う画面はありません。公式ガイドはこれをアプリ側で実装するよう案内しており、認証はマネージドログインに任せたまま、プロフィール画面だけを自作して併用できます。3つ目は**セッション**で、Cognito はサインイン後に1時間有効な Cookie をブラウザに置き、その間は同じ方法で再サインインできます。この Cookie の有効期間は変えられませんが、[authorize エンドポイントの公式リファレンス](https://docs.aws.amazon.com/cognito/latest/developerguide/authorization-endpoint.html)のとおり、認可リクエストに `prompt=login` を付ければ Cookie が残っていても再認証を求められます。

このうち画面の自作が避けられないのは、カスタム認証チャレンジを使う場合と、認証フォームに独自の入力項目を足したい場合、画面の文言を変えたい場合です。これらが要件にあるなら、Cognito の画面に寄せる努力はやめて最初からカスタムUIを選んでください。逆に、ALB の認証アクションで社内ツールに認証を掛ける構成や、AWS WAF の CAPTCHA を使いたい構成はマネージドログインかクラシックが前提で、カスタムUIでは組めません。ALB で使う場合の設定は[ALBとCognitoで認証を後付けする手順：リスナールール設定とヘッダー検証](/tech/details/18501/)で扱っています。

## マネージドログインを有効にする手順

サインイン画面を出すには、ユーザープールのドメイン、アプリクライアント、アプリクライアントに割り当てたスタイルの3つが揃っている必要があります。

### ドメインとブランディングバージョンを設定する

Cognito コンソールでユーザープールを開き、「ドメイン」で Cognito ドメイン（プレフィックスドメイン）か独自ドメインを追加します。このとき「ブランディングバージョン」で「マネージドログイン」を選びます。プランが Lite のままだとマネージドログインは選べないため、先に「機能プラン」で Essentials か Plus に変更します。[公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html)によると、プレフィックスドメインは追加から最大60秒、独自ドメインは最大5分で画面が使えるようになります。独自ドメインにすると、パスキーの RP ID（パスキーを結び付けるドメイン）が既定で独自ドメインに変わる点にも注意してください。パスキーの設定は[Cognitoのパスキー実装手順：WebAuthnサインインの有効化とSDKでの登録・認証](/tech/details/18516/)で詳しく扱っています。

### アプリクライアントとスタイルを作成する

「アプリクライアント」でクライアントを作り、認証後に戻すコールバックURL、OAuth スコープ（`openid` `email` `profile` など）、許可する OAuth フロー（認可コードグラント）を設定します。コンソールで作ったクライアントには既定のスタイルが自動で付くので、この時点でマネージドログインの画面が出ます。スタイルはアプリクライアントごとに1つで、別のスタイルに付け替えるには今のスタイルを削除してから作り直します。

### サインインURLを組み立てる

アプリからは、ドメインの `/oauth2/authorize` へリダイレクトします。サインインに成功するとコールバックURLに認可コードが返るので、`/oauth2/token` でIDトークンとアクセストークンに交換します。日本語で表示するには `lang=ja` を付けます。次の例は表示確認用で、改行と字下げは取り除いて使います。本番の実装では、リクエストごとに推測できない `state` を付けて戻り値と照合し、PKCE の `code_challenge` と `code_challenge_method=S256` も加えます。

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

認可コードの交換とトークンの検証をサーバー側で組む手順は[Cognitoで認証基盤を実装する手順：ユーザープール作成からaws-jwt-verifyでのJWT検証まで](/tech/details/17445/)にあります。認証画面の用意からユーザー移行・権限設計まで含めて外部に任せたい場合は、[認証基盤・ID管理システム開発](/service/system/identity/)として相談を受け付けています。

## CLI・CDK・Amplify Gen2で作るとクラシックになる落とし穴

コンソールでは新規のドメインが既定でマネージドログインになりますが、API 経由では事情が違います。[公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html)は「SDK で作ったアプリクライアントにはスタイルが作られず、`CreateManagedLoginBranding` を呼ぶまでマネージドログインを使えない」と書いています。加えて、AWS CDK（aws-cdk-lib 2.273.0）の型定義は、ドメインの `managedLoginVersion` を指定しないときの挙動を「Cognito の既定はクラシック」と注記しています。つまりコードで構築するときは、ドメインのバージョンとスタイルの2つを明示する必要があります。

### AWS CLIでバージョン2とスタイルを指定する

既存のドメインをマネージドログインに切り替え、既定の見た目のスタイルをアプリクライアントに割り当てるコマンドです。`--use-cognito-provided-values` を付けるときは、`--settings` と `--assets` を渡してはいけません。

```
aws cognito-idp update-user-pool-domain \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --domain your-prefix \
  --managed-login-version 2

aws cognito-idp create-managed-login-branding \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --client-id 1example23456789 \
  --use-cognito-provided-values
```

### CDKとCloudFormationで指定する

CDK では `addDomain` に `managedLoginVersion` を渡し、スタイルは L1 コンストラクトの `CfnManagedLoginBranding` で作ります（2026年10月時点で L2 は用意されていません）。CloudFormation で書く場合は `AWS::Cognito::UserPoolDomain` の `ManagedLoginVersion: 2` と `AWS::Cognito::ManagedLoginBranding` の組み合わせになります。

```
// lib/auth-stack.ts（aws-cdk-lib 2.273.0）
import * as cognito from "aws-cdk-lib/aws-cognito";

const pool = new cognito.UserPool(this, "Pool", {
  featurePlan: cognito.FeaturePlan.ESSENTIALS,
});
const client = pool.addClient("WebClient", {
  oAuth: {
    flows: { authorizationCodeGrant: true },
    callbackUrls: ["https://app.example.com/callback"],
  },
});
pool.addDomain("Domain", {
  cognitoDomain: { domainPrefix: "your-prefix" },
  managedLoginVersion: cognito.ManagedLoginVersion.NEWER_MANAGED_LOGIN,
});
new cognito.CfnManagedLoginBranding(this, "Branding", {
  userPoolId: pool.userPoolId,
  clientId: client.userPoolClientId,
  useCognitoProvidedValues: true,
});
```

### Amplify Gen2のdefineAuthはクラシックのドメインを作る

Amplify Gen2 の `defineAuth` で `externalProviders` を指定すると、Amplify がドメインのプレフィックスを自動で決めてユーザープールにドメインを追加します。`@aws-amplify/auth-construct` 1.12.0 のソースでは、このドメインは `cognitoDomain` だけを渡して作られ、`managedLoginVersion` は渡されていません。同じ設定を CDK で synth（CloudFormation テンプレートへの変換）すると、生成された `AWS::Cognito::UserPoolDomain` には `ManagedLoginVersion` がありませんでした。このままでは `lang=ja` による日本語化もパスキーのサインインも使えません。

マネージドログインにするには、`amplify/backend.ts` で CDK のエスケープハッチを使い、ドメインのバージョンを書き換えてスタイルを追加します。次のコードと同じ操作を AmplifyAuth コンストラクトに対して synth し、`ManagedLoginVersion: 2` と `AWS::Cognito::ManagedLoginBranding` が出力されることを確認しました（デプロイまでは行っていません）。

```
// amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";
import {
  CfnManagedLoginBranding,
  CfnUserPoolDomain,
  UserPoolDomain,
} from "aws-cdk-lib/aws-cognito";
import { auth } from "./auth/resource";

const backend = defineBackend({ auth });
const { userPool, userPoolClient } = backend.auth.resources;

// defineAuth が追加したドメインをマネージドログイン（2）に変える
const domain = userPool.node.children.find(
  (c) => c instanceof UserPoolDomain
) as UserPoolDomain;
(domain.node.defaultChild as CfnUserPoolDomain).managedLoginVersion = 2;

// アプリクライアントに既定のスタイルを割り当てる
new CfnManagedLoginBranding(backend.auth.stack, "ManagedLoginBranding", {
  userPoolId: userPool.userPoolId,
  clientId: userPoolClient.userPoolClientId,
  useCognitoProvidedValues: true,
});
```

ユーザープールのプランは、API の既定が Essentials なので、`defineAuth` で作ったプールはそのままマネージドログインの条件を満たします。`defineAuth` の既定値と作成後に変えられない設定は[Amplify×Cognito認証の実装手順：defineAuthと既存プールの参照](/tech/details/18508/)で整理しています。

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

どこまで変えられるかは、ドメインがマネージドログインかクラシックかで決まります。共通の制約として、[ブランディングの公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/managed-login-branding.html)のとおり、どちらも画面に表示される文言そのものは変更できません（変えられるのは言語だけです）。

### ブランディングエディタで変えられる項目

ユーザープールの「マネージドログイン」メニューの「スタイル」からブランディングエディタを開きます。最初に出るクイックセットアップでは、表示モード（ライト・ダーク・ブラウザに合わせる）、要素間の余白、角丸、背景画像か単色か、フォームの配置とロゴ、メインカラー、ヘッダーの有無とロゴを選べます。詳細設定では、ボタン・入力欄・リンク・フォーカスリング・エラー表示・ヘッダー・フッター・ファビコンなど15のコンポーネントを個別に調整できます。SAML の IdP が多い企業向けには、メールアドレスのドメインから IdP を選ばせる「ドメイン検索入力」も設定できます。

画像は API の列挙値で15種類（ファビコン、ヘッダー/フッターのロゴと背景、ページ背景、フォームのロゴと背景、メール・SMS・認証アプリ・パスワード・パスキーの説明画像、IdP ボタンのアイコン）あり、それぞれライト用・ダーク用・両用を登録できます。ロゴや背景は PNG・SVG・JPEG、ファビコンは ICO か SVG です。

### スタイルをAPIで複製する

開発・検証・本番で同じ見た目を使い回すなら、コンソールで作ったスタイルを API で取り出して別のアプリクライアントに適用します。[ブランディングエディタの公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/managed-login-brandingeditor.html)の手順は、`DescribeManagedLoginBrandingByClient` を `ReturnMergedResources` 付きで呼び、応答の外側の `ManagedLoginBranding` を外して `CreateManagedLoginBranding` か `UpdateManagedLoginBranding` に渡す流れです。

```
# 元のスタイルを既定値込みで取り出す
aws cognito-idp describe-managed-login-branding-by-client \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --client-id 1example23456789 \
  --return-merged-resources \
  --query "ManagedLoginBranding.{Settings:Settings,Assets:Assets}" > style.json

# 別のアプリクライアントに同じスタイルを作る
aws cognito-idp create-managed-login-branding \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --client-id 2example98765432 \
  --cli-input-json file://style.json
```

1回のリクエストは2MBまでです。画像が多くて超えるときは、`UpdateManagedLoginBranding` を項目ごとに分けて送ります。この操作は指定しなかった項目を既定値に戻さないため、分割しても既存の設定は消えません。

### Hosted UIクラシックのCSSとロゴの制約

クラシックでは、Cognito が決めたクラスと決めたプロパティだけを CSS で上書きできます。[クラシックのブランディングの公式ガイド](https://docs.aws.amazon.com/cognito/latest/developerguide/hosted-ui-classic-branding.html)が挙げる制約は次のとおりです。

- 使えるクラスは `banner-customizable` `submitButton-customizable` `inputField-customizable` `label-customizable` `idpButton-customizable` など18種類。テンプレートに無いプロパティは反映されない。
- `@import` `@supports` `@page` `@media` と JavaScript は使えない。スマホ向けにレイアウトを変えるといった調整はできない。
- ロゴは PNG・JPG・JPEG で100KBまで（350×178ピクセルに収まる画像）。CSS は3KBまで。CSS とロゴは別々に設定できず、1回のリクエストでまとめて送る。
- 全アプリクライアント共通の設定（`ALL`）と、アプリクライアントごとの上書きができる。

`border-radius` は、クラシックの送信ボタンで使用できるプロパティに含まれません。許可されたプロパティだけで書くと次のようになります。

```
/* Hosted UI クラシックの CSS（許可プロパティのみ） */
.banner-customizable {
  padding: 24px 0px 24px 0px;
  background-color: #0b3d91;
}
.submitButton-customizable {
  font-size: 14px;
  font-weight: bold;
  background-color: #0b3d91;
}
.submitButton-customizable:hover {
  background-color: #0a337a;
}
.label-customizable {
  font-weight: 700;
}
```

```
aws cognito-idp set-ui-customization \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --client-id ALL \
  --css file://custom.css \
  --image-file fileb://logo.png
```

背景画像や角丸など、クラシックで変更できずブランディングエディタで対応できる項目が必要なら、Essentialsへの変更とマネージドログインへの移行を検討してください。画面文言や独自の入力項目が要件なら、移行だけでは解決しません。

## Hosted UIの日本語化

Cognito が配信する画面を日本語にする方法は、マネージドログインの `lang` パラメータだけです。クラシックには言語を切り替える仕組みがありません。

### lang=jaで日本語表示にする条件

[マネージドログインのローカライズの公式説明](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html#managed-login-localization)によると、既定の言語は英語で、配布するURLに `lang=ja` を付けると日本語で表示されます。条件は Essentials か Plus のプランで、ドメインのブランディングバージョンがマネージドログインであることです。最初に `lang` 付きでアクセスすると Cognito が `lang` Cookie を保存するので、以降はパラメータを付けなくても同じ言語で表示されます。対応言語はドイツ語・英語・スペイン語・フランス語・インドネシア語・オランダ語・イタリア語・日本語・韓国語・ポルトガル語（ブラジル）・中国語（簡体字・繁体字）の12言語です。

注意点が2つあります。1つは、画面の文言は Cognito の翻訳のまま変えられないことです。社内用語に合わせたい、ボタン名を変えたいといった要件はカスタムUIでしか満たせません。もう1つは、利用者が選んだ言語がカスタムメール送信・カスタムSMS送信の Lambda トリガーには渡らないことです。確認コードのメールを日本語にするには、`locale` 属性やアプリクライアントIDなど別の手がかりで言語を決めます。

### 利用規約とプライバシーポリシーへのリンクを言語別に出す

マネージドログインのサインアップ画面には、利用規約とプライバシーポリシーへのリンクを表示できます。API の `CreateTerms` で、言語ごとのURLを `cognito:japanese` のようなキーで登録します。利用規約（`terms-of-use`）とプライバシーポリシー（`privacy-policy`）の両方を登録しないとリンクは表示されず、その言語のURLが無いときは `cognito:default` のURLが使われます。

```
aws cognito-idp create-terms \
  --user-pool-id ap-northeast-1_EXAMPLE \
  --client-id 1example23456789 \
  --terms-name privacy-policy \
  --terms-source LINK \
  --enforcement NONE \
  --links '{"cognito:default":"https://example.com/privacy/","cognito:japanese":"https://example.com/ja/privacy/"}'
```

利用規約を登録するときは、`--terms-name terms-of-use` に変更し、`--links` の各URLも対応する言語の利用規約ページへ変更して実行します。両方の文書を登録すると、サインアップ画面にリンクが表示されます。

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

Google・Facebook・Sign in with Apple・Login with Amazon のソーシャルログインと、SAML 2.0・OIDC の企業 IdP は、ユーザープールに IdP を登録してアプリクライアントで有効にすると、Hosted UI のサインイン画面にボタンが追加されます。`identity_provider` パラメータを付けて `/oauth2/authorize` を呼べば、Cognito の画面を出さずに IdP のサインイン画面へ直接リダイレクトすることもできます。Entra ID と SAML で連携するときの設定と属性マッピングは[Cognito SAML連携の手順：Entra IDでSSOを組む設定と属性マッピング](/tech/details/18512/)で解説しています。Cognito と Keycloak・Auth0 のどれを認証基盤にするか迷っている段階なら、[Keycloakとは？Oktaとの違いと連携手順｜Auth0・Cognito比較で導入を判断](/tech/details/7663/)が判断材料になります。

## Amplify UI AuthenticatorでカスタムUIを作り日本語化する

Cognito の画面では要件を満たせないときは、Amplify UI の `Authenticator` コンポーネントで認証画面を自分の React アプリに組み込みます。サインイン・サインアップ・パスワードリセットの画面遷移は用意されているので、ゼロから作るより工数を抑えられます。バックエンドを Amplify Gen2 で用意する手順は[AWS Amplify Gen 2の使い方：ampxで初期化からCI/CDまで](/tech/details/2842/)にあります。

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

`@aws-amplify/ui-react` 6.15.7 では、`Amplify.configure` で Gen2 の `amplify_outputs.json` を読み込んだうえで、同梱の翻訳辞書 `translations` を `I18n.putVocabularies` で読み込み、`I18n.setLanguage("ja")` で日本語に切り替えます。個別の文言は `putVocabulariesForLanguage` で上書きします。

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

Amplify.configure(outputs);  // Gen2 が生成する接続情報
I18n.putVocabularies(translations);
I18n.setLanguage("ja");

I18n.putVocabulariesForLanguage("ja", {
  "Sign In": "ログイン",            // タブの見出し
  "Sign in": "ログイン",            // 送信ボタン
  "Create Account": "新規登録",
  "Forgot your password?": "パスワードをお忘れの方",
});

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

キーは英語の原文と1文字単位で一致させます。`@aws-amplify/ui` 6.15.7 のソースでは、タブの見出しが `"Sign In"`、送信ボタンが `"Sign in"` と大文字小文字の違う別キーで、片方だけ上書きするともう片方は辞書の訳（「サインイン」）のまま残ります。

### 日本語辞書に無い文言を補う

`@aws-amplify/ui` 6.15.7 に Node.js で辞書を読み込んで照合したところ、Authenticator の既定文言115件のうち49件に日本語訳がなく、英語のまま表示されました。欠けているのは主に次の3群です。

- パスキーとパスワードレス：`Sign In with Passkey` `Create a Passkey` `Sign In with Email` `Other sign-in options` など
- 属性の入力欄：`Name` `Family Name` `Given Name` `Enter your Phone Number` `Birthdate` など
- 短い操作語：`Continue` `Forgot Password?` `Enter your Confirmation Code` など

パスキーやメールOTPを有効にした画面、氏名や電話番号をサインアップで集める画面では、英語と日本語が混ざります。使う機能に合わせて、足りない文言を `putVocabulariesForLanguage` にまとめて登録してください。

```
I18n.putVocabulariesForLanguage("ja", {
  "Continue": "次へ",
  "Forgot Password?": "パスワードをお忘れの方",
  "Other sign-in options": "ほかの方法でサインイン",
  "Sign In with Passkey": "パスキーでサインイン",
  "Sign In with Email": "メールでサインイン",
  "Create a Passkey": "パスキーを作成",
  "Family Name": "姓",
  "Given Name": "名",
  "Enter your Phone Number": "電話番号を入力",
  "Enter your Confirmation Code": "確認コードを入力",
});
```

## よくある質問

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

画面そのものに別料金はかからず、課金はユーザープールの月間アクティブユーザー（MAU）単位です。AWS Price List API の東京リージョン（2026年9月25日版）の単価は、クラシックだけが使える Lite が1MAUあたり0.0055ドル（利用者が増えると段階的に下がる）、マネージドログインが使える Essentials が0.015ドル、Plus が0.02ドルです。[Cognito の料金ページ](https://aws.amazon.com/jp/cognito/pricing/)のとおり、Lite と Essentials にはアカウント（または AWS Organizations の組織）あたり月10,000MAUの無料枠があり、Plus にはありません。2024年11月22日より前に作られた Lite のユーザープールは、従来の月50,000MAUの無料枠が続きます。SAML・OIDC で連携した利用者は別枠で、月50MAUまで無料です。

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

どちらも Cognito がドメイン上で配信するサインイン画面です。マネージドログインは2024年11月に追加された新しい方式で、ブランディングエディタ、12言語の表示、パスキーに対応します。クラシック（従来の Hosted UI）は CSS とロゴだけで調整し、言語切替とパスキーはありません。ドメインごとにどちらか一方を選びます。

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

マネージドログインなら、サインインURLに `lang=ja` を付けると日本語で表示されます。Essentials か Plus のプランで、ドメインのブランディングバージョンがマネージドログインであることが条件です。クラシックは日本語化できないため、マネージドログインへ移るか、Amplify UI Authenticator などで画面を自作します。

### Hosted UI を使わない方がよいのはどんな時ですか？

入力項目を増やしたい、カスタム認証チャレンジの Lambda を使いたい、画面の文言を自社の用語に変えたい、のいずれかに当てはまる時です。これらは Cognito の画面では実現できません。利用者が属性や MFA を変える画面だけが要るなら、アプリ側に追加してマネージドログインと併用できます。

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

ロゴは、マネージドログインならブランディングエディタでヘッダー・フッター・フォームのそれぞれに、クラシックなら100KBまでの画像を1つ設定できます。URL は、ユーザープールの「ドメイン」で独自ドメインを追加し、米国東部（バージニア北部、us-east-1）の ACM 証明書、親ドメインの有効なAレコード、Cognitoが指定する配信先へのDNSレコードを用意すれば自社ドメインにできます。

## 関連記事

- [Amazon Cognito（コグニート）とは？料金・できること・使い方をCLIとコード例で解説【2026年10月】](/tech/details/3108/)
- [Cognitoで認証基盤を実装する手順：ユーザープール作成からaws-jwt-verifyでのJWT検証まで](/tech/details/17445/)
- [Amplify×Cognito認証の実装手順：defineAuthと既存プールの参照](/tech/details/18508/)
- [Cognitoのパスキー実装手順：WebAuthnサインインの有効化とSDKでの登録・認証](/tech/details/18516/)
- [Cognito SAML連携の手順：Entra IDでSSOを組む設定と属性マッピング](/tech/details/18512/)

---

出典: [AWS Cognito Hosted UI（マネージドログイン）のカスタマイズ・日本語化と設定手順](<https://www.issoh.co.jp/tech/details/3441/>)（株式会社一創）