hig-components-content について
hig-components-contentは、チャート、コレクション、画像、WebビューなどのコンテンツコンポーネントにApple HIGを適用するスキルです。アクセシビリティ、プラットフォームの慣習、パフォーマンスを考慮した選択と設定を支援します。
主な機能
- 01コンテンツコンポーネントの選択指針
- 02コンポーネント設定の提案
- 03アクセシビリティ要件
- 04プラットフォーム別の注意点
- 05大規模データの性能に関する指針
活用シーン
- 01数値データを表示するコンポーネントの選択
- 02アクセシブルな画像やコレクション表示の設計
- 03共有またはインラインWeb表示用コンポーネントの選択
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ raintree-technology/ hig-doctor --skill hig-components-contentインストール後、Claude Code で/hig-components-contentを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/activity-views.mdcharts.mdcollections.mdcolor-wells.mdimage-views.mdimage-wells.mdlockups.mdweb-views.md詳細
Apple HIG: コンテンツコンポーネント
質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、まだカバーされていない情報についてのみ質問してください。
主要な原則
-
さまざまなサイズとコンテキストに適応させます。 コンテンツコンポーネントは、画面サイズ、向き、マルチタスキング構成をまたいで機能する必要があります。Auto Layout とサイズクラスを使用してください。
-
コンテンツをアクセシブルにします。 チャートにはオーディオグラフのサポートが必要です。画像には代替テキストが必要です。コレクションには適切な VoiceOver ナビゲーション順序が必要です。すべてのコンテンツコンポーネントにはラベルと説明が必要です。
-
視覚的な階層を維持します。 スペーシング、サイジング、グループ化を使用して、明確な情報階層を確立してください。主要なコンテンツは視覚的に目立つようにします。
-
まずシステムコンポーネントを使用します。 カスタムで構築する前に、UICollectionView、SwiftUI Charts、WKWebView を評価してください。システムコンポーネントには、組み込みのアクセシビリティとプラットフォーム適応が備わっています。
-
プラットフォームの慣例を尊重します。 tvOS のコレクションは、パララックス付きの大きなロックアップを使用します。iOS の同じコレクションは、タッチターゲット付きのコンパクトなセルを使用します。visionOS では、コンテンツに奥行きとホバーエフェクトが加わります。
-
空の状態を処理します。 空白の画面ではなく、どのように入力するかのガイダンスを含む意味のある空の状態を表示してください。
-
パフォーマンスを最適化します。 大規模なデータセットには、遅延読み込み、セルの再利用、ページネーション、プリフェッチを使用してください。
リファレンスインデックス
| リファレンス | トピック | 主な内容 |
|---|---|---|
| charts.md | チャート | Swift Charts、バー/ライン/エリア/ポイントマーク、チャートのアクセシビリティ、オーディオグラフ |
| collections.md | コレクション | グリッド/リストレイアウト、コンポジショナルレイアウト、選択、並べ替え、差分可能データソース |
| image-views.md | イメージビュー | アスペクト比の処理、コンテンツモード、SF Symbol 画像、アクセシビリティ |
| image-wells.md | イメージウェル | ドラッグ&ドロップによる画像選択、macOS 固有、プレースホルダーコンテンツ |
| color-wells.md | カラーウェル | 色選択 UI、システムカラーピッカー、カスタム色空間 |
| web-views.md | Web ビュー | WKWebView、SFSafariViewController、ナビゲーションコントロール、コンテンツ制限 |
| activity-views.md | アクティビティビュー | 共有シート、アクティビティ項目、カスタムアクティビティ、アクション拡張機能 |
| lockups.md | ロックアップ | 画像+テキストの要素、tvOS カードレイアウト、フォーカスエフェクト、シェルフレイアウト |
コンポーネント選択ガイド
| コンテンツのニーズ | 推奨コンポーネント | プラットフォームに関する注意 |
|---|---|---|
| 定量データの可視化 | チャート (Swift Charts) | iOS 16+、macOS 13+、watchOS 9+ |
| 項目のグリッドまたはリストの閲覧 | コレクションビュー | 複雑な配置にはコンポジショナルレイアウト |
| 単一画像の表示 | イメージビュー | アスペクト比のフィッティングをサポート、アクセシビリティの説明を提供 |
| ドラッグまたはブラウズによる画像の選択 | イメージウェル | 主に macOS、iOS ではイメージピッカーを使用 |
| 色の選択 | カラーウェル | システムカラーピッカーを起動、macOS、iOS 14+ |
| Web コンテンツのインライン表示 | Web ビュー (WKWebView) | 外部ブラウジングには SFSafariViewController を使用 |
| 他のアプリへのコンテンツ共有 | アクティビティビュー | 設定可能なアクティビティタイプを備えたシステム共有シート |
| コンテンツカード (画像+テキスト) | ロックアップ | 主に tvOS、他のプラットフォームにも適応可能 |
出力形式
- 根拠を伴うコンポーネントの推奨 -- 関連する HIG リファレンスファイルを参照してください。
- 構成のガイダンス -- 主要なプロパティとセットアップ。
- 推奨コンポーネントのアクセシビリティ要件。
- 対象プラットフォームに固有の注意事項。
尋ねるべき質問
- コンテンツの種類は何ですか? (定量データ、画像、Web コンテンツ、閲覧可能なコレクション、共有アクション?)
- どのプラットフォームですか?
- 静的コンテンツですか、動的コンテンツですか?
- コンテンツの量はどのくらいですか? (項目が少数か、数百/数千かで、コンポーネントの選択と最適化が変わります。)
関連スキル
- hig-foundations -- 色、タイポグラフィ、アクセシビリティ、画像のガイドライン
- hig-patterns -- データの可視化、共有、読み込みのパターン
- hig-components-layout -- コンテンツを格納する構造コンテナー(スクロールビュー、リスト、分割ビュー)
- hig-platforms -- プラットフォーム固有のコンポーネントの動作(tvOS のロックアップ、macOS の Web ビュー)