apple-design-tactics について
Appleプラットフォームの体験やプレミアムな製品ページを設計するチーム向けの、アクセシビリティとApple流マーケティングのスキルです。WCAGの指針と、控えめなビジュアル、コピー、価格構成の手法を扱います。
主な機能
- 01WCAG 2.2 AAに沿った設計
- 02文字サイズや動きの設定への対応
- 03利点を軸にしたコピー構成
- 04価格、ページ構成、製品画像の計画
活用シーン
- 01コントラスト、フォーカス、セマンティックラベルの確認
- 02視差効果を減らす設定への代替策
- 03製品ページの見出しとセクション文の作成
- 04価格情報とヒーロー画像の配置
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/apple-design-tacticsを入力して読み込まれたか確認します。
同梱ファイルreferences/accessibility-inclusive.mdreferences/marketing-tactics-brand.md
詳細
Apple Design — 戦術（アクセシビリティ · マーケティングとブランド）
分野横断的な人間工学の視点が2つあります。すべての人のためのデザインと、Appleのように説得することです。
使用する場面
- Appleのアクセシビリティ基準を満たす場合、またはアクセシビリティの制約がAppleのデザイン言語全体を形作る理由を理解する場合。
- プレミアムなマーケティングのコピーのトーン、価格設定、写真、ページの構成を作成する場合。
基本ルール — アクセシビリティ
- アクセシビリティは後付けではなく、標準です（縁石カット効果：特殊なケースへの対応はすべての人に役立ちます）。Appleのルールの多くは、アクセシビリティが理由となって設けられています。Dynamic Type → レイアウトの再配置、Reduce Transparency → 不透明な素材への代替、Reduce Motion → フェードによる代替。
- POUR / WCAG 2.2 AA：セマンティックなHTMLとARIA、アクセス可能な名前、色だけに頼らない、テキストのコントラスト比4.5:1、視認できる
:focus-visibleリング、フォーカスの管理、prefers-reduced-motion/prefers-contrast/prefers-reduced-transparencyへの対応。
基本ルール — マーケティングとブランド
- 機能より先に感情を伝え、その後に機能を裏付けとして示します。 セクションごとにアイデアは1つに絞ります。抑制の効いた表現と余白が、プレミアム感を生みます。
- 製品を主役に、継ぎ目のない白または黒の背景に柔らかな影と繊細な光彩を添えます。ブランド表現は静かでモノクロームにまとめます。
- コピーのトーン： 短く、自信に満ち、メリットを前面に出します。見出しはタイトルケースにし、具体的な数値を使います（「これまでで最もパワフルなiPhone。」）。価格はプレミアムな選択肢を先に示し、基準となる価格を提示してから、月額で表現します。
参考資料
| ファイル | 用途 |
|---|---|
references/accessibility-inclusive.md | VoiceOver/Dynamic Type/Reduce-*の制約、ARIAの実例、メディアクエリ、アクセシビリティチェックリスト |
references/marketing-tactics-brand.md | ビジュアル、コピー、説得の戦術、ヒーロー見出しの構成、価格レイアウト、製品写真のCSS |
よくある間違い
- 色だけに意味を持たせる、固定のフォントサイズ、オプトアウトできないモーション、ぼかしの上でしか読めないテキスト、ラベルやフォーカスの欠落。
- 機能の羅列、根拠のない誇張、余白の不足、一貫性のないトーン、偽りの品薄感、情報過多のヒーロー画像、月額料金を隠すこと、競合するCTA。
関連： 代替手段を用意すべきモーション → apple-design-motion · コントラストの代替が必要な素材 → apple-design-materials · これらの戦術を取り入れるページ → apple-design-web。
コメント
Markdown 対応