Claude × Figma で資料作成が劇的に変わった..

こんばんは！
Webデザイナーの中野です！

今日は、資料作成で感動した体験をシェアしたいと思います。

Claudeの「スキル機能」が本当に神がかっていて、レポート作成がびっくりするくらい時短になりました。

Figmaで資料を作っている理由

私はレポートを作成することが多いのですが、以前はIllustrator（イラレ）を使っていました。
ただ、動作が重いのが気になってきて、最近は Figma に乗り換えました。

Figmaって本当に軽くて使いやすい。大好き。

CanvaやManusもよいのですが、私はデータすべてをFigmaに集約して管理したかったので、Figmaで完結できる方法を探していました。

AIで資料を作る際のストレスあるある

「AIを使って資料作成をラクに！」という流れは以前からあったけれど、実際やってみると...

• デザインがいまいち
• 文字化けが起きる
• プロンプトをいちいち入力しなければいけない
• 自分が使いたいファイル形式で出力できない
• 作業したいツールに書き出せない

といった問題に私は何度もぶつかっていました。

Claudeのスキル機能で、ぜんぶ解決した

そんな悩みを一気に解決してくれたのが、Claudeのスキル機能です。

自分のデザインテンプレートを登録しておくと、毎回同じフォーマットでレポートを自動生成してくれる。
しかも、Figma連携（MCP）を使えば、生成したスライドをそのままFigmaファイルに書き出してくれます。

最後はFigma上でテキストや色、レイアウトなど細かい箇所を手直しして完成。

これ、感動しませんか？！

Claude × Figma のレポート作成フロー

【初回のみ】セットアップ

STEP 1｜マイスキルを作成する

好みのデザインのPDF・HTMLなどをClaudeにアップロードして、「このデザインを再現するスキルを作成してください」と依頼します。

スキルの元データがない場合は、プロンプトをコピペするだけでもOK。

ClaudeがデザインシステムIcolor・フォント・レイアウトルールを解析して、SKILL.mdファイルを自動生成してくれます。

STEP 2｜マイスキルをアップロードする

設定 → 機能 → スキル → カスタマイズ → ＋ → ZIPファイルでアップロード → トグルをオン

これでClaudeが自分のスキルを参照できるようになります。

STEP 3｜レポートデータを入力してPPTX or HTMLを作成する

スキルが有効なチャットでレポートデータを貼り付けて、「このデータで○○スタイルのレポートを作って」と送るだけ。

ClaudeがPPTXまたはHTMLを自動生成してダウンロードできます。

STEP 4-A｜PowerPointで完結したい方

ダウンロードしたPPTXを、そのままPowerPointまたはGoogle スライドで開いて編集。完成！

STEP 4-B｜Figmaで管理したい方（今回のメインテーマ）

設定 → 接続済みアプリ → Figma → オン

チャットに戻って「Figma MCPが繋がったよ」と伝えると、ClaudeがFigmaファイルを新規作成してスライドを直接描いてくれました。神。

【2回目以降】毎回の手順

STEP 1｜スキルをオンにする

設定 → 機能 → スキル → カスタマイズ → トグルをオン（一度連携すれば次回から自動で繋がります）

STEP 2｜Figma MCPをオンにする

設定 → 接続済みアプリ → Figma → オン（一度連携すれば次回から自動で繋がります）

STEP 3｜新しいチャットを開いてレポートデータを投げる

実際は下記だけでOKなハズです。↓↓

これだけで、ClaudeによるHTMLレポート作成 → Figmaへの書き出しまで一気に完結するはずです。

AIの進化すごすぎる...

1ヶ月前までできなかったことが、いつの間にかできるようになっている。
AIの進化って本当に速くて、日々使っていないと、すぐにおいてかれちゃう、、

まずは今日の感動を残しておこうとおもいました✨

• # SNS
• # SNS運用