Apple らしい UI は「見た目」ではなく「振る舞い」だった – apple-design Skill の 17 実践領域

こんにちは、AI に UI を作ってもらうと「きれいだけど、どこか惜しい」と感じることがあるアーキテクトのやまぱん！です。

先日、Emil Kowalski 氏の apple-design Skill を見つけました。Apple の WWDC デザインセッションから得た知見を、CSS、Pointer Events、requestAnimationFrame、スプリングアニメーションなどの Web 実装へ落とし込んだ Agent Skill です。

これは Apple が公開している公式 Skill ではありません。複数の WWDC セッションの知見を、AI エージェントが利用できる SKILL.md として再構成したコミュニティ成果物です。

最初は「Apple 風の半透明 UI を作るためのデザイン集かな」と思いました。原文で中心に置かれていたのは、押した瞬間に反応する、指の速度を次の動きへ渡す、アニメーション途中でも操作を受け付ける、といった 入力と表示の連続性 でした。

この記事は 2026/07/19 時点の emilkowalski/skills と Apple Developer の公開情報を基にしています。記事内の日本語説明は、原文を直訳するのではなく、Web 開発者が判断に使える粒度で要約しています。

Contents

1 TL;DR
2 apple-design Skill とは
3 17 の実践領域を 5 つのまとまりで読む
4 AI に渡す価値は「判断基準」にある
5 導入方法
6 使う前に押さえたい注意点
7 まとめ
8 参考・出典

TL;DR

apple-design は、Apple のデザイン知見を Web UI の実装判断へ変換したコミュニティ製 Agent Skill
17 の実践領域には、即時応答、1:1 のドラッグ追従、中断可能なアニメーション、速度の引き継ぎ、アクセシビリティ、タイポグラフィなどが含まれる
核心は、入力と表示の連続性を切らないこと
AI に「いい感じに動かして」と頼む代わりに、具体的な原則・実装値・チェック観点をコンテキストとして渡せる
Apple 公式の仕様書ではないため、原典の WWDC セッションや Human Interface Guidelines と併せて使う

apple-design Skill とは

apple-design は、Skills For Design Engineers リポジトリに収録されている Agent Skill の一つです。Agent Skill は、特定領域の知識や作業手順を SKILL.md にまとめ、対応する AI エージェントへ必要なときだけ読み込ませる仕組みです。

リポジトリの README では、デザインやアニメーションの細かな判断を AI に補うことが目的として説明されています。たとえば、画面へ入るアニメーションで ease-in を選んでしまう、半透明の影が合う場所へ不透明な境界線を置いてしまう、といった小さな判断の積み重ねです。

apple-design は、その中でも Apple のインターフェイス設計と流体的なモーションに焦点を当てています。主な出典として明示されているのは、Apple の Designing Fluid Interfaces（WWDC 2018）です。加えて、タイポグラフィやデザイン原則など、複数の WWDC セッションの知見が Web 向けに整理されています。

2026/07/19 の確認時点で、リポジトリ全体は GitHub 上で 17.6k Stars を集めていました。ただし、この数字は apple-design 単体への評価ではなく、リポジトリ全体の値です。また、GitHub Star と SNS の「いいね」は別の指標なので混同しない方がよいでしょう。

ライセンスは MIT License です。利用や改変の自由度は高い一方、著作権表示とライセンス表示の維持が条件に含まれます。

17 の実践領域を 5 つのまとまりで読む

原文には番号付きで 17 章あります。すべてを独立したチェック項目として暗記するより、私は次の 5 つに分けると理解しやすいと感じました。

まとまり	対応する実践領域	問いかけ
操作への即応	1. Response、2. Direct manipulation、3. Interruptibility	入力した瞬間から、自分で動かしている感覚があるか
物理的なモーション	4. Springs、5. Velocity handoff、6. Momentum projection、9. Rubber-banding	動きが途中で切れず、勢いや境界の感触が続くか
空間と描画	7. Spatial consistency、8. Gesture hints、10. Gesture details、11. Frame-level smoothness、12. Materials & depth	要素の出入り、軌跡、階層が予測できるか
知覚と包摂	13. Multimodal feedback、14. Reduced motion & accessibility、15. Typography	見え方や感じ方が違う人にも情報が届くか
設計基盤と制作	16. Design foundations、17. Process	何を作り、どう試し、どこまで磨くかを説明できるか

ここからは、特に Web 実装へ効きやすい内容を拾います。

1. 押した瞬間に反応させる

最初の原則は Response、つまり応答性です。Skill では、ボタンのフィードバックを click の完了後ではなく、押した瞬間から返すよう求めています。

/* 押した瞬間に視覚フィードバックを返す */
.button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

処理そのものに時間がかかる場合でも、入力を受け取ったことは先に返せます。ここで大事なのは派手なアニメーションではなく、ユーザーの操作と画面の反応の間に空白を作らないことです。

2. アニメーションを途中でつかみ直せるようにする

Skill が「最も重要な原則」として強調しているのが Interruptibility、つまり中断可能性です。

閉じている途中のモーダルをもう一度つかんだとき、いったん閉じ切ってから開き直すのではなく、その場から指へ追従させる。論理上の目標値ではなく、画面に現在表示されている値から次の動きを始めます。

この考え方では、アニメーション中に入力をロックしません。ジェスチャー駆動の要素では、固定された CSS Transition や @keyframes より、現在値と現在速度を保ったまま目標を変更できるスプリングが向いています。

3. 指を離した瞬間の速度を捨てない

ドラッグ中は指へ追従しているのに、指を離した瞬間だけ速度がゼロになる UI があります。見た目は動いていても、ここで操作感が切れます。

apple-design では、リリース時の速度をスプリングの初速として渡す Velocity handoff と、その速度から到達点を予測する Momentum projection を分けて説明しています。

// 指を離した速度から、慣性で進む距離を予測する
function project(initialVelocity, decelerationRate = 0.998) {
  return ((initialVelocity / 1000) * decelerationRate) / (1 - decelerationRate);
}

const projectedEndpoint = currentPosition + project(releaseVelocity);
const target = nearestSnapPoint(projectedEndpoint);

現在位置だけでスナップ先を決めず、「どちらへ、どのくらいの勢いで向かっているか」も判断材料にするわけです。ボトムシートやカルーセルで、短いフリックが自然に次の位置まで届く感覚につながります。

4. 境界では固めず、抵抗を増やす

スクロール端などで要素をぴたりと止めると、ユーザーには「操作が効かなくなった」と見えることがあります。Rubber-banding は、境界を越えるほど追従量を減らし、柔らかい抵抗として限界を伝える考え方です。

これは飾りではなくフィードバックです。動かない理由を文字で説明しなくても、「入力は届いているが、これ以上の領域はない」と伝えられます。

5. Reduced motion を「動きを消す設定」にしない

アクセシビリティの章も具体的です。prefers-reduced-motion: reduce を検出したら、すべてのフィードバックを消すのではなく、スライドや弾性表現を短いクロスフェードへ置き換えます。

@media (prefers-reduced-motion: reduce) {
  .sheet {
    transform: none !important;
    transition: opacity 200ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .toolbar {
    background: white;
    backdrop-filter: none;
  }
}

原文では prefers-reduced-transparency や prefers-contrast も独立した信号として扱っています。見た目を弱くするのではなく、情報の意味を保った別表現へ切り替える発想です。

ただし、prefers-reduced-transparency は W3C Media Queries Level 5 の Working Draft に含まれる機能です。未対応のブラウザーでは条件が一致しないため、基本スタイルの時点で文字の判読性を保ち、対応環境で追加調整する Progressive Enhancement（段階的な機能強化）として扱うのが安全です。

AI に渡す価値は「判断基準」にある

AI に UI 実装を頼むと、コード自体はすぐ出てきます。難しいのは、どの動きを選ぶか、どこに動きを入れないか、途中で操作されたときにどう振る舞うかです。

apple-design が AI へ渡すのは、完成画面のテンプレートではありません。

押下フィードバックは pointer-down から始める
ドラッグはつかんだ位置のオフセットを保ち、1:1 で追従する
操作途中でも入力を受け付け、画面上の現在値から再開する
フリック後はリリース速度を引き継ぐ
バウンドは勢いを伴う操作に限定する
大きな移動は reduced motion でクロスフェードへ置き換える
インタラクティブな試作を作り、実際に触って評価する

こうした条件です。つまり、Skill の価値は AI の「センス」を魔法のように上げることではなく、曖昧だったレビュー観点を実装可能な言葉へ変えること にあります。

導入方法

リポジトリの README では、次のコマンドが案内されています。

# Skills CLI からリポジトリの Skill を追加する
npx skills@latest add emilkowalski/skills

実際の保存先や読み込み方法は、利用するエージェントや Skills CLI の選択内容によって変わります。導入後は、対応エージェントに次のような依頼を渡すところから始められます。

このボトムシートの操作感を apple-design の原則でレビューしてください。
特に、ドラッグの1:1追従、中断可能性、速度の引き継ぎ、
prefers-reduced-motion の代替表現を確認してください。

最初から画面全体を直させるより、ボトムシート、カルーセル、ドラッグ可能なカードなど、操作の境界がはっきりした部品で試す方が差を確認しやすいと思います。

使う前に押さえたい注意点

Apple 公式の Skill ではない

名前に apple-design とありますが、Apple が配布しているものではありません。Apple の正式な設計指針を確認するときは、Human Interface Guidelines や各 WWDC セッションを原典として参照してください。

17 章は Apple 公式の「17 原則」という意味ではない

SKILL.md が知識を 17 の実践領域へ整理したものです。そのうち Design foundations の章では、Apple の Principles of great design（WWDC 2026）で示された 8 つの原則を扱っています。「Apple が公式に 17 原則を定義した」と読むのは正確ではありません。