📦 その他コミュニティ

apple-ui-design

Apple製品のような洗練されたUIデザインを作成するSkillで、モダンなインターフェース構築、優れたUXの実現、クリーンで美しい見た目、そしてAppleらしい磨き上げられた品質を求める際に活用できます。

📜 元の英語説明(参考)

Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o apple-ui-design.zip https://jpskill.com/download/17431.zip && unzip -o apple-ui-design.zip && rm apple-ui-design.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17431.zip -OutFile "$d\apple-ui-design.zip"; Expand-Archive "$d\apple-ui-design.zip" -DestinationPath $d -Force; ri "$d\apple-ui-design.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して apple-ui-design.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → apple-ui-design フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Apple UI Design

Apple にインスパイアされた、クリーンでミニマル、かつプレミアムな UI デザインシステムです。

活用場面

並外れた UX を必要とする最新のインターフェースを構築する場合
クリーンでミニマルな美学を創造する場合
Apple のような洗練されたデザインとアニメーションを実装する場合
プレミアムなユーザーエクスペリエンスを設計する場合
デザイン品質のために UI/UX をレビューする場合

ワークフロー

ステップ 1: タイポグラフィシステムの適用

適切な階層構造（hero、title、body、caption）で SF Pro Display を使用します。

ステップ 2: カラーフィロソフィーの適用

適切なコントラストでライト/ダークモードの変数を使用します。

ステップ 3: スペーシングシステムの適用

4/8/16/24/48/96px のスペーシングリズムに従います。

ステップ 4: チェックリストの確認

タッチターゲット、コントラスト、アニメーションが基準を満たしていることを確認します。

コア原則

Clarity - コンテンツが主役、UI は目立たないように
Deference - UI はコンテンツに奉仕し、決して競合しない
Depth - レイヤリングが階層構造を生み出す

タイポグラフィ

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* Hierarchy */
--text-hero: 600 48px/1.1;      /* Bold statements */
--text-title: 600 32px/1.2;     /* Section headers */
--text-body: 400 17px/1.5;      /* Readable content */
--text-caption: 400 13px/1.4;   /* Secondary info */

カラーフィロソフィー

/* Light mode */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* Dark mode */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

スペーシングシステム

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* Section gaps */

主要なパターン

カード

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

ボタン

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* Pill shape */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

微妙なアニメーション

/* Micro-interactions */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* Page elements */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UX ルール

Do	Don't
十分な空白	窮屈なレイアウト
1 つの主要なアクション	複数の競合する CTA
プログレッシブな開示	すべてを表示
微妙なフィードバック	不快なアニメーション
システムフォント	装飾的なフォント

チェックリスト

[ ] タッチターゲット ≥ 44px
[ ] コントラスト比 ≥ 4.5:1
[ ] 最大コンテンツ幅 ~680px
[ ] 一貫したスペーシングリズム
[ ] ダークモードのサポート
[ ] スムーズな 60fps アニメーション

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Apple UI Design

Apple-inspired clean, minimal, premium UI design system.

When to Use

Building modern interfaces requiring exceptional UX
Creating clean, minimal aesthetics
Implementing Apple-like polish and animations
Designing premium user experiences
Reviewing UI/UX for design quality

Workflow

Step 1: Apply Typography System

Use SF Pro Display with proper hierarchy (hero, title, body, caption).

Step 2: Apply Color Philosophy

Use light/dark mode variables with proper contrast.

Step 3: Apply Spacing System

Follow 4/8/16/24/48/96px spacing rhythm.

Step 4: Verify Checklist

Ensure touch targets, contrast, and animations meet standards.

Core Principles

Clarity - Content is king, UI disappears
Deference - UI serves content, never competes
Depth - Layering creates hierarchy

Typography

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* Hierarchy */
--text-hero: 600 48px/1.1;      /* Bold statements */
--text-title: 600 32px/1.2;     /* Section headers */
--text-body: 400 17px/1.5;      /* Readable content */
--text-caption: 400 13px/1.4;   /* Secondary info */

Color Philosophy

/* Light mode */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* Dark mode */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

Spacing System

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* Section gaps */

Key Patterns

Cards

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

Buttons

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* Pill shape */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

Subtle Animations

/* Micro-interactions */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* Page elements */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UX Rules

Do	Don't
Generous whitespace	Cramped layouts
One primary action	Multiple competing CTAs
Progressive disclosure	Everything visible
Subtle feedback	Jarring animations
System fonts	Decorative fonts

Checklist

[ ] Touch targets ≥ 44px
[ ] Contrast ratio ≥ 4.5:1
[ ] Max content width ~680px
[ ] Consistent spacing rhythm
[ ] Dark mode support
[ ] Smooth 60fps animations