Claude CodeにUIデザインレビューを頼んだら、Figmaにコメントまで書いてくれた
自分がFigmaで作ったデザインを、Claude Codeにレビューしてもらったら、かなり助かりました。指摘箇所と、その根拠と、改善案を、Figmaのコメントとして書き込んでくれる。しかも、対応優先度順に並べてくれる。正直、ここまでやってくれるとは思っていませんでした。
デザインと仕様の突合は、地味に大変
プロダクトデザイナーの仕事で、地味に時間がかかるのが「突合」です。仕様を読む。デザインを見る。違いがないか、目視で確認する。画面が増えるほど、この作業は重くなります。
「この文言、仕様と違うんじゃないか」「この導線、要件に入っていなかった気がする」「Storybookのこのパターンと、見た目が揃っていない」——気づきは小さくても、探すコストは大きい。レビュー前に自分でやるにしても、他の人に渡す前にやるにしても、同じです。
やっかないのは確認しているとここを直したいなど目的な邪推がむくむくとわかあがってくる。頭がとっ散らかってきます。
やったことは、シンプル
やったこと自体は、シンプルでした。
FigmaのトークンをClaude Codeに渡す
プロジェクトの仕様を渡す
FigmaのデザインファイルURLを渡す
「デザインレビューして」と依頼する
返ってきたのは、Figma上のコメントです。どこが問題か、なぜ問題か（根拠）、どう直すといいか（改善案）。対応優先度順に並んでいる。自分で全部見比べていたら、半日は溶けるタイプの作業が、かなり短くなりました。
便利だったのは、参照元を増やせること
単にデザインファイルを見るだけではないのが、効きました。`design.md` や Storybook、ライティングルールなど、プロジェクトにある資料も一緒に渡せます。
たとえば、ライティングルールに違反している文言を見つけて、「ここはこの言葉の方がいいですよ」とコメントしてくれる。これ、地味にありがたいです。ルール違反の指摘は、人間でもできます。でも、全部の画面を全部のルールと照合するのは、かなり面倒です。「どの資料を根拠にしているか」がコメントに残るので、あとから人に渡すときも説明しやすい。
レビューだけで終わらない
さらに、ある程度の修正まで依頼できます。テキストの入れ替え、改善案のワイヤー作成など。レビュー結果を見て、「ここはそのまま直して」と言えば、対応してくれます。
全部を任せる話ではないです。最終判断は人がやる。でも、初稿のたたき台まで進んでいる状態から始められるのは、だいぶ違います。
何が楽になったか
楽になったのは、仕様とデザインの差分探し、ライティングルールとの照合、指摘の優先順位づけ、改善案の言語化、Figmaへのコメント書き込みあたりです。
レビューで一番むずかしいのは、見た目だけではない、という話は以前からしています。前提のズレ、仕様との不一致、ルールとの矛盾——ここを拾うのに、時間がかかる。Claude Codeに渡せるのは、その「拾う」部分のかなりのところでした。
万能ではない、という前提
もちろん、全部任せられるわけではありません。文脈の浅い指摘も、たまには出ます。「なぜこの画面がこうなっているか」は、人間の方が知っていることが多い。
だから、私はこう使っています。レビュー前の下準備として回す。指摘をそのまま採用するのではなく、優先度と根拠を見て取捨選択する。直せるところは依頼して、判断が必要なところは人が決める。それでも、ゼロから目視で突合するより、だいぶ楽です。
まとめ
Claude CodeでFigmaのデザインレビューをやってみて、かなり助かった、という話でした。Figmaトークン、プロジェクトの仕様、デザインファイルURLを渡して依頼するだけ。返ってくるのは、優先度順のコメント。指摘、根拠、改善案がセットです。
design.md や Storybook、ライティングルールも参照してくれるので、仕様との突合がかなり楽になりました。テキスト差し替えやワイヤー作成まで依頼できるのも、地味に効きます。デザインと仕様の突合は、基本、読んで、見て、違いがないか目視で確認する作業です。その作業のかなりの部分を、外に出せた感覚がありました。同じように突合に時間を取られている方の参考になればうれしいです。
読んでくださってありがとうございました。
この記事が「なるほど」と思えたら、「スキ」や「フォロー」もらえるとうれしいです。チームにもシェアしてもらえると、次の記事のモチベーションになります。
プロモーション
iCAREでは、一緒に成長しながら新しいチャレンジに挑戦できる仲間を募集しています。
まずは、カジュアル面談のお申し込み からお気軽にお話ししてみませんか？
皆さまのご応募を、心よりお待ちしています。
XでもUIデザインやプロダクト開発に関する投稿をしています。ご興味がありましたら、ぜひフォローしていただけると嬉しいです。
いいなと思ったら応援しよう！
よろしければ応援お願いします！いただいたチップはUIデザインプロダクト開発に関するnote作成に使わせていただきます！