Glassmorphism ランディングスキル は何をしますか？
Glassmorphism スタイルのランディングページを、Tailwind ユーティリティクラスを使用して単一ファイルで作成します。デザイン全体は次の1つのルールに基づいています。ぼかし（blur）は、背後に何か色がある場合にのみ視覚的に成立する — そのため、すべてのガラスパネルは平坦な白ではなく、グラデーションフィールド上に浮かぶように配置されます。
ガラスのレシピ
すべての面に適用される、共有のパネルレシピ:
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
レイヤリングのルール:
- ページの背景は鮮やかなグラデーション（2色または3色）です。パネルのみがその上に配置される唯一の半透明レイヤーです。
- 1つのアクセントカラーがグラデーションと主要なアクションを統一します。それ以外はニュートラルに保ちます。
- ガラス上のテキストは、見出しでは白で不透明度90〜100%、本文では60〜70%にします。明るいガラスパネル上にコントラストの低いグレーを配置しないでください。
- すべてのパネルに1pxの
border-white/20のエッジを追加します。これにより、ガラスがぼやけた長方形ではなく、物理的なシートとして認識されます。 - 角は大きめに丸くします（
rounded-2xl/rounded-3xl）。ガラスは柔らかく、鋭くない印象を与えます。
カラーバリエーション
以下の4つのバリエーションを選択可能なセットとして提供します。サンプルでは、グラデーションフィールドとアクセントを動的に切り替えるテーマチップの行として表示されます。
| バリエーション | グラデーションフィールド | アクセント |
|---|---|---|
| aurora | 紫 → ピンク → 琥珀 | #7C3AED |
| ocean | 空色 → シアン → 藍色 | #0EA5E9 |
| ember | バラ色 → オレンジ → 黄色 | #F43F5E |
| forest | エメラルド → ティール → ライム | #10B981 |
ワークフロー
- アクティブな DESIGN.md を読み込む（上記で注入済み）。そこで定義されているカラーとタイポグラフィのトークンをテキストと主要なアクションに使用します。ガラスのレシピとグラデーションは、このスタイル独自の貢献です。
- ブリーフから製品名と約束（プロミス）を命名する。実際のコピーのみを使用します。
- レイアウトする: 粘着性のあるガラスナビゲーション、グラデーション上の H1 + 1段落 + CTA からなるヒーロー、テーマバリエーションの行、3列のガラス特徴カードグリッド、1つのガラス testimonial パネル、そして最後の CTA。
- 品質を維持する: H1は1つだけ。プライマリ CTA にはアクセントカラーを使用。ガラス上の本文テキストはコントラスト比 4.5:1 以上を維持。半透明の面上でもフォーカスリングが視認可能。レイアウトは768px未満で1列に折りたたむ。
- 自己完結型の
index.htmlを1つ出力する。 プロトタイプでは Play CDN を介して Tailwind を読み込みます。本番出力では代わりに Tailwind をコンパイルする必要があります。
アンチパターン
- 平坦でほぼ白の背景の上にガラスパネルを配置する（ぼかしが消えてしまう）。
- 画面上に同時に3つ以上のアクセントカラーを使用する。
- テキストにぼかしをかけたり、コントラストが失われるまでガラスを重ねたりする。
- 角が鋭い四角形の曇りガラスパネル。