product-design

プロダクトデザイン — Nivel Apple

概要

Apple レベルのプロダクトデザイン — ビジュアルシステム、UX フロー、アクセシビリティ、独自のビジュアル言語、デザイントークン、プロトタイピング、ハンドオフ。Figma、デザインシステム、タイポグラフィ、カラー、スペーシング、モーションデザイン、認知デザインの原則を扱います。次の用途で有効にしてください：デザインシステムの作成、ビジュアル言語の定義、UX のレビュー、アクセシビリティ、デザイントークン、プロダクトのブランディング、UI 批評。

このスキルを使用する場合

• この分野で専門的な支援が必要な場合

このスキルを使用しない場合

• タスクがプロダクトデザインと無関係な場合
• よりシンプルで、より具体的なツールで対応できる場合
• 専門知識を必要としない汎用的な支援をユーザーが求めている場合

仕組み

「デザインとは、見た目や感触だけではありません。デザインとは、その機能のあり方です。」 — Steve Jobs

---

Apple デザインに着想を得た 10 のヒューリスティック

このリストは編集上の要約であり、Jony Ive または Apple が公式に掲げたリストではありません。以下の Auri トークンはブランドの例です。既存のアイデンティティに合わせて調整し、実際のコントラストをテストし、reduced motion、キーボード、スクリーンリーダーに配慮してください。

1. 徹底したシンプルさ — 不可欠でないものはすべて取り除きます
2. 素材への誠実さ — すべての要素には存在する理由があります
3. 少ないほど豊か — 抑制はデザイン上の判断です
4. システムとしての一貫性 — すべてが一つのシステムの一部です
5. 細部が重要 — ユーザーは気づかなくても感じ取ります
6. 機能が形を決める — 美しさは目的に役立ちます
7. 長く使えること — 時を経ても古びないデザイン
8. アクセシビリティを標準に — 付加要素ではありません
9. 画面間の連続性 — 統一された体験
10. 心を弾ませる驚き — 想定外の喜び

認知デザイン

• 認知負荷ゼロ — ユーザーに考えさせてはいけません
• 明確なアフォーダンス — クリックできるものは、クリックできるように見えます
• 即時のフィードバック — すべての操作に視覚的な反応があります
• エラーを未然に防ぐ — エラーが起きないようにするデザイン

---

優れたデザインシステムの構成

design-system/
├── tokens/
│   ├── colors.json       # paleta completa com semantica
│   ├── typography.json   # escala tipografica
│   ├── spacing.json      # grid e espacamento
│   ├── shadows.json      # elevacao e profundidade
│   ├── motion.json       # duracao e easing
│   └── radius.json       # bordas arredondadas
├── components/
│   ├── atoms/            # Button, Input, Icon, Badge
│   ├── molecules/        # Card, Form, NavItem
│   └── organisms/        # Header, Sidebar, Modal
├── patterns/
│   ├── onboarding.md     # primeiro acesso
│   ├── empty-states.md   # estados vazios
│   ├── loading.md        # estados de carregamento
│   └── errors.md         # tratamento de erros
└── guidelines/
    ├── voice-tone.md     # voz e tom
    ├── imagery.md        # fotografia e ilustracao
    └── accessibility.md  # WCAG 2.1 AA

デザイントークン — Auri の例

{
  "color": {
    "brand": {
      "primary": "#6C63FF",
      "primary-dark": "#5A52E0",
      "accent": "#FF6B6B",
      "surface": "#F8F7FF"
    },
    "semantic": {
      "success": "#22C55E",
      "warning": "#F59E0B",
      "error": "#EF4444",
      "info": "#3B82F6"
    },
    "neutral": {
      "900": "#111827",
      "800": "#1F2937",
      "600": "#4B5563",
      "400": "#9CA3AF",
      "200": "#E5E7EB",
      "50":  "#F9FAFB"
    }
  },
  "typography": {
    "display": { "size": "48px", "weight": "700", "line": "1.1" },
    "h1": { "size": "36px", "weight": "700", "line": "1.2" },
    "h2": { "size": "28px", "weight": "600", "line": "1.3" },
    "body": { "size": "16px", "weight": "400", "line": "1.6" },
    "small": { "size": "14px", "weight": "400", "line": "1.5" }
  },
  "spacing": {
    "xs": "4px", "sm": "8px", "md": "16px",
    "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px"
  },
  "radius": {
    "sm": "4px", "md": "8px", "lg": "12px",
    "xl": "16px", "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 3px rgba(0,0,0,0.12)",
    "md": "0 4px 12px rgba(0,0,0,0.15)",
    "lg": "0 8px 24px rgba(0,0,0,0.18)",
    "xl": "0 20px 60px rgba(0,0,0,0.22)"
  },
  "motion": {
    "fast": "150ms ease-out",
    "normal": "250ms ease-in-out",
    "slow": "400ms cubic-bezier(0.34, 1.56, 0.64, 1)"
  }
}

---

UX フローの構成

1. Entry Point (como o usuario chega)
2. Context (o que o usuario sabe/quer)
3. Action (o que o usuario faz)
4. Feedback (resposta imediata do sistema)
5. Outcome (o que o usuario conseguiu)
6. Next Step (o que vem depois naturalmente)

優れたオンボーディング（最初の 5 分間）

Tela 1: Promessa — "O que voce vai conseguir"
  - Uma frase impactante
  - Uma imagem que mostra o resultado
  - CTA: "Comecar" (nao "Criar conta")

Tela 2: Acao imediata — primeiro valor antes de cadastro
  - Deixe o usuario experimentar algo real
  - Formulario minimo (email apenas)
  - Progresso visivel (1 de 3)

Tela 3: Personalizacao — "Me conte sobre voce"
  - Max 3 perguntas
  - Visual, nao texto
  - Pula disponivel sempre

Tela 4: Momento Aha — primeiro sucesso real
  - O usuario faz algo que funciona
  - Celebracao genuina (nao excessiva)
  - "Voce acabou de [acao de valor]"

心を弾ませる空の状態

Nao mostre: "Nenhum item encontrado"
Mostre:
  - Ilustracao contextual
  - Mensagem de oportunidade: "Ainda nao ha [X]. Crie o primeiro!"
  - CTA primario
  - Talvez: dica de como comecar

---

Voice UI 独自の原則

1. 視覚的な負荷ゼロ — ユーザーには何も見えません（聞こえるだけです）
2. 簡単に取り消せること — 「元に戻す」は常に可能です
3. 確認は任意 — 取り消せない操作に限ります
4. 応答にバリエーションを持たせる — 同じフレーズを二度使いません
5. 沈黙しても大丈夫 — ヘルプが必要か尋ねる前に 2 秒間待ちます

音声応答の構成

[Hook opcional] + [Resposta core] + [Acao ou pergunta]

Ruim: "Desculpe, nao entendi o que voce disse. Pode repetir?"
Bom:  "Nao captei bem. Pode repetir de outro jeito?"

Ruim: "Claro! Posso ajudar com isso. A resposta para sua pergunta e..."
Bom:  "A resposta e: [resposta direta]"

Auri のインタラクションスクリプト

Primeiro uso:
"Oi! Sou a Auri. Pode me perguntar qualquer coisa — de decisoes de negocio
a ideias criativas. Como posso ajudar hoje?"

Retorno (usuario ja conhecido):
"Bem-vindo de volta! Onde paramos foi em [topico]. Quer continuar?"

Nao entendeu:
"Nao peguei bem. Tenta de outro jeito?"

Encerramento:
"Qualquer coisa, e so chamar. Ate logo!"

---

建設的な批評のフレームワーク

1. OBSERVACAO: O que eu vejo (sem julgamento)
   "Noto que o botao principal esta no canto inferior direito"

2. PRINCIPIO: Qual principio esta sendo testado
   "Hierarquia visual e posicionamento de CTA primario"

3. IMPACTO: O que isso causa ao usuario
   "Usuarios que usam o polegar precisam esticar para alcanca-lo"

4. ALTERNATIVA: Sugestao construtiva
   "Considerar posicionar acima do fold, centralizado"

5. TRADE-OFF: O que se perde/ganha
   "Mais acessivel, mas perde area para conteudo"

UI 批評チェックリスト

• 視覚的な階層が明確（視線の誘導がわかる）
• 適切なコントラスト（WCAG AA：テキストは 4.5:1）
• 最小タッチサイズ（モバイルで 44x44px）
• デザインシステムとの一貫性
• インタラクティブな状態が定義されている（hover/active/disabled/focus）
• レスポンシブ対応（モバイルファースト）
• ローディング状態と空の状態
• エラーを役立つメッセージで処理
• アクセシビリティ（labels、ARIA roles、keyboard nav）
• 知覚されるパフォーマンス（スケルトン画面、楽観的 UI）

---

ビジュアルコンセプト

Auri は人間味のある温かさを備えた知性です。ロボットではなく、そこに寄り添う存在です。 ビジュアルアイデンティティでは、親しみやすい洗練さを伝えます。

メインパレット

Roxo Auri:     #6C63FF  — identidade, inteligencia, inovacao
Rosa Auri:     #FF6B9D  — calor, empatia, humanidade
Branco Puro:   #FFFFFF  — clareza, espaco, respiro
Grafite Suave: #1A1A2E  — autoridade, profundidade, noite

タイポグラフィ

Display/Titulos: Inter (ou SF Pro para Apple) — Bold 700
Corpo de texto:  Inter Regular 400 — linha 1.6
Mono/Codigo:     JetBrains Mono — para elementos tecnicos

ロゴのコンセプト

Forma: Onda de audio estilizada formando a letra "A"
Cor: Gradiente roxo → rosa (esquerda para direita)
Espaco negativo: Sugestao de microfone ou ear
Versao dark/light: Ambas definidas
Tamanho minimo: 24px (icone), 120px (lockup completo)

---

デザインスタック

ツール	用途
Figma	UI デザイン、プロトタイピング、ハンドオフ
FigJam	ユーザージャーニー、ワークショップ、アイデア創出
Zeroheight	デザインシステムのドキュメント化
Lottie	アニメーション（After Effects/Figma からエクスポート）
Mobbin	UI パターンの参考資料
Screenlane	実際の UI からのインスピレーション

デザインスプリントのプロセス（5 日間）

Segunda: Entender — pesquisa, user interviews, definir o problema
Terca:   Divergir — crazy 8s, sketches individuais, lightning demos
Quarta:  Decidir — vote, storyboard, decisao final
Quinta:  Prototipar — prototipo de alta fidelidade no Figma
Sexta:   Testar — 5 usuarios, insights, iterar

---

8. コマンド

コマンド	アクション
/design-critique	デザインの構造化された批評
/design-tokens	プロジェクトのトークンを生成
/ux-flow	エクスペリエンスのフローをマッピング
/voice-ux	音声インタラクションのデザイン
/onboarding	オンボーディングフローを作成
/design-system	完全なデザインシステムを構築
/accessibility	アクセシビリティ監査
/visual-identity	プロダクトのビジュアルアイデンティティを定義

ベストプラクティス

• プロジェクトと要件について、明確で具体的なコンテキストを提供してください
• 本番コードに適用する前に、すべての提案を確認してください
• 包括的な分析のために、他の補完的なスキルと組み合わせてください

よくある落とし穴

• このスキルを、その専門領域外のタスクに使用すること
• 具体的なコンテキストを理解せずに推奨事項を適用すること
• 正確な分析に十分なプロジェクトコンテキストを提供しないこと

関連スキル

• analytics-product - 分析を強化するための補完的なスキル
• growth-engine - 分析を強化するための補完的なスキル
• monetization - 分析を強化するための補完的なスキル
• product-inventor - 分析を強化するための補完的なスキル

制限事項

• このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代替として扱わないでください。
• 必要な入力、権限、安全境界、成功基準が欠けている場合は、停止して明確化を求めてください。