hig-components-system について
アプリ外で重要な情報や操作を表示する方法を検討する、Apple プラットフォーム向けのデザインスキルです。ウィジェット、Live Activities、通知、クイックアクション、App Clips などのシステム体験を扱います。
主な機能
- 01プラットフォーム別の表示面の選定
- 02ウィジェットの内容とレイアウト計画
- 03Live Activities の期間と更新に関する指針
- 04通知の内容・操作・グループ化
- 05コンプリケーションとクイックアクションの設計
- 06App Clips の目的を絞ったタスク計画
活用シーン
- 01配達やタイマー向け Live Activity の設計
- 02ウィジェットのサイズとディープリンクの計画
- 03操作可能な通知の作成
- 04Siri と Spotlight への頻出操作の提示
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/hig-components-systemを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/app-clips.mdapp-shortcuts.mdcomplications.mdhome-screen-quick-actions.mdlive-activities.mdnotifications.mdtop-shelf.mdwatch-faces.mdwidgets.md詳細
Apple HIG：システム体験
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、そこに記載されていない情報だけを質問してください。
主な原則
-
ひと目でわかり、すぐに価値が得られること。 システム体験では、アプリを起動せずにユーザーが目にする場所に、アプリの最も重要なコンテンツを表示します。注目される時間は数秒であることを前提に設計してください。
-
プラットフォームの状況を尊重すること。 ロック画面ウィジェットの制約は、ホーム画面ウィジェットとは異なります。コンプリケーションはトップシェルフの項目よりはるかに小さいものです。
-
ウィジェットにはすべてではなく、関連性の高い情報を表示すること。 最も役立つ情報を適切に更新しながら表示してください。
-
サイズごとに異なるレイアウトを用意すること。 各サイズは、別のサイズを拡大・縮小したものではなく、考え抜かれたデザインにしてください。
-
タップでディープリンクすること。 アプリのルート画面ではなく、関連するコンテンツにユーザーを移動させてください。
-
ライブアクティビティでは、明確な開始と終了があるイベントを追跡すること。 配達、スコア、タイマー、乗車などが対象です。Dynamic Island とロック画面の両方に対応するよう設計してください。
-
最新かつタイムリーな状態を維持すること。 古いデータは信頼を損ないます。イベントが終了したら速やかに終了してください。
-
通知でユーザーの注意を尊重すること。 ユーザーが本当に関心を持つ情報についてのみ通知してください。宣伝目的や価値の低い通知は送らないでください。
-
通知は、実行可能で内容が完結していること。 アプリを開かなくても内容を理解して対応できるだけのコンテキストを含めてください。通知アクションに対応し、スレッド化とグループ化を使用してください。
-
コンプリケーションには、文字盤に合わせて要点を絞ったデータを表示すること。 役立つ最小限の表示を設計してください。複数のファミリーに対応し、更新予算を賢く使ってください。
-
ホーム画面のクイックアクションは、最もよく使うタスクを3～4個に絞ること。 短いタイトルと、必要に応じたサブタイトル、関連する SF Symbol アイコンを使用してください。
-
トップシェルフは tvOS のショーケースです。 新しいエピソード、注目の項目、最近のコンテンツなど、ユーザーの興味を引くコンテンツを取り上げてください。
-
App Clips は、厳しいサイズ制限の中で即座に使える、目的を絞った機能を提供します。 App Store からダウンロードしなくても、すぐに読み込めるようにしてください。直ちに必要なタスクに必要なものだけを提供し、その後、完全版アプリのインストールを案内してください。
-
App Shortcuts で、主要なアクションを Siri と Spotlight に表示すること。 よく使うタスクのショートカットを定義してください。自然な会話形式の起動フレーズを使用してください。
参考資料インデックス
| 参考資料 | トピック | 主な内容 |
|---|---|---|
| widgets.md | ウィジェット | ひと目でわかる情報、サイズ、ディープリンク、タイムライン |
| live-activities.md | ライブアクティビティ | リアルタイム追跡、Dynamic Island、ロック画面 |
| notifications.md | 通知 | 注意、アクション、グループ化、コンテンツ |
| complications.md | コンプリケーション | 文字盤のデータ、ファミリー、予算に応じた更新 |
| home-screen-quick-actions.md | クイックアクション | Haptic Touch、よく使うタスク、SF Symbols |
| top-shelf.md | トップシェルフ | 注目のコンテンツ、ショーケース |
| app-clips.md | App Clips | 即時利用、軽量、目的を絞ったタスク、NFC/QR |
| watch-faces.md | 文字盤 | カスタムコンプリケーション、文字盤の共有 |
| app-shortcuts.md | App Shortcuts | Siri、Spotlight、音声による起動 |
出力形式
- システム体験の推奨 -- ユースケースに最も適した表示場所。
- コンテンツ戦略 -- 表示する内容、優先順位、省く内容。
- 更新頻度 -- システムの予算上の制約を含む更新レート。
- サイズ／ファミリーごとのバリエーション -- 対応するものと、レイアウトの適応方法。
- ディープリンクの動作 -- タップしたときにユーザーが移動する先。
質問事項
- アプリの外部に表示する必要がある情報は何ですか？
- 対象のプラットフォームは何ですか？
- データはどのくらいの頻度で更新されますか？
- ひと目で確認したい主な情報は何ですか？
関連するスキル
- hig-components-status -- ウィジェットやライブアクティビティの進行状況インジケーター
- hig-inputs -- システム機能の操作パターン（コンプリケーション向けのDigital Crown）
- hig-technologies -- App Shortcuts向けのSiri、コンプリケーション向けのHealthKit、App Clips向けのNFC