hig-components-dialogs について
Apple HIGに基づき、各プラットフォームのプレゼンテーションコンポーネント設計を支援するスキルです。確認や編集、選択肢の提示に使うコンポーネントを選び、文言や閉じ方、より中断の少ない代替案も検討します。
主な機能
- 01アラート、シート、ポップオーバーの区別
- 02アクションシートと破壊的操作の指針
- 03タイトルとボタンラベルの提案
- 04閉じ方と非モーダルな代替案
活用シーン
- 01破壊的操作の確認フロー設計
- 02編集タスクに適した表示方法の選定
- 03モーダルダイアログによる中断の軽減
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ raintree-technology/ hig-doctor --skill hig-components-dialogsインストール後、Claude Code で/hig-components-dialogsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/action-sheets.mdalerts.mddigit-entry-views.mdpopovers.mdsheets.md詳細
Apple HIG:プレゼンテーションコンポーネント
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、まだ触れられていない情報だけを質問してください。
主な原則
-
アラート:重要な状況でのみ使用します。 注意が必要なエラー、破壊的な操作の確認、または確認を要する情報に使用します。アラートは操作の流れを中断し、応答を求めます。
-
シート:コンテキストを保ちながら進める、集中した作業に使用します。 画面の端からスライドして表示されます(macOSではウインドウに取り付けられます)。項目の作成、設定の編集、複数ステップのフォームに使用します。
-
ポップオーバー:iPadとMacでは非モーダルです。 トリガー要素の隣に表示され、外側をタップすると閉じます。画面全体を占有せずに、追加情報、オプション、またはコントロールを表示する場合に使用します。
-
アクションシート:アクションの選択に使用します。 複数のアクションから選択する場合、特にその中に破壊的なアクションがある場合に表示します。iPhoneでは画面下部からスライドして表示します。iPadではポップオーバーとして表示します。
-
中断を最小限に抑えます。 モーダルを使う前に、インライン表示や、操作を取り消し可能にする方法を検討してください。
-
アラートのテキストは簡潔で、次の行動が明確になるようにします。 短く説明的なタイトルを使います。必要に応じて、簡潔な本文を添えます。ボタンのラベルには「OK」ではなく、「削除」「保存」など具体的な動詞を使います。
-
破壊的なアクションを明確に示します。 破壊的なボタンスタイル(赤いテキスト)を使います。破壊的なボタンは、ユーザーが反射的にタップしにくい位置に配置します。
-
アクションが複数あるアラートやアクションシートには、キャンセルの選択肢を用意します。アクションシートでは、キャンセルを一番下に配置し、他のアクションと区切ります。
-
数字の入力:集中しやすく、アクセシブルにします。 適切なサイズの入力フィールドを使い、数字間の自動移動に対応し、ペーストと自動入力をサポートします。
-
プラットフォームに合わせて表示方法を調整します。 同じ操作でも、iPhone、iPad、Mac、visionOSでは異なるコンポーネントを使う場合があります。
リファレンス一覧
| リファレンス | トピック | 主な内容 |
|---|---|---|
| alerts.md | アラート | ボタンの順序、タイトルと本文、確認、破壊的なアクション |
| action-sheets.md | アクションシート | 複数のアクション、キャンセルの選択肢、破壊的な操作への対応 |
| popovers.md | ポップオーバー | 非モーダル、外側をタップして閉じる、iPad/Mac |
| sheets.md | シート | モーダルな作業、コンテキストの維持 |
| digit-entry-views.md | 数字の入力 | PIN入力、自動入力、自動移動 |
出力形式
- 推奨する表示形式とその理由、および他の形式が適さない理由。
- コンテンツのガイドライン — Appleのトーンと簡潔さのルールに沿ったタイトル、本文、ボタンラベル。
- 閉じる動作 — ユーザーがどのように閉じるか、およびその結果(保存、破棄、キャンセル)。
- 代替案 — シナリオによってはモーダルをまったく使わなくてよい場合(インラインフィードバック、取り消し、段階的な情報開示)。
質問
- この表示で伝える情報や実行する操作は何ですか?
- 操作をブロックしますか、それともブロックしませんか?
- 対象プラットフォームはどれですか?
- これはどのくらいの頻度で表示されますか?
関連スキル
- hig-components-menus — 表示を開始するボタンとツールバー項目
- hig-components-controls — シートやポップオーバー内の入力コントロール
- hig-components-search — 表示されたビュー内での検索とナビゲーション
- hig-patterns — モダリティ、中断、ユーザーフローの管理
- hig-foundations — プレゼンテーションコンポーネントの色、タイポグラフィ、レイアウト