← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 中級
デザイン5次元レビュー critique
プロ級デザインレビューが簡単に
これは何？
これは、Webデザインを専門家目線で評価してくれる便利なツールです。たった1つのHTMLファイルを分析するだけで、5つの重要な観点から点数をつけ、具体的な改善点を教えてくれます。デザインの良し悪しが数字でわかり、どこを直せば良くなるのかが一目瞭然です。
これでできること
- デザインの強みと弱みを5段階で可視化
- 即効性のある改善ポイントを提案
- デザインの一貫性をチェック
- 視覚的な階層構造を評価
こんな時に便利
ランディングページのデザイン確認時
プロトタイプの自己チェック
複数デザイン案の比較
クライアントへの提案資料作成前
使い方
まず、レビューしたいHTMLファイルを指定します。コードを直接貼り付けても、プロジェクト内のファイルを指定してもOKです。スキルが自動的に分析し、レーダーチャート付きのレビューレポートを生成します。改善が必要な部分は『修正点』、そのまま良い部分は『キープ』、簡単に改善できるポイントは『クイックウィン』として分類されます。
使用例（こう頼んでみよう）
このindex.htmlをデザインレビューして先ほど作成したプロトタイプを5次元評価してくださいA案とB案を比較レビューしたい必要なもの
- HTMLファイル
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/nexu-io/open-design/tree/main/design-templates/critique手動で置く
Claude Code →
~/.claude/skills/critique/Codex →
~/.agents/skills/critique/使いこなしのコツ
- 自己評価ツールとしても活用可能
- 複数案を比較する際は各ファイルごとにレビュー
- 点数だけでなく具体的な指摘内容をよく読む