ios-design-spec
iOSアプリのUIに関する簡単な質問に対し、HIG監査、SwiftUIコンポーネント選択、アクセシビリティチェックを迅速に行うSkill。
📜 元の英語説明(参考)
Quick HIG audit, SwiftUI component selection, and accessibility check for simple iOS UI questions. Use on main agent for lightweight design decisions. Escalate to designer subagent for full screen design, navigation architecture, or complex interaction design.
🇯🇵 日本人クリエイター向け解説
iOSアプリのUIに関する簡単な質問に対し、HIG監査、SwiftUIコンポーネント選択、アクセシビリティチェックを迅速に行うSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
iOS デザイン仕様
概要
メインエージェント向けの HIG 監査とコンポーネントガイダンスを迅速に行います。コンポーネントの選択、スペーシングルール、アクセシビリティ、テーマへの準拠を、完全なデザイナーサブエージェントを起動することなくカバーします。
開始時のアナウンス: 「このデザインチェックには ios-design-spec スキルを使用しています。」
このスキルを使用する状況:
- ユースケースに合った SwiftUI コンポーネントを選択する場合
- 提案されたレイアウトの HIG 準拠をチェックする場合
- 迅速なアクセシビリティレビュー（タッチターゲット、Dynamic Type、VoiceOver）
- 「X に最適なパターンは何ですか？」という質問に答える場合
designer サブエージェントにエスカレートする状況:
- 新しい画面をゼロから設計する場合
- ナビゲーションアーキテクチャやフローの変更を計画する場合
- 複雑なインタラクションデザイン（ジェスチャー、トランジション、アニメーション）
- 複数画面の再設計
HIG クイックリファレンス
スペーシング (8pt グリッド)
| 用途 | 値 |
|---|---|
| 標準マージン | 16pt |
| ラージタイトルマージン | 20pt |
| セクションスペーシング | 24pt |
| 最小タッチターゲット | 44×44pt |
| リスト行の高さ (デフォルト) | 44pt |
タイポグラフィ (SF Pro)
| スタイル | 用途 |
|---|---|
.largeTitle |
画面タイトル |
.title / .title2 |
セクションヘッダー |
.headline |
リスト行のプライマリラベル |
.body |
デフォルトの本文テキスト |
.caption |
セカンダリ/メタデータ |
SwiftUI コンポーネント決定木
スクロール可能なアイテムのリストですか？
→ List (インタラクティブな行の場合) または ScrollView + LazyVStack (カスタムレイアウトの場合)
モーダルシートですか？
→ タスクに特化したオーバーレイには .sheet、シートのスワイプでデータが失われる場合にのみ .fullScreenCover
確認 / 破壊的なアクションですか？
→ .confirmationDialog (キャンセルが不要な場合を除き Alert ではない)
多くのオプションを持つピッカーですか？
→ シート内では .pickerStyle(.wheel)、コンパクトなインラインには .menu
読み込み状態ですか？
→ ProgressView() を中央に配置、コンテンツが多い画面にはスケルトンビュー
空の状態ですか？
→ ContentUnavailableView (iOS 17+) またはアイコン + タイトル + 説明を含むカスタム VStack
アクセシビリティチェックリスト
- [ ] すべてのインタラクティブ要素は 44×44pt 以上であること
- [ ] テキストは固定サイズではなく、セマンティックスタイル (
.headline,.body) を使用していること — Dynamic Type をサポート - [ ] 画像には
.accessibilityLabelがあるか、装飾的な場合は.accessibilityHidden(true)が設定されていること - [ ] 色が情報を伝える唯一の手段ではないこと
- [ ] コントラスト比は通常テキストで 4.5:1 以上、大きなテキストで 3:1 以上であること
- [ ] アイコンのみのボタンには明確な
.accessibilityLabelがあること - [ ] 必要に応じて、リスト行には
.accessibilityElement(children: .combine)が設定されていること
WhereWeGo テーマ準拠
| トークン | default | summer | xmas |
|---|---|---|---|
| Primary accent | System blue | Orange | Red |
| Background | System background | Light sand | Dark green |
| 実装 | LSThemeManager.shared.theme のプライベートヘルパーでの switch |
ルール: 色をハードコードしないでください。常にテーマヘルパーを介してルーティングしてください。
出力形式
各デザインの質問に対して、以下を提供してください。
- 推奨事項 — 特定の SwiftUI コンポーネントまたはパターン
- HIG 根拠 — 1文で理由
- アクセシビリティに関する注意点 — 必要なラベル/修飾子
- コードスニペット — 最小限の SwiftUI 例 (役立つ場合)
- エスカレート？ — 完全なデザイナーサブエージェントが必要な場合にフラグを立てる
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
iOS Design Spec
Overview
Fast HIG audit and component guidance for the main agent. Covers component selection, spacing rules, accessibility, and theme compliance — without spawning a full designer subagent.
Announce at start: "Using ios-design-spec skill for this design check."
Use this skill when:
- Picking the right SwiftUI component for a use case
- Checking HIG compliance of a proposed layout
- Quick accessibility review (touch targets, Dynamic Type, VoiceOver)
- Answering "what's the right pattern for X?" questions
Escalate to designer subagent when:
- Designing a full new screen from scratch
- Planning navigation architecture or flow changes
- Complex interaction design (gestures, transitions, animations)
- Multi-screen redesign
HIG Quick Reference
Spacing (8pt grid)
| Usage | Value |
|---|---|
| Standard margin | 16pt |
| Large title margin | 20pt |
| Section spacing | 24pt |
| Minimum touch target | 44×44pt |
| List row height (default) | 44pt |
Typography (SF Pro)
| Style | Use |
|---|---|
.largeTitle |
Screen titles |
.title / .title2 |
Section headers |
.headline |
List row primary label |
.body |
Default body text |
.caption |
Secondary/metadata |
SwiftUI Component Decision Tree
Scrollable list of items?
→ List (if interactive rows) or ScrollView + LazyVStack (if custom layout)
Modal sheet?
→ .sheet for task-focused overlays, .fullScreenCover only if sheet swipe-dismiss would lose data
Confirmation / destructive action?
→ .confirmationDialog (not Alert unless no cancel needed)
Picker with many options?
→ .pickerStyle(.wheel) in sheet, .menu for compact inline
Loading state?
→ ProgressView() centered, skeleton views for content-heavy screens
Empty state?
→ ContentUnavailableView (iOS 17+) or custom VStack with icon + title + description
Accessibility Checklist
- [ ] All interactive elements ≥ 44×44pt
- [ ] Text uses semantic styles (
.headline,.body) not fixed sizes — supports Dynamic Type - [ ] Images have
.accessibilityLabelor.accessibilityHidden(true)if decorative - [ ] Color is not the sole means of conveying information
- [ ] Contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text
- [ ] Buttons have clear
.accessibilityLabelwhen icon-only - [ ] List rows have
.accessibilityElement(children: .combine)when needed
WhereWeGo Theme Compliance
| Token | default | summer | xmas |
|---|---|---|---|
| Primary accent | System blue | Orange | Red |
| Background | System background | Light sand | Dark green |
| Implementation | LSThemeManager.shared.theme switch in private helper |
Rule: Never hardcode colors. Always route through the theme helper.
Output Format
For each design question, provide:
- Recommendation — specific SwiftUI component or pattern
- HIG rationale — 1 sentence why
- Accessibility notes — any required labels/modifiers
- Code snippet — minimal SwiftUI example (if helpful)
- Escalate? — flag if this needs full designer subagent