Claude Code × FigmaでWebデザインの初期構造を爆速で作る方法【初心者向け】

LPやWebサイトのデザインを始めるとき、真っ白な画面を前に「レイアウトどうしよう」「何から作ればいいんだ」と手が止まった経験はありませんか？
気づいたら数時間が溶けていた、という方も多いのではないでしょうか。

Claude CodeとFigmaを組み合わせると、デザインの初期構造を数分で生成し、そのままFigmaで編集できる状態まで一気に持っていくことができます。

この記事では、Claude CodeとFigmaを使ってLPデザインの初期構造を短時間で作る方法を、フォルダ構成・素材準備・プロンプト・Figma読み込みまで全手順で解説します。
この記事は、デイトラのWeb・AIチャンネルで現役デザイナーのトムが実演した内容をもとにしています。

Claude Codeとは？デザイン制作での使い方と導入方法

Claude Codeは、一言で言うとコードを書いてくれるAIツールです。ただし今回は、コードを生成するというよりデザインの構造を作るためのツールとして使います。

使い方はシンプルで、必要な準備は以下の2つだけです。

1. ClaudeのProプランを契約する
2. PCに環境を入れる

Claude Codeを使うにはProプランへの契約が必須です。この点だけ注意してください。
初期設定としてやることも2つだけです。

1. 作業フォルダを作る
2. Claudeを起動する

この状態まで作れれば、今回の手順はそのまま再現できます。MacとWindowsそれぞれの初期設定手順は、動画の視聴特典として配布されています。

フォルダ構成と素材の整理｜Claude Codeでデザイン生成する準備

まず、動画の概要欄からclaude-designのZIPファイルをダウンロードします。今回はデスクトップに置く想定で進めます。ZIPファイルを解凍すると、claude-designというフォルダが生成されます。中には以下のデータが入っています。

• CLAUDE.md — AIへの出力ルールを記載したファイル
• source/ — 素材を格納するフォルダ
• HTML/ — 生成されたデザインデータが入るフォルダ
• text — 実際のプロンプト（指示文）が記載されたファイル

sourceフォルダの中身

sourceフォルダの中には、さらに2つのフォルダがあります。

• image/ — LPやホームページで使用したい画像を入れる場所
• research/ — デザインの参考画像を入れる場所

HTMLフォルダ

HTMLフォルダは最初は空の状態です。ここにClaude Codeが生成したHTMLデータが出力されます。

参照デザインの準備｜スクリーンショットの取得方法

次に、参考にするデザインを用意します。今回はデイトラの以下2つのLPを参考デザインとして使用します。

1. デイトラのトップLP
2. Web制作コースのLP

参照デザインを読み込ませる際は、ページ全体のフルスクリーンショットが必要です。Chromeのプラグイン「GoFullPage」を使ってスクリーンショットを取得します。

1. Chromeの右上にあるカメラマークのアイコンをクリック
2. ページ全体のスクリーンショットを取得
3. ダウンロード

2つのLPのスクリーンショットをダウンロードしたら、sourceフォルダ内のresearchフォルダに入れます。

素材の収集｜Adobe StockとイラストACで画像を準備

参照デザインの準備ができたら、LPに使う素材を集めます。今回はAdobe StockとイラストACの2つを使用します。

写真素材（Adobe Stock）

今回はキービジュアルに女性の写真を使いたいため、Adobe Stockから2枚の写真をダウンロードします。

イラスト素材（イラストAC）

イラストACでは、カフェラテさんというクリエイターのイラストを使用します。以下のようなイメージのイラストを選んでいきます。

• デザインを勉強しているイメージ
• 少し悩んでいるようなイメージ
• 気づいている表情のイメージ
• 考えているイメージ
• 初心者のイメージ
• ガッツポーズのイメージ

スーツを着ているような人たちの画像はイメージと合わないため、主に女性のイメージの画像を選定しています。合計10枚の画像をダウンロードしたら、sourceフォルダ内のimageフォルダに移動します。これで生成の準備が完了です。

CLAUDE.mdでルールを設定する｜AIへの指示をカスタマイズ

CLAUDE.mdファイルを開くと、出力に関するルールが記載されています。内容としては、AIが実際にデザインを出力する際に「やってほしいこと」と「やらないでほしいこと」が最小限の要件としてまとめられています。

今回配布されたデフォルトの状態で問題ありませんが、使い慣れてきたら自分でチューニングすることも可能です。各自のプロジェクトに合わせてカスタマイズすることで、自分だけのルールセットを作ることができます。

Claude CodeでLPデザインを生成する｜プロンプトの書き方と実行

いよいよClaude CodeでLPを生成します。

ターミナルの起動

1. Macの右上の虫メガネマーク（Spotlight）を押す
2. 「ターミナル」と検索してアプリケーションを起動
3. 配布ファイルに記載されている cd ∼/Desktop/claude-design && claude コマンドをコピーして貼り付け、Enterを押す

Claude Codeがインストールされている状態であれば、Claudeの画面が表示されます。

プロンプトの入力

配布されたテキストファイルにプロンプトが記載されています。今回使用するプロンプトは以下のような内容です。

コピーソースファイル内のデータを参照して下記要件でLPを作成してください。
テーマカラー：白ベース、アクセントに水色系
トーン：落ち着き、優しい印象
ターゲット：副業で収入を得たい会社員、初心者デザイナー
フォント：丸ゴシック
キーワード：デザイン、コーチング、副業
ファーストビューで誰向けのサービスかを明確にしてください。
その後のテキストはお任せします。

この5つの要件（テーマカラー・トーン・ターゲット・フォント・キーワード）はデザイン作成に最低限必要な要件です。消さずに中身を自分の案件に合わせて入れ替えて使ってください。

生成の実行

1. コピーしたテキストをClaude Codeに貼り付けてEnterを押す
2. Claudeから「Do you want to proceed?」と確認の指示が返ってくるので、そのまま「1.Yes」を押す
3. 数回同様の確認の指示が返ってくるので、その都度「1.Yes」を押す
4. 約8分後に再度確認が表示されるので「1.Yes」を押す

これでLPが生成されます。

FigmaにHTMLデザインを読み込む｜プラグインでの変換手順

claude-designフォルダ内に生成されたHTMLデータを確認すると、少し気になる部分はあるものの、全体的にはベースとして十分使える状態で出力されています。このHTMLをFigmaのデザインデータに変換していきます。

Figmaでの手順

1. Figmaを開き、ドラフトからデザインを新規作成する
2. ファイル名を付けて保存する（動画では「Claude-demo」）
3. 右クリック → 「プラグインを管理」を選択
4. 検索欄に「html」と入力
5. 少しスクロールすると「html.to.design」というプラグインが出てくるので実行
6. プラグインが開いたら、上部タブの「File」をクリック
7. 青色のボタンをクリックしてデータをインポート
8. デスクトップ → claude-design → HTMLフォルダ内のLP01ファイルを選択
9. オートレイアウトは全てオフにした状態でインポートボタンを押す

これでHTMLがFigmaのデザインデータとしてそのまま読み込まれます。

生成結果の確認

プロンプトで指示した内容が正しく反映されているか確認します。

• テーマカラー：白ベース、アクセントに水色系 → クリア
• トーン：落ち着き、優しい印象 → クリア
• ターゲット：副業で収入を得たい会社員、初心者デザイナー → 間違いない
• フォント：丸ゴシック系 → 使用されている
• キーワード：デザイン、コーチング、副業 → 反映されている

さらに、文章のたたきも合わせてベースを作ってくれている点が大きなメリットです。

まとめ｜Claude Code × Figmaでデザイン制作の初期工程を効率化しよう

AIに全部を任せて楽をするという話ではありません。制作の最初の工程を前に進める「仕組み」の話です。

構造はAIが作る。デザインの最終判断は人間がやる。この役割分担ができると、制作のスピードと精度は一気に変わります。AIにすべて任せるのではなく、最初の工程だけ仕組みで前に進め、自分の判断力が生きる工程に集中できる環境をぜひ取り入れてみてください。

Claude Code × Figmaに関するよくある質問

Q. Claude Codeを使うのに費用はかかりますか？

はい、Claude Codeの利用にはClaude Proプラン（月額20ドル）の契約が必要です。動画内でも「プロプランへの契約が必ず必要」と解説されています。

Q. プログラミングの知識がなくても使えますか？

使えます。動画では「難しいプログラミングの話はしません」と冒頭で説明されており、ターミナルにコマンドをコピー＆ペーストするだけで操作できます。配布されたテンプレートをそのまま使えば、プログラミング知識は不要です。

Q. 生成にどれくらい時間がかかりますか？

動画内では約8分でLPが生成されていました。プロンプトを入力してからClaude Codeが処理を完了するまでの時間です。

Q. 生成されたデザインはそのまま納品できるレベルですか？

そのままでは完成品ではありません。動画内でも「少し気になる部分はある」としつつ「ベースとしては十分使える状態」と解説されています。AIが初期構造を作り、最終的なデザインの判断は人間が行うという役割分担が前提です。

Q. CLAUDE.mdは自分でカスタマイズできますか？

できます。動画では「使えるようになってきた方はぜひ自分でチューニングして試してみてください」と案内されています。ただし、まずはデフォルトのまま試すのがおすすめです。

Claude Code × FigmaでのWebデザインをさらに深く学ぶならデイトラ「Webデザインコース」

本記事で解説したClaude Code × Figmaを使ったデザイン制作は、独学でも基礎を押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。

デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。

FigmaやAIツールを使いこなして副業やフリーランスとして活躍したい方は、ぜひ一度カリキュラムをチェックしてみてください。

▶︎デイトラWebデザインコースの詳細を見てみる

「自分に合うか不安…」という方は公式LINEへ

「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」

そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。

無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。

▶︎デイトラ公式LINEで無料相談してみる