critique

包括的なデザインレビューを行い、技術面だけでなく、デザインされた体験としてインターフェースが実際に機能しているかを評価してください。デザインディレクターとしてフィードバックするつもりで考えてください。

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

デザインレビュー

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

1. AI っぽさの検出（最重要）

これが最も重要なチェック項目です。 2024～2025年に生成された他のあらゆる AI インターフェースと同じように見えませんか？

frontend-design スキルの**すべての「やってはいけないこと」**のガイドラインに照らしてデザインを確認してください。これらは AI が生成した成果物に見られる特徴です。AI らしい配色、グラデーションテキスト、光るアクセントを使ったダークモード、グラスモーフィズム、ヒーロー指標のレイアウト、同一デザインのカードグリッド、ありきたりなフォントなど、AI っぽさを感じさせる要素をすべて確認してください。

判断基準：誰かにこれを見せて「AI が作った」と言ったとき、すぐに信じるでしょうか？ そうなら、それが問題です。

2. 視覚的な階層

• 最初に最も重要な要素へ視線が誘導されますか？
• 明確な主要アクションはありますか？ 2秒で見つけられますか？
• サイズ、色、位置で重要度が適切に伝わりますか？
• 異なる強さで扱うべき要素同士が視覚的に競合していませんか？

3. 情報設計

• 構成は直感的ですか？ 初めて使うユーザーにも情報の整理方法が伝わりますか？
• 関連するコンテンツは論理的にまとめられていますか？
• 一度に選択肢が多すぎませんか？（認知的負荷）
• ナビゲーションは明確で予測しやすいですか？

4. 感情への訴求力

• このインターフェースはどのような感情を引き起こしますか？ それは意図したものですか？
• ブランドの個性に合っていますか？
• 信頼感、親しみやすさ、高級感、遊び心など、求める印象を与えていますか？
• 想定ユーザーは「これは自分のためのものだ」と感じるでしょうか？

5. 見つけやすさと操作の手がかり

• インタラクティブな要素は、ひと目で操作できるとわかりますか？
• 説明がなくても、ユーザーは何をすべきかわかりますか？
• ホバー／フォーカス状態は有用なフィードバックを提供していますか？
• もっと目立たせるべき、隠れた機能はありませんか？

6. 構図とバランス

• レイアウトはバランスが取れていますか？ それとも不自然に偏っていますか？
• 余白は意図的に使われていますか？ それとも単に余ったスペースですか？
• 余白や反復に視覚的なリズムがありますか？
• 非対称性は意図してデザインされたものですか？ それとも偶然ですか？

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

• 文字の階層によって、何を最初に、次に、その次に読むべきかが明確に伝わりますか？
• 本文は快適に読めますか？（行の長さ、間隔、サイズ）
• フォントの選択はブランドやトーンを強めていますか？
• 見出しレベルごとに十分なコントラストがありますか？

8. 意図を持った色使い

• 色は装飾だけでなく、情報を伝えるために使われていますか？
• 配色に統一感がありますか？
• アクセントカラーは適切な要素に注意を引いていますか？
• 色覚特性のあるユーザーにも機能しますか？（技術的に使えるだけでなく、色が伝える意味も理解できますか？）

9. 状態とエッジケース

• 空の状態：ただ「何もありません」と伝えるだけでなく、次の操作を促していますか？
• 読み込み中の状態：待ち時間を短く感じさせますか？
• エラー状態：ユーザーを責めず、役立つ情報を提供していますか？
• 成功状態：完了を伝え、次のステップへ案内していますか？

10. マイクロコピーと語調

• 文言は明確で簡潔ですか？
• 人間らしい表現ですか？（このブランドに合う人の話し方になっていますか？）
• ラベルやボタンの意味は明確ですか？
• エラーメッセージは問題の解決に役立ちますか？

レビューレポートの作成

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

アンチパターンの判定

ここから始めてください。 合格／不合格：これは AI が生成したように見えますか？ スキルの「アンチパターン」セクションにある具体的な特徴を列挙してください。遠慮なく率直に評価してください。

全体的な印象

直感的な所感を簡潔にまとめてください。何が機能していて、何が機能していないか、最大の改善機会は何かを述べてください。

良い点

うまくできている点を2～3個挙げてください。どのような理由で効果的なのか、具体的に説明してください。

優先度の高い問題

重要度の高い順に、デザイン上の最も影響の大きい問題を3〜5個挙げます。

各問題について：

• 内容：問題を明確に示します
• 重要な理由：ユーザーにどのような不利益をもたらすか、または目標をどのように損なうかを説明します
• 修正方法：具体的な対処方法を示します
• コマンド：使用するコマンドを示します（/polish、/simplify、/bolder、/quieterなど）

軽微な所見

対応する価値のある、小さな問題について簡潔に記します。

検討すべき質問

より良い解決策を見つけるきっかけとなる、鋭い質問をします：

• 「主要なアクションをもっと目立たせたらどうでしょうか？」
• 「ここまで複雑にする必要があるでしょうか？」
• 「自信に満ちたデザインにするには、どうすればよいでしょうか？」

忘れないでください：

• 率直に伝えましょう。曖昧なフィードバックは、誰にとっても時間の無駄です
• 具体的に伝えましょう。「一部の要素」ではなく「送信ボタン」と示します
• 問題点と、それがユーザーにとって重要な理由の両方を伝えましょう
• 「検討してみてください」と促すだけでなく、具体的な提案をしましょう
• 優先順位を徹底しましょう。すべてが重要なら、何も重要ではありません
• 批判を和らげないでください。優れたデザインを完成させるには、開発者に率直なフィードバックが必要です