jpskill.com
🎨 デザイン コミュニティ

polaris-design

Shopify Polarisデザインシステムに基づき、Reactで管理画面やダッシュボードを構築する際に、色やフォント、間隔、コンポーネントのパターンを利用して、プロフェッショナルで使いやすいUIを効率的に作成するSkill。

📜 元の英語説明(参考)

Apply Shopify Polaris Design System principles to create professional admin interfaces and dashboards. Use when building React admin panels, data-heavy interfaces, e-commerce dashboards, or when optimizing existing UIs for better usability and data density. Provides color tokens, typography scales, spacing system, and component patterns following Polaris guidelines.

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

一言でいうと

Shopify Polarisデザインシステムに基づき、Reactで管理画面やダッシュボードを構築する際に、色やフォント、間隔、コンポーネントのパターンを利用して、プロフェッショナルで使いやすいUIを効率的に作成するSkill。

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

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

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

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o polaris-design.zip https://jpskill.com/download/10616.zip && unzip -o polaris-design.zip && rm polaris-design.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10616.zip -OutFile "$d\polaris-design.zip"; Expand-Archive "$d\polaris-design.zip" -DestinationPath $d -Force; ri "$d\polaris-design.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して polaris-design.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → polaris-design フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

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

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

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

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

Shopify Polaris デザイン

データ量の多いワークフローに最適化された、効率的でアクセシブルな管理インターフェースを作成するために、Polaris のデザイン原則を適用します。

コア原則

色には目的がある

  • 中立的な背景色（黒/白）を使用して、色付きの要素を目立たせる
  • 重大なエラーには赤、成功には緑、ヒント/オファーには青を使用する
  • UI では、装飾目的だけで色を使用しない（イラストのみ）
  • 色は他の要素（アイコン、テキスト）と組み合わせて使用する - 意味を伝えるために単独で使用しない

タイポグラフィが階層を定義する

  • 太さ、サイズ、配置を使用して階層を確立する
  • 階層を表現するために色だけに頼らない
  • コードにはモノスペースフォント、通貨/金額には等幅数字を使用する
  • 類似または繰り返されるタイプを一貫してスタイルする

スペースが関係性を定義する

  • オブジェクトが近いほど、認識される関係が強くなる
  • 関連するアイテムを同じカードにグループ化する
  • 大きく/重い要素は注意を引き、小さく/軽い要素は詳細を示す
  • 図形をネストすることを避け、テーブルの外側に区切り線を引くことを避ける

デザイントークン

完全なトークンの値については、references/design-tokens.md を参照してください。

カラーパレット

/* Neutral Backgrounds */
--p-color-bg: #ffffff;
--p-color-bg-surface: #f1f1f1;
--p-color-bg-surface-secondary: #f7f7f7;
--p-color-bg-surface-hover: #f0f0f0;
--p-color-bg-surface-active: #e8e8e8;

/* Text Colors */
--p-color-text: #1a1a1a;
--p-color-text-secondary: #616161;
--p-color-text-disabled: #8c8c8c;

/* Primary (Interactive) */
--p-color-bg-fill-brand: #008060;
--p-color-text-brand: #008060;

/* Status Colors */
--p-color-bg-fill-success: #008060; /* Green */
--p-color-bg-fill-critical: #d72c0d; /* Red */
--p-color-bg-fill-warning: #ffc453; /* Yellow */
--p-color-bg-fill-info: #0070f3;    /* Blue */

タイポグラフィ

/* Font Family */
--p-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--p-font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

/* Font Sizes */
--p-font-size-75: 0.75rem;   /* 12px - Caption */
--p-font-size-100: 0.8125rem; /* 13px - Body small */
--p-font-size-200: 0.875rem;  /* 14px - Body */
--p-font-size-300: 1rem;      /* 16px - Body large */
--p-font-size-400: 1.25rem;   /* 20px - Heading */
--p-font-size-500: 1.5rem;    /* 24px - Display */

/* Font Weights */
--p-font-weight-regular: 400;
--p-font-weight-medium: 500;
--p-font-weight-semibold: 600;
--p-font-weight-bold: 700;

/* Line Heights */
--p-font-line-height-1: 1;
--p-font-line-height-2: 1.25;
--p-font-line-height-3: 1.5;

スペーシング (4px ベース単位)

--p-space-050: 0.125rem; /* 2px */
--p-space-100: 0.25rem;  /* 4px */
--p-space-150: 0.375rem; /* 6px */
--p-space-200: 0.5rem;   /* 8px */
--p-space-300: 0.75rem;  /* 12px */
--p-space-400: 1rem;     /* 16px */
--p-space-500: 1.25rem;  /* 20px */
--p-space-600: 1.5rem;   /* 24px */
--p-space-800: 2rem;     /* 32px */
--p-space-1000: 2.5rem;  /* 40px */

ボーダー & シャドウ

/* Border Radius */
--p-border-radius-100: 0.25rem; /* 4px */
--p-border-radius-200: 0.5rem;  /* 8px */
--p-border-radius-300: 0.75rem; /* 12px */
--p-border-radius-full: 9999px;

/* Shadows */
--p-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.05);
--p-shadow-200: 0 1px 2px rgba(0, 0, 0, 0.1);
--p-shadow-300: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--p-shadow-400: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

/* Borders */
--p-border-width-1: 1px;
--p-color-border: #e1e1e1;
--p-color-border-secondary: #d1d1d1;

コンポーネントパターン

完全なコンポーネントの例については、references/component-patterns.md を参照してください。

カード

.polaris-card {
  background: var(--p-color-bg-surface);
  border-radius: var(--p-border-radius-200);
  padding: var(--p-space-400);
  box-shadow: var(--p-shadow-200);
}

ボタン

.polaris-button {
  font-size: var(--p-font-size-200);
  font-weight: var(--p-font-weight-medium);
  padding: var(--p-space-200) var(--p-space-400);
  border-radius: var(--p-border-radius-100);
  transition: background 0.15s ease;
}
.polaris-button--primary {
  background: var(--p-color-bg-fill-brand);
  color: #ffffff;
}

データテーブル

.polaris-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-font-size-200);
}
.polaris-table th {
  text-align: left;
  font-weight: var(--p-font-weight-semibold);
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
  color: var(--p-color-text-secondary);
}
.polaris-table td {
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
}
.polaris-table tr:hover {
  background: var(--p-color-bg-surface-hover);
}

フォーム入力

.polaris-input {
  font-size: var(--p-font-size-200);
  padding: var(--p-space-200) var(--p-space-300);
  border: var(--p-border-width-1) solid var(--p-color-border);
  border-radius: var(--p-border-radius-100);
  background: var(--p-color-bg);
  transition: border-color 0.15s ease;
}
.polaris-input:focus {
  outline: none;
  border-color: var(--p-color-bg-fill-brand);
  box-shadow: 0 0 0 1px var(--p-color-bg-fill-brand);
}

ベストプラクティス

データ密度

  • データ量の多いインターフェースには、13〜14px の基本フォントを使用する
  • スキャンしやすくするために、テーブルセルのパディングを減らす
  • 関連するメトリクスをカードにグループ化する

インタラクション状態

  • 常に視覚的なフィードバックを提供する：hover、focus、active、disabled
  • 一貫したタイミングを使用する：マイクロインタラクションには 150ms
  • フォーカス状態は可視でなければならない（代替手段なしにアウトラインを削除しない）

アクセシビリティ

  • テキストの最小コントラスト比 4.5:1 を維持する
  • 色はアイコン/テキストと組み合わせて使用し、単独で使用しない
  • すべてのインタラクティブな要素はキーボードでアクセス可能でなければならない
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Shopify Polaris Design

Apply Polaris design principles to create efficient, accessible admin interfaces optimized for data-heavy workflows.

Core Principles

Color Has Purpose

  • Use neutral backgrounds (black/white) to make colored elements stand out
  • Red for critical errors, green for success, blue for tips/offers
  • Never use color purely for decoration in the UI (only in illustrations)
  • Use color WITH other elements (icons, text) - never alone to convey meaning

Typography Defines Hierarchy

  • Use weight, size, and positioning to establish hierarchy
  • Never rely only on color for hierarchy
  • Mono for code; tabular numbers for currency/amounts
  • Consistently style similar or repeating type

Space Defines Relationships

  • Closer objects = stronger perceived relationship
  • Group related items in the same card
  • Larger/heavier elements attract attention; smaller/lighter for details
  • Avoid nesting shapes; avoid divider lines outside of tables

Design Tokens

For complete token values, see references/design-tokens.md.

Color Palette

/* Neutral Backgrounds */
--p-color-bg: #ffffff;
--p-color-bg-surface: #f1f1f1;
--p-color-bg-surface-secondary: #f7f7f7;
--p-color-bg-surface-hover: #f0f0f0;
--p-color-bg-surface-active: #e8e8e8;

/* Text Colors */
--p-color-text: #1a1a1a;
--p-color-text-secondary: #616161;
--p-color-text-disabled: #8c8c8c;

/* Primary (Interactive) */
--p-color-bg-fill-brand: #008060;
--p-color-text-brand: #008060;

/* Status Colors */
--p-color-bg-fill-success: #008060; /* Green */
--p-color-bg-fill-critical: #d72c0d; /* Red */
--p-color-bg-fill-warning: #ffc453; /* Yellow */
--p-color-bg-fill-info: #0070f3;    /* Blue */

Typography

/* Font Family */
--p-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--p-font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

/* Font Sizes */
--p-font-size-75: 0.75rem;   /* 12px - Caption */
--p-font-size-100: 0.8125rem; /* 13px - Body small */
--p-font-size-200: 0.875rem;  /* 14px - Body */
--p-font-size-300: 1rem;      /* 16px - Body large */
--p-font-size-400: 1.25rem;   /* 20px - Heading */
--p-font-size-500: 1.5rem;    /* 24px - Display */

/* Font Weights */
--p-font-weight-regular: 400;
--p-font-weight-medium: 500;
--p-font-weight-semibold: 600;
--p-font-weight-bold: 700;

/* Line Heights */
--p-font-line-height-1: 1;
--p-font-line-height-2: 1.25;
--p-font-line-height-3: 1.5;

Spacing (4px base unit)

--p-space-050: 0.125rem; /* 2px */
--p-space-100: 0.25rem;  /* 4px */
--p-space-150: 0.375rem; /* 6px */
--p-space-200: 0.5rem;   /* 8px */
--p-space-300: 0.75rem;  /* 12px */
--p-space-400: 1rem;     /* 16px */
--p-space-500: 1.25rem;  /* 20px */
--p-space-600: 1.5rem;   /* 24px */
--p-space-800: 2rem;     /* 32px */
--p-space-1000: 2.5rem;  /* 40px */

Border & Shadow

/* Border Radius */
--p-border-radius-100: 0.25rem; /* 4px */
--p-border-radius-200: 0.5rem;  /* 8px */
--p-border-radius-300: 0.75rem; /* 12px */
--p-border-radius-full: 9999px;

/* Shadows */
--p-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.05);
--p-shadow-200: 0 1px 2px rgba(0, 0, 0, 0.1);
--p-shadow-300: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--p-shadow-400: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

/* Borders */
--p-border-width-1: 1px;
--p-color-border: #e1e1e1;
--p-color-border-secondary: #d1d1d1;

Component Patterns

For complete component examples, see references/component-patterns.md.

Cards

.polaris-card {
  background: var(--p-color-bg-surface);
  border-radius: var(--p-border-radius-200);
  padding: var(--p-space-400);
  box-shadow: var(--p-shadow-200);
}

Buttons

.polaris-button {
  font-size: var(--p-font-size-200);
  font-weight: var(--p-font-weight-medium);
  padding: var(--p-space-200) var(--p-space-400);
  border-radius: var(--p-border-radius-100);
  transition: background 0.15s ease;
}
.polaris-button--primary {
  background: var(--p-color-bg-fill-brand);
  color: #ffffff;
}

Data Tables

.polaris-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-font-size-200);
}
.polaris-table th {
  text-align: left;
  font-weight: var(--p-font-weight-semibold);
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
  color: var(--p-color-text-secondary);
}
.polaris-table td {
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
}
.polaris-table tr:hover {
  background: var(--p-color-bg-surface-hover);
}

Form Inputs

.polaris-input {
  font-size: var(--p-font-size-200);
  padding: var(--p-space-200) var(--p-space-300);
  border: var(--p-border-width-1) solid var(--p-color-border);
  border-radius: var(--p-border-radius-100);
  background: var(--p-color-bg);
  transition: border-color 0.15s ease;
}
.polaris-input:focus {
  outline: none;
  border-color: var(--p-color-bg-fill-brand);
  box-shadow: 0 0 0 1px var(--p-color-bg-fill-brand);
}

Best Practices

Data Density

  • Use 13-14px base font for data-heavy interfaces
  • Reduce padding in table cells for scannability
  • Group related metrics in cards

Interaction States

  • Always provide visual feedback: hover, focus, active, disabled
  • Use consistent timing: 150ms for micro-interactions
  • Focus states must be visible (never remove outline without alternative)

Accessibility

  • Maintain minimum 4.5:1 contrast ratio for text
  • Use color WITH icons/text, never alone
  • All interactive elements must be keyboard accessible