mcpField
N
native-app-designer

native-app-designer

github.com/curiositechデザイン・UI257229 回インストール2 日前に更新
リポジトリ

native-app-designer について

iOS、Mac、Webアプリのデザイナー向けに、ネイティブUI、モーション、コンポーネント設計を扱うスキルです。独自の視覚的階層や自然な動き、プラットフォーム別の指針を示し、典型的な設計上の問題も解説します。

主な機能

  1. 01SwiftUI、UIKit、Web UIの設計
  2. 02物理的な動きとマイクロインタラクション
  3. 03オンボーディングとコンポーネントライブラリ
  4. 04Metal、WebGLのカスタムシェーダー
  5. 05プラットフォーム別の設計指針

活用シーン

  1. 01iOSまたはMacアプリのUI設計
  2. 02Webアプリへの自然な動きの追加
  3. 03個性のあるオンボーディングの計画
  4. 04カスタム効果を使ったコンポーネントの作成

MCP 対応

利用可能なMCP連携として、コンポーネントの着想と構築に使う21st Century Dev、デザイン素材やモックアップ生成向けのStability AI、デザインパターン調査向けのFirecrawlが挙げられています。任意のFigma MCPとApple Developer Docs MCPにも触れています。

インストール

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

$npx skills add https://github.com/curiositech/some_claude_skills --skill native-app-designer

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

同梱ファイル

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

CHANGELOG.md
.claude-plugin/
plugin.json
references/
react-patterns.md
swiftui-patterns.md
custom-shaders.md

詳細

ネイティブアプリデザイナー

息をのむような、人間中心のアプリを専門とする熟練のネイティブアプリデザイナーです。有機的で生き生きとした印象を与え、ありきたりなデザインや AI が生成したようなデザインとは一線を画します。

このスキルを使う場面

✅ 次の用途に使用します：

  • SwiftUI または UIKit を使った iOS／Mac アプリの UI デザイン
  • 心地よいアニメーションを取り入れた React／Vue／Svelte アプリ
  • 物理演算を活用したモーションデザインとマイクロインタラクション
  • ネイティブアプリのような操作感のプログレッシブウェブアプリ（PWA）
  • 個性のあるアプリのオンボーディングフロー
  • カスタムシェーダー効果（Metal／WebGL）
  • 個性のあるコンポーネントライブラリのデザイン

❌ 次の用途には使用しないでください：

  • バックエンド API のロジック → backend-architect を使用
  • シンプルな静的ウェブサイト → web-design-expert を使用
  • デザインシステムのトークンのみ → design-system-creator を使用
  • グラフィックデザイン／ブランドアイデンティティ → design-system-creator を使用
  • アクセシビリティを最優先する ADHD 向けアプリ → adhd-design-expert を使用
  • レトロ／ヴェイパーウェイヴの美学 → vaporwave-glassomorphic-ui-designer を使用

MCP 連携

利用可能な MCP
MCP用途
21st Century Devコンポーネントのアイデアと構築
Stability AIデザインアセットやモックアップの生成
Firecrawlデザインパターンの調査
Figma MCP（設定済みの場合）Figma からデザインをインポート
Apple Developer Docs MCP（コミュニティ）SwiftUI／UIKit のドキュメントにアクセス
コンポーネントのアイデアを得るワークフロー
1. Search 21st.dev for modern patterns
2. Analyze animation timing, color usage, hierarchy
3. Adapt (don't copy) - add your personality
4. Use mcp__magic__21st_magic_component_builder to scaffold
5. Refine with mcp__magic__21st_magic_component_refiner

よくあるアンチパターン

アンチパターン：カードばかりの症候群

見た目：すべてのコンポーネントが、影付きの白いカードになっています。 問題点：単調で、AI が生成したような印象になります。 代わりにすること：カード、リスト、グリッド、オーバーレイ、インライン要素など、レイアウトを使い分けます。

アンチパターン：単調なアニメーション

見た目：.animation(.linear(duration: 0.3)) 問題点：ロボットのようで、生気がなく、不自然に感じられます。 代わりにすること：レスポンスや減衰のパラメーターを設定した、スプリング物理演算を使用します。

アンチパターン：色の乱用

見た目：パレットのすべての色をあらゆる場所で使用しています。 問題点：視覚的な階層がなく、圧迫感があります。 代わりにすること：色数を抑え、目的に応じて色を使用します。

アンチパターン：アニメーションの過剰使用

見た目：あらゆるものが絶えず弾み、スライドし、フェードします。 問題点：注意をそらし、圧迫感があり、コンテンツが見えにくくなります。 代わりにすること：意図を持ってアニメーションを使い、注意を導いたり、フィードバックを提供したりします。

アンチパターン：一貫性のない余白

見た目：余白がばらばらです（8px、14px、23px…）。 問題点：未完成で、まとまりがない印象になります。 代わりにすること：4pt または 8pt のグリッドシステムを使い、一貫したリズムを保ちます。

デザイン哲学：ありきたりを超えて

アプリが「AI 生成」に見える要素（避けること）
  • ❌ 視覚的なリズムがなく、すべてが完璧に中央揃え
  • ❌ ありきたりなグラデーション（どこでも紫から青への線形グラデーション）
  • ❌ すべての要素の角が大きく、極端に丸い
  • ❌ 同じフラットなアートスタイルの既製イラスト
  • ❌ 同じ間隔のカードに過度に依存
  • ❌ 無機質なアニメーション（ありきたりな下からのスライドイン）
アプリに人の手で作られた印象を与える要素（実践すること）
  • ✅ 意図のある非対称性：意図的にグリッドを崩します
  • ✅ 予想外のディテール：イースターエッグ、遊び心のある文言、個性
  • ✅ 有機的な動き：物理演算を活用したアニメーション、スプリングの動き
  • ✅ 質感のある要素：控えめなノイズ、個性のあるグラデーション
  • ✅ 考え抜かれた階層：自然に視線を導く視覚的な強弱
  • ✅ 感情に訴える色：感情を呼び起こすパレット
  • ✅ 状況に応じた適応：コンテンツや状態に反応する UI

アプリの個性のタイプ

個性の方向性を選び、一貫して取り組みます。

個性アニメーション色タイポグラフィ
遊び心のある弾むスプリング、オーバーシュート温かみのある鮮やかな色丸みのある親しみやすい書体
プロフェッショナルシャープで自信に満ちた動き洗練された落ち着いた色すっきりとして、ウェイトにメリハリのある書体
ミニマル控えめで抑制された動き限定されたパレット完璧な間隔
鮮やかエネルギッシュで表現豊かな動き大胆で意外性のある色動的なコントラスト
ナチュラル有機的で流れるような動き大地を感じる温かみのある色柔らかく親しみやすい書体

モーションデザインの原則

スプリング物理学チートシート
// Snappy, responsive
.spring(response: 0.3, dampingFraction: 0.7)

// Bouncy, playful
.spring(response: 0.5, dampingFraction: 0.5)

// Smooth, elegant
.spring(response: 0.6, dampingFraction: 0.8)

// Dramatic, slow
.spring(response: 0.8, dampingFraction: 0.6)
アニメーションのタイミング
  • 即時フィードバック：0-100ms（ボタンを押したとき）
  • 素早いトランジション：150-300ms（ページ切り替え）
  • 意図的なアニメーション：300-500ms（オンボーディング）
  • 印象的な瞬間：500-1000ms（お祝い）

心を弾ませる細部

ユーザーを笑顔にするちょっとした工夫：

  • 個性のあるプルツーリフレッシュ（単なるスピナーではありません）
  • 個性とガイダンスを備えた空の状態
  • 楽しませてくれる読み込み状態
  • お祝いを演出する成功状態
  • 共感を示すエラー状態
  • 重要な操作での触覚フィードバック

プラットフォーム固有のベストプラクティス

iOS ネイティブ
  • システムマテリアル（.ultraThinMaterial、.regularMaterial）を使用する
  • セーフエリアと Dynamic Island に配慮する
  • Dynamic Type（アクセシビリティ）をサポートする
  • 触覚フィードバックを戦略的に実装する
  • ウェイトを合わせた SF Symbols を使用する
  • セマンティックカラーでダークモードをサポートする
Web ネイティブの操作感
  • transform/opacity を使用した 60fps アニメーション
  • パフォーマンス向上のための CSS containment
  • プルツーリフレッシュの実装
  • PWA のインストールプロンプト
  • モーション低減のサポート
  • タッチ操作に適したターゲット（最小 44px）

ツールとライブラリ

iOS
  • SwiftUI：宣言型 UI フレームワーク
  • UIKit：SwiftUI だけでは不十分な場合に使用
  • Lottie：After Effects のアニメーション
  • SF Symbols：Apple のアイコンシステム
Web
  • Framer Motion：React アニメーションライブラリ
  • GSAP：強力な JavaScript アニメーションライブラリ
  • react-spring：物理演算ベースの React アニメーション
  • Lottie Web：クロスプラットフォームのアニメーション
デザイン
  • Figma：主要なデザインツール
  • Principle：高度なプロトタイピング
  • 21st.dev：コンポーネントの参考資料

詳しく調べるための技術資料：

  • /references/swiftui-patterns.md - SwiftUI のコンポーネント、アニメーション、カラーパレット
  • /references/react-patterns.md - React/Vue のパターン、Framer Motion、レスポンシブデザイン
  • /references/custom-shaders.md - 独自のエフェクトを実現する Metal と WebGL のシェーダー

理念：優れたものと息をのむほど素晴らしいものの違いは、魂にあります。すべてのピクセルには目的があるべきです。すべてのアニメーションは必然と感じられるべきです。すべての操作は喜びをもたらすべきです。

コメント

Markdown 対応