Clerk 第5話2026.10.17

【小学生でもわかる】英語のログイン画面を、自分の色と日本語に変える方法！できる所とできない所

自分のページにログイン画面を付けたのに、ボタンも見出しも英語のまま、色もサイトと合っていない。日本語の読者に出す前に、どこまで直せるのかを知りたい人へ。この記事では、HTML ファイル1枚のまま、ログイン画面の色と言葉を変える書き方と、コードでは変えられない所の線引きまでをまとめます。

無料（色と言葉を変えることは、料金ページの表に行が無く、有料のプランが要るという一文も見当たらない。「Secured by Clerk」を本番で消すことと、メールの文面を変えることは Hobby に含まれない）

Xで記事を読むシェア

どんな話？

HTML 1枚のまま、Clerk のログイン画面の色と言葉を変えた回です。色は Clerk.load() の appearance の variables で、colorPrimary の1行でボタンがティール色に。言葉は localization に自分で書いた表を渡し、5か所が日本語になりました。Account Portal は英語のまま、「Secured by Clerk」を本番で消すのは Pro からです。

この記事でわかること

色は Clerk.load() の appearance の variables。load に渡せば、ページの部品全部にまとめて効く。制作では colorPrimary の1行で、Continue のボタンが濃い灰色からティール色に変わった
CSS 変数 --clerk-color-primary を `<style>` に書くだけでも、colorPrimary を足したページと画面がまったく同じだった
HTML 1枚で使えるテーマは、初めの形と Simple だけ。Dark などほかの4つは npm で @clerk/ui を入れる前提
言葉は localization（試験中の機能）。既製の日本語一式 jaJP は npm が前提で、訳は利用者の持ち寄り。自分で書いた言葉の表の5か所が日本語になり、書かなかった所は英語のまま残った
Account Portal は英語のまま。管理画面の Customization のタブで変えられるのは色と明暗と影で、言語の設定は無かった
「Secured by Clerk」を消すのは管理画面のスイッチで、料金ページでは Pro（月25ドル。年払いなら月20ドル）から。メールの文面を変える Custom email templates も Hobby に含まれない

やることチェックリスト

0/5

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

第3話の index.html を複製して「index_color.html」を作る
「appearance」の「variables」に「colorPrimary」を書く
言葉の表「hondanaWords」を render の上に書く
「Clerk.load()」に「localization: hondanaWords」を足す
ページを開き、見出しが「本棚メモにログイン」、ボタンがティール色になったか確かめる

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

自分のページにログイン画面を付けたのに、ボタンも見出しも英語のままの人
ログイン画面の色を、自分のサイトの色に合わせたい人
日本語の読者に出す前に、どこまで直せて、どこがコードでは変えられないのかを知りたい人

この話のTIPS

コツlocalization の置き場所は、appearance の外。公式の説明書の本文には「appearance の中」と読める一文がありますが、同じページのコード例と、`Clerk.load()` の説明の表は、どちらも外に書いています。
注意Clerk から届く確認のメールは、ログイン画面の言葉とは別の仕組みです。画面を日本語にすればメールも日本語になる、という記載は説明書に見当たりませんでした。

すべてのTIPS