hig-components-status について
hig-components-statusは、進捗インジケーター、ステータスバー、アクティビティリングにApple HIGを適用するスキルです。デザイナーや開発者向けに、タイミング、アクセシビリティ、プラットフォームの動作を考慮した選択を案内します。
主な機能
- 01進捗インジケーターの選択指針
- 02タイミングとアニメーションの提案
- 03アクセシビリティの指針
- 04ステータスバーとセーフエリアの指針
- 05アクティビティリングの使用指針
活用シーン
- 01所要時間が既知または不明な処理の進捗表示選択
- 02長時間処理におけるアクセシブルな状態更新の設計
- 03没入型コンテンツに合わせたステータスバー動作の設計
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ raintree-technology/ hig-doctor --skill hig-components-statusインストール後、Claude Code で/hig-components-statusを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/activity-rings.mdprogress-indicators.mdstatus-bars.md詳細
Apple HIG:ステータスコンポーネント
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、そこに記載されていない情報だけを質問してください。
主な原則
-
処理に1〜2秒以上かかる場合は、進行状況を表示してください。
-
所要時間や進捗率がわかる場合は、確定型にしてください。 塗りつぶされていくプログレスバーは、残りの作業をユーザーに明確に伝えます。ダウンロード、アップロード、その他進捗を計測できる処理に使用してください。
-
所要時間がわからない場合は、不確定型にしてください。 スピナーは、所要時間を約束せずに処理中であることを伝えます。予測できないネットワークリクエストに使用してください。
-
スピナーよりプログレスバーを優先してください。 確定型の進捗表示は、処理が速く、信頼できる印象を与えます。
-
コンテンツが表示される場所にインジケーターを配置してください。 モーダルや離れた場所ではなく、コンテンツ領域の近くにインラインで表示してください。
-
複数のインジケーターを重ねて表示しないでください。 同時に実行する処理は1つの表示にまとめるか、最も関連性の高いものだけを表示してください。
-
正当な理由なくステータスバーを隠さないでください。 非表示にするのは、全画面メディア、ゲーム、ARなどの没入型の体験に限ってください。
-
ステータスバーのスタイルをコンテンツに合わせてください。 十分なコントラストを確保できるライトまたはダークのスタイルを使用してください。
-
セーフエリアを尊重してください。 ステータスバーの背後にインタラクティブなコンテンツを配置しないでください。
-
没入型のコンテキストを終了したら、速やかにステータスバーを元に戻してください。
-
アクティビティリングは、ムーブ、エクササイズ、スタンドの目標に使用してください。 リングの表現を無関係なデータに転用しないでください。
-
リングの色の慣例を守ってください。 赤(ムーブ)、緑(エクササイズ)、青(スタンド)は、Apple Fitness と強く結び付けられています。
-
アクティビティデータには、手動で記録するのではなく HealthKit API を使用してください。
-
リングが閉じたときは、アニメーションと触覚フィードバックで達成を祝ってください。
リファレンス一覧
| リファレンス | トピック | 主な内容 |
|---|---|---|
| progress-indicators.md | プログレスバーとスピナー | 確定型、不確定型、インライン配置、所要時間 |
| status-bars.md | iOS/iPadOS のステータスバー | システム情報、表示状態、スタイル、セーフエリア |
| activity-rings.md | watchOS のアクティビティリング | ムーブ/エクササイズ/スタンド、HealthKit、フィットネストラッキング、色 |
出力形式
- インジケーターの種類の推奨とその理由(確定型か不確定型か)。
- タイミングとアニメーションのガイダンス -- 所要時間のしきい値、アニメーションのスタイル、トランジション。
- アクセシビリティ -- VoiceOver による進捗状況のアナウンス、ライブリージョンの更新。
- 対象プラットフォームごとの動作の違い。
質問事項
- 所要時間はわかっていますか、それとも不明ですか?
- 対象となるプラットフォームはどれですか?
- 通常、処理にはどのくらい時間がかかりますか?
- システムレベルのインジケーターですか、それともアプリ内のインジケーターですか?
関連スキル
- hig-components-system -- 進捗状況やステータスを表示するウィジェットとコンプリケーション
- hig-inputs -- 進捗状態を引き起こすジェスチャ(プルして更新)
- hig-technologies -- アクティビティリングのデータには HealthKit、進捗状況のアナウンスには VoiceOver