Appleスタイルデザインは何をしますか？

Dribbbleのapple-styleタグ（64ショット、2026年10月）からリバースエンジニアリングされ、Apple自身のHIG（ヒューマンインターフェースガイドライン）と照合された完全なデザイン言語。トークン、コンポーネント、マテリアル、モーション、レイアウト、コピー、プラットフォーム別レシピを網羅しています。

このルックを一言で表すと：落ち着いたニュートラルなキャンバス、1つの確信に満ちたアクセントカラー、主役はコンテンツ、線ではなくソフトな奥行き、物理的な動きを感じさせるモーション。

このスキルの使い方

出力タイプを特定する（Webページ、アプリ画面、ウィジェット、プラグインパネル、アイコン、ポスター、モーション）。references/layouts.md から該当するレシピを選択します。
モードを選択する: ライト（マーケティング、プロダクティビティ、ヘルスケア向けデフォルト）、ダーク（メディア、プロフェッショナルツール、ファイナンス、ゲーミング、VFX）、またはガラスオーバーイメージ（visionOS、ヒーローセクション、プレイヤー）。下記「モードピッカー」を参照。
トークンをロードする。Webの場合は、assets/apple-style.css をプロジェクトにコピー（またはインライン化）し、その変数と .as-* クラスを使用して構築します。その他のプラットフォームについては references/platforms.md（Nuke用Qt/PySide QSS、ComfyUIフロントエンド、Tailwind、SwiftUI、Figma、スライド、Remotion）を参照してください。
コンポーネントで構成する： references/components.md を参照。ボタンやリスト行に新しいスタイルを発明しないでください。レシピにはすでに細かいディテールがエンコードされています。
マテリアルとモーションは最後に追加する： references/materials.md（リキッドガラス、曇りガラス、メッシュグラデーション、グレイン）と references/motion.md（スプリング、出現、プレス状態）。
QAチェックリストを実行する：結果を表示する前に、一番下のチェックリストを実行します。

パターンの証明や視覚的なリファレンスが必要ですか？ references/shot-catalog.md には分析されたすべてのショットとその教訓がリストされています。 assets/demo.html はスタイルシートで構築されたすべてのコンポーネントの動作ギャラリーです。開いて目標とする品質基準を確認してください。

12の法則（なぜ「Apple」に見えるのか）

これらは、ほぼすべての優れたショットに現れたパターンです。それぞれに理由があり、ケースがカバーされていない場合でもその理由を念頭に置いてください。

ニュートラルなキャンバス、色付きのコンテンツ。背景はオフホワイト #F5F5F7 / グループグレー #F2F2F7 またはニアブラック #000/#1C1C1E。色はデータ、状態、および1つのプライマリアクションのために予約されています。理由：キャンバスが退くことで、コンテンツとアクセントがすべての意味を担います。
画面ごとに1つのアクセント。デフォルトはシステムブルー #007AFF。製品に独自のアイデンティティがある場合は、バイオレット #5E5CE6、ピンク、オレンジ、またはグリーン。2つ目のアクセントはデータ系列のみ（例：オレンジ/ピンクの交互バー）。理由：単一のアクセントにより、ラベルなしでプライマリアクションが明白になります。
境界線ではなく、高さによる奥行き。カードはソフトで幅広く、低不透明度のシャドウの上に浮かびます。セパレーターは左端からインセットされた0.5pxのヘアライン。太い1pxのグレーの境界線は「Webフォーム」に見え、Appleではありません。
どこでも連続したコーナー。スクイル風の半径：10（コントロール）、14（フィールド）、20（リストグループ、カード）、28（ウィジェット、シート）、38+（デバイス/ウィンドウ）、999（ピル）。ネストされた半径 = 外側の半径からパディングを引いた値。
タイポグラフィが階層を決める。SF Pro / Inter、表示サイズでのタイトなネガティブトラッキング、太字の大きなタイトル、小さなサイズの代わりにグレーのセカンダリテキスト。数字は主役：12.203 は大きく太字で、同じベースライン上に小さなグレーの単位が横に並びます。
グレーは色ではなくスケール。ラベルの不透明度：プライマリ 100%、セカンダリライト74% / ダーク60%（Appleはライトで60%を出荷していますが、これは白上で3.44:1のみです）、ターシャリ 30%、クォータナリ 18%。決してランダムな #999 を発明しないでください。
アクションにはピルと円。プライマリボタンは完全なピル。アイコンアクションは44pxの円。FABは、白いSFスタイルのグリフとソフトな色付きシャドウを備えた、アクセントカラーで塗りつぶされた円。
フラットな塗りつぶしよりもマテリアル。オーバーレイ、ツールバー、ドック、サイドバー、プレイヤーは、半透明のぼかしマテリアル（リキッドガラス）を使用して、コンテキストが透けて見えるようにします。
広々としたリズミカルなホワイトスペース。4ptグリッド。16/20の内部パディング。セクションは呼吸する（デスクトップで96-160px）。少し空っぽに感じるなら、おそらくそれが正解です。
モーションは物理的。リニアトゥイーンではなくスプリング。押す = スケール0.97、離す = スプリングで戻る。出現はフェード + 8-24px上昇 + ぼかし解除。何も1回以上バウンドしない。
コピーは短く自信に満ちている。文頭の大文字、タグラインにピリオド（「Sound. Refined.」、「Coming Soon.」）、グレーまたはアクセントのフレーズを使った2トーンの見出し、ウィジェットタイトルは小文字も許可（「steps walked」）。
マイクロディテールへのこだわり。ターシャリグレーのシェブロン、データ用のタブラー数字、キーキャップヒント（esc、return）、ステータスドット、0.5pxヘアライン、ガラスの内側上部ハイライト、チャートの下の色付きグロー。これらのディテールが「クリーン」と「Apple」の違いです。

モードピッカー

製品の雰囲気	モード	キャンバス	サーフェス	アクセントのアイデア
ヘルスケア、プロダクティビティ、コマース、ドキュメント、SaaSマーケティング	ライト	`#F5F5F7` / `#F2F2F7`	`#FFFFFF`	ブルー `#007AFF`
メディアプレイヤー、音楽、金融ティッカー、プロ/VFXツール、ゲーミング	ダーク	`#000000`	`#1C1C1E` / `#2C2C2E`	ピンク `#FF375F`、グリーン `#30D158`、バイオレット `#5E5CE6`
写真/ビデオ上のヒーロー、visionOS、プレイヤー、トグル	ガラス	画像またはメッシュグラデーション	リキッドガラス	白プライマリ、アクセントセカンダリ
ブランド/ポスター/ローンチ	グラデーション	メッシュグラデーション + グレイン	ガラスまたはなし	製品カラー

コアトークン（概要）

完全な表（ダーク値と根拠を含む）は references/tokens.md にあります。assets/apple-style.css で実装されています。

フォントスタック: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif。クロスプラットフォームのフォールバックとして、Google FontsからInter（400/500/600/700）をロードします。等幅："SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace。
タイプスケール（アプリ）: Large Title 34/41 700 (-0.022em) · Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13。
タイプスケール（マーケティング）: Hero 64-96px 700、行の高さ1.04、トラッキング -0.035em · Section 40-56px 600 -0.028em · Lead 21-24px 400 セカンダリカラー · Eyebrow 14-17px 600 アクセントカラー。
スペーシング: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160。
半径: 6（タグ）、10（ボタン/コントロール）、14（フィールド）、20（カード/リスト）、28（ウィジェット/シート）、38（ウィンドウ/デバイス）、999（ピル）。
シャドウ（ライト）: 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08)。フローティング：0 32px 80px rgb(0 0 0/.12)を追加。
イージング: 標準 cubic-bezier(.25,.1,.25,1)、強調アウト cubic-bezier(.32,.72,0,1)、スプリング linear() カーブ（motion.md 参照）。継続時間 150（プレス）、250（状態）、400（進入）、600-900（ヒーロー出現）。

アンチパターン（スクレイピングで見られた、コピーしないこと）

このタグには、スタイルから外れたショットも含まれていました。それらは避けるべきことを教えてくれます。

2012年のスキューモーフィックなグロス：エンボス加工された入力フィールド、ベベル加工された「ログイン」ボタン、リネン風テクスチャ（OTAirアプリストアのショット）。
漫画のマスコット、ステッカーの輪郭、太いアウトライン（Taco、Buzz Addiction）。
すべて大文字の等幅「テックブルータリスト」ページ（MEMBRAN）：有効なスタイルだが、Appleではない。
すべての要素にネオン多色グラデーションボタン、カードあたり複数のグラデーション。
片側にオフセットされたハードブラックドロップシャドウ（「Astro」デバイスフレームはブルータリストなオフセットシャドウを使っている：Appleスタイルには不適切）。
すべてのカードにデフォルトの1px #ddd 境界線、#999 テキスト、Bootstrapブルー #0d6efd。
バウンドするオーバーシュートアニメーション、すべてにスピニングローダー、スクロールと戦うパララックス。
ユーザーの製品でAppleのロゴや商標を使用する。スタイルを使用し、ブランドは決して使用しないでください。

出力契約

このスキルがデザインを生成するとき：

説明ではなく、動作するコードを提供する。Web：セマンティックHTML + トークンCSS（インラインまたはリンク）+ モーション用の最小限のJS。その他のターゲット：プラットフォームレシピ。
モードピッカーがダークのみと指定していない限り、常にライトとダークの両方をサポートし、prefers-reduced-motion を尊重する。
アクセシビリティはルックの一部：4.5:1のテキストコントラスト（label-2 は白、キャンバス、グループグレー上で合格するように調整されています。label-3 はプレースホルダー、シェブロン、無効状態のみに使用され、人が読まなければならないテキストには決して使用しません）、44x44のタッチターゲット、可視フォーカスリング（3px accent-text アウトライン、2pxオフセット：アウトラインであり、box-shadowではないため、コンポーネントのシャドウが隠せない）、アイコンボタンのラベル。
生のシステムアクセントは、ボタンの塗りつぶしや小さなテキストとして使用するとコントラストに失敗します（白 on #007AFF = 4.02:1、on #0A84FF = 3.65:1）。塗りつぶしボタンは accent-fill、カラーテキストは accent-text を使用し、生の accent はグロー、トグル、アイコン、大きな形状のために予約します。色相ごとの安全なシェード：references/tokens.md 3a。
デリバリー後、モード、アクセント、使用した2〜3の特徴的なディテールを1行で短く述べ、ユーザーが方向性を決められるようにする。

QAチェックリスト（表示前に実行）

リファレンス

このドキュメントで参照されているファイル（このスキルに付属）：

assets/apple-style.css — コアスタイルシート（変数 + ユーティリティクラス）
assets/demo.html — すべてのコンポーネントの動作デモ
references/tokens.md — 完全なトークンテーブル（ダーク値とアクセシビリティ調整を含む）
references/components.md — コンポーネントレシピ（ボタン、リスト、カード、入力、ピッカー、タブ、トグル、スライダー）
references/layouts.md — レイアウトレシピ（Webページ、ダッシュボード、モバイル画面、デスクトップアプリ、ウィジェット）
references/platforms.md — プラットフォーム固有のコード（Qt/PySide QSS、ComfyUI、Tailwind、SwiftUI、Figma、スライド、Remotion）
references/materials.md — マテリアル（リキッドガラス、曇りガラス、メッシュグラデーション、グレイン）
references/motion.md — モーション定義（スプリング、出現、状態トランジション、キーフレーム）
references/shot-catalog.md — 分析された64ショットのカタログ

Appleスタイルデザイン