jpskill.com
💬 コミュニケーション コミュニティ 🟡 少し慣れが必要 👤 幅広いユーザー

📦 HigComponentsシステム

hig-components-system

Appleが定めるデザイン指針（HIG）に基づ

⚡ ⏱ 手作業のあれこれ 1日 → 1時間

📺 まず動画で見る(YouTube)

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

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

📜 元の英語説明(参考)

Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.

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

一言でいうと

Appleが定めるデザイン指針（HIG）に基づ

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

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o hig-components-system.zip https://jpskill.com/download/2971.zip && unzip -o hig-components-system.zip && rm hig-components-system.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/2971.zip -OutFile "$d\hig-components-system.zip"; Expand-Archive "$d\hig-components-system.zip" -DestinationPath $d -Force; ri "$d\hig-components-system.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して hig-components-system.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → hig-components-system フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .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
同梱ファイル
10

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

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

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

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Apple HIG: システム体験

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを使用し、まだカバーされていない情報のみを尋ねてください。

主要原則

一般

  1. 一目でわかる、即座の価値。 システム体験は、ユーザーがアプリを起動せずに目にするサーフェスに、アプリの最も重要なコンテンツをもたらします。数秒の注意を引くようにデザインしてください。

  2. プラットフォームのコンテキストを尊重する。 ロック画面ウィジェットには、ホーム画面ウィジェットとは異なる制約があります。コンプリケーションは、トップシェルフアイテムよりもはるかに小さいです。

ウィジェット

  1. 関連情報のみを表示し、すべてを表示しない。 最も有用なサブセットを、適切に更新して表示してください。

  2. 異なるレイアウトで複数のサイズをサポートする。 各サイズは、他のサイズの拡大版ではなく、思慮深いデザインであるべきです。

  3. タップでディープリンクする。 ユーザーをアプリのルート画面ではなく、関連するコンテンツに誘導してください。

Live Activities

  1. 明確な開始と終了があるイベントを追跡する。 配達、スコア、タイマー、乗車などです。Dynamic Island とロック画面の両方に対応するようにデザインしてください。

  2. 常に最新でタイムリーに保つ。 古いデータは信頼を損ないます。イベントが終了したら速やかに終了してください。

通知

  1. ユーザーの注意を尊重する。 ユーザーが本当に気にする情報のみを通知してください。プロモーションや価値の低い通知は送信しないでください。

  2. アクション可能で自己完結型。 アプリを開かなくても理解し、行動できる十分なコンテキストを含めてください。通知アクションをサポートしてください。スレッド化とグループ化を使用してください。

コンプリケーション

  1. ウォッチフェイスに焦点を絞ったデータ。 最小限で有用な表現をデザインしてください。複数のファミリーをサポートしてください。更新の予算を賢く管理してください。

ホーム画面クイックアクション

  1. 最も一般的なタスクを3〜4つ。 短いタイトル、オプションのサブタイトル、関連する SF Symbol アイコンを使用してください。

トップシェルフ

  1. tvOS のショーケース。 新しいエピソード、特集アイテム、最近のコンテンツなど、魅力的なコンテンツをフィーチャーしてください。

App Clips

  1. 厳格なサイズ予算内で、即座に焦点を絞った機能。 App Store からダウンロードせずに素早くロードされます。即座のタスクに必要なもののみを提供し、その後、完全なアプリのインストールを提案してください。

App Shortcuts

  1. 主要なアクションを Siri と Spotlight に表示する。 頻繁なタスクのショートカットを定義してください。自然で会話的なトリガーフレーズを使用してください。

参照インデックス

参照 トピック 主要コンテンツ
widgets.md ウィジェット 一目でわかる情報、サイズ、ディープリンク、タイムライン
live-activities.md Live Activities リアルタイム追跡、Dynamic Island、ロック画面
notifications.md 通知 注意、アクション、グループ化、コンテンツ
complications.md コンプリケーション ウォッチフェイスデータ、ファミリー、予算化された更新
home-screen-quick-actions.md クイックアクション Haptic Touch、一般的なタスク、SF Symbols
top-shelf.md トップシェルフ 特集コンテンツ、ショーケース
app-clips.md App Clips 即時使用、軽量、焦点を絞ったタスク、NFC/QR
watch-faces.md ウォッチフェイス カスタムコンプリケーション、フェイス共有
app-shortcuts.md App Shortcuts Siri、Spotlight、音声トリガー

出力形式

  1. システム体験の推奨 -- どのサーフェスがユースケースに最適か。
  2. コンテンツ戦略 -- 何を表示するか、優先順位、何を省略するか。
  3. 更新頻度 -- システムの予算制約を含む更新レート。
  4. サイズ/ファミリーのバリアント -- どれをサポートし、レイアウトがどのように適応するか。
  5. ディープリンクの動作 -- タップするとユーザーがどこに移動するか。

質問事項

  1. アプリの外に表示する必要がある情報は何ですか？
  2. どのプラットフォームですか？
  3. データはどのくらいの頻度で更新されますか？
  4. 主な「一目でわかる」ニーズは何ですか？

関連スキル

  • hig-components-status -- ウィジェットまたは Live Activities の進捗インジケーター
  • hig-inputs -- システム体験のインタラクションパターン（コンプリケーションの Digital Crown など）
  • hig-technologies -- App Shortcuts の Siri、コンプリケーションの HealthKit、App Clips の NFC

Built by Raintree Technology · More developer tools

使用する場合

このスキルは、概要に記載されているワークフローまたはアクションを実行するのに適用できます。

制限事項

  • このスキルは、タスクが上記の範囲と明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して説明を求めてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Apple HIG: System Experiences

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

Key Principles

General

  1. Glanceable, immediate value. System experiences bring your app's most important content to surfaces the user sees without launching your app. Design for seconds of attention.

  2. Respect platform context. A Lock Screen widget has different constraints than a Home Screen widget. A complication is far smaller than a top shelf item.

Widgets

  1. Show relevant information, not everything. Display the most useful subset, updated appropriately.

  2. Support multiple sizes with distinct layouts. Each size should be a thoughtful design, not a scaled version of another.

  3. Deep-link on tap. Take users to the relevant content, not the app's root screen.

Live Activities

  1. Track events with a clear start and end. Deliveries, scores, timers, rides. Design for both Dynamic Island and Lock Screen.

  2. Stay updated and timely. Stale data undermines trust. End promptly when the event concludes.

Notifications

  1. Respect user attention. Only send notifications for information users genuinely care about. No promotional or low-value notifications.

  2. Actionable and self-contained. Include enough context to understand and act without opening the app. Support notification actions. Use threading and grouping.

Complications

  1. Focused data on the watch face. Design for the smallest useful representation. Support multiple families. Budget updates wisely.

Home Screen Quick Actions

  1. 3-4 most common tasks. Short titles, optional subtitles, relevant SF Symbol icons.

Top Shelf

  1. tvOS showcase. Feature content that entices: new episodes, featured items, recent content.

App Clips

  1. Instant, focused functionality within a strict size budget. Load quickly without App Store download. Only what's needed for the immediate task, then offer full app install.

App Shortcuts

  1. Surface key actions to Siri and Spotlight. Define shortcuts for frequent tasks. Use natural, conversational trigger phrases.

Reference Index

Reference Topic Key content
widgets.md Widgets Glanceable info, sizes, deep linking, timeline
live-activities.md Live Activities Real-time tracking, Dynamic Island, Lock Screen
notifications.md Notifications Attention, actions, grouping, content
complications.md Complications Watch face data, families, budgeted updates
home-screen-quick-actions.md Quick actions Haptic Touch, common tasks, SF Symbols
top-shelf.md Top shelf Featured content, showcase
app-clips.md App Clips Instant use, lightweight, focused task, NFC/QR
watch-faces.md Watch faces Custom complications, face sharing
app-shortcuts.md App Shortcuts Siri, Spotlight, voice triggers

Output Format

  1. System experience recommendation -- which surface best fits the use case.
  2. Content strategy -- what to display, priority, what to omit.
  3. Update frequency -- refresh rate including system budget constraints.
  4. Size/family variants -- which to support and how layout adapts.
  5. Deep link behavior -- where tapping takes the user.

Questions to Ask

  1. What information needs to surface outside the app?
  2. Which platform?
  3. How frequently does the data update?
  4. What is the primary glanceable need?

Related Skills

  • hig-components-status -- Progress indicators in widgets or Live Activities
  • hig-inputs -- Interaction patterns for system experiences (Digital Crown for complications)
  • hig-technologies -- Siri for App Shortcuts, HealthKit for complications, NFC for App Clips

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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。