hig-components-controls について
Apple HIGに沿って選択・入力コントロールの設計を案内するスキルです。フォームや設定画面の設計を行うチーム向けに、データ形式や選択肢の数に応じた選択、状態、検証、アクセシビリティを扱います。
主な機能
- 01データ形式に応じたコントロールの提案
- 02トグル、ピッカー、スライダーの解説
- 03macOS専用コントロールの紹介
- 04状態と検証のガイダンス
- 05VoiceOverのアクセシビリティ対応
活用シーン
- 01設定画面に適したコントロールの選定
- 02日付、数値、テキスト入力の設計
- 03コントロールの状態とエラー表示の計画
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/hig-components-controlsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/combo-boxes.mdcontrols.mdgauges.mdlabels.mdpickers.mdrating-indicators.mdsegmented-controls.mdsliders.mdsteppers.mdtext-fields.mdtext-views.mdtoggles.mdtoken-fields.mdvirtual-keyboards.md詳細
Apple HIG: 選択と入力のコントロール
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、まだカバーされていない情報についてのみ質問してください。
主な原則
-
現在の状態を明確に。 ユーザーは常に何が選択されているかを確認できる必要があります。トグルはオン/オフを示し、セグメント化コントロールはアクティブなセグメントをハイライトし、ピッカーは現在の選択内容を表示します。
-
標準のシステムコントロールを優先する。 組み込みのコントロールは一貫性とアクセシビリティを提供します。カスタムコントロールは学習コストをもたらし、支援機能を損なう可能性があります。
-
二値状態にはトグル。 オンまたはオフ。設定スタイルの画面では、変更は即座に反映されます。モーダルフォームでは、変更は確定時にコミットされます。
-
相互排他的なオプションにはセグメント化コントロール。 2～5 個の項目、ほぼ同等の重要度、短いラベル。
-
連続値にはスライダー。 正確な数値入力が重要でない場合に。範囲の端点には最小/最大のラベルまたはアイコンを提供します。
-
長いオプションリストにはピッカー。 セグメント化コントロールにはオプションが多すぎる場合に。日付、時刻、構造化データに適しています。
-
小さく正確な調整にはステッパー。 固定ステップで増減します。妥当な最小/最大の範囲とともに、現在の値をステッパーの隣に表示します。
-
短い単一行入力にはテキストフィールド。 複数行にはテキストビュー。想定される入力（メール、URL、数値）に合わせてキーボードタイプを設定します。
-
コンボボックス: テキスト入力 + 選択リスト。 macOS。カスタム値が有効な場合は、値を入力するか、定義済みリストから選択します。
-
トークンフィールド: 個別の値を視覚的なトークンとして。 macOS。メールの受信者、タグ、または個別項目のコレクションに。
-
ゲージと評価インジケーターは値を表示する。 ゲージは範囲内の値を示します。評価インジケーターは評価（多くの場合、星）を示します。表示専用です。入力にはインタラクティブなバリアントを使用してください。
リファレンス索引
| リファレンス | トピック | 主な内容 |
|---|---|---|
| controls.md | 一般的なコントロール | 状態、アフォーダンス、システムコントロール |
| toggles.md | トグル | オン/オフ、即時反映 |
| segmented-controls.md | セグメント化コントロール | 2～5 個のオプション、同等の重み |
| sliders.md | スライダー | 連続範囲、最小/最大ラベル |
| steppers.md | ステッパー | 固定ステップ、範囲制限された値 |
| pickers.md | ピッカー | 日付、時刻、長いオプションセット |
| combo-boxes.md | コンボボックス | macOS、入力または選択、カスタム値 |
| text-fields.md | テキストフィールド | 短い入力、キーボードタイプ、バリデーション |
| text-views.md | テキストビュー | 複数行、コメント、説明 |
| labels.md | ラベル | 配置、VoiceOver サポート |
| token-fields.md | トークンフィールド | macOS、チップ、タグ、受信者 |
| virtual-keyboards.md | 仮想キーボード | メール、URL、数値のキーボードタイプ |
| rating-indicators.md | 評価インジケーター | 星評価、表示専用 |
| gauges.md | ゲージ | レベルインジケーター、範囲表示 |
出力形式
- 根拠を伴うコントロールの推奨 と、代替案がなぜより適していないかの理由。
- 状態管理 -- コントロールが現在の状態をどのように伝えるか、変更が即座に適用されるか確定時に適用されるか。
- バリデーションのアプローチ -- いつエラーを表示するか、ルールをどのように伝えるか。
- アクセシビリティ -- VoiceOver 用のラベル、トレイト、ヒント。
確認すべき質問
- どのような種類のデータですか？（ブール値、固定セットからの選択、数値、自由形式のテキスト？）
- オプションはいくつありますか？
- どのプラットフォームですか？（コンボボックスとトークンフィールドは macOS 専用です）
- 設定画面ですか、インラインフォームですか？
関連スキル
- hig-components-menus -- 選択コントロールを補完するボタンとポップアップボタン
- hig-components-dialogs -- フォームを含むシートとポップオーバー
- hig-components-search -- テキスト入力パターンを共有する検索フィールド
- hig-inputs -- コントロールとのキーボード、ポインター、ジェスチャーによる操作
- hig-foundations -- コントロールのスタイリングにおけるタイポグラフィ、色、レイアウト