macos-app-design

macOS アプリの設計と開発

macOS のワークフローに深く統合され、高速で、洗練され、アクセシブルな、macOS に自然になじむ「Mac の優等市民」となるアプリを設計・実装するためのガイドです。

ほかの何よりも優先される 2 つのルール

1. 独自の UI よりも、システムコンポーネントと慣習を優先する — Mac で「しっくりくる」アプリを実現する最短の方法です
2. バー、背景、境界線、コントロールの外観をカスタマイズする場合：立ち止まって、その理由を説明してください

クイックリファレンス：Mac の優等市民チェックリスト

領域	要件
メニューバー	標準的な構成（App/File/Edit/View/Window/Help）、設定を ⌘, で開ける
キーボード	すべての主要なコマンドをキーボードで実行でき、標準のショートカットが機能する
ウインドウ	スムーズにサイズ変更でき、複数のウインドウに対応し、フルスクリーン／最小化に適切に対応する
サイドバー	最上位のナビゲーションとして使い、項目を一覧しやすくし、コンテンツを背後まで広げる
ツールバー	機能や使用頻度ごとにグループ化し、二次的な操作は「その他」メニューに移す
テキスト	システムのテキストコンポーネントを使い、標準の編集動作に対応する
アクセシビリティ	VoiceOver ラベル、完全なキーボード操作、視差効果を減らす設定に対応する

Liquid Glass の簡易ルール

すること：

• ナビゲーション／コントロール層（ツールバー、サイドバー、バー）に使う
• システムコンポーネントに組み込みの動作を任せる

しないこと：

• コンテンツ層（テーブル、リスト、ドキュメントの内容）に適用する
• 「ガラスの上にガラス」を重ねる

アプリのアーキタイプ

まず、アプリのタイプを特定してください。

• ドキュメントベース：ファイルが主要な単位（開く／保存／複製）
• ライブラリ＋エディター：サイドバーに項目のリストを表示し、メイン領域に詳細を表示する
• ユーティリティ：単一のウインドウで動作し、メニューバーは任意
• メニューバーアプリ：メニューバーに常駐し、UI は最小限
• プロ向けツール：情報量が多く、パワーユーザー向けのワークフローを備える

実装前の成果物

1. アプリのアーキタイプを特定する
2. 情報アーキテクチャ（サイドバーの構造、ナビゲーション、ウインドウモデル）
3. コマンドマップ（すべての主要機能に対応するメニューとキーボードショートカット）
4. 状態とデータモデル（永続化、取り消し／やり直し、並行処理）
5. アクセシビリティ計画（VoiceOver、キーボード、コントラスト、視差効果の軽減）

完全版リファレンス

デザインシステムの詳細、Icon Composer のワークフロー、SF Symbols のガイダンス、評価基準、完了の定義チェックリストについては、こちらをご覧ください。

参照：references/macos-design-guide.md

よくある間違い

間違い	修正方法
メニューバーのコマンドがない	すべての機能をキーボードショートカット付きでメニューに追加する
App メニュー以外に設定がある	App メニューから ⌘, で開けるようにする
独自のテキストコンポーネント	Mac の編集エコシステムに対応するシステムテキストを使う
ツールバーに項目を詰め込みすぎる	二次的な操作を移し、機能ごとにグループ化する
コンテンツに Glass を適用する	Liquid Glass はナビゲーション層だけに使う
標準のショートカットを変更する	⌘C、⌘V、⌘Z などを決して上書きしない
単一ウインドウのみ	ワークフローに役立つ場合は複数のウインドウに対応する