jpskill.com
💬 コミュニケーション コミュニティ

critique

UXの視点からデザインの有効性を評価し、視覚的な階層や情報構造、感情的な共鳴、全体的なデザイン品質を分析して、具体的な改善点を提供するSkill。

📜 元の英語説明(参考)

Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback.

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

一言でいうと

UXの視点からデザインの有効性を評価し、視覚的な階層や情報構造、感情的な共鳴、全体的なデザイン品質を分析して、具体的な改善点を提供するSkill。

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

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

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

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

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

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

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

🎯 この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 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] critique

インターフェースが技術的に機能するだけでなく、デザインされた体験として実際に機能するかどうかを評価し、全体的なデザイン批評を実施してください。フィードバックを与えるデザインディレクターになったつもりで考えてください。

まず: デザイン原則とアンチパターンについては、frontend-design スキルを使用してください。

デザイン批評

以下の観点からインターフェースを評価してください。

1. AI スロップ検出 (CRITICAL)

これは最も重要なチェックです。 これは、2024年から2025年の他のすべての AI 生成インターフェースのように見えますか?

frontend-design スキルのすべての「DON'T」ガイドラインに照らしてデザインをレビューしてください。これらは AI 生成作品の指紋です。AI カラーパレット、グラデーションテキスト、光るアクセントのあるダークモード、グラスモーフィズム、ヒーローメトリックレイアウト、同一のカードグリッド、一般的なフォント、その他すべての特徴を確認してください。

テスト: これを誰かに見せて「AI が作った」と言った場合、彼らはすぐに信じるでしょうか?もしそうなら、それが問題です。

2. 視覚的ヒエラルキー

  • 視線は最も重要な要素に最初に流れますか?
  • 明確な主要なアクションがありますか?2秒で見つけられますか?
  • サイズ、色、位置は重要性を正しく伝えていますか?
  • 異なる重みを持つべき要素間に視覚的な競合がありますか?

3. 情報アーキテクチャ

  • 構造は直感的ですか?新規ユーザーは構成を理解できますか?
  • 関連するコンテンツは論理的にグループ化されていますか?
  • 一度に選択肢が多すぎませんか?(認知的過負荷)
  • ナビゲーションは明確で予測可能ですか?

4. 感情的共鳴

  • このインターフェースはどのような感情を呼び起こしますか?それは意図的ですか?
  • ブランドの個性と一致していますか?
  • 信頼できる、親しみやすい、プレミアム、遊び心があるなど、あるべき感情を抱かせますか?
  • ターゲットユーザーは「これは私のためだ」と感じるでしょうか?

5. 発見可能性とアフォーダンス

  • インタラクティブな要素は明らかにインタラクティブですか?
  • ユーザーは指示なしに何をすべきかを知っていますか?
  • ホバー/フォーカス状態は有用なフィードバックを提供していますか?
  • もっと目立つべき隠れた機能はありますか?

6. 構成とバランス

  • レイアウトはバランスが取れていると感じますか、それとも不快なほど重いと感じますか?
  • 余白は意図的に使用されていますか、それとも単に残ったものですか?
  • 間隔と繰り返しに視覚的なリズムがありますか?
  • 非対称性はデザインされたものですか、それとも偶然ですか?

7. コミュニケーションとしてのタイポグラフィ

  • タイプヒエラルキーは、最初に読むべきもの、次に読むべきもの、3番目に読むべきものを明確に示していますか?
  • 本文は読みやすいですか?(行長、間隔、サイズ)
  • フォントの選択はブランド/トーンを強化していますか?
  • 見出しレベル間のコントラストは十分ですか?

8. 目的のある色

  • 色は装飾のためだけでなく、コミュニケーションのために使用されていますか?
  • パレットはまとまりがあると感じますか?
  • アクセントカラーは適切なものに注意を引いていますか?
  • 色覚異常のユーザーにも機能しますか?(技術的な問題だけでなく、意味は伝わりますか?)

9. 状態とエッジケース

  • 空の状態: ユーザーをアクションに導きますか、それとも単に「何もありません」と表示するだけですか?
  • ロード状態: 知覚される待機時間を短縮しますか?
  • エラー状態: 役立ち、非難的ではありませんか?
  • 成功状態: 確認し、次のステップをガイドしますか?

10. マイクロコピーとトーン

  • 文章は明確で簡潔ですか?
  • 人間(このブランドに適した人間)のように聞こえますか?
  • ラベルとボタンは曖昧ではありませんか?
  • エラーコピーはユーザーが問題を解決するのに役立ちますか?

批評レポートの生成

デザインディレクターのようにフィードバックを構成してください。

アンチパターン判定

ここから始めてください。 合格/不合格: これは AI 生成に見えますか?スキルのアンチパターンセクションから具体的な特徴をリストアップしてください。容赦なく正直に。

全体的な印象

簡単な直感的な反応 — 何がうまくいっているか、何がうまくいっていないか、そして最大の機会は何か。

うまくいっている点

うまくできている点を2〜3つ強調してください。なぜそれが機能するのか具体的に説明してください。

優先度の高い問題

重要度順に並べた、最も影響の大きいデザイン上の問題3〜5点:

各問題について:

  • 何が: 問題を明確に命名する
  • なぜ重要か: これがユーザーを傷つけたり、目標を損なったりする方法
  • 修正: それについて何をすべきか(具体的に)
  • コマンド: 使用するコマンド(推奨: {{available_commands}} — または、存在することが確実な他のインストール済みスキル)

軽微な観察事項

対処すべき小さな問題に関する簡単なメモ。

検討すべき質問

より良い解決策を引き出す可能性のある示唆に富む質問:

  • 「主要なアクションがもっと目立っていたらどうなるでしょうか?」
  • 「これはこれほど複雑である必要がありますか?」
  • 「自信に満ちたバージョンはどのようなものになるでしょうか?」

覚えておいてください:

  • 直接的に — 曖昧なフィードバックは全員の時間を無駄にします
  • 具体的に — 「送信ボタン」であり、「いくつかの要素」ではありません
  • 何が間違っているか、そしてそれがユーザーにとってなぜ重要かを述べてください
  • 「検討してください...」だけでなく、具体的な提案をしてください
  • 容赦なく優先順位を付けてください — すべてが重要なら、何も重要ではありません
  • 批判を和らげないでください — 開発者は優れたデザインを出荷するために正直なフィードバックを必要とします
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback.

First: Use the frontend-design skill for design principles and anti-patterns.

Design Critique

Evaluate the interface across these dimensions:

1. AI Slop Detection (CRITICAL)

This is the most important check. Does this look like every other AI-generated interface from 2024-2025?

Review the design against ALL the DON'T guidelines in the frontend-design skill—they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells.

The test: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.

2. Visual Hierarchy

  • Does the eye flow to the most important element first?
  • Is there a clear primary action? Can you spot it in 2 seconds?
  • Do size, color, and position communicate importance correctly?
  • Is there visual competition between elements that should have different weights?

3. Information Architecture

  • Is the structure intuitive? Would a new user understand the organization?
  • Is related content grouped logically?
  • Are there too many choices at once? (cognitive overload)
  • Is the navigation clear and predictable?

4. Emotional Resonance

  • What emotion does this interface evoke? Is that intentional?
  • Does it match the brand personality?
  • Does it feel trustworthy, approachable, premium, playful—whatever it should feel?
  • Would the target user feel "this is for me"?

5. Discoverability & Affordance

  • Are interactive elements obviously interactive?
  • Would a user know what to do without instructions?
  • Are hover/focus states providing useful feedback?
  • Are there hidden features that should be more visible?

6. Composition & Balance

  • Does the layout feel balanced or uncomfortably weighted?
  • Is whitespace used intentionally or just leftover?
  • Is there visual rhythm in spacing and repetition?
  • Does asymmetry feel designed or accidental?

7. Typography as Communication

  • Does the type hierarchy clearly signal what to read first, second, third?
  • Is body text comfortable to read? (line length, spacing, size)
  • Do font choices reinforce the brand/tone?
  • Is there enough contrast between heading levels?

8. Color with Purpose

  • Is color used to communicate, not just decorate?
  • Does the palette feel cohesive?
  • Are accent colors drawing attention to the right things?
  • Does it work for colorblind users? (not just technically—does meaning still come through?)

9. States & Edge Cases

  • Empty states: Do they guide users toward action, or just say "nothing here"?
  • Loading states: Do they reduce perceived wait time?
  • Error states: Are they helpful and non-blaming?
  • Success states: Do they confirm and guide next steps?

10. Microcopy & Voice

  • Is the writing clear and concise?
  • Does it sound like a human (the right human for this brand)?
  • Are labels and buttons unambiguous?
  • Does error copy help users fix the problem?

Generate Critique Report

Structure your feedback as a design director would:

Anti-Patterns Verdict

Start here. Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest.

Overall Impression

A brief gut reaction—what works, what doesn't, and the single biggest opportunity.

What's Working

Highlight 2-3 things done well. Be specific about why they work.

Priority Issues

The 3-5 most impactful design problems, ordered by importance:

For each issue:

  • What: Name the problem clearly
  • Why it matters: How this hurts users or undermines goals
  • Fix: What to do about it (be concrete)
  • Command: Which command to use (prefer: {{available_commands}} — or other installed skills you're sure exist)

Minor Observations

Quick notes on smaller issues worth addressing.

Questions to Consider

Provocative questions that might unlock better solutions:

  • "What if the primary action were more prominent?"
  • "Does this need to feel this complex?"
  • "What would a confident version of this look like?"

Remember:

  • Be direct—vague feedback wastes everyone's time
  • Be specific—"the submit button" not "some elements"
  • Say what's wrong AND why it matters to users
  • Give concrete suggestions, not just "consider exploring..."
  • Prioritize ruthlessly—if everything is important, nothing is
  • Don't soften criticism—developers need honest feedback to ship great design