mcpField
H
hig-patterns

hig-patterns

github.com/raintree-technologyデザイン・UI148701 回インストール6 日前に更新
リポジトリ

hig-patterns について

Apple Human Interface Guidelinesのインタラクションパターンを扱う設計スキルです。オンボーディング、フィードバック、入力、通知などのユーザーフローについて、実装資料やプラットフォームごとの考慮事項とともに選択を支援します。

主な機能

  1. 01インタラクションパターンの選択指針
  2. 02フィードバック、読み込み、取り消しのパターン
  3. 03オンボーディングとアカウントフローの指針
  4. 04入力、通知、権限のパターン
  5. 05インタラクション分野別のリファレンス一覧

活用シーン

  1. 01簡潔なオンボーディングフローの設計
  2. 02ユーザー操作へのフィードバック選定
  3. 03権限リクエストと入力フォームの計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/raintree-technology/hig-doctor --skill hig-patterns

インストール後、Claude Code で/hig-patternsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
charting-data.md
collaboration-and-sharing.md
drag-and-drop.md
entering-data.md
feedback.md
file-management.md
going-full-screen.md
launching.md
live-viewing-apps.md
loading.md
managing-accounts.md
managing-notifications.md
modality.md
multitasking.md
offering-help.md
onboarding.md
playing-audio.md
playing-haptics.md
playing-video.md
printing.md
ratings-and-reviews.md
searching.md
settings.md
undo-and-redo.md
workouts.md

詳細

Apple HIG: インタラクションパターン

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

主要な原則

  1. モダリティを最小限に抑える。 モダリティは、注意を引くことが重要である場合、タスクを完了または中止する必要がある場合、または変更の保存が不可欠である場合にのみ使用してください。非モーダルの代替手段を優先してください。

  2. 明確なフィードバックを提供する。 すべてのアクションは、視覚的、聴覚的、または触覚的な応答を生み出すべきです。不確定な待機にはアクティビティインジケーター、確定した待機にはプログレスバー、物理的な確認にはハプティクスを使用してください。

  3. 確認ダイアログよりも取り消しをサポートする。 破壊的なアクションは、可能な場合は元に戻せるようにすべきです。取り消しは、ほとんどの場合「よろしいですか?」よりも優れています。

  4. すばやく起動する。 最初の画面へシームレスに遷移する起動画面を表示してください。ロゴ付きのスプラッシュスクリーンは使用しないでください。以前の状態を復元してください。

  5. サインインを後回しにする。 アカウント作成を要求する前に、ユーザーが探索できるようにしてください。Sign in with Apple とパスキーをサポートしてください。

  6. オンボーディングは簡潔に保つ。 最大3画面まで。ユーザーがスキップできるようにしてください。段階的な開示とコンテキストに応じたヒントを通じて教えてください。

  7. 段階的な開示を使用する。 まず必須のものを表示し、ユーザーが詳細を掘り下げられるようにしてください。すべてのオプションを1つの画面に詰め込んで圧倒しないでください。

  8. ユーザーの注意を尊重する。 通知を統合し、中断を最小限に抑え、アラートをユーザーが制御できるようにしてください。マーケティングに通知を決して使用しないでください。

リファレンス索引

リファレンストピック主な内容
charting-data.mdデータのグラフ化データ可視化パターン、アクセシブルなグラフ、インタラクティブな要素
collaboration-and-sharing.mdコラボレーションと共有共有シート、アクティビティビュー、共同編集、SharePlay
drag-and-drop.mdドラッグ&ドロップドラッグソース、ドロップターゲット、スプリングローディング、複数項目のドラッグ、視覚的フィードバック
entering-data.mdデータの入力テキストフィールド、ピッカー、ステッパー、入力の検証、キーボードの種類、自動入力
feedback.mdフィードバックアラート、アクションシート、ハプティクスパターン、音によるフィードバック、視覚的インジケーター
file-management.mdファイル管理ドキュメントブラウザ、ファイルプロバイダ、iCloud 連携、ドキュメントのライフサイクル
going-full-screen.mdフルスクリーンへの移行フルスクリーンへの遷移、没入型コンテンツ、フルスクリーンの終了
launching.md起動起動画面、状態の復元、コールド起動とウォーム起動
live-viewing-apps.mdライブ表示アプリライブコンテンツの表示、リアルタイム更新、Live Activities、Dynamic Island
loading.md読み込みアクティビティインジケーター、プログレスビュー、スケルトン画面、遅延読み込み、プレースホルダー
managing-accounts.mdアカウント管理Sign in with Apple、パスキー、アカウント作成、認証情報の自動入力、アカウント削除
managing-notifications.md通知の管理権限のリクエスト、グループ化、アクション可能な通知、仮配信
modality.mdモーダリティシート、アラート、ポップオーバー、フルスクリーンモーダル、それぞれを使うべき場面
multitasking.mdマルチタスキングiPad の Split View、Slide Over、Stage Manager、レスポンシブレイアウト、サイズクラスの遷移
offering-help.mdヘルプの提供状況に応じたヒント、オンボーディングのヒント、ヘルプメニュー、サポートリンク
onboarding.mdオンボーディングウェルカム画面、機能のハイライト、段階的なオンボーディング、スキップオプション
playing-audio.mdオーディオの再生オーディオセッション、バックグラウンドオーディオ、Now Playing、オーディオルーティング、割り込み
playing-haptics.mdハプティクスの再生Core Haptics、UIFeedbackGenerator、ハプティクスパターン、カスタムハプティクス
playing-video.mdビデオの再生ビデオプレーヤーのコントロール、ピクチャーインピクチャー、AirPlay、フルスクリーンビデオ
printing.md印刷印刷ダイアログ、ページ設定、AirPrint 連携
ratings-and-reviews.md評価とレビューSKStoreReviewController、タイミング、頻度の制限、アプリ内フィードバック
searching.md検索検索バー、サジェスチョン、スコープ検索、結果の表示、最近の項目
settings.md設定アプリ内設定と設定アプリ、環境設定の整理、トグル、デフォルト
undo-and-redo.md取り消しとやり直しシェイクで取り消し、取り消し/やり直しスタック、多段階の取り消し
workouts.mdワークアウトワークアウトセッション、ライブ指標、Always On ディスプレイ、サマリー、HealthKit

パターン選択ガイド

ユーザーの目的推奨パターン避けること
アプリの初回利用体験簡潔なオンボーディング(最大3画面)+段階的な情報開示長いチュートリアル、必須のサインアップ
コンテンツの読み込み待ちスケルトン画面または進行状況インジケーター状況を説明しないブロッキングスピナー
破壊的な操作の確認取り消し機能過剰な「本当によろしいですか?」ダイアログ
ユーザー入力の収集インライン検証、スマートなデフォルト、自動入力簡単な入力のためのモーダルフォーム
権限のリクエスト説明を添え、必要なタイミングで状況に応じてリクエスト起動時にすべての権限をリクエスト
フィードバックの提供触覚フィードバック+視覚的なインジケーター確認のない無反応な操作
環境設定の整理頻繁に使う項目はアプリ内の設定に配置すべての設定をシステムの「設定」アプリ内に埋もれさせる

出力形式

  1. 推奨パターンとその根拠。関連するリファレンスファイルを挙げてください。
  2. 実装手順。各画面または状態を網羅してください。
  3. プラットフォームごとの違い。対象プラットフォームに応じて説明してください。
  4. よくある落とし穴。このパターンにおける HIG 違反を示してください。

確認する質問

  1. アプリ内のどこにこのパターンが登場しますか?その前後には何がありますか?
  2. 対象プラットフォームはどれですか?
  3. 新規に設計しますか、それとも既存のフローを改善しますか?
  4. 機密性の高い操作が含まれますか?(破壊的な操作、支払い、権限)

関連スキル

  • hig-foundations -- あらゆるパターンの基盤となる、アクセシビリティ、色、タイポグラフィ、プライバシーの原則
  • hig-platforms -- プラットフォーム固有のパターン実装
  • hig-components-layout -- ナビゲーションパターン向けの構造コンポーネント(タブバー、サイドバー、分割ビュー)
  • hig-components-content -- パターン内のコンテンツ表示(グラフ、コレクション、検索結果)

Raintree Technology 作成 · その他の開発者向けツール

コメント