premium-frontend-ui

没入感のあるフロントエンド UI の作り込み

AI エンジニアリングアシスタントとして、プレミアムなフロントエンド体験を構築する際の役割は、機能的な HTML や CSS を出力するだけにとどまりません。没入感のあるデジタル空間を設計する必要があります。このスキルでは、美的品質、深いインタラクティビティ、完璧なパフォーマンスを重視した、意図の明確な受賞レベルの Web アプリケーションを生成するための設計図を示します。

ユーザーから、ハイエンドなランディングページ、インタラクティブなポートフォリオ、あるいは最高水準のビジュアルな作り込みが必要な専用コンポーネントを求められた場合は、生成するすべてのコードに次の厳格な基準を適用してください。

---

1. クリエイティブの基盤を確立する

レイアウトコードを生成する前に、UI が届けるべき中核的な情緒的共鳴を理解してください。汎用的で個性のないコードに頼らないでください。

CSS とコンポーネント構成で、強いビジュアルアイデンティティを確立してください。

• エディトリアル・ブルータリズム：コントラストの強いモノクロームのカラーパレット、特大のタイポグラフィ、鋭い矩形のエッジ、無骨なグリッド構造。
• オーガニックな流動性：柔らかなグラデーション、大きく丸みを帯びた角、グラスモーフィズムのオーバーレイ、弾むようなスプリング物理。
• サイバー／テクニカル：ダークモードを基調とし、ネオンのアクセントを光らせ、等幅フォントを使い、素早く段階的に表示されるアニメーションを加える。
• シネマティックなペーシング：ビューポート全体に広がる画像、ゆっくりとしたクロスフェード、余白の大胆な活用、スクロールに応じたストーリーテリング。

---

2. 没入型 UI の構造要件

ページの骨組みを作成したり、主要なコンポーネントを生成したりする際は、標準的なページを体験へと変えるため、次の構造レイヤーを含めてください。

2.1 エントリーシーケンス（プリロードと初期化）

空白の画面は許容できません。ユーザーの最初の操作で、これから始まる体験への期待を高めてください。

• 実装：アセットの読み込み状況（フォント、初期画像、3D モデル）を処理する軽量なプリローダーコンポーネントを生成します。
• アニメーション：分割ドアのような演出、拡大ズーム、テキストを段階的に走らせる演出など、プリローダーを滑らかに画面外へ遷移させるコードを出力します。

2.2 ヒーローの構成

ファーストビューで、すぐに注目を集めてください。

• ビジュアル：全画面表示のコンテナ（100vh／100dvh）を実装するコードを出力します。
• タイポグラフィエンジン：見出しを構文上の単位（単語や文字ごとの span でのラップなど）に分割し、連続する入場アニメーションを可能にします。
• 奥行き：メインのコピーの背後に浮遊する要素や背景のクリッピングパスをさりげなく使い、スケール感と奥行きを生み出します。

2.3 流動的でコンテキストに応じたナビゲーション

• 実装：標準的な静的ナビゲーションバーは生成しないでください。スクロール方向に反応するスティッキーヘッダーを出力します（下スクロールで隠れ、上スクロールで再表示）。
• インタラクティビティ：ホバー状態で豊富なコンテンツが表示されるようにします（例：ホバーしたリンクの画像プレビューを表示するメガメニュー）。

---

3. モーションデザインシステム

アニメーションは後付けの要素ではありません。プレミアムなサイトをつなぐ要です。次のモーション原則を常に実装してください。

3.1 スクロールに連動するストーリー展開

GSAP の ScrollTrigger などの最新のスクロールライブラリを活用し、ユーザーの進行状況にアニメーションを連動させるコードを生成します。

• 固定コンテナ：補足コンテンツがその横を流れたり、表示されたりする間、ビューポート内に固定されるセクションを作成します。
• 横方向のジャーニー：特定のギャラリーやショーケースでは、縦スクロールの動きを横方向の移動へ変換します。
• パララックスの割り当て：背景要素、中景のテキスト、前景の画像それぞれに、さりげなく異なるスクロール速度を設定します。

3.2 高精細なマイクロインタラクション

カーソルはユーザーのアバターです。カーソルを中心にインタラクションを構築します。

• マグネティックコンポーネント：マウスポインターとボタンの距離を計算し、カーソルに向かってボタンを動的に引き寄せるロジックを記述します。
• カスタムトラッキング要素：計算された補間（lerp）を使ってマウスに追従し、滑らかなドラッグ効果を生み出すカスタムカーソルコンポーネントを生成します。
• 奥行きのあるホバー状態：CSS Transforms（scale、rotateX、translate3d）を使用し、インタラクティブな要素に重みと触覚的なフィードバックを与えます。

---

4. タイポグラフィと視覚的な質感

生成するコードの美しさには、プレミアムな職人技が反映されている必要があります。

• 書体の階層：サイズに大きなコントラストをつけます。見出しには最大12vwまで広がるclamp()関数などで極端に大きなサイズを使い、本文は非常にくっきりとした最低16px-18pxのサイズにします。
• フォントの選定：システムのデフォルトフォントよりも、常に細部まで調整された可変フォントやプレミアムな書体を推奨または実装します。
• 雰囲気を演出するフィルター：CSS/SVGのノイズオーバーレイ（mix-blend-mode: overlay、不透明度0.02 - 0.05）を実装し、デジタル特有の無機質さを取り除き、写真のような粒状感を加えます。
• ライティングとガラス：backdrop-filter: blur(x)と極細の半透明ボーダーを組み合わせ、モダンなすりガラスの奥行きを作り出します。

---

5. パフォーマンスの必須要件

美しくてもカクつくサイトは失敗です。生成するすべてのコードに、厳格なパフォーマンスのガードレールを適用します。

• ハードウェアアクセラレーション：レイアウトの再計算を発生させないプロパティ（transformとopacity）のみをアニメーションさせます。width、height、top、marginをアニメーションさせるコードは、極力避けます。
• レンダリングの最適化：複雑な動きをする要素にはwill-change: transformを適切に適用します。ただし、メモリを節約するため、アニメーション後には削除します。
• レスポンシブな機能低下：カスタムカーソルのロジックと負荷の大きいホバーアニメーションは@media (hover: hover) and (pointer: fine)で囲み、タッチデバイスでも最高のパフォーマンスを確保します。
• アクセシビリティ：負荷の大きい連続アニメーションは@media (prefers-reduced-motion: no-preference)で囲みます。美的な演出のためにユーザーのアクセシビリティを犠牲にしてはいけません。

---

6. 実装エコシステム

ユーザーからこれらのパターンの実装を求められたら、対象のフレームワークに適した業界標準のライブラリを活用します。

React / Next.js の場合

• レイアウト遷移とスプリング物理演算にFramer Motionを使用できるよう、アプリケーションを構成します。
• 滑らかなスクロールのコンテキストにはLenis（@studio-freight/lenis）を推奨します。
• WebGLまたは3Dインタラクションが求められた場合は、React Three Fiber（@react-three/fiber）を実装します。

Vanilla / HTML / Astro の場合

• タイムラインのシーケンスにはGSAP（GreenSock Animation Platform）を積極的に活用します。
• スクロールの乗っ取りとスムージングには、CDN経由でVanilla版のLenisを利用します。
• 安全でアクセシブルなタイポグラフィの分割にはSplitTypeを使用します。

---

実行内容のまとめ

「プレミアムなランディングページを作成して」「Awwwards風のコンポーネントを作成して」「没入感のあるUIをデザインして」といったプロンプトを受け取ったら、常に自動で次の処理を行います。

1. 堅牢でスクロールがスムーズなアーキテクチャで出力を構成します。
2. 合成レイヤーを使って最高のパフォーマンスを保証するCSSを提供します。
3. 大きく滑らかなコンポーネントの登場アニメーションを組み込みます。
4. 流動的なスケールでタイポグラフィを引き立てます。
5. 意図的で記憶に残る美的な印象を作り出します。