jpskill.com
📦 その他 コミュニティ 🟡 少し慣れが必要 👤 幅広いユーザー

📦 HigComponentsコンテンツ

hig-components-content

Apple製品のアプリで、コンテンツ(情報)を分かり

⏱ この作業 数時間 → 数分

📺 まず動画で見る(YouTube)

▶ 【Claude Code完全入門】誰でも使える/Skills活用法/経営者こそ使うべき ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Apple Human Interface Guidelines for content display components.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Apple製品のアプリで、コンテンツ(情報)を分かり

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
9

💬 こう話しかけるだけ — サンプルプロンプト

  • Hig Components Content の使い方を教えて
  • Hig Components Content で何ができるか具体例で見せて
  • Hig Components Content を初めて使う人向けにステップを案内して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Apple HIG: Content Components

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Adapt to different sizes and contexts. Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes.

  2. Make content accessible. Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions.

  3. Maintain visual hierarchy. Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent.

  4. Use system components first. Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation.

  5. Respect platform conventions. A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects.

  6. Handle empty states. Show a meaningful empty state with guidance on how to populate it, not a blank screen.

  7. Optimize for performance. Use lazy loading, cell reuse, pagination, and prefetching for large datasets.

Reference Index

Reference Topic Key content
charts.md Charts Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs
collections.md Collections Grid/list layouts, compositional layout, selection, reordering, diffable data sources
image-views.md Image Views Aspect ratio handling, content modes, SF Symbol images, accessibility
image-wells.md Image Wells Drag-and-drop image selection, macOS-specific, placeholder content
color-wells.md Color Wells Color selection UI, system color picker, custom color spaces
web-views.md Web Views WKWebView, SFSafariViewController, navigation controls, content restrictions
activity-views.md Activity Views Share sheets, activity items, custom activities, action extensions
lockups.md Lockups Image+text elements, tvOS card layouts, focus effects, shelf layouts

Component Selection Guide

Content Need Recommended Component Platform Notes
Visualizing quantitative data Charts (Swift Charts) iOS 16+, macOS 13+, watchOS 9+
Browsing a grid or list of items Collection View Compositional layout for complex arrangements
Displaying a single image Image View Support aspect ratio fitting; provide accessibility description
Selecting an image via drag or browse Image Well macOS primarily; use image pickers on iOS
Selecting a color Color Well Triggers system color picker; macOS, iOS 14+
Showing web content inline Web View (WKWebView) Use SFSafariViewController for external browsing
Sharing content to other apps Activity View System share sheet with configurable activity types
Content card (image + text) Lockup Primarily tvOS; adaptable to other platforms

Output Format

  1. Component recommendation with rationale, referencing the relevant HIG reference file.
  2. Configuration guidance -- key properties and setup.
  3. Accessibility requirements for the recommended component.
  4. Platform-specific notes for targeted platforms.

Questions to Ask

  1. What type of content? (Quantitative data, images, web content, browsable collection, share action?)
  2. Which platforms?
  3. Static or dynamic content?
  4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.)

Related Skills

  • hig-foundations -- Color, typography, accessibility, and image guidelines
  • hig-patterns -- Data visualization, sharing, and loading patterns
  • hig-components-layout -- Structural containers (scroll views, lists, split views) hosting content
  • hig-platforms -- Platform-specific component behavior (lockups on tvOS, web views on macOS)

Built by Raintree Technology · More developer tools

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。