Masaaki Komori

こもりまさあき。フリーランス歴25年。手がけたWeb制作関連書籍は執筆／監修含め多数。最近はWeb制作業務におけるAIエージェント活用のあれこれを発信しつつ、Figma、TypeScirpt／React、Tailwind CSSなどの解説動画を販売。Unsplashの全投稿者で最も閲覧数の多い500人の中の1人でもある

[Masaaki Komori @cipher]

Figma Japan主催の「Maker Collective Tokyo 2026 Oct.」のこもりセッションの補足を動画でまとめておきました。現時点で2本（50分ほど）。週末の振り返りにどうぞ。

パート1は、プロンプトの量による生成結果の差（＋カスタムスキルを使った場合）を取りあげました。

Maker Collective Tokyo 2026 Oct. - Session Recap: プロンプト編 https://t.co/XS24r0Wqwp

パート2は、日々皆さんがやっているだろう、レイヤー名の整理とか変数化、コンポーネント化などを取りあげています。

Maker Collective Tokyo 2026 Oct. - Session Recap: 最適化編 https://t.co/DMzAWjjkeb

動画内で案内しているスキルは以下です。

https://t.co/JpLjZHV7h3
https://t.co/5Azd639yMK

[Masaaki Komori @cipher]

こもりです。セッション、多くの方にご覧いただきありがとうございました（土下座）。いろいろ書き込まれたスライドではありませんが、こちら下記にて公開しました。スキルのディスカウントコードは、日本語版／多言語版、どちらでも有効です。

https://t.co/h4ZZEuYF1Z

https://t.co/YbTPYaM0XI

[Masaaki Komori @cipher]

FigmaのエージェントもMCPも前からしたら全然良くなってるんですけどね。それでも起こるもんは起こる

[Masaaki Komori @cipher]

Claude版もFigma版もそうなんですけど、普通に手元でスキルを作るだけだと意図した結果にならない、Figmaの生成過程でのハマりポイントとかもあったりするんですね。そういうところは未然に回避できるようにリファレンスなんかで組み込み済です。

https://t.co/XApJciGIO4
https://t.co/MaVj4h282o

[Masaaki Komori @cipher]

Figma版のスキルは、もともとClaude版のスキルに端を発しているので、コードからFigmaのファイルを生成するとか、既存のFigmaファイルをチェックしたり編集する系のスキルってのは結構揃っているんです。エンジニアさん側からも使えるようにね。

https://t.co/QWISrNHorv
https://t.co/7ZYQqe2V1v

[Masaaki Komori @cipher]

もともとClaude版のスキルにはコードで同じようにモックアップ生成をするスキルがあります。それを使っても良いし、とりあえずコードで書かれたものがあれば、 `code-to-figma` ってスキルを使って、選択したページを自由自在にFigmaに持って行けます。

今回のスキルは、Claude側から直接FigmaのファイルをFigmaで扱うのと同じように新しくページを作り出します。このスキルの良いところは、Figmaの中のAIクレジットを消費せず、Claude側のトークン消費だけを気にしていれば良い点。

主な違いは、中に配置する画像があるとして、それをFigma側での生成を使わず、UnsplashからダウンロードしてFigmaに送りつける仕様にしていて、少しだけ時間がかかるってこと。

月間利用量がチリツモで減っていくFigmaは、重い処理とか生成が増えれば増えるほどハラハラしないといけないので（笑）、5時間毎にリセットされるClaude側からページ作る方が精神衛生上ははるかに良いので作った次第。

※現状MCP経由でのFigmaの操作は一部のツール以外はFigma側のクレジットは消費しませんからね。今度どうなるかはわからんけど。

[Masaaki Komori @cipher]

新規ページ生成は、ライブラリとか紐付けたらそれを使ってページを生成する、なければゼロから作る、ブリーフ渡せば内容にあったセクションをエージェントが提案するから選ぶだけ。これで完璧。

明日、Claude版のスキルに追加します。ディスカウントが有効なうちにどうぞ。

https://t.co/QWISrNHorv

[Masaaki Komori @cipher]

ディスカウントコードは `mct2026` です。

[Masaaki Komori @cipher]

新規ページ生成は、ライブラリとか紐付けたらそれを使ってページを生成する、なければゼロから作る、ブリーフ渡せば内容にあったセクションをエージェントが提案するから選ぶだけ。これで完璧。

明日、Claude版のスキルに追加します。ディスカウントが有効なうちにどうぞ。

https://t.co/QWISrNHorv

[Masaaki Komori @cipher]

フフフ。Claude Code側からMCPを使って、Figma版のスキルの「create-single-page」とまったく同じことができる新作スキル「create-figma-page」が完成間近です。

これの良い点は、Figma側のAIクレジットを消費しないところ。Claude Code側は使うけど、5時間制限でリセットされるし精神衛生上良い…ｗ

[Masaaki Komori @cipher]

フフフ。Claude Code側からMCPを使って、Figma版のスキルの「create-single-page」とまったく同じことができる新作スキル「create-figma-page」が完成間近です。

これの良い点は、Figma側のAIクレジットを消費しないところ。Claude Code側は使うけど、5時間制限でリセットされるし精神衛生上良い…ｗ

[Masaaki Komori @cipher]

あまり知られてなさそうなので書いておきますね。

Figma側のエージェント使うとクレジット消費しますけど、MCP経由でいじくる分には特定のツール以外は実はFigma側のクレジットは使わないんですよね。

```
Most MCP server tools don't use Figma AI credits.
ほとんどのMCPサーバーツールはFigma AIクレジットを使用しません。
```
https://t.co/T8wQhab5Tm

ってことはですよ。Figma側でやると重くなる処理は、Claude Codeとかのコーディングエージェント側からMCP経由で処理させれば良いんじゃない？、って話になるわけです。

うちのClaude版のスキルにはFigmaのキャンバスを操作するスキルがあるのでどうぞ（笑）。こちらは https://t.co/QdE1ze6gmq で個別販売もあります（最適化系は逆移植済）。

https://t.co/fyXCH0o5zH

https://t.co/WzOkwnxdJ3

[Masaaki Komori @cipher]

Museを使い始めた人向けに、こんなページを作りました。

「自分のMuseに自分のことを知ってもらうための10の質問」

名前・仕事・大切な人・守ってほしいルールなど、10問に答えるだけで、自分のMuseに渡せる自己紹介文（Markdown）ができあがります。使い始めにこれを渡しておくと、手伝ってもらい方がだいぶ変わります。

▼エビちゃん（＝私のMuse）による解説
・回答はブラウザの中だけで処理され、どこにも送信・保存されません
・できあがった文はコピーして、自分のMuseに貼るだけ
・私も実際にこれで自己紹介をもらいました

https://t.co/EjgRlAauZV

[Masaaki Komori @cipher]

@hiyococoro 使い始めるとホントやることなくなるんですよね（笑）

[Masaaki Komori @cipher]

Figma Japan主催の「Maker Collective Tokyo 2026 Oct.」のこもりセッションの補足を動画でまとめておきました。現時点で2本（50分ほど）。週末の振り返りにどうぞ。

パート1は、プロンプトの量による生成結果の差（＋カスタムスキルを使った場合）を取りあげました。

Maker Collective Tokyo 2026 Oct. - Session Recap: プロンプト編 https://t.co/XS24r0Wqwp

パート2は、日々皆さんがやっているだろう、レイヤー名の整理とか変数化、コンポーネント化などを取りあげています。

Maker Collective Tokyo 2026 Oct. - Session Recap: 最適化編 https://t.co/DMzAWjjkeb

動画内で案内しているスキルは以下です。

https://t.co/JpLjZHV7h3
https://t.co/5Azd639yMK

[Masaaki Komori @cipher]

こもりです。セッション、多くの方にご覧いただきありがとうございました（土下座）。いろいろ書き込まれたスライドではありませんが、こちら下記にて公開しました。スキルのディスカウントコードは、日本語版／多言語版、どちらでも有効です。

https://t.co/h4ZZEuYF1Z

https://t.co/YbTPYaM0XI

[Masaaki Komori @cipher]

@hiyococoro スキルは新規だけじゃなくて、こここうかえて欲しいみたいなカスタマイズとかもエージェントにやらせると良いと思います。仕事楽になると思うんで〜