2026/04/28(火)21:00 〜 23:00

【CeeBeeDee】これから始めるClaude Code 〜 Figma MCP編／こもりまさあき

Name: 【CeeBeeDee】これから始めるClaude Code 〜 Figma MCP編／こもりまさあき
Start: 2026-04-28T12:00:00+00:00
End: 2026-04-28T14:00:00+00:00

オンライン

Claude Code, Figma, 人工知能

イベント内容

Claude Code と Figma MCP を軸に、デザインとコードを往復しながら制作を進める一連の流れを、こもりまさあきさんに実践的に解説いただきます。

本イベントは有料イベントとして開催します。

無料での配信は行わず、お申し込みいただいた方のみに配信URLをお知らせします。
アーカイブはサブスク対象ですが、こもりまさあきさんの「Figma × AI」講座（7,700円）は付属しません。

これから始めるClaude Code 〜 Figma MCP編

本セッションでは、「Claude Code」を中心に、コードとデザインを行き来する実践的なワークフローを体験します。

前半は基礎固めのパートです。Claude CodeとClaude Desktopの違いを明確にしたうえで、基本操作・初期設定・プラグイン導入までを効率よく習得します。あわせて、スキルの概念やVS Code拡張との使い分け、効果的なプロンプト設計、CLAUDE.mdの構築・運用方法など、日常的に使いこなすための土台を整えます。

Claude Code と Claude Desktop との違い
Claude Code の基本操作と設定
Claude Code のプラグインを追加する
Claude Code のスキルとは
VSCode の拡張機能と使い分け
プロンプトで指示を与えよう
CLAUDE.md の作り方、育て方

後半は実践パートです。プロンプトによるコード生成・修正を起点に、コードからFigmaファイルを生成し、特定フレームを編集。さらにその変更をコードへ反映するという、双方向のループを実際の手順で確認します。サンドボックス環境の扱いや配布ファイルの使い方、思い通りに動かない場合のトラブル対処にも触れます。

配布ファイルについて
サンドボックスについて
プロンプトによるコード生成と修正指示
コードからFigmaファイルを作成する
Figmaの特定のフレームを編集する
修正したFigmaをコードに反映する
「言うことを聞かない、動きが怪しい」ときは

機能の紹介にとどまらず、「何を自動化できるか」「どこに人の判断が必要か」という視点も交えながら、実務への導入に向けた現実的なゴールを示します。

特典

本イベントには、こもりまさあきさんの「Figma × AI」講座（7,700円）が付属します。

こもりまさあき

写真：

1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年退職。以降フリーランスとして活動。案件ごとに業務内容などが異なるため、職域的な肩書きはなし。Web制作関連書籍の執筆多数。近年はフロントエンド周りの制作業務に関わりながら、Figmaの企業研修講師やデザインシステム構築、その他Shopifyの運用サポートやコンサルティング業務など幅広く活動中。

聞き手、MC（進行）

鷹野雅弘（CeeBeeDee/CSS Nite/DTP Transit）が“聞き手”を担当し、リアルタイムでチャットでの質問などを拾っていきます。

鷹野雅弘（たかの・まさひろ）

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、ウェブ制作の分野で、デザイン、オペレーション、設計・ディレクションなど、25年以上、第一線で手を動かし続けている。そのノウハウをテクニカルライティングや講演に落とし込み、「制作→執筆→講演」のサイクルを回す。

2015年から大阪芸術大学客員教授。2017年からAdobe Community Evangelist。CSS NiteやDTP Transitのオンラインセミナーのオーガナイザーとして企画・制作・配信なども担当。

著書に『10倍ラクするIllustrator仕事術』（改訂第3版）ほか多数

Twitter：@swwwitch

イベント概要

YouTube Liveでライブ配信します。

開催日：2026年4月28日（火） 21:00 - 23:00
形式：オンライン（YouTube Live）
MC：鷹野雅弘（スイッチ）
主催：CeeBeeDee
共催：CSS Nite、DTP Transit
協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会）

お申し込みと参加費

本イベントは有料イベントとして開催します。
サブスクの対象イベントです。

フォローアップ（アーカイブ）

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

アーカイブ動画
スライド
リンク集や補足
サンプルファイルなど（プログラムにより）

フォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

アーカイブ動画の視聴期限はありません。ずっと見られます。
法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の3つの方法があります。いずれかを選択なさってください。

終演時刻まで：Doorkeeper
サブスクを登録する

購入方法	種別	フォローアップの受け取り	備考
個人	個人、フリーランス	法人
Doorkeeper （単品）	-	5,500円	11,000円	終演時刻にメールを送信（info@doorkeeper.jpから送信されます）
STORES （単品）	-	-	-	-
サブスク	3ヶ月：35ドル		［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。	法人は別途（詳細）
年パス：130ドル

領収書

終了後にご案内するNotionからPDFをダウンロードしてご利用ください。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。X（Twitter）にて同時配信は行いません。

配信トラブルでURLが変更になることがあります。その場合、次のようにお知らせします。

Doorkeeper経由でのメッセージ（メール）

YouTube関連

YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#これから始めるClaudeCode）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかなど、チェックなさってください。
スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。