macos-design

macOS ネイティブアプリのデザインスキル

ウィンドウに押し込んだウェブサイトではなく、ユーザーのコンピューターに自然になじむインターフェイスを構築します。

基本理念

ネイティブアプリは、ユーザーが訪れる場所ではありません。ユーザーが必要とする場所に存在するシステムツールです。あらゆる操作をこの原則に沿って設計します。必要なときに現れ、用が済んだらすぐに邪魔にならないようにします。

コーディングを始める前に

構築するものに応じて、次のリファレンスを確認します。

• すべての macOS アプリ → references/layout-and-composition.md を読む（必須）
• キーボードショートカット、パネル、トースト、ポップオーバーを備えたアプリ → references/interaction-patterns.md を読む
• ライト／ダークモード、カラー、タイポグラフィ → references/visual-design.md を読む

クイックスタートチェックリスト

コードを書く前の確認に使用します。

1. レイアウト：グローバル操作にはトップバー、ナビゲーションにはサイドバー（ナビゲーションが最小限の場合は省略）、コンテンツには中央領域を使います
2. 信号機ボタン：UI に統合します。トップバーまたはサイドバーに配置し、不自然に浮かせません
3. ウィンドウのドラッグ領域：上部約 50px はドラッグ可能にし、雑然とさせません
4. 空の状態：表示します。段階的開示を取り入れ、役立つ場合にのみ UI を表示します
5. キーボードショートカット：主要なアクションすべてにショートカットを用意します。ショートカットには必ず視覚的なフィードバックを付けます
6. ライトモードとダークモード：両方をデザインします。色をそのまま反転させないでください（visual-design リファレンスを参照）
7. 検索：常に目立つ位置に配置し、アクセスしやすくします。フローティング検索バーやコマンドパレットを検討します
8. ドラッグ＆ドロップ：アプリへのコンテンツの取り込みと、アプリからのコンテンツの取り出しの両方に対応します。ネイティブらしい操作感のために必須です
9. マイクロアニメーション：状態が変わるたびにトランジションを付けます。フィードバックのない操作はありません
10. オンボーディング：簡潔なモーダル形式にし、読むのではなく操作を通じてショートカットを学べるようにします

実装メモ

ウェブアーティファクト（React/HTML）として構築する場合：

• macOS のウィンドウの外観（タイトルバー、信号機ボタン、角丸）を再現します
• -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text" のフォントスタックを使用します
• ネイティブのビブランシー／半透明効果には backdrop-filter: blur() を使用します
• 角丸：ウィンドウは 10px、カードは 8px、ボタンは 6px、入力欄は 4px にします
• 自動的なライト／ダークモードの切り替えには prefers-color-scheme メディアクエリを尊重します
• シャドウは控えめに重ね、強いドロップシャドウを単独で使わないようにします

Electron、Tauri、またはネイティブフレームワークで構築する場合：

• 可能な場合はシステムのタイトルバーと統合します
• システムのアクセントカラーと外観設定を尊重します
• ポリフィルではなく、ネイティブのドラッグ＆ドロップ API を使用します