Claude CodeとFigmaを組み合わせると、デザイン出力ファイルの整理からコード生成まで5工程を自動化できます。非エンジニアでも日本語指示だけで実装でき、月額約3,000円のProプランで利用できます。この記事では導入手順から実務ハックまで解説します。
この記事でわかること
Figmaから書き出したJSONをClaude Codeに渡すだけで命名統一・仕様書生成など5工程が自動化できる仕組みがわかります。CLAUDE.md1枚で毎回の背景説明をゼロにする具体的なテンプレートを入手できます。ターミナル未経験者が15分で動かせる3ステップの導入手順を確認できます。
この記事の結論
Claude CodeとFigmaを組み合わせた自動化の核心は「Figmaの出力ファイルをClaude Codeに渡し、日本語で指示するだけで次の作業を完結させる」この1点に集約されます。現時点ではClaude CodeとFigmaの公式直接連携は存在しませんが、Figmaから書き出したJSON・画像・仕様書テキストをClaude Codeが読み込み、ファイル整理・コンポーネント命名・提案書草稿まで自律的に処理できます。非エンジニアが週3日稼働で月20〜30時間の反復作業を削減した報告があり、導入ハードルは「ターミナルを1度開く」だけです。
今日やるべき1つ
Claude CodeのProプランに登録し（月額約3,000円）、Figmaから書き出したJSONファイル1つをプロジェクトフォルダに置いて「このJSONのコンポーネント名を日本語で一覧化してください」と日本語で入力してください（所要時間15分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まずFigmaとの連携の基本を知りたい | Claude CodeとFigmaは5工程で連携できる | 3分 |
| CLAUDE.mdを今すぐ設定したい | CLAUDE.mdで出力ブレを5割削減する方法 | 5分 |
| 非エンジニアが導入できるか不安 | 非エンジニアでも3ステップで導入できる仕組み | 5分 |
| 業務の丸投げ設計を作りたい | 部署分けで確認作業を週3時間に圧縮する設計 | 5分 |
| 実際の成功・失敗事例を知りたい | Claude Code×Figmaは2パターンで明暗が分かれる | 4分 |
| 自動化の仕組みを5つまとめて知りたい | Claude Code×Figma自動化は5つの仕組みで完結 | 8分 |
| 自分の状況で何から始めるか判断したい | Claude Code導入は3分診断で最適ルートを選ぶ | 3分 |
Claude CodeとFigmaは5工程で連携できる
「Claude CodeとFigmaを直接つなぐボタンはない」というのは事実です。ただ「ファイルを介した連携」という考え方を持つだけで、5つの工程を自動化できます。
FigmaのJSON出力がClaude Codeの入力になる仕組み
FigmaはデザインデータをFigma REST API経由のJSON、またはDev Modeのコードプレビューとして書き出せます。このJSONファイルをローカルのプロジェクトフォルダに保存すると、Claude Codeはそのファイルを読み込んでコンポーネント名・カラーコード・テキストスタイルを一覧化できます。Figma Developersの公式APIドキュメントでは、GET /v1/files/{file_key}/stylesエンドポイントでスタイル情報をJSON形式で取得できると明記されています。つまりFigmaは「データの出口」、Claude Codeは「データを受け取って次の作業を完遂するエンジン」という役割分担が成立します。この分担を理解するだけで、連携の設計は一気にシンプルになります。
自動化できる5工程の全体像
Claude Code×Figma連携で自動化できる工程は、ファイル整理・命名統一・仕様書生成・提案書草稿・コード骨格生成の5つです。第一工程は、Figmaから書き出した複数の画像ファイルをClaude Codeが命名規則に従ってリネームする作業で、手作業では30〜60分かかる作業が5分以内に完結します。第二工程は、JSONから取得したコンポーネント名を命名規則（例：BEM記法、キャメルケース）に統一することです。第三工程は、デザインの構成要素を読み取って仕様書のMarkdownを生成することで、クライアントへの共有資料の下書きになります。第四工程は仕様書をもとにした提案書の草稿生成で、第五工程がHTMLやReact・Vue等のコンポーネント骨格の生成です。5工程すべてを毎日実行する必要はなく、自分の案件で繰り返し発生する工程から1つ選んで試すことが最短の導入ルートです。
「公式連携がない」は問題にならない理由
Claude Codeはターミナル上でファイル操作・コマンド実行・Git操作を自律的に行うAIエージェントです（Claude Code公式ドキュメント）。「公式連携」とは要するに「ファイルのやり取りを仲介するUIが存在するかどうか」の問題であり、ファイルを手動または簡単なスクリプトで配置できれば、UIの有無は作業結果に影響しません。Figmaからファイルを書き出す操作は5分以内に習得できるため、公式連携の欠如は実質的なハードルになりません。Figma AIデザインの機能と組み合わせることで、さらに効率的なワークフローが構築できます。
CHECK
▶ 今すぐやること: FigmaのDev Modeを開き、任意のフレームのJSONコードをコピーして「test.json」というファイル名でデスクトップに保存する（5分）
Q: FigmaのAPIキーは取得が難しいですか？
A： Figmaアカウントの設定画面（Account Settings > Personal access tokens）から3クリックで発行できます。コードを書く必要はなく、発行したキーをメモ帳に保存しておくだけで次の手順に使えます（Figma Access Tokens）。
Q： JSONファイルが大きすぎてClaude Codeが処理できないことはありますか？
A： Figmaの大規模ファイルでは1MB超えのJSONが生成されることがあります。その場合はFigma上でフレームを分割して書き出す、または「styles」「components」等のエンドポイントを個別に取得する方法で対応できます。
CLAUDE.mdで出力ブレを5割削減する方法
毎回「このプロジェクトの命名規則は○○で、ディレクトリ構成は△△です」と説明し直しているなら、その手間はCLAUDE.mdを1度作れば不要になります。
CLAUDE.mdに書くべき5つの項目
CLAUDE.mdはプロジェクトのルートフォルダ（最上位の階層）に置く「前提条件の説明書」です。Claude Codeはセッションを開始するたびにこのファイルを自動で読み込み、以降の作業はすべてここに書いた内容を前提にして動きます。Figma関連プロジェクトのCLAUDE.mdには、プロジェクト概要・ファイル命名規則・ディレクトリ構成・Figmaファイルの書き出し場所・出力フォーマット指定の5項目を含めると、出力のブレが大幅に減ります。具体的には「Figmaから書き出した画像は /assets/figma/ に保存する」「コンポーネント名はキャメルケースで統一する」「仕様書はMarkdownで出力する」という3行を追加するだけで、Claude Codeはその規則を毎回守って作業を実行します。このファイルを持っていないプロジェクトでは、同じ作業でも出力が毎回異なる問題が発生しやすく、確認・修正の工数が増える一因になっています。
CLAUDE.md テンプレート（Figma連携用）
以下のテンプレートをそのままコピーして、プロジェクトのルートフォルダに「CLAUDE.md」というファイル名で保存してください。
# プロジェクト概要
このプロジェクトは[クライアント名]の[プロジェクト名]です。
主な目的：[LP制作/コンポーネント整理/デザイン仕様書生成 等]
# Figmaファイル情報
書き出し先ディレクトリ：/assets/figma/
命名規則：キャメルケース（例：heroSection, primaryButton）
JSONの取得元：Figma REST API v1
# 出力フォーマット
仕様書：Markdown（.md）
コンポーネント一覧：CSV（.csv）
コード：React/TypeScript（変更する場合はこの行を書き換える）
# 確認不要な作業（自律実行してよい）
ファイルのリネーム
ディレクトリ整理
JSONからのコンポーネント名抽出
# 確認が必要な作業（実行前に報告すること）
ファイルの削除
外部APIへのリクエスト
クライアント提出物の最終出力
「確認不要な作業」と「確認が必要な作業」を明示することで、Claude Codeが自律的に動ける範囲と人間が判断すべき範囲を分離できます。この分離がなければ、Claude Codeが重要ファイルを意図せず上書きするリスクが生じます。エンジニアと協働する場合はコード欄を「Vue/Nuxt」や「HTML/CSS」に変更してください。デザイン確認のみを担う場合は「出力フォーマット」をPDFやPowerPoint形式に変更することもできます。
週2〜3日稼働でも文脈が切れない理由
フリーランスは週2〜3日稼働のケースが多く、案件に戻るたびに前回の作業内容を思い出すのに20〜30分かかることも珍しくありません。CLAUDE.mdにプロジェクトの前提を書いておくと、Claude Codeが「前回どこまで進んでいたか」を把握した状態で作業を再開できます。さらに「引き継ぎファイル」を毎回生成する設計にすると、人間側の記憶への依存をほぼゼロにできます。引き継ぎファイルとは作業完了後にClaude Codeが自動生成する「今日やったこと・次にやること・未解決の課題」の3点セットのMarkdownファイルです。この仕組みにより、週3日稼働のフリーランスでも毎日フルタイムで働いているエンジニアと同等の文脈継続性を確保できます。作業効率を上げる方法と組み合わせることで、さらに生産性が向上します。
CHECK
▶ 今すぐやること: 上記テンプレートをコピーし、「CLAUDE.md」というファイル名でFigmaプロジェクトのフォルダに保存する（10分）
Q: CLAUDE.mdは毎回更新が必要ですか？
A： プロジェクトの構成や命名規則が変わった際にのみ更新が必要です。通常は初回作成後は数週間〜数ヶ月間、更新なしで機能します。更新のタイミングは「Claude Codeの出力が指示とずれ始めたとき」を目安にしてください。
Q： CLAUDE.mdに秘密情報を書いてもよいですか？
A： APIキーやパスワードはCLAUDE.mdに記載せず、.envファイルで管理してください。CLAUDE.mdはGitで管理されることが多く、誤って公開リポジトリにプッシュするリスクがあります。
Claude Code導入は3分診断で最適ルートを選ぶ
以下の3問に答えるだけで、最適な導入ルートがわかります。
Q1: Figma関連の反復作業（ファイルリネーム・仕様書作成・コンポーネント名整理）に毎週何時間かかっていますか？
2時間未満の場合はQ2へ進んでください（導入メリットが出づらい可能性があります）。2時間以上の場合はQ3へ進んでください（明確な削減ポテンシャルがあります）。
Q2: 今後3ヶ月以内に新規Figmaプロジェクトが3件以上始まる予定はありますか？
Yesの場合はResult A（先行投資として導入する価値があります）。Noの場合はResult B（現時点では様子見が合理的です）。
Q3: ターミナル（黒い画面）を開いたことがありますか？
Yesの場合はResult C（即座に導入開始できます）。Noの場合はResult D（1日のセットアップ時間を確保して導入します）。
Result A: 先行投資型導入
今は反復作業が少なくても、新規プロジェクトが増えた時点で作業量が急増します。CLAUDE.mdのテンプレートを今から準備しておき、プロジェクト開始時に即投入できる体制を作ってください。推奨アクション：テンプレートを保存してProプランに登録する（所要時間30分）。
Result B: 様子見継続
月2時間未満の反復作業であれば、Claude Codeの月額約3,000円のコストが削減効果を上回る場合があります。まず無料クレジット（APIの初期無料枠）で1つの作業を試してから判断するとリスクがありません。推奨アクション：無料クレジットで1回だけ試す（所要時間15分）。
Result C: 即座に導入開始
ターミナルの経験があれば、今日中にClaude Codeをインストールして最初の作業を自動化できます。推奨アクション：このページを読み終えたら「非エンジニアでも3ステップで導入できる仕組み」のセクションに進んでください（所要時間5分）。
Result D: セットアップ日を確保して導入
ターミナルが未経験でも、Claude Codeのインストールは日本語の公式ドキュメントとともに1〜2時間で完了します。休日に2時間のセットアップ時間を確保することで、翌週からすぐに業務で使い始められます。推奨アクション：カレンダーにセットアップ日を登録する（所要時間2分）。
CHECK
▶ 今すぐやること: 上記4つのResultのうち自分に該当するものの推奨アクションを今日中に1つ実行する（2〜30分）
Q: 無料クレジットはどこで確認できますか？
A： Anthropicのコンソール（console.anthropic.com）にログイン後、「Billing」セクションで現在の残高と使用量を確認できます。初回登録時に無料クレジットが付与される場合がありますが、金額や条件は時期によって変動します。最新情報はAnthropicの料金ページでご確認ください。
Q： 途中でProからAPIに戻せますか？
A： Proプランはいつでも解約・ダウングレードが可能です。月次課金のため、解約後も当月末まで利用できます。
非エンジニアでも3ステップで導入できる仕組み
プログラミングの経験がなくても問題ありません。ターミナルのコマンドは3行のみで、残りはすべて日本語の文章で指示できます。
ステップ1：Claude Codeのインストール（所要時間15分）
Node.jsをインストールした後、ターミナルでnpm install -g @anthropic-ai/claude-codeと入力してEnterを押すだけです。Node.jsのインストールはNode.js公式サイトからインストーラーをダウンロードしてダブルクリックするだけで完了します。この2つの操作だけがコマンドを使う場面のすべてです。インストール後は「claude」とターミナルに打てば起動し、以降は日本語で「○○してください」と打つだけで動作します。日本語指示が機能する理由は、Claude Codeの基盤であるClaudeモデルが日本語を高い精度で解釈するように設計されているからです。
ステップ2：Figmaファイルをプロジェクトフォルダに配置する（所要時間10分）
デスクトップに「figma-project」という名前のフォルダを作り、その中に「assets」「output」「CLAUDE.md」の3つを作成します。Figmaから書き出したJSONや画像ファイルは「assets」フォルダに入れるルールにしておくと、Claude Codeが「どこを見ればよいか」を自動で把握します。このフォルダ構成をCLAUDE.mdに1行書いておくだけで、以降の作業指示からフォルダパスを毎回説明する手間がなくなります。フォルダ構成を決める際に「あとで増えそうなファイル種別」を想定しておくと、プロジェクトが大きくなってもCLAUDE.mdの更新だけで対応できます。
ステップ3：日本語で最初の指示を出す（所要時間5分）
ターミナルを開き「claude」と打って起動したら、以下の文章をそのままコピーして貼り付けてください。「assets/figmaフォルダ内のJSONファイルを読み込んで、コンポーネント名の一覧をcomponent-list.csvとしてoutputフォルダに出力してください。命名規則はCLAUDE.mdを参照してください。」この1文だけで、Claude Codeはファイルを読み込んでCSVを生成して保存するまでの3つの操作を自律的に完遂します。初回の成功体験がないと「本当に動くのか」という不安が残り続けるため、まずこの1コマンドで実際に動く感覚を体験することが最重要です。
CHECK
▶ 今すぐやること: Node.jsのインストーラーをダウンロードして実行する（15分）
Q: スマートフォンだけでClaude Codeは使えますか？
A： Claude Codeはターミナルとローカルファイルシステムを必要とするため、PCまたはMacが必須です。スマートフォンのみの環境では動作しません。
Q： MacとWindowsでインストール手順に違いはありますか？
A： Node.jsのインストーラーはMac/Windowsともに公式サイトで提供されており、手順はほぼ同一です。WindowsではWSL（Windows Subsystem for Linux）を使うとより快適に動作しますが、必須ではありません。
Claude Code×Figmaは2パターンで明暗が分かれる
失敗パターンを先に把握しておくことで、つまずきを事前に回避できます。
ケース1（成功パターン）: CLAUDE.mdで作業範囲を明示して毎週3時間を削減
デザインと企画を兼務するフリーランスのAさんは、Figmaのコンポーネント仕様書を毎週手作業で作成しており、週に3〜4時間を消費していました。Claude Codeを導入し、CLAUDE.mdに「確認不要な作業」として「JSONからのコンポーネント一覧抽出」と「ファイルリネーム」を明示したところ、これらの作業がほぼ無人化されました。
Claude Code活用者からは「部署分けにより、エージェントが専門領域に集中できる」という声が上がっています（Claude Codeで一人社長のフリーランス仮想会社を構築した全記録）。
作業範囲をCLAUDE.mdに明示しないまま使い続けると、毎回「どこまでやっていいか」をClaude Codeに確認させる手間が発生し、削減効果は半分以下になります。このケースが示すのは「Claude Codeに任せる範囲を事前に書面化する」という一手間が、自動化の精度を決定的に左右するという点です。
ケース2（失敗パターン）: 準備なし投入で作業が増えた
WebデザインをBさんは、Claude CodeをCLAUDE.md未設定のままFigmaプロジェクトに投入しました。指示の都度ディレクトリ構成や命名規則を説明する必要が生じ、結果として手作業より時間がかかる状況になりました。
Claude Code実践者のBさんは「フリーランスは今ある武器で戦いがちで、新しいことを学ぶ時間を確保しにくい」と振り返っています（フリーランスこそ武器を磨け。Claude Codeと壁打ちして見えた景色）。
最初の30分をCLAUDE.mdの設定に充てていれば、指示のたびに背景説明をする手間がなくなり、同じ時間投資でより大きな削減効果を得られた状況です。このケースが示すのは「新しいツールの導入準備に時間を使うこと」を惜しむと、学習コストが分散して非効率になるという点です。
CHECK
▶ 今すぐやること: ケース2の失敗を避けるために、Claude Codeを起動する前にCLAUDE.mdを作成する（10分）
Q: CLAUDE.mdなしでも一時的に試せますか？
A： はい、試すだけであればCLAUDE.mdなしでも動作します。ただし毎回同じ説明を繰り返す必要があり、2回目以降から時間の非効率が顕著になります。2回以上同じプロジェクトで使う場合は初回にCLAUDE.mdを作成することを強く推奨します。
部署分けで確認作業を週3時間に圧縮する設計
「何をClaude Codeに任せてよくて、何は自分で判断すべきか」という線引きができていないと、AIが動くたびに確認が必要になり、自動化の意味がなくなります。
「確認不要」と「確認必要」の境界線の引き方
Claude Code活用の核心は、作業を「確認不要」と「確認必要」の2種類に分類して、前者を完全自動化することにあります。Figma関連業務で確認不要に分類できる作業は、ファイルのリネーム・コンポーネント一覧の抽出・ディレクトリの整理・既存ファイルのフォーマット統一の4つです。一方、クライアントへの最終納品物の生成・ファイルの削除・外部APIへのリクエストは確認が必要な作業です。この分類をCLAUDE.mdに書いておくと、Claude Codeは確認不要な作業を報告なしで完遂し、確認必要な作業の前に「実行してよいですか？」と人間に確認を求めます。最初は「どちらに分類するか迷う作業」が出てきますが、「もし間違えて実行されたとき取り返しがつくか」という基準で判断すると迷いが解消されます。
Obsidianとの組み合わせで経営OSを構築する方法
複数の案件を同時進行するフリーランスにとって、「どの案件がどの状況にあるか」を把握する仕組みは生産性の土台になります。ObsidianはローカルのMarkdownファイルを管理するツールで、Claude Codeとの親和性が高い理由は「すべてのデータがローカルのテキストファイルとして保存される」からです。Obsidianで案件ごとのノートを作り、そのノートをClaude Codeが読み込んで「今週の優先タスク一覧」や「クライアントへの連絡下書き」を生成する設計が、複数の実践者から報告されています。
Claude Code×Obsidian実践者からは「Claudeがヒアリングしながらあなた専用の経営OS構成を自動で作ってくれる」という声が上がっています（フリーランスがAIに事業管理を丸投げ｜Obsidian経営OS構築）。
この構成の特徴は、Obsidianのノートが「人間のための記録」と「Claude Codeへの入力データ」を兼ねる点で、二重管理の手間が発生しないことです。週3日稼働でも「前回どこまで進んだか」を毎回確認する時間が不要になります。時間管理アプリと組み合わせることで、フリーランスの生産性管理がさらに向上します。
引き継ぎファイルの自動生成で文脈を維持する
引き継ぎファイルとは、セッション終了時にClaude Codeが自動生成する「今回の作業ログ・次のタスク・未解決の課題」を含むMarkdownファイルです。この設計をCLAUDE.mdに「各セッション終了時にhandover.mdを生成すること」と1行書いておくだけで実装できます。次回のセッション開始時にClaude Codeがhandover.mdを読み込むことで、前回の文脈を即座に復元できます。引き継ぎファイルを持つと、1週間ぶりにプロジェクトに戻った際の「どこまでやったっけ」という確認時間を大幅に短縮できます。この仕組みの本質的な価値は「作業の継続性をAIが保証する」ことで、人間の記憶力に依存しない業務フローを設計できる点にあります。
CHECK
▶ 今すぐやること: 現在の自分のFigma関連業務を書き出し、「確認不要」「確認必要」の2列に分類してCLAUDE.mdの草稿を作る（15分）
Q: Obsidianは無料で使えますか？
A： ObsidianはローカルのVault（フォルダ）を使う基本機能は無料です。クラウド同期（Obsidian Sync）は有料プランが必要ですが、Claude Code連携にはローカル機能のみで十分です（Obsidian公式）。
Q： 部署分けの設計は最初から完璧に作る必要がありますか？
A： 完璧な設計は不要です。最初は「ファイルのリネームだけ自動化する」という1項目からスタートして、問題がなければ徐々に「確認不要」の範囲を広げていくアプローチが最もリスクが低く、実務でも定着しやすいです。
Claude Code×Figma自動化は5つの仕組みで完結
【対象】
FigmaコンポーネントのリネームをまだHand作業でやっているデザイナーや企画者
【手順】
FigmaのDev Modeを開き、書き出したいフレームを選択してJSONをコピーし、プロジェクトフォルダの「assets/figma/」に「components.json」として保存します（5分）。次にターミナルで「claude」を起動し「components.jsonのコンポーネント名をキャメルケースに統一した一覧をoutput/component-list.csvに出力してください。CLAUDE.mdの命名規則を参照してください」と入力します（1分）。output/component-list.csvが生成されたことを確認し、Figmaの命名と照合して差分があれば「差分箇所の修正案を提案してください」と追加入力します（1〜2分）。
【ポイントと理由】
「FigmaのコンポーネントはFigma上でリネームするのが正しい」という前提は、複数フレームにまたがる大量リネームでは機能しません。Figma上での直接リネームは1コンポーネントずつの手動操作であり、50コンポーネントで30分以上かかります。「JSONを一度Claude Codeに渡して命名統一案を生成し、Figmaに逆輸入する」フローなら、命名規則をCLAUDE.mdに定義した時点で何件でも3〜5分で処理できます。このフローが機能する前提条件は「命名規則がCLAUDE.mdに具体的に書かれていること」で、曖昧な記述（「きれいな名前にする」等）では精度が下がります。
【注意点】
FigmaのAPIから直接取得したJSONにはメタデータが大量に含まれているため、そのまま貼り付けると処理が遅くなります。「styles」と「components」エンドポイントを個別に取得する形式にするか、不要なキーを削除してから渡してください。「全データを一度に渡せばより賢く判断してくれるはず」という考えで巨大JSONをそのまま渡す必要はありません。
ハック2: CLAUDE.mdの事前定義でセッションごとの説明を完全ゼロ化
【対象】
毎回「このプロジェクトは○○です」と背景説明をClaude Codeに繰り返している非エンジニアや副業フリーランス
【手順】
先述のテンプレートをコピーし、プロジェクトのルートフォルダに「CLAUDE.md」として保存します（10分）。Claude Codeを起動し「CLAUDE.mdを読んで、このプロジェクトの概要を3行で要約してください」と入力して、正しく認識されているか確認します（3分）。次回セッション開始時は背景説明を省略し、「assets/figmaにある最新のJSONを整理してください」のようにタスクのみを入力して動作確認します（2分）。
【ポイントと理由】
「CLAUDE.mdを一度作ってセッション開始時の自動ロード機構に任せる」アプローチの理由は、人間側の説明コストが累積的に削減されるからです。1セッションあたり5分の説明が、週5セッションで年間に換算すると約40時間に相当します。さらに、説明を省略するとClaude Codeが過去の会話から推測して誤った前提で動くリスクがあり、CLAUDE.mdによる明示的な定義はこのリスクを低減します。このメカニズムが成立する前提条件は「CLAUDE.mdがプロジェクトのルートフォルダに存在し、かつ最新の状態に保たれていること」で、古い情報が残っている場合は逆効果になります。
【注意点】
CLAUDE.mdをあまりに詳細に書こうとして1時間以上かける方がいますが、初期バージョンは15〜20行で十分です。「完璧なCLAUDE.mdを作ってから始める」という考えで導入が止まることが最大のリスクです。まず最小限の5項目を記入してから実際に使い始め、足りない情報は使いながら追記するアプローチをとってください。
ハック3: 引き継ぎファイルの自動生成で週3日稼働を安定化
【対象】
週2〜3日稼働で案件を複数掛け持ちしており、作業再開のたびに前回の文脈確認に時間を使っているフリーランス
【手順】
CLAUDE.mdに「各セッション終了時にproject-root/handover.mdを生成してください。内容は『今日完了した作業』『次回のタスク』『未解決の課題』の3セクションで構成してください」と追記します（5分）。作業セッションを通常通り実施し、終了時に「今日の作業を引き継ぎファイルにまとめてください」とClaude Codeに指示します（1分）。次回セッション開始時に「handover.mdを読んで前回の続きから始めてください」と入力し、Claude Codeが正しく文脈を把握しているか確認してから作業を進めます（3分）。
【ポイントと理由】
「引き継ぎファイルをClaude Codeに自動生成させてそれを次のセッションで読み込ませる」方が実務でうまくいく理由は、人間が「今日やったこと」を言語化するのはセッション終了後の疲弊した状態では精度が下がりやすく、漏れが生じやすいからです。Claude Codeが自動生成する引き継ぎファイルは、実際に処理したファイル名・コマンド・変更内容を正確に記録できます。このメカニズムの前提条件は「セッションを通じてClaude Codeが作業を実行しており、実行ログが存在すること」で、会話のみのセッションでは引き継ぎ内容が薄くなります。
【注意点】
引き継ぎファイルを毎回手動で作成する必要はありません。CLAUDE.mdに「自動生成」を明記しておけば、Claude Codeが自律的に作成します。また、handover.mdが大きくなりすぎると読み込み時間が増えるため、3セクション・合計500文字以内を目安にしてください。
ハック4: 無料クレジット→Proの2段階移行で月額費用を正当化する
【対象】
Claude Codeのコスト対効果に確信が持てず、Proプランへの移行を迷っているフリーランスや副業層
【手順】
Anthropicのコンソール（console.anthropic.com）でアカウントを作成し、APIキーを取得して無料クレジットの残高を確認します（10分）。無料クレジットを使って「Figmaのファイルリネーム」または「仕様書のMarkdown生成」のいずれか1つを実際に試し、1回のタスクで節約できた時間を計測します（30分）。計測した時間×自分の時給を計算して「月何回使えばProプランのコストを回収できるか」を数値で確認してから移行を判断します（5分）。
【ポイントと理由】
「1つのタスクで時間対効果を数値化してからProに移行する」アプローチの方が費用対効果の確信を持って使い続けられます。例えば時給3,000円のフリーランスが月に1時間の作業を自動化できれば、それだけでProプランの月額費用の原価は回収されます。月に2時間以上の自動化効果があれば、投資対効果はさらに高くなります。このフローが成立する前提条件は「自分の実質時給を事前に計算しておくこと」で、時給が高いほど自動化のROIが高くなります。フリーランスの実質時給の計算方法を参考に、自分の数字を把握してから判断してください。
【注意点】
無料クレジットをすべて消費してから移行を考える進め方は避けてください。無料クレジットが切れた時点で作業が止まり、モチベーションも落ちやすくなります。無料クレジットの残高が50%を下回った時点でProプランへの移行を検討するのが、作業継続性を保つ最適なタイミングです。
ハック5: 客先使用の合意形成を先行させて実質時給を上げる
【対象】
クライアント案件でClaude Codeを使いたいが、使用申告のタイミングや方法がわからないフリーランス
【手順】
案件の初回ミーティングまたは契約書の取り交わし前に「AI支援ツールを業務効率化のために使用する場合があります」という1行を作業条件として提示し、口頭または書面で合意を得ます（5分）。合意を得た後、Claude Codeで処理した成果物（例：仕様書草稿・コンポーネント一覧）を「AI生成の下書きをレビュー・修正したもの」として納品するフローを確立します（初回30分）。毎月の稼働時間記録に「AI処理で削減した時間」を記録し、3ヶ月後に実質時給の変化を数値で確認します（月5分）。
【ポイントと理由】
「事前合意を書面で残しておく」方が後のトラブルを防げます。AI使用の開示が事後になると「知らなかった」というクライアントの不信感が生じるリスクがあり、信頼関係の毀損が案件継続の障壁になり得るからです。事前合意があれば、Claude Codeで削減した時間を別の付加価値作業（戦略立案・クライアントコミュニケーション）に充てることができ、同一契約単価で提供価値を高める経営判断が成立します。このフローの前提条件は「自分がレビューして品質を保証する責任を持つこと」で、AIの出力をノーチェックで納品することは合意の範囲外と理解しておいてください。
【注意点】
全クライアントに同じ申告文を一括送信する必要はありません。長期取引先や機密性の高いデータを扱う案件では個別に丁寧な説明が必要ですが、短期の一般案件では定型文1行で対応できます。クライアントの規模や案件の性質で申告の詳細度を変えることが、余計な摩擦を生まないポイントです。
CHECK
▶ 今すぐやること: 自分の直近の案件で「確認不要な作業」を1つ選び、上記ハック1の手順を15分で試す（15分）
Q: Claude Code以外のAIツール（ChatGPT等）でも同じことができますか？
A： ChatGPTとClaudeの違いを参照してください。ChatGPTのCode Interpreter（Advanced Data Analysis）でもファイル操作は可能ですが、ローカルのファイルシステムに直接アクセスしてGit操作や連続したコマンド実行を自律的に行う能力はClaude Code固有の設計です。反復する複数ステップの作業を「一度の指示で完結」させたい場合はClaude Codeが適しています。
Q: フリーランス1年目でも使いこなせますか？
A： CLAUDE.mdと日本語指示の組み合わせだけであれば、プログラミング経験ゼロでも2〜3日で実務に組み込めます。最初の1週間は「1つの作業だけを自動化する」という絞り込みをすると、混乱なく習得できます。
Claude Code×Figmaで自動化を定着させる：今日から動ける5つの行動
Claude CodeとFigmaの組み合わせは「Figmaの出力ファイルをClaude Codeに渡し、日本語で指示するだけで次の作業を完結させる」という1つの原則で動いています。公式の直接連携は存在しませんが、JSON・画像・仕様書テキストを介したファイル連携で、命名統一・仕様書生成・提案書草稿・コード骨格生成の5工程を自動化できます。この仕組みを活用するために必要な操作はターミナルへの3行のコマンド入力のみで、残りはすべて日本語指示で完結します。
まず今日、CLAUDE.mdのテンプレートをコピーして自分のFigmaプロジェクトに合わせて10分で設定してください。最初の1回が動けば、以降の学習コストは急速に下がります。
| 状況 | 次の一歩 | 所要時間 |
| まだインストールしていない | Node.jsをダウンロードしてインストールする | 15分 |
| インストール済みで使い方がわからない | CLAUDE.mdテンプレートをコピーして設定する | 10分 |
| 使い始めているが効果が出ていない | ハック1のJSONリネームフローを1回試す | 15分 |
| 効果は出ているが案件への展開が不安 | ハック5の合意形成文を次の案件提案に追記する | 5分 |
Claude Code×Figmaに関するよくある質問
Q: Claude CodeはFigmaのプラグインとして使えますか？
A： 2026年7月時点でClaude CodeのFigma公式プラグインは存在しません。ただし、FigmaのAPIからJSONを取得してClaude Codeに渡すことで、実質的に同等の作業自動化が実現できます。
Q： Figmaのデザインデータをそのままコードに変換できますか？
A： FigmaからJSONを取得してClaude Codeに渡すと、HTMLやReactのコンポーネント骨格を生成できます。完全に動作するコードの一発生成は難しいですが、コンポーネント名・スタイル・構造の骨格を5〜10分で生成できるため、ゼロからコーディングするより大幅に工程を短縮できます。
Q： 月額Proプランと従量課金のAPIはどちらが得ですか？
A： 週5日・1日1〜2時間使う場合はProプランが割安になるケースが多いです。週2〜3日の副業・フリーランス的な使い方であれば、まず従量課金のAPIで使用量を確認してから移行を判断する方が、過払いリスクを避けられます。最新の料金はAnthropic料金ページでご確認ください。
【出典・参照元】
Claude Code公式ドキュメント – Claude Codeの機能・動作仕様の公式定義
Figma Developers API – Figma REST APIの公式リファレンス
Figma Access Tokens – FigmaのAPIキー発行手順
Claude Codeで一人社長のフリーランス仮想会社を構築した全記録 – 部署分けとCLAUDE.md活用事例
フリーランスがAIに事業管理を丸投げ｜Obsidian経営OS構築 – Obsidian×Claude Code経営OS事例
フリーランスこそ武器を磨け。Claude Codeと壁打ちして見えた景色 – フリーランスのClaude Code実践体験
Node.js公式サイト – Node.jsインストーラーのダウンロード先
Anthropic Console – APIキー取得・無料クレジット確認
Anthropic料金ページ – ProプランとAPIの料金比較
Obsidian公式 – Obsidianの料金・機能確認