デザイン・クリエイティブ

【2026年版】Claude Code × Web/UIデザイン｜実装10事例

公開 2026年6月7日更新 2026年6月15日

Web/UIデザイナーがClaude Codeで実装支援する10事例を解説。LP制作・コンポーネント実装・Figma→React変換・CSSデバッグ・SVGアニメーションまでプロンプト10例とROI試算付き。

結論：Web/UIデザイナーがClaude Codeを使うと、Figmaカンプから動くLPを作る時間が「外注3週間→自分1〜2日」に縮む。コーディング知識ゼロでも、プロンプトで指示すれば実装まで届く。

要点1：Figma→React/HTML変換、コンポーネント実装、CSSデバッグ、SVGアニメーション、レスポンシブ修正まで10事例で網羅
要点2：実際に使えるプロンプト10本付き。コピペで即試せる
要点3：ROI試算（外注費月60万円→0円、納期1/10）も含めて費用対効果を可視化

対象読者：Web/UIデザイナー（実装まで踏み込みたい）／フロントエンド業務委託の制作会社／ノーコード卒業を目指す個人デザイナー。今日読めること：10事例＋プロンプト＋ROI＋導入手順。

こんにちは、佐藤傑（@SuguruKun_ai）です。株式会社Uravationで100社以上のAI研修・導入支援をしてきました。

正直、最初に「デザイナーがClaude Codeを使う」と聞いたとき、ピンとこなかったんです。コードを書くツールでしょ？って。でも実際にFigmaカンプを渡して「これをHTMLとTailwind CSSで実装して」と指示したら、5分で動くLPが返ってきた。これはデザイナーの仕事の仕方が変わるな、と確信しました。

この記事では、Web/UIデザイナーがClaude Codeを使って実装支援する10事例を、実際のプロンプトとROI試算付きで解説します。コードを書いたことがないデザイナーでも、プロンプトを書くだけで動くものが手に入る世界です。

そもそもデザイナーがClaude Codeを使う意味とは

Claude CodeはAnthropic公式のターミナル型コーディングエージェントです（Anthropic公式ドキュメント）。エンジニアが使う前提で設計されていますが、デザイナーが使う実用価値が大きい理由は3つあります。

1つ目はFigmaとの相性が良いこと。Figmaの画面を直接読み込めるMCPサーバー（Figma MCP）があり、デザインカンプから自動でコード化できます。

2つ目は「動くものを返す」こと。ChatGPTにコードを聞くと「サンプルコード」が返ってきますが、Claude Codeは実際にファイルを書き、ローカルで動かし、エラーが出たら自分で直すところまでやります。デザイナーは結果だけ見ればいい。

3つ目はノーコード卒業の踏み台になること。STUDIOやWebflowで限界に当たったデザイナーが、React・Next.jsまで届く実装力を後付けで手に入れられます。

デザイナーが今までエンジニアに頼んでいた作業

FigmaカンプをHTML/CSSに起こす（外注週20万円〜）
レスポンシブ対応（スマホ・タブレットでの崩れ修正）
軽いインタラクション（ホバー・スクロールアニメ）の実装
SVGロゴ・イラストのCSSアニメーション化
WordPress・Shopifyのテーマカスタマイズ

これらが「自分で完結できる」ようになる。これがClaude Codeをデザイナーが使う意味です。

事例1：FigmaカンプからLP一枚を自動実装（所要1時間）

これが一番インパクトのある事例です。Figmaで作ったLPカンプを、Claude Codeに「これをHTML+Tailwind CSSで実装して」と指示するだけで、レスポンシブ対応済みのコードが返ってきます。

プロンプト①：FigmaカンプからLP実装

このFigmaファイルのデザインを、HTML+Tailwind CSSで実装してください。
- ファイル名: index.html
- フォント: Noto Sans JP
- レスポンシブ: 768px / 1024px / 1280pxでブレイクポイント
- ヒーロー画像はimages/hero.jpgとして仮配置
- ボタンは:hover時に背景色を10%暗く
- フォーム送信先は仮で"/api/contact"
Figma URL: https://www.figma.com/file/xxx/LP-design

結果：1時間以内に動くLPが完成。後はFigmaに合わせて画像を差し替えるだけ。外注すれば最低3週間・60万円コースだった作業が、デザイナー自身で完結します。

カンプを正確に再現させるコツ

カンプ通りに実装させるには、Figma MCPサーバーをClaude Codeに繋ぐのが最強です。claude mcp add figma --transport sse https://mcp.figma.comで接続できます。これでFigmaのレイヤー構造・カラー・タイポグラフィを直接読み取れます。

MCPなしでスクショだけ渡しても8割くらいは再現できますが、微妙な余白・行間がズレるので、最終調整は必要です。

事例2：デザインシステムのコンポーネント実装（Button・Cardなど）

デザインシステムを整備していると、ButtonやCard、Inputといった共通コンポーネントを実装する必要があります。普通は1コンポーネント半日〜1日かかりますが、Claude Codeなら20分で全亜種を作れます。

プロンプト②：Reactコンポーネント実装

以下の仕様でReactコンポーネントを作ってください。

Component: Button
Props:
- variant: 'primary' | 'secondary' | 'ghost' | 'danger'
- size: 'sm' | 'md' | 'lg'
- disabled: boolean
- loading: boolean
- icon?: ReactNode
- onClick: () => void

スタイル: Tailwind CSS
TypeScript対応
Storybook用のstoriesファイルも作成
テスト（Vitest）も作成

variantとsizeの組み合わせで12パターン、それぞれにdisabled・loading・icon有無の派生があります。これを手で書くと半日、Claude Codeなら25分です。

実際にUravation社内のデザインシステム構築時、Button・Card・Input・Modal・Toast の5コンポーネントを2時間で揃えました。Storybookも自動生成されたので、開発チームへの引き渡しもスムーズ。

事例3：Figma→React変換（コンポーネント化込み）

事例1のLP実装と似ていますが、こちらはReactコンポーネントとして部品分割する作業です。デザイナーがコンポーネント設計まで考えなくても、Claude Codeが適切に分解してくれます。

プロンプト③：Figma→Reactコンポーネント化

このFigmaのページデザインをReactコンポーネントに分解してください。

要件:
1. 再利用可能な単位でコンポーネント分割（Hero, FeatureCard, Pricing, FAQ など）
2. 各コンポーネントは src/components/ 配下に配置
3. propsは適切に型定義（TypeScript）
4. ページ全体は app/page.tsx でコンポーネントを組み合わせる
5. レスポンシブはmobile firstで実装
6. アクセシビリティ（aria-label・role）も最低限考慮

これでデザイナーが触ったことのないNext.js App Routerプロジェクトでも、適切な構造でコードが生成されます。デザイナーは「Figmaのこの単位がコンポーネント」と意識するだけでいい。

事例4：CSSバグのデバッグ（崩れる原因を聞く）

「なぜかスマホでだけレイアウトが崩れる」「flexboxで思い通りに並ばない」「z-indexが効かない」——CSSのデバッグはデザイナーの天敵です。Claude Codeは現在のCSSと画面を読んで、原因と修正方法を即答してくれます。

プロンプト④：CSSデバッグ依頼

src/components/Header.tsx と src/styles/header.css を見てください。

問題: PCでは正常だが、iPhone（375px幅）で見るとロゴと
ハンバーガーメニューが重なって表示される。

修正してほしいこと:
1. 原因を特定して説明
2. 最小限の変更で修正
3. なぜその修正で直るかコメントで書く
4. 修正後、tablet（768px）でも崩れないか確認

Claude Codeは実際にファイルを読み、CSS specificity・親要素のflex設定・position absoluteの基準などを総合的に判断して直します。「flex-shrink: 0が必要だった」「親のoverflow:hiddenがクリッピングしていた」みたいな、デザイナーには見えにくい原因も特定してくれます。

事例5：SVGアニメーション実装（CSS animations + SMIL）

ロゴをふわっと出したい、ローディングスピナーを作りたい、矢印を動かしたい。SVGアニメーションは「コードで書く」必要があり、デザイナーが苦手な領域です。

プロンプト⑤：SVGアニメーション実装

public/logo.svg のロゴを以下のように動かしてください。

アニメーション仕様:
1. ページロード時：left→rightにストロークが描画される（2秒）
2. 描画完了後：fill colorがフェードイン（0.5秒）
3. ホバー時：5度回転して0.3秒後に元に戻る
4. CSS animationsで実装、JSは使わない
5. prefers-reduced-motionに対応（OS設定で動きを減らす場合は静止）

結果は src/styles/logo-animation.css に書き、
src/components/Logo.tsx で適用してください。

SVGのstroke-dasharrayとstroke-dashoffsetを使った描画アニメは、CSSの組み合わせがややこしい。Claude Codeなら一発で動くコードが返ってきます。

事例6：レスポンシブ崩れの一括修正（Tailwind breakpoint調整）

クライアントから「タブレット表示が崩れてる」と言われたとき、複数のコンポーネントを横断して修正が必要なことが多いです。1つずつ手で直すと半日かかる作業を、Claude Codeにまとめて任せます。

プロンプト⑥：レスポンシブ一括修正

サイト全体をtablet（768px〜1024px）で確認したところ、
以下のコンポーネントでレイアウトが崩れています。

崩れているコンポーネント:
- src/components/Hero.tsx（ヒーロー画像が見切れる）
- src/components/FeatureGrid.tsx（3カラムが詰まりすぎる）
- src/components/Pricing.tsx（料金カードがはみ出す）

各コンポーネントを確認し、tabletブレイクポイントを追加して
修正してください。修正後、768px / 900px / 1024px でも
崩れないようにしてください。

Claude Codeは各ファイルを読み、Tailwindのmd:プレフィックスを適切に追加・修正します。3コンポーネント・所要15分。実機確認だけは自分の目でやる必要があります。

事例7：WordPressテーマカスタマイズ（PHP込み）

クライアントワークで「WordPressサイトの既存テーマをカスタマイズして」と言われると、PHPを触る必要が出てきます。デザイナーがPHPを書くのは無理ゲーですが、Claude Codeなら任せられます。

プロンプト⑦：WordPressテーマカスタマイズ

wp-content/themes/twentytwentyfour/ のテーマを以下のように
カスタマイズしてください。

カスタマイズ内容:
1. ヘッダーロゴをカスタム画像（assets/logo.png）に変更
2. グローバルナビをFigmaカンプ通りに再現（カンプは
   docs/design/header.png 参照）
3. フッターに「お問い合わせ」CTAを追加
4. functions.php に「カスタム投稿タイプ: お知らせ（news）」を追加
5. 既存のスタイルを壊さない（差分のみ変更）

変更したファイルと、変更理由を最後にまとめてください。

PHPのfunctions.php編集、テンプレート階層の理解、enqueueの作法など、WordPress特有のお作法もClaude Codeはちゃんと知っています。デザイナーが「壊さずに見た目を変える」が安全にできます。

事例8：Shopifyテーマのカスタマイズ（Liquid）

ECサイト案件でShopifyを触る場合、Liquidテンプレート言語を覚える必要があります。これも事例7と同じく、デザイナーが直接触るのは厳しい領域。

プロンプト⑧：Shopifyテーマカスタマイズ

theme/sections/product-template.liquid を以下のように修正してください。

修正内容:
1. 商品画像の下に「在庫残り○個」表示を追加（5個以下のみ赤色）
2. 「カートに追加」ボタンの色をブランドカラー（#FF6B35）に変更
3. レビュー星表示を商品名の下に移動
4. SP版（768px以下）でのレイアウトを縦並びに最適化
5. Liquidのbest practiceに従い、ロジックは可読性重視で書く

修正後、変更箇所のbefore/afterを示してください。

Liquidの{% if %}、{{ product.inventory_quantity }}といった独自構文も含めて適切なコードを返してくれます。

事例9：デザイントークン（Design Tokens）の自動生成

FigmaのVariable機能で定義したカラー・タイポグラフィを、CSSカスタムプロパティやTailwindのconfigに反映する作業。デザインシステム運用の地味な辛さです。

プロンプト⑨：デザイントークン自動生成

Figma Variables JSONを以下に貼ります。これを元に：

1. tailwind.config.js のtheme.extendに反映
2. src/styles/tokens.css にCSSカスタムプロパティとして書き出し
3. TypeScript用の型定義（src/types/tokens.d.ts）も生成

JSONはdocs/figma-tokens.json にあります。

Figma Tokens Studio（旧Figma Tokens）プラグインで吐いたJSONを渡すと、Claude Codeが3ファイルに同時反映してくれます。トークン20個・所要10分。手作業なら半日コース。

事例10：アクセシビリティ（a11y）監査と修正

WCAG準拠のチェックは知識が必要で、デザイナーが個別に対応するのは難しい。axe-coreなどのツールで監査した結果を渡すと、修正まで一気にやってくれます。

プロンプト⑩：a11y監査と修正

サイトをaxe-core（npm install -D @axe-core/cli）で監査して、
WCAG 2.1 Level AA に準拠していない箇所を修正してください。

手順:
1. axeを実行して結果をtmp/axe-report.json に保存
2. 違反箇所を重要度（critical / serious / moderate / minor）別に整理
3. critical / serious を優先的に修正
4. 修正内容のbefore/afterと、なぜ違反だったかをコメントで残す
5. 修正後、再度axeを実行して0違反になることを確認

aria-label追加、コントラスト比修正、フォーカス順序調整など、地味だが工数のかかる作業を自動化できます。発注元から「a11y対応もお願い」と言われたとき、追加見積もりせずに対応できる強みになります。

ROI試算：デザイナーがClaude Code導入した場合

Web/UIデザイナーがClaude Code（Pro/Maxプラン）を導入した場合の費用対効果を、Uravation社内デザイナー1名のケースで試算しました。

項目	導入前	導入後	差分
月間LP制作数	2本（外注込み）	5本（自分で完結）	+150%
外注フロントエンド費	月60万円	月0円	▲60万円
LP納期	3〜4週間	1〜2日	▲90%
Claude Codeコスト	¥0	月¥30,000（Max 5x）	+¥30,000
純利益改善	—	—	月¥570,000

※外注フロントエンド費は、業務委託エンジニア（時給5,000円・LP1本40時間想定）×2本で算出。Claude Code料金は2026年6月時点のMaxプラン（公式価格）。

月¥570,000の改善は、年換算で約684万円。1人デザイナーの粗利改善としては相当大きい数字です。フリーランスデザイナーが個人で導入しても、月3〜5本受注すれば余裕でペイします。

デザイナーが詰まりやすい失敗パターン3つ

❌ 失敗1：プロンプトが抽象的すぎる

「いい感じのLP作って」「カッコよく実装して」だと、Claude Codeも何を作ればいいか分からず、平凡なものが返ってきます。

⭕ 正解：「Figmaカンプ通りに」「ブランドカラーは#FF6B35」「フォントはNoto Sans JP」「アニメーションはホバー時のみ」と具体的に指定する。

❌ 失敗2：レビューせずに本番投入

Claude Codeは8〜9割正しいコードを書きますが、たまに古いライブラリのAPIを使ったり、セキュリティ的にNGなコード（XSS対策漏れ等）を書くことがあります。

⭕ 正解：本番投入前にエンジニアにレビュー依頼、もしくは「セキュリティ観点で問題ないか確認して」と追加プロンプトで聞く。

❌ 失敗3：MCPやスキルを使いこなせない

Claude Code単体でも強力ですが、Figma MCP・Playwright MCP・Skills機能を組み合わせると数倍生産性が上がります。「設定が面倒」で素のClaude Codeだけ使うのはもったいない。

⭕ 正解：最初の1時間でMCPを2つだけ設定する（Figma + Playwright推奨）。詳細はClaude Code MCP実践ガイドを参照。

デザイナーがClaude Codeを始める最短手順（30分）

Claude Pro/Maxに登録（claude.ai でアカウント作成 → Pro月20ドル or Max月100ドル）
Claude Codeをインストール（npm install -g @anthropic-ai/claude-code）
ターミナルで起動（プロジェクトディレクトリで claude と打つ）
Figmaファイルを用意（既存案件のカンプでOK）
事例1のプロンプトを実行（最小規模のLPで試す）

これで30分以内に「動くLP」が手に入ります。1回成功体験を積めば、後は実案件で使い倒すだけです。

よくある質問（FAQ）

Q1：HTMLもCSSも分からないデザイナーでも使えますか？

A：使えます。むしろ「コードを書けない」デザイナーほど効果が大きい。プロンプトで意図を伝えれば動くものが返ってくるので、書く力ではなく「指示する力」が問われます。最初の数回はエンジニアにレビューを頼むと安心です。

Q2：FigmaのデザインカンプはどこまでClaude Codeに伝わりますか？

A：Figma MCPサーバー経由なら、レイヤー構造・カラー・タイポグラフィ・サイズすべて読み取れます。MCPなしでスクショだけ渡すと、見た目の8割は再現できますが、微妙な余白や行間がズレるので最終調整は必要です。

Q3：STUDIOやWebflowからの乗り換え先として考えていますが、無理がありますか？

A：適切な乗り換え先です。STUDIOやWebflowで限界に当たる「凝ったアニメーション」「動的データ表示」「CMS連携」は、Claude CodeでNext.jsプロジェクトとして組めば全部解決します。学習コストは2〜3週間程度。

Q4：エンジニアに頼んでいた作業を奪う形になりませんか？

A：実際は逆で、デザイナーが「動く形」まで作って渡すと、エンジニアは難易度の高いバックエンドや最適化に集中できます。チーム全体の生産性が上がる事例が多いです。

Q5：法人で導入する場合、どのプランがおすすめですか？

A：デザイナー個人で試すならProプラン（月20ドル）で十分。チーム3名以上で本格運用するならMaxプラン（月100ドル）+ Team契約。コスト最適化の詳細はClaude Codeコスト最適化ガイドを参照。

まとめ：デザイナーの仕事の境界は溶けていく

Web/UIデザイナーが「実装まで届く」状態になると、案件の取り方も変わります。今までは「デザインだけ」だった単価が、「デザイン＋実装」セットで提案できる。クライアントとしても窓口が1人で済むので発注しやすい。

大事なのは、コードを書けるようになることではなく、Claude Codeに「動くものを作らせる指示力」を身につけること。これは数週間で習得できます。

個別指導でこの「指示力」を最短で身につけたい方は、Uravation Claude Code個別指導で対応しています。デザイナー出身の方も多く受講されています。

Claude Code個別指導でデザイナーの実装力を最短ルートで

Figma→実装の自動化、デザインシステム構築、レスポンシブ対応まで。デザイナー専用カリキュラムで2週間で実装スキルが手に入ります。

マンツーマンで現場案件を一緒に進める
デザイナー向けプロンプト集（50本）を提供
Figma MCP・Playwright MCP設定込み

無料相談を予約する →

著者プロフィール

佐藤傑（さとう・すぐる）

株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー約10万人。100社以上の企業向けAI研修・導入支援を実施。著書『AIエージェント仕事術』（SBクリエイティブ）。SoftBank IT連載7回執筆。Claude Code個別指導で開発者・デザイナーの実装力強化を支援中。