Claude Codeのデザイン活用｜画面・LPの作り方とClaude Designとの使い分け

「Claude Codeでホームページや社内ツールの画面を作れると聞いたけれど、見た目はどこまで整うのか」「Claude DesignやFigmaとは何が違うのか」と迷っている方も多いのではないでしょうか。

Claude Codeは、もともとプログラムを書く道具です。ただ、画面は結局のところHTMLやCSSといったコードでできているので、画面を実際に動く形で作り、ブラウザで見た目を確かめ、直すところまで任せられます。Claude Designで作った案をClaude Codeに引き継ぐ流れや、Claude Codeの中から画面案を作る機能も公式に用意されています。

この記事では、Claude Codeでできるデザインの仕事、Claude DesignやFigmaとの使い分け、画面を作って直すまでの流れ、会社の色や文字のルールの伝え方、公開前の注意点を順に解説します。内容は2026年10月時点の公式情報をもとにしています。Claude Codeは更新が頻繁なので、使う前に最新の案内もあわせて確認してください。

Claude Codeでできるデザイン

デザインツールではなく、画面を「作る」道具

Claude Codeは、パソコン上のフォルダを読み書きしながら、コードを書いたり直したりするAIの道具です。デザインの文脈で言えば、PhotoshopやFigmaのように絵を描く道具ではなく、画面そのものをHTML・CSS・JavaScriptなどで組み上げる道具にあたります。

できあがるのは「画面の絵」ではなく、ブラウザでそのまま開ける動くページです。ボタンを押せば動き、スマホの幅に合わせて並びが変わるところまで、コードで作れます。そのぶん、見た目の調整も文章で伝えれば反映されます。

作れるもの

中小企業の仕事で出番がありそうなものを、公式ドキュメントの使い方の例も踏まえてまとめました。

公式の使い方ガイド（Best practices）には、デザイン画像を貼って「この画面を実装して。結果のスクリーンショットを撮って元の画像と見比べ、違いを挙げて直して」と頼む例が載っています。画像を見て作り、できあがりを自分で見比べて直させる、というのが基本の使い方です。

向いていない仕事

便利な反面、何でも任せられるわけではありません。次のような仕事は、別の道具や人に頼む方が確実です。

• ロゴ・写真・イラストを新しく描く：今回確認した公式ドキュメントには、Claude Codeが写真やイラストを生成するという説明はありません。素材は手持ちのものを渡す前提で考えてください
• ブランドの方向性を決める：「どんな会社に見せたいか」は人が決める部分です。決まっていれば形にするのは得意ですが、決めること自体は任せられません
• 印刷物の入稿データを作る：Claude Codeが作るのはWeb向けのコードが中心です。印刷会社の入稿条件に合わせるなら、専用のツールか制作会社を使います

使えるプラン

料金ページによると、Claude CodeはPro・Max・Team・Enterpriseで使え、無料（Free）プランでは使えません。一方、次の章で出てくるClaude Designは、無料プランでも使えます。まず案を作るだけならClaude Design、動く画面にするならClaude Code、という入り方もできます。

Claude Design・Figmaとの使い分け

デザインに関わる道具はいくつかあり、役割が少しずつ違います。まず全体を表にまとめます。

つまり、案を作る段階はClaude Designやデザイナー、動く画面にする段階はClaude Codeという分担が基本です。Claude DesignについてはClaude Designの解説記事で詳しく説明しています。

Claude Designで作ってClaude Codeに渡す

公式ヘルプによると、Claude Designで作ったデザインは、画面右上の「Export」から「Handoff to Claude Code」を選んで渡せます。渡し方は「Send to local coding agent」（手元のClaude Code）と「Send to Claude Code Web」（Web版）の2つです。

ポイントは、スクリーンショットから作り直すのではなく、それまでの作業を引き継いで続きから進むと説明されていることです。画面の案を固めてから、動くものにする作業をClaude Codeに任せる、という流れが取れます。

Claude Codeの中から /design で案を作る

Claude Codeの中で /design に作りたいものを添えて入力すると、画面案をClaude Designのキャンバスとして作れます。公式のコマンド一覧には、次のような例が載っています。

/design a settings screen for a mobile banking app

画面の案、画面の流れ、LP、ポスターなどが、1つのキャンバスにアートボード（台紙）として並びます。デスクトップ版のブラウザで開くと、要素を選んで直接直せて、編集は自動で保存されます。アートボードごとにPNGやPDFで書き出すこともできます。

使うには、Claude Codeのバージョンが2.1.265以降であること、アーティファクト（会話の成果物を共有できる機能）が使える環境であることが必要です。公式ドキュメントによると、APIキーやAmazon Bedrockなどのクラウド経由でClaudeを使っている場合は、アーティファクトが使えないため /design も使えません。会社で管理者がデザインのテンプレートをオフにしている場合も、案は作られません。

すでにFigmaのデザインがある場合

デザイナーや制作会社がFigmaで作ったデザインがあるなら、Figmaと接続して、そのデザインを読み取って実装させることができます。Figmaの公式ヘルプによると、Claude Codeからは部品・変数（色や余白などの値）・レイアウトの情報を読み取れ、選んだ枠からコードを作れます。

設定は、Claude Codeで次のコマンドを実行する方法が案内されています。

claude plugin install figma@claude-plugins-official

インストール後にClaude Codeを再起動し、/plugin からfigmaを選んでサインインします。プラグインを使わずに手動で追加する場合は、claude mcp add --transport http figma https://mcp.figma.com/mcp を実行し、/mcp で認証します。使いたいデザインは、Figmaで枠を右クリックして「Copy link to selection」でリンクをコピーし、依頼文に貼ります。

対象のプランは、Figmaのヘルプでは、MCPの利用がStarter・Professional・Education・Organization・Government・Enterpriseとされています。Figmaのキャンバスへの書き込みはStarterでは使えず、Professional以上が対象です。ベータ期間中は無料で、将来は従量課金になる予定と案内されているので、使う前にFigmaの最新の案内も確認してください。

どれから始めるか

画面を作る流れ

ここでは、Claude Codeで1ページの画面を作る基本の流れを説明します。コードを読み書きする必要はありませんが、Claude Codeを使える状態であること（インストールと、有料プランでのログイン）が前提です。

1. 目的と読む人を決める「誰が、何のために、どんな行動をするページか」を一文で書き出します。たとえば「製造業の設備担当者が、点検サービスの資料請求をするページ」のように決めておきます。
2. 材料を集める載せる文章、会社のロゴ、写真、参考にしたい画面のスクリーンショット、会社の色などをフォルダにまとめます。作業用のフォルダを分けておくと、他のファイルを触られる心配が減ります。
3. Claude Codeを開いて、材料を渡す作業フォルダでClaude Codeを起動し、材料のファイル名や画像を伝えます。画像はそのまま貼り付けられます。
4. 最初の1案を作らせる次の項で説明するように、目的・並び・載せる内容・雰囲気を書いて依頼します。いきなり完璧を求めず、たたき台を作ってもらいます。
5. 画面で確かめるできあがったページをブラウザで開き、見た目を確認します。確かめ方は次の章で説明します。
6. 直す・保存する気になる点を具体的に伝えて直します。区切りのよいところで、Claude Codeに「ここまでを保存して」と頼むと、あとから戻りやすくなります。

最初の依頼の書き方

公式の使い方ガイドでは、依頼は具体的なほど、やり直しが減ると説明されています。たとえば「ダッシュボードをよくして」より、「このデザインを実装して。結果のスクリーンショットを撮って元の画像と比べ、違いを直して」の方が、Claudeが自分で確かめながら進められます。日本語で書くなら、次のように目的・読む人・並び・載せる内容・雰囲気を書いておくのが目安です。

製造業の設備担当者向けに、点検サービスの資料請求ページを1ページ作ってください。
・上から、ひとことで伝わる見出し、悩み3つ、サービスの特長3つ、料金の目安、資料請求ボタンの順
・色は会社の紺色（#1F2430）を基調に、落ち着いた印象で
・スマホで見る人が多いので、スマホの幅でも崩れないように
・文章は添付のメモ.txtを使い、足りない部分は仮の文章で入れて、あとで私が直す
・できたらブラウザで開いて、PCとスマホの幅の見え方を報告して

最後の一行のように、確かめ方まで頼んでおくと、Claude自身が画面を見てずれを直してくれることがあります。確かめる手段の詳細は、次の章で説明します。

画像を渡す

文章だけでは伝わりにくいときは、画像を渡すのが近道です。公式ドキュメントでは、画像を渡す方法として次の3つが案内されています。

• Claude Codeの画面に、画像をドラッグ＆ドロップする
• 画像をコピーして、Ctrl+Vで貼り付ける（WindowsとWSLでは Alt+V）
• 画像のファイルの場所を、依頼文の中で伝える

画像を渡すと、「このスクリーンショットのUIの要素を説明して」「このデザインの案に合わせたCSSを作って」といった頼み方ができます。複数の画像を同じ会話の中で渡すこともできます。手書きのラフ、競合や参考にしたいサイトの画面、Claude Designで書き出した画像などが使えます。

迷うときは、先に計画を立てさせる

何を作るか自体があいまいなときは、いきなり作らせず、先に計画を立てさせる方法があります。公式の使い方ガイドでは、Shift+Tabで「Plan mode（計画モード）」に切り替えると、ファイルを変えずに調べて計画だけを出させられると紹介されています。直す内容が一文で言える小さな変更なら、計画は飛ばして構いません。

ほかに、大きなものを作る前に、Claudeに質問してもらう方法もあります。公式のガイドでは、次のような頼み方が紹介されています。

〇〇を作りたいです。AskUserQuestionツールを使って、技術的なこと・UI/UX・例外的なケースなどを詳しくインタビューしてください。聞き終えたら、仕様をSPEC.mdに書いてください。

「どんな画面にしたいか」を質問に答える形で整理でき、書き出された仕様を新しい会話で実装に使えます。画面の作りかけで方向がずれたときのやり直しも、減らせます。

見た目を確かめて直す方法

画面づくりでいちばん大事なのは、できあがりを見て確かめる手段をClaudeに渡すことです。公式の使い方ガイドでも、「確かめる手段がないと、人が一つ一つ間違いに気づく役になる」と説明されています。画面なら、スクリーンショットとの見比べやブラウザでの確認が、その手段にあたります。

見た目を確かめる4つの方法

デスクトップアプリで確かめる

Claude Codeのデスクトップアプリでは、Claudeが開発用のサーバーを起動し、アプリ内のBrowser paneにページを表示できます。公式ドキュメントによると、Claudeはスクリーンショットを撮り、画面の構造を調べ、要素をクリックし、フォームに入力して、見つけた問題を直します。多くの場合、ファイルを編集したあとに自動でサーバーを起動します。

起動の設定は、作業フォルダの .claude/launch.json に自動で作られ、ポート番号などはここで変えられます。「編集のたびに自動で確かめる」設定は標準でオンで、不要なときはオフにできます。

Chromeと連携して確かめる

Claude Codeは、ブラウザ拡張機能のClaude in Chromeとつなぐことができます。公式ドキュメントでは、できることとして「Figmaのデザインから画面を作り、ブラウザで開いて合っているか確かめる」といったデザインの確認が挙げられています。ターミナルから claude --chrome で起動するか、起動後に /chrome で接続を確認します。次のような頼み方が公式の例です。

localhost:3000を開いて、ログインフォームに不正な入力をしてみて、エラーメッセージが正しく出るか確認してください。

条件は、Google ChromeまたはMicrosoft Edge（そのほかのChromium系ブラウザにも対応）を使うこと、拡張機能のバージョンが1.0.36以降であること、Pro・Max・Team・Enterpriseの有料プランであることです。WSL（Windows上のLinux環境）では使えません。ログインページやCAPTCHAが出たときは、Claudeが止まって人の操作を待ちます。

直しの頼み方

できあがった画面に違和感があるときは、「なんか違う」ではなく、どこを、どう変えたいかを伝えます。数字で言えない場合も、方向と程度を言葉にします。

同じ直しを繰り返すとき

2回直しても同じ問題が残るときは、会話の中に失敗した試みが溜まって、うまくいきにくくなっている可能性があります。公式の使い方ガイドでは、同じ問題で2回以上直したら /clear で会話をリセットし、それまでにわかったことを入れた、より具体的な依頼で最初からやり直すことをすすめています。

また、大きく変えて失敗したときのために、Escを2回押すか /rewind で、会話とファイルを以前の状態に戻す方法もあります。ただし、公式ドキュメントでは、元に戻せるのはClaudeがファイルを直接編集した変更で、コマンドで行った変更は対象外と説明されています。大事なページはGitなどでも保存しておきましょう。

会社のデザインルールを伝える

何度も画面を作るなら、会社の色・文字・部品のルールを毎回伝える代わりに、Claudeが自分で読める場所に書いておくのが近道です。方法はいくつかあり、手間と効く範囲が違います。

CLAUDE.mdに書いておく

CLAUDE.mdは、Claude Codeが会話の始めに必ず読むファイルです。公式のドキュメントでは、アーティファクトのデザインを自社の決まりに合わせる方法として、CLAUDE.mdやテーマのファイルに、色・文字・余白を書いておく例が載っています。

書き方の例は次のとおりです。色や文字は自社のものに置き換えてください。

## デザインのルール
- 色：基本色 #1a4d8f、強調色 #f59e0b、背景 #f8fafc
- 文字：本文は Noto Sans JP、見出しは太字
- 余白：8pxの倍数で揃える。角の丸みは6px
- ボタン：基本色の背景に白い文字。画面の幅いっぱいには広げない

同じドキュメントには、Claudeはこうしたデザインのルールを自分の判断より優先し、さらに依頼文の指示をいちばん優先する、と説明されています。ルールは短く、「なくすと間違える」ものだけに絞るのが、長く効かせるコツです。公式の使い方ガイドでも、長すぎるCLAUDE.mdは大事な指示が埋もれて無視されやすくなると注意されています。

既存の画面を手本に指す

すでにあるページを手本にする方法も、公式の使い方ガイドで案内されています。「ホームページにある既存の部品の作りを見て、同じ作りでカレンダーの部品を作って」のように、手本のファイルを指して、同じ作りで作るよう頼みます。新しい画面を、今ある画面と同じ見た目・同じ部品で作らせたいときに向いています。

frontend-designプラグイン

Anthropicの公式プラグインに、画面づくり向けの「frontend-design」があります。公式の説明では、「ありきたりなAIらしい見た目を避けた、個性のある本番品質の画面を作る」ためのものです。プラグインは、画面づくりの依頼を検知すると自動で働きます。

公式ページによると、作る前に、画面の目的・読む人・雰囲気から全体の方向性を決め、標準のフォントや紫のグラデーションのような定番の選び方を避けるように働きます。ダッシュボードやランディングページ、設定画面などを作る依頼が例として挙げられています。

入れるには、Claude Codeで /plugin を開き、Discoverタブで探します。公式ドキュメントに載っている入れ方の形は /plugin install 名前@claude-plugins-official です。入れる前に、詳細の画面で、プラグインが追加する内容と、毎回の会話に増える使用量の目安を確認できます。

スキルにまとめる

会社の資料のテンプレートや、よく作る画面の手順は、「スキル」にまとめておくこともできます。スキルは、.claude/skills/ に置いたSKILL.mdのファイルで、必要なときだけ中身が読み込まれるため、CLAUDE.mdのように毎回の会話を重くしません。「LPを作るときの構成と文章の決まり」のような、時々使う手順に向いています。

業務での活用例

ここでは、Claude Codeでデザインの仕事を任せる場面を、部署ごとに整理します。以下は公式の機能にもとづいた「想定の例」で、特定の会社の実績ではありません。

想定の流れ：資料請求ページを作る

営業担当者が、新しいサービスの資料請求ページをClaude Codeで作る場合を想定して、流れを追ってみます。これまでは制作会社に頼んでいて、1ページの見積もりと打ち合わせに時間がかかっていた、という状況を想定します。

1. 案を作るClaude Codeで /design を使い、「製造業の設備担当者向けの資料請求ページ。スマホ中心」と頼んで、複数の案をキャンバスに並べます。
2. 方向性を決める案を社内で見比べ、「Aの並びで、Bの色づかい」と決めます。必要なら、手書きの修正メモを画像にして貼ります。
3. 動く画面にする決まった案をClaude Codeで実装してもらいます。「できあがったらブラウザで開いて、PCとスマホの見え方を報告して」と頼んでおきます。
4. 見て直す報告を見たうえで、自分でも画面を開き、気になる点を具体的に伝えて直します。
5. 確認して公開の準備に進む文章・価格・連絡先を人が確認し、フォームの動作や公開の手続きは、次の章の項目に沿って進めます。

ここで人が行うのは、案の方向性を決めること、文章と数字を確認すること、公開の判断をすることです。配置・色・コードの作業の多くを、Claude Codeに任せられます。

想定の流れ：Excelの管理表を入力画面にする

業務改善の担当者が、Excelで管理している受注の一覧を、入力しやすい画面にしたい場合は、まずExcelのコピーを作業フォルダに置き、「この一覧の列をそのまま使って、入力と検索ができる画面を作って。まずは一覧画面と入力画面の2つ」と頼みます。実際のデータは使わず、架空のデータを入れてもらうと、関係者に見せるときに安心です。

画面が固まったら、関係者に触ってもらい、「検索の条件を増やしたい」「金額の列は左に」などの意見を集め、そのまま依頼文にして直します。画面を作る作業と、実際にデータをつなぐ作業は別なので、後者は範囲を決めて、段階的に進めると安全です。

注意点・うまくいかないとき

公開までに必要な作業

Claude Codeで作った画面は、見た目が整っていても、そのまま会社のページとして公開できる状態とは限りません。次のような作業が別に必要です。

• ドメイン（ページのアドレス）の取得と設定
• スマホ・タブレット・パソコンそれぞれでの表示の確認
• 問い合わせフォームの動作確認と、送られた内容の受け取り先の設定
• 表示速度の確認と、画像の大きさの調整
• 検索エンジンに表示されるための設定（ページのタイトル、説明文など）
• 公開後の更新、バックアップ、問題が起きたときの連絡体制

社内で見るだけのページなら、これらはかなり軽くなります。外に向けた会社の看板になるページほど、確認の項目は多くなります。

写真・フォント・参考にしたデザインの権利

画面に使う写真、ロゴ、フォントは、自社が使う権利を持つものを使ってください。参考として他社のサイトの画面を渡すことはできますが、できあがりが参考にしたものとそっくりになっていないかは、人が確認する必要があります。作ったものを商用で使うときの条件は、Anthropicの利用規約もあわせて確認しましょう。

画面に入れる情報の扱い

画面の見本やスクリーンショットを渡すときは、実際の顧客名・電話番号・金額などが映っていないかを確認してください。渡した画像や文章は、Claudeに送られます。画面の試作では、「山田太郎」「090-0000-0000」のような架空のデータを入れるよう、依頼文で伝えておくと安全です。

また、Figma連携やプラグインなど、外部のサービスとつなぐ機能を増やすときは、つなぐ先を信頼できるかを確認します。公式ドキュメントでも、MCPサーバーは信頼できるものだけを接続するよう注意されています。外部の内容を読み込むサーバーは、指示を紛れ込ませる攻撃（プロンプトインジェクション）の入口になり得るためです。

うまくいかないときの対処

会社で決めておくこと

部署やチームで使う場合は、次のような点を先に決めておくと、使う人によって品質がばらばらになるのを防げます。

• 画面づくりに使ってよい素材（写真・ロゴ・フォント）の置き場所
• Claude Codeに渡してよい情報と、渡してはいけない情報
• 公開するページの、最終確認をする人
• 使ってよいプラグイン・外部サービスの範囲
• 会社の色・文字のルールを書いたCLAUDE.mdを、誰が管理するか

よくある質問

まとめ

Claude Codeを使うと、画面の案を動く形にして、関係者に触ってもらいながら直す、という進め方が現実的になります。まずは社内向けの小さなページで試し、会社のルールをCLAUDE.mdに書いて、少しずつ範囲を広げていくのがおすすめです。

会社のページとして公開する段階や、社内で使い続けるための設定・ルールづくりで手が止まることもあります。INTERCREATE JAPANでは、Claude Codeなどの導入から、試作を公開・運用できる形にするところまでをお手伝いしています。