「Claude CodeってAIだからエンジニア専用で、デザイナーの自分には関係ない」——そう感じていませんか。じつは、Figmaのコメント対応や修正の反映まで、デザイナーの日常業務の中でClaude Codeが活躍する場面があります。ただし、コードや、黒い画面の操作(CLI)に触れたことがない人ほど「ついていけるか」という不安が先に立つのも事実です。実際に、デザインチーム向けの研修でも、開始直後は不安の声が目立ちました。この記事では、デザイナーがClaude Codeで何をどこまでできるのか、そして学び始める際につまずきやすいポイントを、研修で見えた生の声とともに整理します。
Claude Codeとはデザイナーにとってどんなツールか
結論から言うと、Claude Codeはデザイナーの仕事をまるごと代わりに行うものではありません。手を動かす作業の一部を任せられる道具だと考えると実態に近づきます。デザインの方向性を決めたり、ユーザーの意図を汲み取ったりする部分は、これまでどおり人が担います。そのうえで、修正や反映といった作業の時間を減らせる可能性がある、というのが現時点での位置づけです。
Claude Codeは何をするためのツールか
Claude Codeは、パソコンに向かって「こういう修正をしてほしい」と言葉で伝えると、その内容を理解して作業を進めてくれるツールです。指示は専門的なプログラミング言語ではなく、日本語の文章で出せます。たとえば「ボタンの色を変えてほしい」「この文章をもう少し短くしてほしい」といった、人に頼むときとほぼ同じ言い方で通じます。対応できる範囲や仕様は更新されることがあるため、最新の情報は公式サイトで確認することをおすすめします。
コードを書けなくても使える仕組み
従来、Webサイトやアプリの画面を少し直すだけでも、専門知識を持つ担当者に依頼する必要がありました。Claude Codeは、やりたいことを文章で伝えると、裏側の作業を引き受けてくれるツールとされています。デザイナー側がプログラムの知識を身につけなくても、依頼したい内容を具体的に言葉にできれば作業を進められる場合があります。対応できる範囲や細かい挙動は、公式の情報で確認してください。
デザイナーが触れる機会が増えている理由
デザインの作業は、画面を作るところで終わらず、関係者からのフィードバックを受けて直し、確認し、また直すという繰り返しで進みます。この繰り返しの中には、デザインの判断というより単純な反映作業も多く含まれています。Claude Codeのようなツールが注目されているのは、まさにこの反映作業を任せられる余地があるからです。実際にどんな場面で使えるのかは、Claude Codeの活用事例でも具体的に紹介しています。
デザイナーの仕事はClaude Codeに奪われるのか
反映作業を任せられる余地がある、と聞いたときに浮かぶのは「自分の仕事がなくなるのでは」という不安です。この不安がどこから来ているのかを、先に整理しておきます。
AIに仕事を奪われるという不安の正体
作業の一部が自動化される様子を見ると、自分の役割全体が置き換わるように感じやすくなります。ただし、作業の代行と役割の代替は別の話です。
| 項目 | 内容 |
|---|---|
| 作業の代行 | 指示された修正や反映を、Claude Codeが形にする |
| 役割の代替 | 何を直すべきか、なぜ直すべきかを決める |
Claude Codeが引き受けるのは前者です。後者を決める役割は、指示を出す側に残ります。
デザイナーの仕事の価値はどこにあるか
前述のとおり、デザインの方向性を決めたり意図を汲み取ったりする部分は人が担います。加えて、ユーザーが何に困っているかを想像し、見た目や動きに落とし込む判断は、言葉で指示を出す側にしかできません。
AIが埋めるのは『手が回らない場面』
この位置づけは、代表が別のAIツールを試したときにも同じ形で表れています。社内向けのスライド作成を支援するAI(Claude Design)にデザインシステムを作らせた際、代表は次のように振り返っています。
実録代表・旭の一次体験
デザイナーが要らなくなる話ではない
デザイナーに毎回頼まなくても、全スライドでブランドが揺れない。ここが品質の源泉でした。デザイナーが要らなくなる話ではありません。手が回らない場面、たとえば社内向けの資料を埋める話です。コーポレートサイトという、デザイナーの仕事の結晶が先にあるから、AIはそれに揃えられる。
出典：スライド作りをClaude Designに任せたら、主役はスライドではなくなった(代表・旭俊成のnote)
これはClaude Codeではなく、スライド作成に特化した別のAIツールを使ったときの体験です。ただし考え方の軸は共通しています。AIが埋めるのは、デザイナーの手が回りきらない場面です。コーポレートサイトのように、デザイナーが時間をかけて作り上げた基準があるからこそ、AIはその基準に揃えて作業できます。基準そのものを作る仕事は、今のところ人に残ります。
デザイナーが実際にClaude Codeでできること
ここからは、その基準に沿った作業を実際にどう進めたのかを見ていきます。
事前ヒアリングで見えたデザインチームの課題
あるデザインチーム向けに研修を設計する際、まず事前ヒアリングを実施しました。チームがFigmaをどう使い、どこで時間を取られているかを把握してから、内容を組み立てています。
ヒアリングで確認できた実態は、次の3つです。
| 項目 | 内容 |
|---|---|
| チーム学習の課題 | 足並みを揃えたいが、個人でのキャッチアップには時間がかかる |
| ツールとの距離 | 黒い画面の操作(CLI)やHTMLに普段触れる機会が少ない環境だった |
| 繰り返す負担 | レビューとコメント対応に繰り返し時間がかかっていた |
Figmaコメント対応から修正反映までの一連の流れ
研修では、デザインレビューの一連の作業を実際に体験する回を設けました。プロトタイプをFigmaに上げてコメントをもらい、修正して返す作業があります。これは、デザインレビューの中で時間を取られてきた工程です。
実際に体験した流れは、次のとおりです。
- HTMLで作った画面のプロトタイプをFigmaに取り込む
- Figma上のコメントを、Claude Codeが読み取る
- コメントの内容に沿って、Claude Codeが修正を反映する
- 変更した差分を、Figmaに自動で投稿する
コメントを読んで直し、結果を戻す工程を、一連の流れとして体験しました。似た仕組みは、ヒューリスティック評価をFigma連携で自動化する方法でも扱っているので、レビュー作業の自動化に関心がある方は合わせて確認してください。
研修で掲げた3つの設計方針
ヒアリングで見えた実態をもとに、3つの設計方針を立てて研修の内容を組み立てました。
- 「できた」体験を最初に集約する：インストールから始め、Webページを公開するところまでを早い段階で経験してもらう
- 業務に直結するシナリオを使う：Figmaコメント対応やプロトタイプの修正という、実際の業務そのものをテーマにする
- 全員が同じペースで進められる設計にする：既存のHTMLを少し直すところから始め、段階的に難易度を上げる
非エンジニアのデザイナーがつまずきやすいポイントと乗り越え方
研修の参加者も、最初から迷いなく進めたわけではありません。研修の前後で、参加者の声は大きく変わっていました。
研修開始時に出た不安の声
研修の開始時、参加者には今の気持ちを一言ずつ話してもらいました。出てきたのは、不安を示す声でした。
参加者「ついていけるか不安」
参加者「Claude Codeの動画を見ても何だこれという感じで不安でいっぱい」
参加者「初めて。コードっぽいものに触ったことがあるのでついていけるようにしたい」
事前に動画で予習しても、何が起きているのか掴めないという声が目立ちました。一方で「これからガンガン使っていくことになりそう」という前向きな声もあり、不安と期待が入り混じった状態で研修が始まりました。
実際に手を動かしたあとの変化
HTMLの修正から、ワイヤーの作成と公開、Figmaへのコメント投稿までを一通り体験したあと、参加者の言葉は変わっていました。
参加者「ハードルが思ったより高くない」
参加者「楽しい」
一人で学ぶときに挫折しやすい理由
最初にひとりで始めると、今何をしているのか分からないまま手が止まり、途中でやめてしまうことが多いといいます。一緒に手を動かす相手がいると、学習にかかる負担が下がるというのが、研修を担当した側の見立てです。これから学び始める場合の具体的な進め方は、Claude Code初心者の学習ロードマップでも詳しく解説しています。
デザイナーがClaude Codeを学ぶときの進め方
一人で学ぶと挫折しやすいという見立ては、前述のとおりです。では実際にどう学べばよいのか、個人とチームに分けて整理します。
個人で学ぶ場合に意識したいこと
一人で学び始める場合、最初から完璧な操作を目指さないことが大切です。簡単な修正依頼から試し、Claude Codeがどう反応するかを確認する進め方が合っています。たとえば、既存のテキストを少し短くしてもらう、画像の配置を変えてもらうといった小さな依頼から始めると、操作の感覚がつかみやすくなります。
一度でうまくいかなくても、指示の言葉を具体的にし直せば結果が変わることが多くあります。この試行錯誤の回数を重ねることが、一人で学ぶときの実質的な練習になります。
| 進め方の工夫 | 理由 |
|---|---|
| 最初は小さな修正から試す | 結果が分かりやすく、次の指示につなげやすい |
| うまくいかなかった指示を書き直す | 言葉の具体性と結果のつながりが見えてくる |
| 業務で実際に使う題材を選ぶ | 練習と実務が同時に進み、学習の負担が減る |
チームで学ぶメリット
前述のとおり、つまずいた箇所をその場で確認できる相手がいると、学習の負担が下がります。チームで学ぶ場合は、この確認を仕組みとして用意できる点が個人学習と異なります。
デザインチーム全体で取り組む場合、同じ画面を見ながら操作を進められるため、つまずきの原因をすぐに言葉にして共有できます。一人が気づいた使い方のコツを、その場でほかのメンバーに伝えられる点も、個人学習にはない利点です。
チームで学ぶ場合に意識したいことは、次のとおりです。
- 操作のペースを揃える：早い人に合わせすぎず、全員が同じ地点から始められるようにする
- 実際の業務の画面を使う：練習用の架空の題材ではなく、普段のレビューやコメント対応を題材にする
- つまずきをその場で共有する：疑問を持ち越さず、分かった人がすぐに説明する
次の一歩としてできること
ここまで、個人で試す方法とチームで取り組む方法を見てきました。どちらを選ぶかは、今の環境やチームの状況によって変わります。
自分のペースで触ってみたい場合は、まず普段の業務にある小さな修正作業から試してみてください。学習の順序を体系的に知りたい場合は、前述の学習ロードマップの記事が参考になります。
チーム全体で足並みを揃えて進めたい場合は、個人学習だけでは埋めにくい部分が残ります。前述の事業会社のデザインチームのように、実際の業務を題材にした進め方を検討する価値があります。
この記事と合わせて読みたい
- Claude Code初心者の学習ロードマップ｜最初の1〜2週間の学び方を解説 — 学び方の全体像や最初の1〜2週間で何をすべきかをもっと詳しく知りたい読者の疑問に答える
- ヒューリスティック評価はAIで自動化できる？Figma連携の仕組みと手順を解説 — Figmaと連携したAIによるデザインレビューの自動化をさらに具体的に知りたい読者の疑問に答える
- Claude Code活用事例｜非エンジニアの会社・個人が実際にどう使っているか解説 — デザイナー以外の職種・会社ではClaude Codeがどう使われているのかを知りたい読者の疑問に答える
Claude Codeを業務で使いたい方へ
自分の業務を題材に試したい方には、1対1で進めるClaude Code マンツーマン講座があります（オンライン・回数制）。部署やチームで導入する場合は、業務に合わせて内容を設計するClaude Code法人研修をご覧ください。
