elevated-design

Name: elevated-design
Author: nitinm21

github.com/nitinm21デザイン・UI080 回インストール44 週間前に更新

リポジトリ

elevated-design について

elevated-design は、Apple のデザイン言語に着想を得たウェブインターフェース設計スキルです。タイポグラフィ、余白、グリッド、配色、インタラクションを案内し、マーケティングページや SaaS 画面などに対応します。

主な機能

01余白と 8px グリッドによるレイアウト
02文字サイズと階層の設計指針
03中間色を基調とした配色
04非対称グリッドとレスポンシブな間隔
05ボタン・カード・ホバー操作の設計
06動きを抑える設定とアクセシビリティの指針

活用シーン

01プレミアムな製品ランディングページの設計
02企業サイトや製品紹介ページの制作
03洗練された SaaS 機能ページの構築
04画面へのアクセシビリティと動きを抑える対応の追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nitinm21/youtube_summarizer --skill elevated-design

インストール後、Claude Code で/elevated-designを入力して読み込まれたか確認します。

詳細

洗練されたデザインシステム

Appleのコーポレートデザイン言語に着想を得た、高度なデザイン哲学です。各分野の第一線で活躍する専門家が手がけたように感じられるウェブインターフェースを生み出します。ミニマルな精密さと心に響く表現を融合し、標準的なウェブコンポーネントを、注目を集めて信頼感を与える、洗練されたギャラリーのような体験へと変えます。

このスキルを使う場面

次のような依頼を受けたときに、このスキルを有効にしてください。

プレミアムなランディングページやヒーローセクション
権威ある印象を与える企業向けマーケティングサイト
洗練された美しさを備えた製品紹介
エディトリアルでありながらプロフェッショナルな印象の機能紹介セクション
品質、精密さ、信頼感を想起させるインターフェース
Apple風のミニマルなコーポレートデザイン
ハイエンドなSaaS製品ページ
信頼感を与える必要があるブランド体験

トリガーフレーズ：

「もっと洗練された印象にしてください」
「Apple風のデザインを作成してください」
「高級感のあるデザインにしてください」
「高級テックブランドのような印象にしてください」
「洗練されたApple風のデザインアプローチを使ってください」

デザイン哲学

洗練されたデザインの柱（Appleに着想）

戦略的なツールとしてのゆとりある余白
- 余白は空っぽではなく、意図的で、伝える力があり、自信に満ちています
- 大きなマージンとパディングで、呼吸する余地と階層構造を生み出します
- 要素を空間に浮かべ、それぞれの存在感を際立たせます
- 余白が意図的なリズムで視線を導きます
- Appleの原則： 少ないほど、飛躍的に豊かになります
極めて精密なタイポグラフィ
- 優れた読みやすさを備えた、San Franciscoに着想を得たシステムフォント
- 洗練された印象をもたらす、ライトからレギュラーのウェイト（300～400）
- 大胆なサイズのコントラスト（見出しは72px、小見出しは48px）
- 見出しは詰めた字間（-0.02em）、本文は視覚的に調整した字間
- 控えめなグレーのテキストカラー（#000000は使わず、常に#1d1d1fなどを使用）
- Appleの原則： タイポグラフィはインターフェースです
グリッドに基づく非対称性
- 意図的な区切りを取り入れた、Appleの12カラムグリッド
- 視覚的な緊張感を生むため、7対5または8対4の分割を使用します
- サイズに変化をつけます。大きなヒーロー画像と、コンパクトな補足コンテンツを組み合わせます
- 完璧な整列で非対称性のバランスを取ります
- 自由さと精密さを兼ね備えた構成を作ります
- Appleの原則： 制御されたカオスが洗練を生みます
抑制の効いたカラーパレット
- ほぼモノクロームを基調に、厳選したアクセントカラーを使います
- ニュートラルな基盤：ホワイト、オフホワイト（#f5f5f7）、クールグレー（#1d1d1f）
- ブランドのアクセントカラーはCTAのみに使用します（デザイン全体の1～2％）
- グラデーションは控えめに、目的を持って使います
- 色はUIではなく、写真や製品画像で加えます
- Appleの原則： 色は装飾ではなく、ツールです
意図のあるインタラクション
- 意外性ではなく、自然さを感じさせるマイクロインタラクション
- 滑らかな400～600msのトランジション（時間が長いほど高級感が増します）
- 色ではなく、重みが変化するホバー状態
- 慣性を感じさせる、スクロールをきっかけとした表示
- タッチ領域は十分な大きさにします（最小44x44px）
- Appleの原則： 意味のあるモーション
細部への徹底的なこだわり
- 可能な限りサブピクセル単位で整列させます
- 8pxのベースライングリッドを一貫して使用します
- 数値だけでなく、視覚的に調整したタイポグラフィ
- レイヤーによるグラスモーフィズムと奥行き
- アイコンとテキストを完璧に整列させます

タイポグラフィ（Appleのシステム）

フォントスタック（San Franciscoに着想）：

/* Tailwind Default (closest to SF Pro) */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

フォントウェイト：

font-light     → 300  /* Body copy, descriptions - Apple's go-to */
font-normal    → 400  /* Standard text, balanced */
font-medium    → 500  /* Subtle emphasis, nav items */
font-semibold  → 600  /* Headlines, but use sparingly */
font-bold      → 700  /* Avoid - too heavy for elevated design */

文字サイズのスケール（Appleに着想を得た大胆な階層構造）：

text-xs    → 12px   /* Fine print, footnotes, legal */
text-sm    → 14px   /* Supporting text, captions */
text-base  → 16px   /* Body text (Apple's minimum) */
text-lg    → 18px   /* Large body, comfortable reading */
text-xl    → 20px   /* Small headings, emphasized text */
text-2xl   → 24px   /* Card titles, section labels */
text-3xl   → 30px   /* Subsection headings */
text-4xl   → 36px   /* Page titles */
text-5xl   → 48px   /* Hero headlines */
text-6xl   → 60px   /* Large hero text */
text-7xl   → 72px   /* Statement headlines (Apple events) */
text-8xl   → 96px   /* Ultra-dramatic (use with extreme restraint) */
text-9xl   → 128px  /* iPhone reveal style (hero images only) */

字間（視覚的な精密さ）：

tracking-tighter  → -0.05em   /* Massive headlines (text-8xl+) */
tracking-tight    → -0.025em  /* Large headlines (text-5xl+) */
tracking-normal   → 0em       /* Body text, natural spacing */
tracking-wide     → 0.025em   /* Small text for legibility */
tracking-wider    → 0.05em    /* Uppercase labels */
tracking-widest   → 0.1em     /* Micro labels (11px uppercase) */

行の高さ（Appleの標準）：

leading-none      → 1       /* Massive display type only */
leading-tight     → 1.1     /* Large headlines (text-5xl+) */
leading-snug      → 1.2     /* Headlines (text-2xl to text-4xl) */
leading-normal    → 1.5     /* Body text - Apple's preferred */
leading-relaxed   → 1.625   /* Long-form reading */
```html
text-xs    → 12px   /* Metadata, copyright */
text-sm    → 14px   /* Small body text */
text-base  → 16px   /* Standard body */
text-lg    → 18px   /* Large body */
text-xl    → 20px   /* Small headings */
text-2xl   → 24px   /* Card titles */
text-3xl   → 30px   /* Section headings */
text-4xl   → 36px   /* Page titles */
text-5xl   → 48px   /* Hero headlines */
text-6xl   → 60px   /* Large hero text */

字間：

tracking-tight    → -0.025em  /* Large headlines */
tracking-normal   → 0em       /* Body text */
tracking-wide     → 0.025em   /* Small labels */
tracking-wider    → 0.05em    /* Uppercase labels */
tracking-widest   → 0.1em     /* Ultra-wide labels */

カラーの哲学

洗練されたニュートラルカラー：


text-slate-900  → #0f172a  /* Primary text */
text-slate-600  → #475569  /* Secondary text */
text-slate-500  → #64748b  /* Tertiary text */
text-slate-400  → #94a3b8  /* Subtle text, labels */

### Spacing System (Apple's 8px Grid)

**The 8px Baseline (Apple's Standard):**
Every measurement should be divisible by 8px for perfect rhythm.

**Component Spacing:**
```html
p-4   → 16px   /* Compact elements (badges, pills) */
p-6   → 24px   /* Small cards, tight content */
p-8   → 32px   /* Standard card padding (minimum) */
p-10  → 40px   /* Comfortable card padding */
p-12  → 48px   /* Large cards, feature sections */
p-16  → 64px   /* Extra-large padding, hero sections */
p-20  → 80px   /* Apple event-style spacing */
p-24  → 96px   /* Statement sections */

セクション間隔（Appleのようにゆとりを持たせる）：

py-12  → 48px   /* Compact sections */
py-16  → 64px   /* Standard sections */
py-20  → 80px   /* Comfortable sections */
py-24  → 96px   /* Large sections */
py-32  → 128px  /* Hero sections, dramatic reveals */
py-40  → 160px  /* Apple event-style spacing */
py-48  → 192px  /* Ultra-premium sections */

間隔とマージン（8px単位）：

gap-4   → 16px   /* Tight groups */
gap-6   → 24px   /* Related elements */
gap-8   → 32px   /* Standard separation */
gap-12  → 48px   /* Section boundaries */
gap-16  → 64px   /* Large separation */
gap-20  → 80px   /* Dramatic separation */
gap-24  → 96px   /* Hero to content transition */

mb-4   → 16px    /* Paragraph spacing */
mb-6   → 24px    /* Subsection spacing */
mb-8   → 32px    /* Element separation */
mb-12  → 48px    /* Section separation */
mb-16  → 64px    /* Large separation */
mb-20  → 80px    /* Dramatic separation */
mb-24  → 96px    /* Hero to section */

レイアウトコンテナ（Appleのアプローチ）：

max-w-screen-2xl → 1536px  /* Ultra-wide (product grids) */
max-w-7xl        → 1280px  /* Wide layouts (Apple default) */
max-w-6xl        → 1152px  /* Standard editorial */
max-w-5xl        → 1024px  /* Narrow, focused content */
max-w-4xl        → 896px   /* Article-style layouts */
max-w-3xl        → 768px   /* Long-form reading */
max-w-2xl        → 672px   /* Comfortable reading width */

レスポンシブパディング（Appleのブレークポイント戦略）：

px-6 sm:px-8 lg:px-12     /* Standard responsive padding */
px-8 sm:px-12 lg:px-20    /* Generous responsive padding */
py-12 sm:py-16 lg:py-24   /* Section responsive padding */
py-16 sm:py-24 lg:py-32   /* Hero responsive padding */
```2  → 48px   /* Extra large padding */
p-16  → 64px   /* Section padding */


py-16  → 64px   /* Minimum section */
py-24  → 96px   /* Standard section */
py-32  → 128px  /* Large section */


mb-8   → 32px   /* Element separation */
mb-12  → 48px   /* Section separation */
mb-16  → 64px   /* Large separation */
mb-24  → 96px   /* Dramatic separation */

レイアウトコンテナ：

max-w-7xl  → 1280px  /* Wide layouts */
max-w-6xl  → 1152px  /* Standard */
max-w-5xl  → 1024px  /* Narrow, focused */

角丸（大きめ）

rounded-xl   → 12px   /* Minimum for cards */
rounded-2xl  → 16px   /* Standard cards */
rounded-3xl  → 24px   /* Large images */

Apple に着想を得たボタンシステム

プライマリー CTA（Apple Blue）：

<a href="#" class="inline-flex items-center justify-center gap-2 px-5 py-3 bg-[#0071e3] text-white text-[15px] font-normal rounded-xl hover:bg-[#0077ED] transition-all duration-400">
  <span>Buy now</span>
</a>

セカンダリーボタン（アウトライン）：

<button class="inline-flex items-center justify-center gap-2 px-5 py-3 border-2 border-[#0071e3] text-[#0071e3] text-[15px] font-normal rounded-xl hover:bg-[#0071e3]/5 transition-all duration-400">
  <span>Learn more</span>
</button>

ターシャリーのテキストリンク（Apple スタイル）：

<a href="#" class="inline-flex items-center gap-1.5 text-[#0071e3] text-[15px] font-normal hover:underline">
  <span>Learn more</span>
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
  </svg>
</a>

大型 CTA（ヒーローセクション）：

<a href="#" class="inline-flex items-center justify-center gap-2 px-7 py-4 bg-[#0071e3] text-white text-base font-normal rounded-xl hover:bg-[#0077ED] transition-all duration-400 shadow-lg hover:shadow-xl">
  <span>Get started</span>
</a>

デザインルール：

パディング：標準は px-5 py-3、大型は px-7 py-4
角丸：rounded-xl（12px）
フォントサイズ：15px（Apple が推奨するボタンサイズ）
トランジション：上質な印象を演出する duration-400
ホバー：色をさりげなく変化させ、劇的な変形は避けます

コンポーネントのパターン

フィーチャーカード（エレベーテッドスタイル）

非対称の大型カード：

<div class="col-span-12 lg:col-span-7 group">
  <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-10 hover:bg-white hover:border-slate-200 transition-all duration-300">
    
    
    <div class="mb-8">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl border border-blue-200 bg-blue-50">
        <i class="ri-icon-name text-3xl text-[#1b75bc]"></i>
      </div>
    </div>
    
    
    <h3 class="text-2xl font-light text-slate-900 mb-4 tracking-tight">
      Feature Title
    </h3>
    
    <p class="text-base text-slate-500 leading-relaxed mb-8 max-w-xl">
      Description with refined tone and generous spacing.
    </p>
    
    
    <div class="space-y-3 pt-6 border-t border-slate-200">
      <div class="flex items-center gap-3 text-sm text-slate-600">
        <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
        <span class="font-light">Feature item</span>
      </div>
    </div>
  </div>
</div>

非対称のコンパクトカード：

<div class="col-span-12 lg:col-span-5 group">
  <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-8 hover:bg-white hover:border-slate-200 transition-all duration-300">
    
    <div class="mb-6">
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl border border-purple-200 bg-purple-50">
        <i class="ri-icon-name text-2xl text-purple-600"></i>
      </div>
    </div>
    
    <h3 class="text-xl font-light text-slate-900 mb-3 tracking-tight">
      Feature Title
    </h3>
    
    <p class="text-sm text-slate-500 leading-relaxed mb-6">
      Refined description.
    </p>
    
    <div class="space-y-2.5 pt-4 border-t border-slate-200">
      <div class="flex items-center gap-2.5 text-xs text-slate-600">
        <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
        <span class="font-light">Feature item</span>
      </div>
    </div>
  </div>
</div>

セクションヘッダー（エレベーテッド）

大文字ラベルを使ったミニマルなスタイル：

<div class="mb-24">
  <p class="text-[11px] font-medium tracking-[0.2em] text-slate-400 uppercase mb-6">
    Section Label
  </p>
  <h2 class="text-5xl sm:text-6xl font-light text-slate-900 tracking-tight leading-[1.1] max-w-3xl">
    Primary headline with dramatic scale.
    <span class="text-slate-400">Optional subtle accent.</span>
  </h2>
</div>

説明付き：

<div class="mb-20">
  <p class="text-xs font-medium tracking-wider text-slate-400 uppercase mb-4">
    Features
  </p>
  <h2 class="text-4xl sm:text-5xl font-light text-slate-900 tracking-tight leading-tight mb-6">
    Everything your garage needs.
    <br/>
    <span class="text-slate-400">Nothing it doesn't.</span>
  </h2>
  <p class="text-lg text-slate-500 max-w-2xl">
    Refined description with generous spacing and thoughtful typography.
  </p>
</div>

非対称グリッドレイアウト

7-5 分割パターン：

<div class="grid grid-cols-12 gap-8">
  
  <div class="col-span-12 lg:col-span-7">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-5">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-5">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-7">
    
  </div>
</div>

背景要素（控えめ）

レイヤー化された背景：

<section class="relative py-32 bg-white overflow-hidden">
  
  <div class="absolute inset-0 opacity-[0.03]">
    <div class="absolute top-20 left-10 w-96 h-96 rounded-full bg-[#1b75bc]"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-slate-900"></div>
  </div>
  
  <div class="relative">
    
  </div>
</section>

締めくくりの要素（洗練されたスタイル）

控えめな区切り線：

<div class="mt-24 text-center">
  <div class="inline-flex items-center gap-2 text-xs text-slate-400 tracking-wider">
    <div class="w-12 h-px bg-slate-200"></div>
    <span class="uppercase">Crafted for excellence</span>
    <div class="w-12 h-px bg-slate-200"></div>
  </div>
</div>

デザインルール（Apple 版）

推奨事項 ✓

ゆとりのある間隔を使う - 8px グリッドを徹底して守ります
軽いフォントウェイトを活用する - ほぼすべてに font-light（300）を使います
意図的に非対称にする - 7-5 分割や交互に変えるスケールを使います
色は厳選して使う - ほぼモノクロに、アクセントカラーを1色だけ加えます
大胆な文字サイズのスケールを使う - ヒーローには text-7xl、本文は最低でも text-base を使います
箇条書きは最小限にする - 1px のドット（w-1 h-1）か、控えめなチェックマークを使います
洗練された境界線を使う - Apple の #d2d2d7 または border-slate-200 を使います
ゆっくり滑らかなトランジションにする - duration-400 から duration-600 を使います
グラスモーフィズムを取り入れる - 奥行きを出すために opacity と backdrop-blur を使います
視覚的に正確に配置する - 数学的な配置だけでなく、見た目のバランスも整えます
タッチ領域に十分な広さを持たせる - すべてのインタラクティブ要素を最低 44x44px にします
エディトリアル写真を使う - 高解像度でプロ品質の写真をゆったりと配置します
自然なシャドウを使う - 上からの光を模した、控えめで方向性のある影にします

避けること ✗

間隔を詰めすぎない - 8px グリッドを決して崩しません
太いフォントを使わない - font-bold（700 以上）は決して使いません
硬直した対称性を避ける - 6-6、4-4-4、3-3-3-3 のグリッドは避けます
色を乱用しない - ニュートラルカラーとアクセントカラー1色だけにします
小さな文字を使わない - 本文の文字サイズは16px未満にしません
アイコンを多用しない - アイコンは控えめに使い、目立たせすぎません
太い境界線を使わない - ボタン以外では2px以上の境界線を使いません
速いトランジションを使わない - duration-150 以下は避けます
フラットなデザインにしない - シャドウやグラスモーフィズムで常に控えめな奥行きを加えます
レイアウトを煩雑にしない - 迷ったら要素を減らします
小さなタッチ領域を使わない - 44x44px 未満にはしません
ありきたりなストック写真を使わない - ノートパソコンに向かって笑う、どこにでもあるビジネスパーソンの写真は使いません
強いドロップシャドウを使わない - 純粋な黒のシャドウは避けます

タイポグラフィの階層

ランディングページの例


<h1 class="text-6xl sm:text-7xl font-light text-slate-900 tracking-tight leading-[1.05]">
  Primary Headline
</h1>
<p class="text-xl text-slate-500 font-light mt-6 max-w-2xl leading-relaxed">
  Supporting description with generous sizing.
</p>


<h2 class="text-5xl font-light text-slate-900 tracking-tight mb-16">
  Section Title
</h2>


<h3 class="text-2xl font-light text-slate-900 mb-4">
  Subsection Heading
</h3>


<p class="text-base text-slate-500 leading-relaxed">
  Body copy with comfortable line height.
</p>


<span class="text-xs font-medium tracking-wider text-slate-400 uppercase">
  Label
</span>

色の使用ガイドライン

主要コンテンツ

見出し：text-slate-900
本文：text-slate-500 または text-slate-600
ラベル：text-slate-400
控えめなテキスト：text-slate-400

背景

ページ：bg-white または bg-slate-50
カード：白地に bg-slate-50、または slate-50 地に bg-white
ホバー状態：slate-50 から白へ変化させます

アクセント

プライマリーブランドカラー：小さな要素（ドット、小さなアイコン）にのみ使います
境界線：border-slate-100 または border-slate-200
広い領域にアクセントカラーを使わないでください

アニメーションの考え方

滑らかで意図のある動き：


transition-all duration-300


hover:bg-white hover:border-slate-200


group-hover:bg-blue-100 transition-colors duration-300

原則：

トランジションは電気ではなく、水のように感じられるようにします
標準の長さには300msを使います
急激な変化を避けます
ホバー状態は控えめにし、目立たせすぎません

レスポンシブ対応

十分なブレークポイントを設けたモバイルファースト：


<h1 class="text-4xl sm:text-5xl lg:text-6xl font-light">
  Headline
</h1>


<div class="px-6 py-16 sm:px-8 sm:py-24 lg:px-12 lg:py-32">


<div class="grid grid-cols-12 gap-6 lg:gap-8">
  <div class="col-span-12 lg:col-span-7">

セクション全体の例

<section class="relative py-32 bg-white overflow-hidden">
  
  <div class="absolute inset-0 opacity-[0.03]">
    <div class="absolute top-20 left-10 w-96 h-96 rounded-full bg-[#1b75bc]"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-slate-900"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
      
    
    <div class="mb-24">
      <p class="text-[11px] font-medium tracking-[0.2em] text-slate-400 uppercase mb-6">
        Features
      </p>
      <h2 class="text-5xl sm:text-6xl font-light text-slate-900 tracking-tight leading-[1.1] max-w-3xl">
        Everything your garage needs.
        <br/>
        <span class="text-slate-400">Nothing it doesn't.</span>
      </h2>
    </div>

    
    <div class="grid grid-cols-12 gap-8">
      
      
      <div class="col-span-12 lg:col-span-7 group">
        <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-10 hover:bg-white hover:border-slate-200 transition-all duration-300">
          <div class="mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl border border-blue-200 bg-blue-50">
              <i class="ri-calendar-event-line text-3xl text-[#1b75bc]"></i>
            </div>
          </div>
          
          <h3 class="text-2xl font-light text-slate-900 mb-4 tracking-tight">
            Never miss an appointment
          </h3>
          
          <p class="text-base text-slate-500 leading-relaxed mb-8 max-w-xl">
            Customers book online 24/7 while automatic reminders keep your schedule full and your team productive.
          </p>
          
          <div class="space-y-3 pt-6 border-t border-slate-200">
            <div class="flex items-center gap-3 text-sm text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">24/7 online booking</span>
            </div>
            <div class="flex items-center gap-3 text-sm text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">Auto SMS/email reminders</span>
            </div>
          </div>
        </div>
      </div>

      
      <div class="col-span-12 lg:col-span-5 group">
        <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-8 hover:bg-white hover:border-slate-200 transition-all duration-300">
          <div class="mb-6">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl border border-purple-200 bg-purple-50">
              <i class="ri-file-list-3-line text-2xl text-purple-600"></i>
            </div>
          </div>
          
          <h3 class="text-xl font-light text-slate-900 mb-3 tracking-tight">
            Digital job tracking
          </h3>
          
          <p class="text-sm text-slate-500 leading-relaxed mb-6">
            Replace paper trails with real-time updates customers can follow.
          </p>
          
          <div class="space-y-2.5 pt-4 border-t border-slate-200">
            <div class="flex items-center gap-2.5 text-xs text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">Instant estimates</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    
    <div class="mt-24 text-center">
      <div class="inline-flex items-center gap-2 text-xs text-slate-400 tracking-wider">
        <div class="w-12 h-px bg-slate-200"></div>
        <span class="uppercase">Crafted for automotive excellence</span>
        <div class="w-12 h-px bg-slate-200"></div>
      </div>
    </div>

  </div>
</section>

標準デザインとの使い分け

エレベーテッド／Apple デザインを使う場面：

🎯 ランディングページやマーケティングサイト
🎯 製品紹介やローンチページ
🎯 プレミアムなフィーチャーセクション
🎯 ブランド体験や「About」ページ
🎯 信頼感が求められるコーポレートサイト
🎯 高級な EC 製品ページ
🎯 ポートフォリオのプレゼンテーション
🎯 イベント／カンファレンスのウェブサイト
🎯 SaaS の料金プランや機能のページ

標準的な Gixat デザインを使用する場面：

📊 アプリケーションのダッシュボード
📊 データテーブルや複雑なフォーム
📊 管理用インターフェース
📊 内部ツールやユーティリティ
📊 高密度の情報表示
📊 リアルタイム監視インターフェース

ハイブリッドアプローチ：

2つのシステムを組み合わせ、マーケティングセクションにはエレベーテッドデザインを、機能的なアプリ領域には標準デザインを使用します。切り替えが自然に感じられるようにします：

マーケティングページ → エレベーテッドデザイン
ダッシュボード／アプリ → 標準デザイン
設定／プロフィール → エレベーテッドな要素を取り入れた標準デザイン

アクセシビリティ（Apple 標準）

タッチターゲット（最小44x44px）：


<button class="min-w-[44px] min-h-[44px]">


<a class="inline-flex items-center px-5 py-3">

コントラスト比（可能な限り WCAG AAA）：


text-[#1d1d1f] on bg-white → 15.8:1 (AAA ✓)
text-[#424245] on bg-white → 10.2:1 (AAA ✓)
text-[#6e6e73] on bg-white → 5.4:1 (AA ✓)

モーションの低減：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

スクリーンリーダーの最適化：


<nav aria-label="Main navigation">
<main aria-label="Main content">
<button aria-label="Close menu" aria-expanded="false">


<div aria-hidden="true">


<a href="#main-content" class="sr-only focus:not-sr-only">
  Skip to main content
</a>

Apple スタイルのデザインチェックリスト

コンポーネントを確定する前に、以下を確認します：

このエレベーテッドデザインシステムは、Apple の企業向けデザインの優れた点をウェブインターフェースにもたらし、ミニマルな精密さと心に響く表現を組み合わせることで、権威がありながら親しみやすい体験を実現します。

Markdown 対応

ログインしてコメント

基本情報

作者: nitinm21
リポジトリ: nitinm21/youtube_summarizer
カテゴリ: デザイン・UI
インストール数: 80
GitHub スター: 0

問題を報告