Apple ウェブデザイン
WebアプリにネイティブiPhoneアプリやApple.comの製品ページのような感触を与えるためのデザイン言語です。実機iPhoneでテストされ、出荷済みのミールプランナーアプリで画面ごとに洗練されました（そのアプリの単一の index.html がリファレンス実装です）。ここにあるものはすべてプレーンなCSSとバニラJSであり、フレームワークやライブラリは不要なので、どんなプロジェクトにも導入できます。
目標は、静かでまとまりのあるプロダクトをエンドツーエンドで実現することです：薄灰色のページ、白いタイル、一つの青いアクセント、大きく自信に満ちたタイポグラフィ、そしてすべてのタップがその場の動きで応答すること。何も飛び跳ねず、画面全体が再レンダリングされることもなく、入力されたテキストやスクロール位置は決して失われません。
このスキルの使い方
- 新しいUI: 最初に
references/tokens.cssをページに貼り付けます。次にreferences/components.mdのコンポーネントレシピから画面を構築します。UIが状態によって再レンダリングされる場合は、assets/morph.jsとreferences/motion.mdのモーションレイヤーを追加します。 - 既存のUI: プロジェクトの構造とデータはそのまま維持します。カラー、タイポグラフィ、シェイプをトークンに置き換え、コンポーネントを一つずつ変換します。スタイルを変更するためにロジックを書き換える必要はありません。
- ガラス: ユーザーがLiquid Glass / iOS 26ガラス（タブバー、フローティングボタン、トースト、シートボタン）を求める場合にのみ、
references/liquid-glass.mdを読んでください。 - ダークなショーケース画面（起動画面、パーティーや集中モードなどの「モード」画面）:
references/keynote.md。 - 完了と判断する前に:
references/checklist.mdを実行してください。明るいテーマと暗いテーマで390×844のスクリーンショットを撮影します。 - アプリを販売する場合（App Storeまたは商用）: 最初に
references/commercial.mdをお読みください。最もAppleらしく見えるディテールのいくつかは、Appleが問題視するものです。
必要なリファレンスだけを読んでください。各ファイルは自己完結型です。
コアルール（なぜ重要なのか）
カラー：一つのアクセントカラーを控えめに使う。 ページ #f5f5f7、タイル #fff、インク #1d1d1f、セカンダリ #6e6e73、アクションブルー #0071e3（ダーク：#000 / #1d1d1f / #f5f5f7 / #86868b / #2997ff）。青は「ここでアクションが起こせる」ことを意味するので、プライマリボタン、リンク、選択されたタブ、進捗表示にのみ使用し、装飾目的では使用しません。ステータスカラー（--ok 緑、--warn アンバー、--bad 赤）は常に意味を持たせて使用します。追加の色相（水色のシアン、ステップのオレンジ）は、ある種類のデータを一貫してラベル付けする場合にのみ許可されます。ブランドグラデーションがある場合、それは特別な一つの画面にのみ属します。
ダークモードはiPhoneに従う。 すべてのカラーは prefers-color-scheme: dark の下で再定義されるCSS変数です。ダークモードではページは真っ黒、タイルは #1d1d1f になり、シャドウはオフになります（--shadow:none、黒背景ではシャドウが汚れに見えるため）。
タイポグラフィが階層を生み出し、ボックスではない。 システムフォントスタック（-apple-system, BlinkMacSystemFont, system-ui, sans-serif。AppleデバイスではSFが適用されます）を17pxのボディサイズで使用し、大きなサイズではタイトなネガティブレタースペーシングを適用します。
- ページタイトル 40–48 px 太字、
−0.035em、末尾にピリオドを付ける：「レシピ。」— Apple.comの見出しの語り口です。 - 2トーンのセクションヘッド、24 px 太字：最初のフレーズをインク色で、残りをグレーに：「買い物リスト。 <グレー>あと15の商品が足りません。</グレー>」。両方の部分とも末尾にピリオドを付けます。
- 大きな数字は細字（ウェイト200–300）で非常に大きく（38–72 px）、
font-variant-numeric: tabular-numsを指定して数字が変化する際にガタつかないようにします。小さな統計数字（仕様行など）は600で表示します。 - キャプションは13–14 pxのグレー。12 px以下にはしないでください。
シェイプ：ボーダーレスタイル、ピル、ゆったりとしたスペース。 角丸は 8 / 14 / 22 / 28 px。タイルにはボーダーがなく、非常にソフトなシャドウ（0 4px 18px rgba(0,0,0,.06)）が付きます。タイル内部の行は、端ではなくテキストの開始位置から始まるヘアラインで区切られます（iOSのインセット区切り線）。ボタンはピル型（border-radius: 999px）：プライマリは青ベタに白テキスト、セカンダリはグレーベタに青テキスト、デストラクティブはグレーベタに赤テキスト。写真はタイルの内側で端から端まで表示されます。
レイアウト：1カラム、モバイルファースト。 max-width: 720px で中央寄せ、16pxのサイドガター、すべての固定端に安全圏インセット（env(safe-area-inset-*)）、コンテンツがタブバーの下に入り込まないように110pxの下部パディング。タッチターゲットは44px以上。
モーション：すべてがその場で動く。 innerHTML の代わりにDOMモーフィングで再レンダリングし、ノードを維持します。新しい行は成長しながら現れ、削除された行はフェードアウトするゴーストとして残り、移動した行は滑らかに移動し（FLIP）、変更された数字はロールし、ピルはスライドし、シートはバネのように現れ、ボタンは押し込まれます（スケール.96、スプリングカーブ）。2つのカーブがほとんどをカバーします：--spring: cubic-bezier(.3,1.4,.5,1)（プレス、小さなポップ）、--ease: cubic-bezier(.2,.8,.2,1)（フェード、バー）。シートや大きな動きにはiOS自身の cubic-bezier(.32,.72,0,1)（オーバーシュートなし）を使用します。これらはすべて prefers-reduced-motion: reduce の下でオフになります。確認してください。前提にしないでください。
コピー：短く、人間らしく、Appleのトーンで。 タイトルにはピリオド、ボタンには動詞（「作りました」、「追加」）、数字はロケールに合わせてフォーマット（toLocaleString(lang)、リトアニア語では千単位のスペースと小数点カンマ）、感嘆符は使わず、クローム部分に絵文字は使いません（絵文字はコンテンツアイコンとしてはOK、例：飲み物のエントリに🍸）。エラーテキストは次に何をすべきかを示します。
既に決定されていること（再検討不要）
これらはリファレンスアプリの構築中に実際のフィードバックから生まれました。
- プライマリの青いアクションは、ガラスUIの中でも青ベタのままにします。半透明ガラスの青ボタンは試され、却下されました。
- Liquid Glassはデフォルトでオンですが、ユーザーが切り替え可能で、強度スライダーを備えています。コンテンツカードは読みやすさを保つためにベタのままです。ガラスはフローティングクロームのみに使用します。
- レシピ/製品写真がイメージであり、イラストやストック風の装飾は使用しません。
- 迷ったときはiOS 26の振る舞いを優先します：タブバーはカプセル状に浮かび、スクロールダウン時に小さなボタンに格納されます。ガラスは指の下で沈むのではなく膨らみます（スケールアップ）。
- 各タブは自身のスクロール位置を記憶し、アクティブなタブをタップするとトップにスクロールします。
- トーストはスワイプアップで閉じることができ、破壊的またはデータ変更を伴うタップごとに「キャンセル」アクションがあります。
ファイル
references/tokens.css— 完全なトークンブロック（ライト+ダーク、角丸、シャドウ、カーブ）。そのまま貼り付け可能。references/components.md— すべてのコンポーネントのコピペ可能なHTML+CSSと、動作に関する注意点。references/motion.md— アニメーションヘルパー、モーフフック、FLIP、数字ロール、タブ切り替え、シート、スワイプ＆ホールドジェスチャー、触覚ティック、Reduced Motion。references/liquid-glass.md— iOS 26ガラスマテリアル、Chromium屈折レンズ、格納式タブバー。references/keynote.md— 特別な画面向けの黒い「キーノート」スタイル。references/checklist.md— レビューチェックリストとスクリーンショットスクリプト。references/commercial.md— このスタイルでアプリを販売する前に変更すべき点。assets/morph.js— 70行のDOMモーフ（キー付き行、フォーカスとタイピングを安全に保ち、フォールバックとしてinnerHTMLを使用）。