Apple Web Design

## 0. Working Model — 実装前の3行宣言（必須） UIの実装を始める前に、**必ず以下の3行を書き出す**。 コードを1行も書く前にこの3行で方向性を固定する。 これがないまま実装を始めると、途中で迷い、平均的な出力に収束する。 ``` 1. Visual Thesis（視覚テーゼ）: ムード・素材感・エネルギーを1文で定義する。 例: 「深い紺と白のコントラスト、余白たっぷりの高級ホテルのロビー感」 例: 「ダッシュボードは控えめなグレー基調、数字が主役、装飾ゼロ」 2. Content Plan（コンテンツ構成）: 画面の情報構成を4ステップで定義する。 LP: Hero → Support → Detail → Final CTA 管理画面: KPI → メインデータ → アクション → 補助情報 POS: ステータス → 入力エリア → アクションバー 3. Interaction Thesis（インタラクション方針）: 2-3個のモーションアイデアを定義する。意味のないモーションは入れない。 例: 「①ページ読込時にKPIカードがstagger fade-in ②テーブル行ホバーで微細な浮き ③モーダルは下からspring slide-up」 POS等のパフォーマンス優先画面では「モーション不要」も正解。 ``` ### 宣言後のセルフチェック - Visual Thesisから配色・余白の方向性が決まるか？ → 曖昧なら書き直す - Content Planのステップが5つ以上なら情報過多 → 削る - Interaction Thesisのモーションが「装飾」なら削除 → 意味があるものだけ残す > **出典**: OpenAI "Designing Delightful Frontends with GPT-5.4" (2026-03-20) の > Frontend Skill仕様を参考にNIGHTOS向けにローカライズ。 --- ## Philosophy: 3つの柱 Apple HIG の根幹は **Clarity（明瞭さ）・Deference（控えめさ）・Depth（奥行き）**。 Webアプリでは以下のように翻訳する。 | Apple原則 | Web UIへの適用 | |-----------|---------------| | **Clarity** | コンテンツが主役。UIクロームは最小限。ラベル・アイコンは即座に意味が伝わる | | **Deference** | 装飾ではなくコンテンツが前に出る。背景・ボーダーは控えめに、データを際立たせる | | **Depth** | レイヤー感で文脈を示す。影・ブラー・z軸で「今どこにいるか」を直感的に | --- ## 1. タイポグラフィ — 呼吸するテキスト Appleの最大の武器はタイポグラフィの精度。 ### 原則 - **見出しは大胆に、本文は控えめに** — コントラスト比を極端にする - **フォントウェイトで階層を作る** — サイズだけに頼らない - **レタースペーシングを調整する** — 大きな見出しは詰める、小さなキャプションは広げる - **行間は広めに** — 本文 line-height: 1.6〜1.75 ### Tailwind実装パターン ``` /* ページタイトル — apple.com のヒーロー的存在感 */ .apple-title { @apply text-4xl sm:text-5xl font-bold tracking-tight text-slate-900; line-height: 1.1; } /* セクション見出し — 余裕のある重み */ .apple-heading { @apply text-2xl sm:text-3xl font-semibold tracking-tight text-slate-900; line-height: 1.2; } /* サブ見出し — 軽く、でも存在感 */ .apple-subheading { @apply text-lg font-medium text-slate-600;

インストール

購入後にターミナルで実行してください。

正規購入者にはインストールコマンド再実行で最新版が配信されます。

評価とレビュー