Claude Codeをデザイナーが使う範囲は「試作と見た目の調整」まで──画像からの試作、画面で確かめる手順、エンジニアに渡す線と、修正の往復を減らす計算例

この記事は、Web制作会社のデザイナーが、Claude Codeをどこまで使ってよいかを扱います。Claude Codeをデザイナーの仕事に当てるときの、範囲と手順です。

「余白をあと4px」のために、エンジニアを呼んでいる

「見出しと本文の間、あと少し空けてもらえますか」
「スマホで見ると、ボタンが少し大きい気がします」

実装のあと、デザイナーとエンジニアの間では、こうした細かい往復が何度も起きます。
1回は小さくても、案件の終盤にまとめて起きると、エンジニアの予定を圧迫します。

デザイナーが、見た目の調整を自分で試せれば、往復は減ります。
ただし、どこまで任せるかを決めないと、今度は品質と責任の線が曖昧になります。

デザイナーのClaude Code活用とは、試作と見た目の調整を自分の手で確かめられるようにし、本番に入る変更はエンジニアのレビューを通す使い方である

黒字化の外科医です。デザイナーがClaude Codeを使う範囲を解剖します。

範囲を決めて使う理由は、三つあります。

第一に、デザインの意図は、言葉より画面で伝わるから。
「もう少し軽く」と書くより、調整した画面と差分を見せるほうが、エンジニアは迷いません。

第二に、Claude Codeは、画像を材料にして作業できるから。
公式ドキュメント（code.claude.com、2026年10月27日確認）では、画像をドラッグ＆ドロップや貼り付けで会話に加え、デザインのモックアップに合わせたCSSを作らせる使い方が紹介されています。

第三に、見た目の変更でも、思わぬ場所が崩れることがあるから。
共通のスタイルを1か所変えると、ほかのページの見た目も変わります。だから、本番に入る前には、必ずエンジニアの確認を通します。

デザイナーが使う範囲の3段

【第1段：試作（本番とは別の場所で）】
・カンプの画像から、試作のページを作る
・配色や余白の案を、複数作って比べる
・置き場所：試作用のフォルダか、作業用のブランチ

【第2段：見た目の調整（エンジニアのレビューが前提）】
・余白、文字の大きさ、色、画像の差し替え
・変更したら、差分と、変更前後の画面をそろえてエンジニアに渡す

【第3段：触らない】
・データの読み書き、フォームの送信、ログイン、決済
・本番環境への反映、サーバーの設定
・共通の部品の大きな作り替え（エンジニアと相談してから）

Figmaから実装する工程そのものを変える場合は、見積もりの直し方から考える必要があります。

▶ Figma MCPで実装の工程を変えたら、見積もりはどう直すか──コーディングを半額にせず、データの整備とレビューを行に足す計算例

画面で確かめる：デスクトップアプリの使い方

公式ドキュメント（code.claude.com、2026年10月27日確認）では、デスクトップアプリについて、次のことが説明されています。

• 開発用のサーバーを起動し、Browser（ブラウザ）の欄に画面を表示できる
• Claudeが画面のスクリーンショットを撮り、自分の作業を確かめられる
• 差分の画面で、行ごとにコメントを付けて、直しを頼める
• デスクトップアプリの利用には、有料のサブスクリプションが必要

デザイナーにとっての要点は、「変更して、画面で見て、差分で確かめる」を、1つの画面で回せることです。
ただし、Claudeが画面を確かめても、それはデザインの判断ではありません。意図どおりかを決めるのは、デザイナー自身です。

今すぐ試せる：カンプから試作を作るプロンプト

カンプの画像を添付します。このページの試作を作ってください。

【条件】
・置き場所：〔例：prototype フォルダ〕。それ以外のファイルは編集しない
・使ってよい色：〔例：#1A1A1A、#F5F5F5、#2B6CB0〕
・文字の大きさ：〔例：本文16px、見出し28px〕
・スマホの幅：〔例：375px〕でも崩れないこと

1. 作る前に、カンプから読み取った構成を箇条書きで示す。
2. 読み取れない部分（ホバーの動き、画像の差し替えなど）は、質問として挙げる。
3. 試作を作ったら、カンプと違う箇所を、自分で一覧にする。

3が大切です。
「カンプと違う箇所」をClaudeに書かせると、デザイナーが見落としやすい差が、先に分かります。

例：修正の往復は、どれだけ減るか

（数字はすべて例）
今：1案件の見た目の修正の往復 4回
　　1回あたり：エンジニアの作業30分＋デザイナーの確認15分 ＝ 45分
　　1案件：4回 × 45分 ＝ 180分

後：デザイナーが調整して、エンジニアはレビューだけ
　　1回あたり：デザイナーの作業25分＋エンジニアのレビュー10分 ＝ 35分
　　1案件：4回 × 35分 ＝ 140分

差：180分 − 140分 ＝ 40分（1案件）
月5案件：40分 × 5 ＝ 200分 ＝ 3時間20分

検算：45 × 4 ＝ 180、35 × 4 ＝ 140、40 × 5 ＝ 200分。

合計の差よりも効くのは、エンジニアの時間が、1案件あたり120分から40分に減ることです（30分 × 4回 ＝ 120分、10分 × 4回 ＝ 40分）。
エンジニアの予定が空けば、終盤の詰まりが減ります。

構造的なリスク

逆説を指摘しておきます。

デザイナーが自分で直せるようになると、レビューを待つのが面倒になります。
「見た目だけだから」と、確認を飛ばした変更が、ほかのページを崩します。

だから、見た目の変更でも、レビューを通す決まりは外さないでください。
そして、エンジニアのレビューの時間は、案件の工数に最初から入れておきます。

よくあるQ&A

Q. デザイナーに、コードの知識は必要か？

試作だけなら、深い知識は要りません。第2段に進むなら、差分を読んで「何が変わったか」を説明できる程度の理解は必要です。

Q. 試作を、そのまま本番に使ってよいか？

使わないでください。試作は意図を伝えるためのものです。本番の実装は、エンジニアが既存の部品と合わせて行います。

Q. 素材や画像の権利は、どう考えるか？

Claudeに作らせたものでも、素材の権利の確認は人がします。社内の生成AIルールに沿ってください。

▶ 生成AIの社内ルールがない制作会社は、納品物を説明できない──入力禁止の情報、お客様への説明と同意、成果物の確認責任、著作権の基本

最後に

デザイナーがClaude Codeを使う目的は、エンジニアの代わりをすることではなく、デザインの意図を画面で渡すことです。

試作と見た目の調整に範囲を絞り、本番に入る変更はレビューを通す決まりにした会社だけが、修正の往復を減らしながら、品質を守れるのです。

ディレクターの使う範囲は、こちらで扱いました。

▶ Claude Codeをディレクターが使う範囲は「読む・聞く・小さく直す」の3段で決める──修正の影響範囲の下調べ、エンジニアに渡す前の確認、触らない線

職種別の範囲表とプロンプトは、ガイドにまとめています。

▶ 職種別Claude Code活用ガイド【ディレクター・デザイナー・エンジニア・社長】──使う範囲の表、権限モードの初期値、プロンプト12本、引き継ぎメモと月次の振り返り表

これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。

#Web制作会社 #ClaudeCode #デザイナー #Webデザイン #AI活用 #生成AI #制作会社経営 #中小企業 #コーディング #業務効率化