apple-design-os

Apple Design — OS サーフェスとコンポーネント

Apple の各プラットフォームでネイティブらしいアプリ UI を設計するための、標準コンポーネントライブラリです。

使用する場面

• iOS／iPadOS／macOS／visionOS／watchOS の画面や、その周辺 UI をレイアウトするとき。
• コンポーネント（ナビゲーションバー、リストスタイル、ボタンの階層、シート、アラート、空の状態）を選択または標準化するとき。

基本ルール

• 主要なコントロールは手の届く位置に配置します — iPhone では画面下部（タブバー 49pt ＋ セーフエリア）に配置し、周辺 UI を独自に作るよりも、各プラットフォームのネイティブなバーやシートのパターンを優先します。
• シートにはデテント（中／大／カスタム）とグラバーを使います。モーダルは、ナビゲーションではなく、集中して取り組むタスクに使います。
• 各プラットフォームの入力モデルに合わせます：iOS はタッチ（44pt のターゲット）、macOS はポインターの精度とグローバルメニューバー、visionOS は視線（60pt のターゲット）と視線／ピンチ、watchOS は Digital Crown と一覧性を重視します。
• ドキュメントで定義されたボタンの階層（borderedProminent → bordered → borderless）と、適切なリストスタイル（plain／grouped／insetGrouped）を使い、空の状態（ContentUnavailableView）も必ずデザインします。
• iOS 26／macOS Tahoe では、コントロールが Liquid Glass（浮遊感のある半透明なデザイン）に刷新されています。詳しくは apple-design-materials を参照してください。

参考資料

ファイル	用途
references/ios-ipados.md	ホーム／ロック／コントロールのサーフェス、ナビゲーション／タブ／シートの寸法、iOS 26 のガラス、iPad のウィンドウ管理
references/macos.md	ウィンドウ、信号機ボタン、ツールバー、サイドバー、メニューバー、ビブラント効果、Tahoe のガラス
references/visionos-watchos.md	空間ウィンドウ／オーナメント／没入表示 ＋ watchOS のコンプリケーション／Crown／一覧性
references/app-component-anatomy.md	UIKit／SwiftUI のコンポーネントカタログ全体 ＋ iOS のリスト／トグル／セグメントを CSS で再現する方法

よくある間違い

• 親指の届かない画面上部だけにコントロールを配置すること。寸法の誤ったネイティブ風 UI を作ること。
• ポインター操作の OS でタッチ向けのサイズのターゲットを使うこと（またはその逆）。モーダルを多用すること。空の状態が欠けていること。
• visionOS で視線のターゲットが小さすぎることや、乗り物酔いを引き起こす要素。watchOS の文字盤に情報を詰め込みすぎること。

関連情報： これらのサーフェスで使うガラス表現 → apple-design-materials · モーション／ジェスチャー → apple-design-motion · 余白／文字組み → apple-design-foundations