Claude Codeを使ってFigmaにWFを生成しよう！

ClaudeのProプラン以上（2026.05.10現在）で利用できるClaude Codeを使用してFigmaにWFを生成できるプロジェクトを作成しました💪

今回はその概要と使い方、出力されるものを紹介していきます！

このプロジェクトでできること

このプロジェクトでは、ヒアリングシートを入力してClaude Codeに出力の指示をするとFigma上にWFを直接出力してくれるようになっています。ヒアリングシートを入力する以外の操作は基本的には指示をするのみでOKです👍

出力されるものを改良することも可能なので、ぜひご自身のヒアリングスタイルに合わせてカスタマイズもしてみてくださいね！

準備していただくもの

上記の準備を事前にお願いします！

ClaudeのアカウントはClaude Codeが使用できるProプランかMaxプランでご利用ください。

※参考までに、WFを生成しきるまでに使用するセッションは、Proプランで30％前後になることが多いです。（画像はWF制作始め〜軽微な修正1回でWF出力を終えたところまでの使用量、2026.5.19時点）

VSCode上での設定は特に必要ありませんが、Claude Codeを使用するので「Claude Code for VS Code（VSCodeの拡張機能）」はインストールしておいてください。リンクから飛んでいただくか、VSCode内から拡張機能を検索してください！

手順を誤るとFigmaのAPIトークンを要求されることがあるのですが、これから紹介する手順でセットアップすればローカルのみで使用できるのでAPIトークンは作成しなくてOKです。

また、FigmaでDevモードを使用できない場合はこのプロジェクトは使用できませんのでFigmaの課金プランにご注意ください。

それではさっそくプロジェクトを準備していきましょう！

セットアップ手順

プロジェクトをダウンロードする

GitHubからクローンする場合は下記からダウンロード可能です🙆‍♀️

bash
git clone https://github.com/harunakonohira/wireflame-project

Zipファイルでダウンロードしたい方はこちらからアクセスしてください！

Zipファイルをダウンロードした方はそのまま解凍してください。

※「bash」は文字で命令するという意味なのでこれ以降「bash」と記載があっても「bash」の文字列自体は入力しないでください

VSCodeでプロジェクトを開く

wireframe-projectをVSCodeで開いてください。通常のコーディングファイルを開く要領で同じように開きます。

Figma MCPを設定する

FigmaデスクトップアプリでDev Modeを有効にする

Figmaプラグインをインストールする

VSCodeで新しいターミナルを開いて、以下のコマンドを実行してください。ClaudeのFigmaプラグインをインストールします。

bash
claude plugin install figma@claude-plugins-official

Successfully installedと表示されたらOKです！

Claude Codeを起動してFigmaにログインする

以下をターミナルで実行し、Claudeを起動します。

bash
claude

起動したら、以下を実行します。

/mcp

一覧が表示されるので plugin:figma:figma · △ needs authentication を選択してEnterを押す。ブラウザが開いてFigmaのログイン画面が出るので「Allow Access」をクリック。

Authentication successfulと表示されたら設定完了です！

最後にもう一度以下を実行します。

/mcp

plugin:figma:figma · ✔ connectedになっていれば接続完了です！

WFを生成しよう！

2回目の使用以降はここまでの設定は必要なく、Claude Codeを起動するだけです！うまくいかない場合はなぜ上手く進まないかが表示されるので、これまでの手順のどこかを確認する流れとなります。

作成は以下の流れです。

それでは一つずつ詳しく見てみましょう！

クライアントフォルダを作る

Claude Codeに以下の指示を出します。

クライアントフォルダを作って、名前は「クライアント名」

「クライアント名」のところは各自で書き換えてください。文章の意味が一致していれば一言一句同じでなくても問題ないです🙆‍♀️

作成が完了したら、clientsフォルダの中に指示したクライアント名で新たにフォルダが作成されていることを確認してください。途中で質問が出てくるので適宜回答してください（エラーでなければyesで大丈夫です）。

また、ここから書いていく内容は、このプロジェクトを使い進めていく中で「次にやること」としてClaude Codeからも随時教えてくれるようになっているので、ご安心ください🙌

事前ヒアリングシートに入力する

clients/クライアント名/pre-hearing.mdを開きます。

作成したクライアントフォルダの中にある事前ヒアリングシートに関するファイルです。

※筆者はGitHubに繋いでいる関係で文字色が変わったりしていますが、特にGitHub等に接続していなければ通常の文字色で表示されています。

通常、ヒアリングの前にクライアントの情報がある程度わかっているか、テキストベースで軽く制作するものについて確認をすると思います。その情報を入力しておきましょう。

入力が終わればClaude Codeに以下の指示を出しましょう！

clients/クライアント名/pre-hearing.md を読んで、
hearing.md の埋められる項目を先に埋めてください。

「事前ヒアリングシート埋めたからヒアリングシートの埋められるところ埋めといて〜」くらいの指示でも大丈夫です🙆‍♀️

しばらく待つと上の画像のように変更箇所を示したファイルが表示されます。これは事前ヒアリングシートの内容をもとにヒアリングシートに分っている情報を先に埋めておいてくれる機能です。

この状態で、次はクライアントにヒアリングをしましょう。ヒアリングが終わったら次の章に進んでください！

ヒアリングシートに入力する

このヒアリングシートは一般的な最低限の内容を入れているだけなので、ご自身のヒアリングシートがある場合はテンプレートファイルをアレンジして使用してくださいね💪

もちろん、このまま使っていただいてもOKです！使っていく中で改良点が見つかればアレンジしていきましょう。

さて、クライアントへのヒアリングが終わったらヒアリングシートを入力しましょう。

シート内空欄になっているか「※本ヒアリングで確認」とあるはずなので、そこを埋めていきます。追加で伝えたい情報があればシート最下部に特記事項を書ける場所があるのでヒアリングシートに用意がなかったものに関してはそこに記入してください。

先に埋めている箇所に関しても更に詳しく書き換えたり、情報を訂正・修正したりして大丈夫です🙆‍♀️

入力を終えたらClaude Codeに以下のように教えてあげましょう。

hearing埋まったよ

この後、少々時間がかかりますがClaude Codeがヒアリングの内容を元にクライアントの要望や課題を一度検討するというステップを挟んでから、ページ構成と仮テキストを提案してくれます。

ヒアリングした内容でClaudeに渡す内容が濃ければ濃いほど、より濃密な設計がなされていきます。逆に、ヒアリング内容が薄いと薄っぺらくなることもあるので追加のヒアリングを検討しても良いかもしれません。

※後にも解説しますがこの推論フレームはとてもシンプルです。ぜひカスタマイズして育ててみてくださいね🙌

テキストは後から変えられるので、ページ構成の方を重点的に確認してください。

どういうページを作成するか、ページの中身はどういう順番でセクションが並んでいるかは、ヒアリングシートをもとに検討してくれた結果が並んでいますが、鵜呑みにすることなく「本当にこれで問題ないか」をじっくり確認してから次に進みましょう💪

もし、ページ構成や内容に修正箇所がある場合は、具体的に指示してください。

〇〇ページの〇〇〇〇セクションの〇〇を〇〇〇にして！

また、指示だけではなく壁打ちも可能です。

- 〇〇は〇〇だと思うんだけどどう思う？
- 〇〇はなぜこうしたの？
- 〇〇〇の内容をもう少し〇〇にしたいんだけどどうかな？

ヒアリングの該当箇所をもう一度確認して検討してくれます。ヒアリング時のニュアンスも伝えるとより良いブラッシュアップになるはずです。

修正指示に関して、勝手に変更しないようにルールを書いています。必ず「〇〇しますか？」と確認してくれるので、そこで確認して再度指示、またはOKの旨を伝えてください。

最終のOKを出す

修正指示が全て完了すればその旨をClaude Codeに伝えましょう。

この内容でFigmaにWFを出力して

この後はしばらく待つだけです！

いくつか確認事項が出る場合があるので適宜回答してください。（エラー出ない場合は基本的にyesで許可していく感じになります。）

進行中は適宜報告してくれるように設定しています。

どこかで不具合が起きた場合はこちらにエラーが表示されます。エラーが出た場合でも、どんなエラーでこちらに何をしてほしいかは表示されるのでご安心ください🙆‍♀️

最後の方に出力したものの基本的なデータをまとめるファイルを作成してくれます。この内容で問題ないかと聞かれるので問題なければそのままYesで回答しておきましょう。

時間帯や通信環境にもよりますが、数分で出力が完了します💪出力されたら中身を確認しましょう。気付いたテンプレートのブラッシュアップはこのタイミングでおこなっておくと良いです。

また、最後に確認してほしいポイントが出ます。テキストが仮だったり、仮で入れたために必ず修正が発生しそうな部分は教えてくれるので確認しておきましょう。

指定したページが出力されていますね！

基本的にはオートレイアウトを使用して構築してくれるのでFigma上での修正も行いやすいです。ヒアリングした内容と照らし合わせ確認・修正をして、次の段階に進んでいきましょう！💪

これでWF生成の完了です！お疲れさまでした🙌

この後は、このプロジェクトのフォルダ構成やClaudeへ指示している内容等を確認していきます。

このプロジェクトのフォルダ構成

wireframe-project/
├── CLAUDE.md                    ← Claudeへの指示書
├── README.md                    ← プロジェクトの使用方法
├── clients/                     ← クライアントごとのフォルダ
│   └── _template/               ← ひな形
│       ├── pre-hearing.md       ← 事前ヒアリングシート
│       ├── hearing.md           ← 本ヒアリングシート
│       └── output/              ← WFサマリーの保存先
└── guidelines/                  ← Claudeが読むルール集
    ├── wireframe-rules.md
    └── figma-output-guide.md

CLAUDE.md

このファイルにはClaudeへのルールが記載されています。ここを編集してしまうとプロジェクトのどこかで不具合が起こる可能性が大いにあるので基本的には触らないでください。

もし変更する場合はプロジェクト全体で整合性が取れるのかどうかをClaude Codeで確認するのが安全です。

README.md

このプロジェクトの使用方法が書かれているファイルです。使用方法がわからなくなった時はこの記事を確認する他に、このファイルを読むことで確認可能となっています。

基本的にはこの記事で解説している内容が書いてあります。

clientsフォルダ

このフォルダには、クライアントごとのフォルダと、それを作成するためのテンプレートが格納されています。本プロジェクト使用時に操作するのはこのフォルダ内のクライアント名フォルダ内にある「pre-hearing.md」と「hearing.md」のみです。

「_template」の中にある事前ヒアリングシートと本ヒアリングシートは、WF生成のための全ての参考になるものです。ご自身のヒアリングスタイルに合わせて適宜調整していただいて構いません🙆‍♀️

調整した場合はプロジェクト全体と整合性が取れるかどうかをClaudeに確認させてください！

guidelinesフォルダ

ClaudeがWFを生成する際に参照するルールが格納されているフォルダです。

figma-output-guide.md

このファイルにはFigmaへアウトプットされるWFのルールが記載されています。ファイル名やファイルのページの使用方法、フレームの設定、出力する手順についてが設定されています。

基本的には編集しない想定で作成していますが、ファイル名等の命名方法やフレームのサイズ感などは使用しやすいように変えてもらっても構いません。

wireframe-rules.md

このファイルにはWFの設計についてのルールが記載されています。出力されるWFのブラッシュアップはこのファイルから編集可能です。

主な記載事項

特に、構成設計の推論フレームについては使用ごとに育てていくと良いかと思います。AIは常に完璧ではないということを頭の片隅に入れて、何をどうすると良いかを考える癖をつけておおいてください🙌

最後に

お疲れさまでした☕️

Claude CodeでのWF生成はいかがでしたか？

自分でできないことをClaudeにやってもらうのも良いですが、自分の思考をルール化して分身として使うことができると一段と自分の時間を増やすことができます🙆‍♀️いわゆる、エージェントとしての利用ですね！

これからの時代、どんどんAIが進化していくことが予想されます。その進化に不安感を覚えている方もいるかもしれません。そういう時こそ「エージェントとしての利用」をしっかり意識してください！

あなた自身が「プロ」としてできる仕事を、AIと共により強固なものにしていきましょう🙌