premium_web_design

プレミアムなウェブデザインの原則

このスキルでは、「すごい」と思わせる、プレミアムなウェブアプリケーションを作成するために必要な主要な要素を紹介します。

1. タイポグラフィ

• フォントの選択：モダンで幾何学的なサンセリフ体（例：Inter、Outfit、Manrope）や、見出しに上品なセリフ体を使用します。意図的にスタイリングする場合を除き、デフォルトのシステムフォントは避けてください。
• 階層：明確なサイズの階層（h1 と p の違いなど）を設けます。サイズに大きな差をつけて、巨大な見出しと小さく洗練されたラベルを使い分けます。
• 間隔：行間はゆったりと取ります（本文は 1.5～1.7）。大きな見出しには tracking-tight を使い、引き締まった印象にします。

2. 色と奥行き

• カラーパレット：厳選したカラーパレットを使用します。背景に純粋な黒（#000000）や純粋な白（#FFFFFF）は避け、オフブラック（#0a0a0a）や柔らかなクリーム色（#fafafa）を使います。
• グラデーション：単調な線形グラデーションではなく、ノイズテクスチャを加えた控えめなグラデーションを使用します。
• グラスモーフィズム：オーバーレイやナビゲーションバーには backdrop-filter blur を使用します。

  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  

3. モーションとインタラクション（Framer Motion）

• マイクロインタラクション：ボタンはホバー時に拡大するか、光るようにします。
• ページ遷移：ルート間を滑らかにフェードまたはスライドさせます。
• スクロールアニメーション：要素がビューポートに入ると、フェードアップまたは表示されるようにします。

  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6 }}
  >
  

4. レイアウトとリズム

• グリッド：厳密なグリッドシステムに沿いつつ、意図的に崩して変化をつけます。
• 余白：余白（padding/margin）を大胆に使います。「プレミアム」とは、ゆったりとした空間があることです。
• ベントーグリッド：機能を紹介する際は、ボックス型のカードベースのレイアウトを使います。

5. 画像

• 品質：高解像度で最適化された画像（WebP）を使用します。
• スタイリング：モダンな印象にするため、角を丸くします（例：rounded-2xl や rounded-3xl）。
• パララックス：背景画像に控えめなスクロールパララックスを加えると、奥行きが生まれます。