React のリキッドガラス・ログイン：3つの作り方とコピーできる画面

まとめ： リキッドガラスのログインは、写真の上に厚いツヤのあるガラス板を置いたようなサインインカードです。React では3通り作れます。Tailwind の backdrop-blur でそれっぽくする（無料。調整に1〜2時間）、WebGL ライブラリで本当の屈折を描く（いちばん本物に近く、いちばん重い）、完成した画面をコピーする。DesignLayer のリキッドガラス・ログインは、ユーザー名、パスワード、ログイン状態の保持、Google と Apple のボタンまで入った、画面いっぱいの React + TypeScript + Tailwind のログインです。Cursor や Claude Code に貼れます。コピーは1日3回まで無料で、Plus は月額 $9 で無制限です。

見た目は簡単なのに、なぜログイン画面に時間がかかるのか

画面にあるものはほとんどありません。写真、カード、入力欄2つ、ボタン。それが落とし穴です。要素が少ないほど、細部が目立ちます。

ガラスが灰色の箱に見える。 ぼかし、色味、枠線が少しずれるだけでそうなります。
文字が消える。 カードが写真の明るい部分に重なると読めません。
縁が平面に見える。 本物の「リキッド」ガラスには明るい縁と厚みがあります。backdrop-blur を1つ付けただけでは出ません。
地味な部分も効く。 ラベル、autocomplete、ログイン状態の保持、ソーシャルボタンの順番、スマホでの収まり。

昼前に終わると思っていたログイン画面が、午後も開いたまま、ということになります。

AI に「リキッドガラス」と頼んだら、曇ったプラスチックが返ってきた

Cursor や Claude Code に「ログイン画面をリキッドガラスにして」と打ちます。返ってくるのは、ぼかすものが何もない平坦な背景の上に、bg-white/10 backdrop-blur-md を付けたカードです。技術的にはガラスです。欲しかったスクリーンショットには見えません。

直すのは、プロンプトの形容詞ではありません。写真、色味、縁、フォームの配置がすでに決まっている画面から始めて、文言と写真だけ変えることです。

リキッドガラスのログインとは何か

「Liquid Glass」は、Apple がネイティブアプリの UI 用に付けた素材の名前です。Web にはそれを再現する公式 API がないので、Web の「リキッドガラス」ログインは、次の材料で作った模写です。

ガラスが曲げ、ぼかすための 背景写真かグラデーション
背後を強くぼかした 半透明のカード
厚いガラスに光が当たって見える 明るく細い縁（内側のハイライトであることが多い）
大きい角丸 と、丸 pill 型のボタン
任意で 本当の屈折。カードの縁で背景が曲がって見えます。これには WebGL、canvas、SVG フィルタが必要で、CSS のぼかしだけでは足りません。

CSS の細かい指定は、Next.js のグラスモーフィズム解説にクラス、Safari の対策、コントラストをまとめてあります。

React でリキッドガラスのログインを作る3つの方法

	1. Tailwind の `backdrop-blur` を自分で組む	2. WebGL の屈折ライブラリ	3. 完成した画面をコピーする
手に入るもの	自分で整えるすりガラスのカード	縁で背景が本当に曲がる	写真、ガラスカード、フォーム、ソーシャルボタンまで入ったログイン画面
本物らしさ	調整すれば良い。本当の屈折はない	いちばん高い	ガラスの見た目は調整済み
追加の依存	なし	WebGL か canvas のライブラリ	リキッドガラス・ログインの場合：React、TypeScript、Tailwind CSS、lucide-react
性能のリスク	小さいカード1枚なら低い。ぼかす範囲が広がると増える	高い（毎フレーム GPU）。スマホで確認する	CSS の `backdrop-filter` と SVG フィルタ（WebGL ではない）。ガラスはカード1枚に留める
フォームの細部（ラベル、autocomplete、ソーシャルボタン）	自分で書く	自分で書く	並びは済んでいる。認証をつなぐ
向いているとき	CSS の調整が好きで、時間がある	ガラスそのものが製品の看板	画面は今日中に終えて、時間は認証に使いたい
費用	無料	無料（各ライブラリのライセンスを確認）	1日3回まで無料。Plus は月額 $9 で無制限

方法1：Tailwind と `backdrop-blur` で作る

定番は、半透明の塗り、ぼかし、細い明るい枠（bg-white/10 backdrop-blur-md border border-white/20）に、大きめの角丸と、上側の内側ハイライトを足してリキッド寄りにすることです。白い文字が読めるよう、写真には暗いオーバーレイを載せます。

動きます。費用はかかりません。時間は調整に消えます。写真に対するぼかしの強さ、色味、コントラスト、backdrop-filter がないブラウザ向けの代替、そしてフォーム本体です。フォームの手順（ラベル、autocomplete="username" / current-password、パスワード表示の切り替え、エラーメッセージ、ソーシャルボタン）は Next.js ログイン画面の作り方にコード付きであります。

方法2：WebGL の屈折ライブラリを使う

カードの縁で背景を実際に 曲げたい なら、CSS のぼかしより先の描画が要ります。公開されている例として、Simple Liquid Glass のログイン例があり、屈折は WebGL ベースだと説明されています。

見た目はいちばん説得力があります。依存が1つ増え、毎フレーム GPU を使い、ブラウザとスマホの確認も増えます。ガラスだけが解決し、フォーム全体はまだ自分で作ります。選ぶのは、ガラス効果がブランドの本体であるときです。

方法3：完成したリキッドガラスのログインをコピーする

ログイン画面が手段で、製品はアプリ本体なら、いちばん速いのは完成した画面から始めて文言と写真を変えることです。DesignLayer のリキッドガラス・ログインはそのための画面です。

無料で試す： リキッドガラス・ログインのプレビューを開き、Copy for Cursor を押します。無料アカウントは1日3回コピーできます。今日もっと画面を作るなら、Plus（月額 $9）でコピー無制限です。

DesignLayer のリキッドガラス・ログインに入っているもの

コンポーネントページの内容は次のとおりです。

レイアウト： 画面いっぱいの、自然の風景のログイン。風景写真の上にリキッドガラスのカードがあります。写真はガラス越しに見えます。半透明の白いオーバーレイ、CSS の backdrop-filter によるぼかし、SVG の変位フィルタです。WebGL ではありません。
フォーム： ユーザー名、表示を切り替えられるパスワード、ログイン状態の保持、緑のログインボタン。
ソーシャルログイン： フォームの下に Google と Apple のボタン、その下に新規登録リンク。
動き： 登場アニメーションはありません。ログインボタンはホバーで明るくなり、押すと少し縮みます。Google と Apple のボタンはホバーで色が付きます。CSS トランジションだけで、アニメーションライブラリはありません。
構成： React、TypeScript、Tailwind CSS と Lucide のアイコンで組んであります。記載の依存は React 19.0.0、TypeScript 5.7.2、Tailwind CSS 3.4.16、lucide-react 1.23.0 です。
対応画面： スマホ、タブレット、デスクトップ。
エージェント向け： コピーは Cursor や Claude に貼り、プロジェクトへ入れてもらう想定です。

入っていないのは認証です。これは画面です。フォームは、ほかのログインフォームと同じように、使っている認証（Auth.js、Supabase、Clerk、自前の API）へつなぎます。

Cursor や Claude Code で Next.js に入れる手順

コピーする。 リキッドガラス・ログインのページで Copy for Cursor を押します。
短い指示と一緒にエージェントへ貼る。 例：

text

この Liquid Glass Login コンポーネントを、Next.js の App Router プロジェクトの app/login/page.tsx に追加してください。
- ガラスカードのスタイルはそのまま残す。
- 背景写真を /public/login-bg.jpg（こちらで追加済み）に差し替え、文字が読めるよう暗いオーバーレイは残す。
- ブランド名を「Acme」、ボタンのラベルを「ログイン」に変える。
- フォームを lib/auth.ts の既存の signIn() につなぐ。autocomplete="username" と "current-password" は残す。
- Google と Apple のボタンは残し、こちらの OAuth プロバイダにつなぐ。Apple を用意していなければ Apple は外す。
- コンポーネントがすでに使っているもの以外の依存は追加しない。

写真を差し替えてから、認証をつなぐ

写真と文言を差し替える。 カードの後ろが落ち着いた背景を選びます。細かく明るい写真は、文字を読みにくくします。

認証をつなぎ、公開前にスマホと Safari で確認する。

コンポーネントをエージェントへ貼ることが多いなら、React コンポーネントの渡し方と指示文の型に、再利用できる指示の型があります。

ガラスのログインを公開する前に確認すること

コントラスト： 本文は、背後に対して少なくとも 4.5:1（WCAG AA）を目指します。デモ写真ではなく、本番の写真で確認します。
代替表示： backdrop-filter に対応していないブラウザでも、ほぼ不透明で読めるカードにしておきます。
自動入力： 本物のラベル（表示するか、スクリーンリーダー用だけにするか）と、正しい autocomplete を残し、パスワードマネージャが動くようにします。
ソーシャルボタンのブランド： Google と Apple は、サインインボタンとロゴのガイドラインを出しています。公開時はそれに従います。
自分の素材： 見本の写真や見本のロゴは、権利のあるものに差し替えます。DesignLayer の利用条件では、コピーしたコードを改変して公開でき、クライアントのサイトも含みます。公開したページが他者の権利を侵害しないかは、公開する側で確認します。
性能： ガラスはカード1枚に留めます。広い範囲やたくさんの要素をぼかすと、スマホで重くなります。

ログインのあとの画面を、ガラスのログインに合わせる

ガラスのログインは雰囲気を決めます。サインイン直後の画面も、それに揃えます。次の DesignLayer コンポーネントは、見た目を共有するか、組み合わせやすいものです。

コンポーネント	内容	合う場所
ガラスサイドバーナビ	暗い抽象的な壁紙の上の、縦長のすりガラスのサイドバー。macOS 風の信号ボタン、ブランド名、MENU と補助の行、アカウントのフッター	ログイン後に着地するダッシュボード
グラスオーブヒーロー	黒地に、粒子の虹色ガラスオーブがある全画面ヒーロー（three.js / react-three-fiber）	登録へ送るマーケティングページ
マグネティック CTA ボタン	矢印バッジ付きの pill 型 CTA	そのマーケティングページの「登録」や「無料ではじめる」
センタープラス・タブバー	浮いた白い pill 型のタブバー。円がアクティブなタブへ移動する	アプリのモバイル表示（ガラスではないが、同じ柔らかい pill 型の言語）

ログイン、ダッシュボードの外枠、ヒーローで、すでに4回コピーです。無料の1日の上限より1回多い数です。Plus が元を取り始めるのは、このあたりです。

これらのコンポーネントをコピーする費用

design-layer.com/ja/pricing の内容です。

	無料	Plus
価格	$0	月額 $9（USD）
コンポーネントの閲覧とプレビュー	無制限	無制限
コンポーネントのソースのコピー	1日3回（日本時間 0:00 / UTC 15:00 にリセット）	無制限
動画プロンプトのコピー	1日1回	無制限
Cursor / Claude Code 用の MCP	—	含む
請求	カード不要	月額の自動更新。アカウントからいつでも解約

決済は Stripe です。

今日、リキッドガラスのログインを公開する

リキッドガラス・ログインを プレビュー してコピーする（無料、1日3回）。
上の指示と一緒に Cursor か Claude Code へ貼り、写真と文言を差し替え、認証をつなぐ。
ガラスサイドバーナビと上のコンポーネントで、同じ雰囲気の続きを作る。今日3回を超えるなら、Plus（月額 $9）を始める。終わったらいつでも解約できます。

よくある質問

サインインのカードが、背景写真の上の厚いツヤのあるガラスに見えるログイン画面です。半透明で強くぼかしたカードに、明るい縁と大きい角丸があります。名前は Apple のネイティブアプリ向け素材 Liquid Glass から来ています。Web では CSS のぼかしで模すか、本当の屈折には WebGL を使います。