Claude Designが来た日 ─ Webデザイナーとフロントエンドの仕事はどこまで削られるのか
はじめに
2026年4月、Anthropic から Claude Design が research preview として発表されました。
自然言語でプロトタイプ、スライド、モックアップ、ランディングページを作れる新機能です。発表内容だけを見ると、Figma Make や v0、Lovable、Bolt、Canva などに近い「AIデザインツール」の一種に見えます。私も最初は、正直「Figma Make や v0 の Anthropic版」くらいに考えていました。しかし実際に Claude Design で架空のAIスケッチツール「Opus Canvas」のLPを作り、Cloudflare Pages にデプロイし、さらに Claude Code への Handoff まで試してみると、少し印象が変わりました。
Claude Design の本質は、単に綺麗な画面を作ることではありません。むしろ、企画やアイデアを「動くプロトタイプ」に変換し、それを Claude Code に渡せる形まで持っていくための入口に近いと感じました。
つまり、これはデザインツールというより、Claude Code に渡すための「動く仕様書」を作るツールに近いです。「AIがデザインを作れるようになった」という話だけなら、そこまで珍しくありません。ただ、Claude Design が面白いのは、その先に Claude Code へのハンドオフがある点です。
最初に Figma を開くのではなく、まず Claude に話しかける。
そこで動くプロトタイプを作り、必要なら実装へつなげる。
この流れが本格化すると、デザインとフロントエンド開発の入口はかなり変わりそうです。
この記事では、Claude Design でLPを生成し、Cloudflare Pages にデプロイし、Claude Code へハンドオフするまでの流れを紹介します。
そのうえで、Claude Design が Webデザイナーやフロントエンドエンジニアの仕事にどこまで影響しそうかを、実際に触った感覚ベースで整理します。
何が発表されたのか
Claude Design は、Anthropic が Labs から出してきた実験的プロダクトです。位置づけは research preview。完成版というより、iOS のベータプログラムに近い立ち位置だと思っておくのがよさそうです。
かなり乱暴にまとめると、Claude Design は次のような機能です。
Canva や Figma で最初のたたき台を作る作業を、Claude との会話で進める機能
ただし、触ってみると「会話でデザイン画像を作るツール」よりは、もう少しコード寄りです。HTML / CSS / JavaScript で動くプロトタイプを作り、必要に応じて Claude Code に渡せるところまで見据えています。
できること
公式が挙げているユースケースは広いです。
- リアルなプロトタイプ（動くUI）
- プロダクトのワイヤーフレーム・モックアップ
- デザインエクスプロレーション（案出し）
- ピッチデック・プレゼン資料
- マーケティング素材・ワンペーパー
- 音声・動画・シェーダー・3D・AIまで組み込んだコード駆動プロトタイプ
インプットもかなり広く、テキスト指示だけでなく、画像、DOCX / PPTX / XLSX、コードベース参照、Webページの要素取り込みに対応するとされています。
個人的に一番気になったのは、コードベース参照 と デザインシステムの自動適用 です。
ここがあるせいで、Claude Design は単なる「綺麗なLPを作るツール」ではなく、既存の開発ワークフローに入り込むプロダクトに見えます。
作成したサンプル・デモ
今回、Claude Design で生成した LP をそのまま Cloudflare Pages にデプロイしました。
同じ流れで、iOS風のプロトタイプも作っています。
今回は手順までは載せていませんが、ワイヤーフレームも作れます。
操作モデル
Claude Design で面白いのは、Claude に指示を投げて一発生成して終わり、ではない点です。
- 文章で要件を伝えると Claude が初稿を生成
- 以降は 会話・インラインコメント・直接編集・カスタムスライダー で詰める
- さらに、チームのコードベースやデザインファイルを読ませて デザインシステムを自動適用 する
特に3つ目は重要です。
オンボーディング中にチームの既存コードやデザインファイルを読ませ、「そのチーム専用のデザインシステム」を組み上げる方向に寄せています。ここは、Figma や既存のデザインツールとの関係を考える上でかなり大きい部分です。
出力とハンドオフ
- 社内URL・フォルダとして共有
- Canva / PDF / PPTX / standalone HTML でエクスポート
- 完成デザインは Claude Code に「ハンドオフバンドル」として引き渡し可能
つまり、単なる画像生成ではありません。
企画 → デザイン → 資料化 → 実装 までを、Claude の内側でつなごうとしているように見えます。普段 Claude Code で感じている「要件定義から実装までの距離の短さ」を、デザイン工程にも持ち込んできた、と見るのが近いです。
提供条件
- Claude Pro / Max / Team / Enterprise 向け
- research preview として段階的ロールアウト中
- Enterprise は デフォルト無効、管理者が明示的に有効化する必要あり
- プラン内の使用量を消費。足りなければ extra usage
Enterprise がデフォルト無効なのは、ブランド資産やコードベースを読ませる機能がある以上、自然な設計だと思います。
何に使われているか（実用ユースケース）
「プロトタイプ / スライド / モックアップ / LP」という公式の箇条書きだけだと、実務のイメージが少しぼやけます。
触った感覚では、Claude Design が一番刺さるのは、完成品を一撃で作る場面ではなく、議論できる初稿を短時間で出す場面です。
顧客事例: Brilliant（公式announcementの一次引用）
Anthropic 公式の launch announcement で前面に出ている顧客事例が Brilliant です。
「Claude Design が静的デザインをインタラクティブプロトタイプに変える能力は、私たちにとって step change だった。他ツールでは 20+ プロンプト かかっていた最も複雑なページが、Claude Design では 2プロンプト で再現できた」
「Claude Code ハンドオフに design intent が含まれるおかげで、プロトタイプから本番への飛躍がシームレスになった」
— Brilliant（教育プロダクト）シニアプロダクトデザイナー
20→2 の圧縮率は正直少し強めの表現にも見えます。
ただ、Anthropic がこの事例を前面に置いたこと自体が重要です。Claude Design が売りたいのは、単なる「個人向けお絵描きAI」ではなく、既にデザインツールを使っているチームの iteration コスト削減 だと読めます。
役割別・具体ユースケース
役割別に見ると、刺さりそうなのは次のあたりです。
Product Manager / Designer 向け
- 設定ページ、オンボーディングフロー、検索体験、承認ワークフローの UI スケッチ
- free→paid のアップグレードなど、複数画面にまたがるユーザージャーニーのマッピング
- card-based / sidebar / tab-based など、代替レイアウト案の並列生成
- エンジニアリング工数を入れる前に、feature idea を tangible にする段階
ここはかなり相性がよさそうです。特に、PM が「言葉だけで説明している機能」を、15〜30分で触れる形にする用途は分かりやすいです。
社内ツール / Ops 向け
- コンテンツ承認・モデレーションパネル
- 月次売上ダッシュボード
- カテゴリで分岐する顧客フィードバックフォーム
- 管理画面、SaaSダッシュボード、社内ワークフロー画面
この領域は pixel perfect よりも speed が重要になりやすいので、Claude Design と相性が良いです。
Founder / 営業向け
- 12スライドの投資家ピッチデック
- ワンペーパー営業資料
- ブランドアセット込みの on-brand な資料生成
- LP + デモ + スライドをまとめて作る提案資料
「最初に見せるもの」を速く作りたい人には刺さります。
マーケ / グロース向け
- キャンペーンLP
- ヒーロービジュアル
- 広告クリエイティブ
- メールヘッダ
- SNSタイル
- 既存Webキャプチャからのリデザイン
マーケ用途では、Canva との出口があることも効きます。
開発者向け
- 新 API プロダクトの LP
- SaaS ダッシュボードの動くプロトタイプ
- API を書く前の画面検証
- Claude Code に渡す前提の UI 仕様作成
個人的には、ここが一番大きいです。
Claude Code にいきなり「管理画面を作って」と頼むより、Claude Design で先に画面を作ってから渡した方が、実装の前提がかなり揃います。
Web デザイナー / エージェンシー特化のフロー
Webデザイナー、制作会社、フリーランスにとっては、Claude Design はかなり気になる存在だと思います。
ただし、「全部置き換える」というより、先に効いてくる工程がはっきりしています。
既存クライアントサイトのリデザイン
Web capture やスクリーンショットで現行サイトを取り込み、hero / service cards / footer / IA を見ながら刷新案を出す使い方が考えられます。
「このセクションをもっと minimal に」
「two-column にして右にフォームを置く」
「CTA をファーストビューに出す」
こういう会話での修正は、かなり実務っぽいです。
Hero / セクション単位の A/B/C バリエーション量産
クライアント提案で、Hero セクションを3案持っていきたい場面はよくあります。
Show me 2-3 alternative layouts for the hero section.
このような指示で、複数案を出せるのは分かりやすい強みです。
キネティックタイポ、グラデーションメッシュ、3Dカード、カード型UI、サイドバー型UI、タブ型UIなど、技術キーワードで方向性を振り分けられるのも便利です。
レスポンシブ挙動を会話で制御
「768px以下で hamburger に畳む」
「3列 → 2列 → 1列にする」
「CSS Grid の repeat(auto-fit, minmax(300px, 1fr)) を使う」
こういうレスポンシブ指定も、自然言語でかなり伝わります。
もちろん最終チェックは人間側で必要ですが、最初のたたき台としては速いです。
複数クライアント ＝ 複数デザインシステムの使い分け
Claude Design が複数のデザインシステムを扱えるなら、エージェンシーやフリーランスにはかなり刺さります。
クライアントAのロゴ、色、コンポーネント。
クライアントBの別系統のトーン。
これらをプロジェクトごとに切り替えられるなら、制作フローはかなり変わります。
提案段階で「動くプロトタイプ」をクライアントに渡す
standalone HTML や Cloudflare Pages へのデプロイと組み合わせれば、クライアントにURLだけ渡して触ってもらえます。
Figma のプロトタイプも便利ですが、Claude Design の場合は HTML / CSS / JavaScript として動く ところが違います。
承認後、そのまま Claude Code にハンドオフできるなら、デザインから実装への翻訳コストも下がります。
ポートフォリオ / LP / コーポレートサイト
ポートフォリオ、API product LP、microsite、キャンペーンLPは相性が良いです。
Hero、コード例、価格表、CTA、social proof など、ある程度パターン化されたセクションを持つページは、Claude Design が得意そうに見えました。
リファレンス / ムードボード取り込み
競合サイトのスクリーンショットや参考Webページをまとめて食わせ、リファレンスベースで方向性を作る使い方もありそうです。
DOCX / PPTX / XLSX のブランドガイドラインを読み込めるなら、既存ブランドアセットがある現場とも相性は良いはずです。
リッチ / 実験系（Claude Design ならではのゾーン）
Claude Design は、単なる静的なLPだけではありません。
- HTML / CSS アニメーションで動画っぽい出力
- 3D / シェーダー / 音声 / 動画 を組み込んだプロトタイプ
- デザインシステム一式の生成
- モバイルアプリプロトタイプ
- iOS onboarding 風の複数画面デモ
ここは、従来のスライド生成AIや画像生成AIとは違うところです。
コード駆動のプロトタイプなので、後から人間が HTML / CSS / JavaScript を見て直せます。
公開レビューで出ている実測値
公開レビューでは、短時間で複数の成果物を作った例が出ています。
- 動画プロモ / スライド / LP / モバイルアプリ / デザインシステムを短時間で生成
- 15分程度でデザインシステムの初稿を作る例
- 一方で、同じ速度で iterate し続けると Pro では使用量が枯れやすい
ここは少し冷静に見た方が良いです。
「何でも本番品質で一瞬」というより、1人が30分〜1時間で、それっぽく議論できる initial draft を量産する 使い方が一番現実的だと思います。
逆に、production ready な大規模デザインファイルを複数人で磨き込む領域は、現時点では Figma の領域がかなり残ります。
なぜ今、騒ぎになっているのか
Claude Design の発表は、単なる新機能追加というより、業界的にはかなり大きめのイベントとして受け止められています。
理由は、AIでデザインが作れるから、だけではありません。
最初に開くツールが変わるかもしれない からです。
- The Information が4月14日にリーク
- 同日、Anthropic の CPO Mike Krieger 氏（元 Instagram 共同創業者）が Figma の取締役を辞任、SECにも開示
- 発表前後で Figma・Adobe・Wix・GoDaddy の株価が下落
Krieger 氏は、これまで Figma と Anthropic の橋渡し役のような立場でした。Anthropic が Figma の領域に踏み込むなら、利益相反を避けるために離れるのは自然です。
ここから読み取れるのは、Anthropic 自身も Claude Design を単なるおまけ機能とは見ていない、ということです。
Figma や Adobe は、基本的には「訓練を受けたデザイナーがツールを開いて作業する」ことを前提にしています。
Claude Design は入口が違います。
誰かが Claude に話しかける。
Claude がプロトタイプを作る。
それを Claude Code に渡す。
必要なら Canva や PPTX に出す。
つまり、誰が、どの順番で、どのツールから作業を始めるか が変わります。
怖いのは、画面が綺麗なことだけではありません。
最初にFigmaを開く前に、Claudeに話しかける流れを作りに来ていること です。
ここまで来ると、そりゃ株も動くよね、という気持ちになります。
競合マッピング
「AIでデザインを生成する」系ツールは、この1〜2年でかなり増えました。
Claude Design の立ち位置を理解するために、ざっくり層ごとに整理します。
レイヤ1：プロダクトUI / コード寄り
| ツール | 強み | Claude Designとの違い |
|---|---|---|
| v0 (Vercel) | React + Tailwind + shadcn/ui のUI生成が強い。Figma取り込みも可能 | UIコンポーネント生成では v0 が強いが、Claude Code ハンドオフは Claude Design が自然 |
| Lovable | Supabase 統合など、フルスタックMVPに強い | アプリ完成まで寄せるなら Lovable、設計から Claude Code へ渡すなら Claude Design |
| Bolt (StackBlitz) | WebContainer で即ブラウザ実行できる | 実行環境込みの開発は Bolt、デザイン起点のハンドオフは Claude Design |
| Figma Make | Figma の資産とつながる、プロンプトで動くプロトタイプ | Figma 内の資産活用は強いが、Claude Code との接続は Claude Design が強い |
v0 / Lovable / Bolt は、すでに prompt → prototype の世界をかなり進めています。
Claude Design が新しいのは、単純な出力品質だけではありません。
Claude Code への構造化ハンドオフ が最初から出口として用意されている点です。
レイヤ2：探索・モックアップ寄り
- Google Stitch
- Figma AI / Figma Weave
- Adobe Firefly
この領域は、既存のデザインツールやクリエイティブツールの中にAIを組み込む発想が中心です。
一方で Claude Design は、最初の入口が「Figmaを開く」ではなく「Claudeに話しかける」になります。
ここが大きいです。
レイヤ3：資料・マーケ寄り
- Gamma
- Canva
- PDF export
- PPTX export
Claude Design は、スライドやワンペーパーも作れるので、Gamma や Canva とも一部重なります。
ただ、Canva については単純な競合というより、Export 先として組み込まれているのがポイントです。
Claude Design で作ったものを Canva に渡し、ブランドチームや非エンジニアが編集する。
その後、必要なら Claude Code にも渡す。
この流れが見えるので、Claude Design は単体ツールというより ワークフローの接続点 と見た方がよさそうです。
Claude Designの立ち位置
Claude Design は、上の3レイヤを縦に貫いています。
プロトタイプも作れる。
スライドも作れる。
standalone HTML にもできる。
Canva にも渡せる。
Claude Code にも渡せる。
ただし、各レイヤのトップツールに全部勝つ、という話ではないと思います。
v0 のUI生成品質、Lovable のフルスタックMVP、Canva のテンプレ資産、Figma の共同編集体験には、それぞれ強みがあります。
Claude Design の本当の強みは、一点突破の品質というより、入口と出口のつなぎ方 にあります。
実機レポート：Claude Design → Claude Code を一気通貫で試した
ここからが実機レポートです。
理屈だけだと「結局、実装とどうつながるのか」が見えません。
そこで今回は、LP 1枚を生成し、そのまま Claude Code にハンドオフするところまで試しました。
1. 入口：サイドバーに "Design" が増えている
claude.ai にログインすると、左サイドバーに Design が追加されています。
モデルは Opus 4.7 が既定。作成タブは Prototype / Slide deck / From template / Other の4種で、右側には Wireframe ↔ High fidelity の切替スライダーがあります。
最初の入口で「どの形式で」「どこまで作り込むか」を決めさせる作りです。
この時点では、かなりデザインツールっぽい顔をしています。
2. 題材：再現可能な技術を意図的に詰め込んだLP
今回は挙動を見るのが目的なので、「LPを作って」みたいな曖昧な指示ではなく、負荷試験のつもりで技術キーワードをかなり詰めました。
題材は、架空のAIスケッチツール Opus Canvas の Hero 型 LP です。
日本語で要約するとこんな要求です。
- 題材: 架空のAIスケッチツール「Opus Canvas」の Hero 型 LP
- 狙い: 再現可能なフロント技術を1ページに詰めて、ショーケースも兼ねる
- セクション構成: Sticky nav / Hero / Features / Live demo / Numbers / CTA の6ブロック
- レスポンシブ: シングルスクロール、デスクトップファースト + モバイル対応
- Hero: キネティックタイポ + グラデーションメッシュ背景 + 3D風の浮遊プレビューカード
- Features: グラスモーフィズム + backdrop-filter、Lucideアイコン、hover tilt
- CTA: ダークセクション + conic gradient + SVGパーティクル + パララックス
-
ビジュアル: ライト/ダーク切替、Inter + Fraunces、
#6366F1/#FB7185、角丸 12px -
インタラクション: Smooth scroll、IntersectionObserver 発火の reveal、
prefers-reduced-motion尊重
要は、Kinetic typography / gradient mesh / glassmorphism / Recharts / prefers-reduced-motion / IntersectionObserver あたりを1プロンプトに全部入れて、どこまで共存できるかを見ました。
以下がそのまま投げた英語プロンプトです。
実際に投げたプロンプト全文（英語）
Create a hero-style landing page for "Opus Canvas" —
a fictional AI sketching tool.
Pack as many reproducible frontend techniques as possible
so the page doubles as a technology showcase.
# Sections (single scroll, desktop-first, mobile responsive)
1. Sticky nav + theme toggle
2. HERO: kinetic typography headline + gradient-mesh background
+ floating 3D-looking preview card (CSS perspective / parallax)
3. FEATURES: 3 glassmorphism cards with backdrop-filter,
Lucide icons, hover tilt
4. LIVE DEMO: text input → animated "sketch" preview + skeleton loader
5. NUMBERS: Recharts stats animated on scroll
6. CTA: dark section with conic gradient + SVG particle dots + parallax
# Visual language
- Light mode default + dark toggle (CSS variables, prefers-color-scheme)
- Primary: #6366F1 / accent: #FB7185
- Font: Inter (UI) + Fraunces (display, variable)
- 12px radius, respect prefers-reduced-motion
# Interactions
- Smooth scroll, IntersectionObserver-triggered reveal
- Hover tilt on feature cards, keyboard-accessible focus rings
3. 入力UIは「プロンプト欄」ではなく「前提の与え方」
Create を押した直後に出るのは、いきなりプロンプト欄ではありません。
コンテキスト投入モーダル が出ます。
Design system / スクショ / コードベース / Figmaファイル の4つのドロップゾーンが並んでいました。
ここで少し印象が変わりました。
Claude Design は、白紙から何かを作るだけではなく、既存のチーム資産に乗ることをかなり意識しているように見えます。
4. 生成の第一歩は「デザインシステムの確定」
プロンプトを投げて最初に出てくるのは、コードではありません。
まず、Claude が「今から何を前提にするか」を宣言します。
- フォント: Inter + Fraunces variable
- カラー:
#6366F1/#FB7185 - 角丸: 12px
- モーション: spring /
prefers-reduced-motionrespected
プロンプトで指定した値はそのまま使い、曖昧な部分は Claude 側で補って、明示的にフリーズしてから実装に入る流れです。
ここは Claude Code の設計思想に近いと感じました。
いきなり作り始めるのではなく、先に前提を固める。そのあとにファイルを書き出す。
デザインツールっぽい見た目をしていますが、中身はかなり コード生成ワークフロー です。
5. 生成過程はほぼビルドログ
以降は Writing styles.css → Writing <モジュール> のように、ほぼ素のビルドログが流れます。
Lucide風アイコンをSVGで起こす。
Recharts の <Bar> を配置する。
テーマ切替用の CSS variables を書く。
IntersectionObserver で reveal を発火させる。
このあたりの判断がテキストで残ります。
最後に Verifying... が挟まるのも良かったです。
生成だけ済ませてプレビューが壊れたまま終わる、という事故を減らそうとしているのが分かります。
v0 や Bolt だと、出力されたコードを自分でもう一度動かして初めて安心する場面があります。Claude Design はその確認工程を、ある程度プロダクト側に組み込んでいるように見えました。
6. 完成プレビュー：技術要素はかなり乗った
Hero セクションは、ナビ、V2.0 バッジ、Fraunces の巨大ヘッドライン、サブコピー、CTA、social proof、3Dプレビューカードまでが1画面で成立していました。
プロンプトで指定した主な要素は、かなり素直に入っています。
- Kinetic typography
- Gradient mesh 背景
- 3D perspective / parallax のプレビューカード
-
カラーシステム
#6366F1/#FB7185 - ダークモード切替
- glassmorphism
- backdrop-filter
- IntersectionObserver
-
prefers-reduced-motion
もちろん、これだけで本番投入できるかというと別です。
ただ、議論できる初稿 としてはかなり速いです。LPのたたき台、キャンペーンページ、プロダクトの初期モックアップなら、十分に使い道があります。
7. 編集UIは "Chat + Preview + Tweaks" の3面構成
編集画面は、左に Chat、右に Preview という構成です。
面白かったのは、Claude の自己デバッグログがそのまま残っていたことです。
今回は、Recharts UMD が Babel script 評価前に load されて destructure に失敗し、lazy 参照に書き換えて修復する、という内部ログが見えました。
Edit モードに入ると、右側に PAGE パネルが出て、Background / Font / Base size を数値で直接触れます。
つまり、編集方法が1つではありません。
- 会話で詰める
- Preview を見ながら詰める
- 数値やスライダーで詰める
この3つが同居しています。
「AIに頼む」だけではなく、最後は手で触れる。この作りは、AI生成ツールとしてかなり重要だと思います。
8. 出口：Exportに6本の口がある
Claude Design の面白いところは、Export メニューです。
| 出力 | 用途 |
|---|---|
| .zip | ソース一式 |
| 共有資料 | |
| PPTX | プレゼン |
| Canva | ブランドチームや非エンジニアとの連携 |
| standalone HTML | オフライン配布、静的デモ |
| Handoff to Claude Code | 実装への受け渡し |
他のAIデザインツールは、出口が2〜3個くらいにまとまりがちです。
Claude Design は、プレゼン資料、ブランドチーム連携、コード実装が同じ Export メニューに並んでいます。
ここで「これは単なるLP生成ツールではないな」と感じました。
最終成果物を固定していない。むしろ、作ったものを 資料にも、Canvaにも、HTMLにも、Claude Codeにも流せる ようにしています。
この設計がかなり Claude らしいです。
9. 本丸：Handoff to Claude Code が返してきたもの
本記事のために撮ってきた1枚です。
Handoff to Claude Code を押すと、Send to local coding agent というモーダルが出ます。
黒いターミナル風カードの中には、Claude Code に貼り付けるためのコマンドが入っていました。
> Fetch this design file, read its readme, and implement
the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/<hash>?open_file=Opus+Canvas.html
Implement: Opus Canvas.html
ここがかなり重要です。
Claude Design で作ったものは、画像やFigmaファイルとして渡されるだけではありません。
Claude Code から見ると、WebFetch 1回で読めるデザインバンドル として出てきます。
Figma の Dev Mode で要素を見ながらコピペする体験とは、かなり違います。
Claude Design から Claude Code へのハンドオフは、デザインを“実装可能な入力”として渡す 体験に近いです。
ここで、最初の印象が完全に変わりました。
これは Figma 対抗というより、Claude Code の前工程を取りに来ている プロダクトだと思います。
10. 実機から得た4つのTakeaway
触らないと分からなかった点を、4つに絞るとこうです。
-
プロンプトの技術キーワードがかなり通る
Kinetic typography / gradient mesh / glassmorphism / Recharts /
prefers-reduced-motion/ IntersectionObserver が、1プロンプト内でかなり共存しました。 -
Verifying工程がある壊れたプレビューを掴まされる確率は少し下がります。v0 / Bolt だと自分でもう一度動かして確認する前提になりがちなところを、Claude Design はプロダクト内に取り込んでいます。
-
自己デバッグログが残る
Claude がどこで詰まり、どう直したかが Chat に残ります。AI生成物をブラックボックスにしないので、レビューしやすいです。
-
Handoff の受け口が複数ある
ローカル Claude Code、Claude Code Web、zip の3つが用意されています。手元に Claude Code がある人はローカルで受けられる。クラウドでやりたい人は Claude Code Web に渡せる。別のコーディングエージェントに食わせたい人は zip を使える。
この実機感触を踏まえて、次章「仕事は奪われるのか」に進みます。
発表5日で見えてきた「弱点リスト」
触った瞬間はかなり面白いです。
ただし、現時点では research preview らしい粗さもあります。ここは過度に盛らず、分けて見た方がよさそうです。
構造的に欠けているもの
- マルチプレイヤー / 同時編集なし
- 公開APIはまだ限定的
- Figma のネイティブデータを完全に食えるわけではない
- アクセシビリティの独立監査は別途必要
Figma の最大の強みは、複数人で同じファイルを触り、コメントし、デザインレビューできることです。
Claude Design は、現時点では「1人が Claude と対話して作る」感触が強いです。Team プラン以上でも、Figma のようなリアルタイム共同編集とは別物として見た方がよいです。
また、スクリーンショットやコードベース、Webキャプチャ経由での取り込みはできますが、Figma のベクターや Auto Layout、コンポーネント構造をそのまま完全に扱えるかは、慎重に見た方がよさそうです。
トークン消費の重さ（実測値）
Claude Design は、普通のチャットよりもリッチなものを生成します。
動くHTML、ライブ編集、デザインシステム適用、プレビュー、ハンドオフ。
このぶん、1ターンあたりの消費は重くなりがちです。
軽く試すだけなら Pro でもよいですが、何度もイテレーションするなら Max 以上を考えた方が現実的だと思います。
research preview らしい粗さ
今回の検証でも、Features 以降のスクロールセクションで空白になる場面がありました。
IntersectionObserver 周りの挙動は、まだ荒いところがあります。
また、prefers-reduced-motion や focus ring は指定できますが、WCAG 的に十分か、キーボード操作、コントラスト、スクリーンリーダー対応まで問題ないかは、人間側で見る必要があります。
AIが出したからOK、にはまだできません。
本番の production critical なワークフローにそのまま乗せるというより、現時点では 初稿・検証・提案・ハンドオフ用 と割り切った方がよさそうです。
それでもなお、何が "genuinely new" なのか
prompt → prototype の出力品質そのものは、v0 / Lovable / Bolt がすでにかなり進めています。
なので、Claude Design の新しさを「画面が綺麗に出ること」だけに置くと、少し弱いです。
むしろ新しいのは、次の2つです。
- コードベースから design system を抽出・適用しようとする挙動
- Claude Code への構造化ハンドオフ
この2つがあるので、Claude Design は単なるAIデザインツールではなく、Claude Code の前工程に見えます。
本題：Webデザイナーとフロントエンドの仕事は奪われるのか
ここからは、少し仕事論です。
僕は普段フロントエンドが本業ではありません。ただ、Claude Code でかなりコード生成を使っている側の人間として、近い変化はフロントエンドやWebデザインにも来ていると感じます。
結論から言うと、「奪われる / 奪われない」の二択は雑 です。
正しくは、どの工程から先にAI前提になるか で見た方がよいです。
すでに溶け始めている部分
ここはもう戻りにくいと思います。
- LPやコーポレートサイトのたたき台作成
- ワイヤーフレーム / モックアップ作成
- ピッチデック / ワンペーパーの初稿
- シンプルなCRUD画面のコンポーネント実装
- デザイントークン適用などの機械作業
- Hero / Features / CTA など定型セクションの量産
この領域は、v0、Lovable、Bolt、Canva、Gamma、Claude Design でかなり速くなっています。
2〜3年前なら「ジュニアデザイナー」や「ジュニアフロントエンド」の仕事として成立していた部分です。
求人が一気に消えるというより、単純な画面作成だけでは単価を維持しづらくなる という方が近いと思います。
そう簡単には溶けない部分
逆に、以下は当面残ります。むしろ価値が上がる可能性があります。
- 難しいインタラクションと状態遷移の設計
- 非同期、競合、エラーケースを含む画面設計
- ブランドアイデンティティの判断
- 複雑な業務ドメインのIA設計
- アクセシビリティ、国際化、パフォーマンスの深い検討
- 大規模コードベースでの責任ある実装判断
- デザインシステムそのものを作る役割
AIが出した画面を、そのまま本番に入れていいかどうか。
ここを判断できる人の価値は、むしろ上がると思います。
構造変化：「仕事」の単位が変わる
一番まっすぐな言い方をすると、こうです。
「Figmaを開いて画面を作る人」から、「Claude / v0 / Figma / Claude Codeを束ねて意思決定する人」へ、労働のレイヤが1段上がる
職種がそのまま消えるというより、職種の定義が書き換わる。
1枚のLPを3時間で作って5万円、みたいな仕事は厳しくなるかもしれません。
一方で、「このサービスのブランドと業務フローに合った画面を10枚、AIに生成させて、品質判断とブラッシュアップと実装責任まで引き受ける」仕事は、単価が下がりにくいはずです。
ただし、その仕事をやるには、AIを使いこなす側に回る必要がある。
この「上がる1段」を取りに行く人と、取りに行かない人で、この先かなり差が出ると思います。
実務者としてどう動くか
僕自身はインフラ寄りですが、Claude Code は日常的に叩いています。この感覚は、フロントエンド側にもかなり近いと思っています。
具体的には、次の4つです。
-
生成系ツールを1つは本気で使う
v0 / Lovable / Bolt / Figma Make / Claude Design、どれでも良いので、「プロンプトの癖」「壊れるパターン」を体で知る。
-
デザインシステムを読める・書ける側に立つ
Claude Design が「コードベースからデザインシステムを作る」方向に進むなら、それをレビューできる人の価値は上がります。
-
Claude Code / v0 / Figma Make からのコードを、責任を持ってマージできる力を残す
生成されたコードの品質判断は、当面人間側に残ります。
-
ドメイン知識を言語化するスキルを鍛える
AIに投げる「良いプロンプト」を書ける人が強いです。これは普段から業務要件を文章で構造化する訓練に直結します。
関連書籍：非デザイナーがAIでデザインに入るなら
『AIでゼロからデザイン』（川合卓也、翔泳社・2025）は、SHIFT AI のデザイン部長が書いた「デザイン未経験者が生成AIで広告・ブランディング・SNS・資料のデザインを作る」ための一冊です。
この記事で書いた「生成系ツールを1つ本気で使う」「良いプロンプトを書ける人が勝つ」という話を、デザイン職側の視点から補ってくれる内容です。
まとめ
Claude Design を触って一番印象が変わったのは、デザインの綺麗さではありません。
もちろん、LPの初稿はかなり速く作れます。Hero、グラデーション、3Dカード、ダークモード、アニメーションも、1プロンプトでそれなりに乗りました。
ただ、それ以上に大きかったのは、Claude Code への渡し方です。
Handoff to Claude Code を押すと、デザインは単なる画像やFigmaファイルではなく、Claude Code が読めるバンドルとして渡されます。
ここが重要です。
Figma をAI化したというより、Claude Code の前工程に「デザイン生成」を差し込んできた。触った感覚としては、こちらの方が近いです。
なので、Claude Design の本当のインパクトは、
綺麗な画面を作れることではなく、企画 → デザイン → 実装の入口を Claude 側に寄せてくること
にあります。
Webデザイナーやフロントエンドの仕事が明日消えるとは思いません。
ただ、LPのたたき台、管理画面の初稿、簡単なUI実装のような仕事は、かなり早くAI前提になるはずです。
残るのは、AIが出したものを判断し、直し、責任を持って実装に接続できる人です。
少なくとも、今回触った Claude Design は、その方向をかなりはっきり示していました。
今回の実機レポートは初見の手触りなので、数週間使い込んだあとに、定着した印象でもう一度書き直すつもりです。
参考書籍
本記事のテーマである「AIを使いこなす側に回る」という文脈で、手元で読み返している Claude Code 関連の書籍を2冊紹介します。
Claude Design を本格的に活用するなら、前段として Claude Code の作法や思想を押さえておくと、UIからコードへのハンドオフの解像度がかなり上がります。
『実践Claude Code入門―現場で活用するためのAIコーディングの思考法』（西見公宏・吉田真吾・大嶋勇樹、技術評論社）
Claude Code と MCP を実業務に組み込むための「思考法」にフォーカスした一冊です。単なるツールの使い方ではなく、「AIとどう協働するか」というマインドセット寄りの内容で、この記事で触れた “オーケストレーター側に回る” というテーマと地続きで読めます。
『Claude CodeによるAI駆動開発入門』（平川知秀、技術評論社）
こちらは環境構築からWebアプリの完成までをハンズオンで体験できる、より実践的な一冊です。
Claude Designで生成したプロトタイプを、Claude Codeを使って実務のワークフローにどう乗せるか。その土台となる感覚をつかむのに向いています。
Discussion