こんにちは。こもりです。なんかすっかり夏みたいな陽気になってしまって暑いですね…。
AIまわりの話題が尽きることがない昨今、私の方でも今後発生するであろういろいろな仕事を時短というか省力化するため、時間があれば「いかにしてAIにきちんと仕事をしてもらうか」といった面から環境整備（コンテキスト・エンジニアリングとかハーネス・エンジニアリングってヤツですね）をする毎日です。その成果は販売中の講座であったり、最近ちょこちょことやらせていただいているセミナーに反映されていきます。
さて、前回は「これから始めるClaude Code 〜Figma MCP編」ということでCeeBeeDee（CSS Nite）さんにお邪魔してましたが、今度は「これから覚えるTailwind CSS」というセミナーを2026年5月22日（金）21:00〜に開催することになりました。こちらのセミナーは前回同様、無料視聴はなしの有料セミナーになっております（販売中の私の動画講座「Tailwind CSS v4 実践ガイド付き」です）。
今回のセミナーは、デザイナーさんやディレクターさんなど自分でコードは書かないんだけど最近のAIの進化で頭に思い描いたものをAIサービスなどで作り始めた方、またTailwind CSSの存在自体は知ってはいるけどちゃんとは使ったことがないマークアップエンジニアさんやコーダーさんなどを対象と考えております。
セミナーの内容としては、前半は「Tailwind CSSって何」とか「なぜいまさらTailwindなの？」のような基本的な話から始めて、「他のCSSフレームワークとの違い」や「フレームワークに対するよくある勘違い」「メリット・デメリット」などを解説。実際に自分で書いてみたりAIに書かせてみたりしながら、Tailwindの仕組みをある程度理解できるところまで掘り下げていこうと考えています。後半は、Tailwind CSSを使う際に覚えておきたいこと、Tailwind CSSベースでFigmaを作るときのベストプラクティスみたいなところまで紹介していきます。
これから覚えるのは大変では？
CSSに関する知識があった方がTailwind CSSを理解しやすい（作りたいものがすぐ作れる）のは事実ですが、いまどきはAIさんがコードを書いてくれたり補完をしてくれたりします。ゼロからCSSのことを覚えようとすると大変ですが、Tailwind CSSは決まったクラス名をHTMLに指定していくだけなので、CSSの仕組みを深く考えなくて良いというメリットがあります。使うにあたってまず覚えておきたいのは、基本的なお作法とあらかじめ用意されているクラス名の法則であったり、数字（サイズ）の法則だけ。それさえわかれば、AIが書いたコードも何となくわかるようになるでしょう。
自分でゼロから書くのは大変だったとしても今はAIがあります。
作りたいものをAIにプロンプトで指示してみたり、手元にあるFigmaのデザインをTailwind CSSで実装してもらったり。Figma Makeやv0、Stitchなどのプロトタイプ生成や画面設計ができるサービスなども、そのスタイリングはTailwind CSSが基本となります。「自分でコードは書かない＝修正の仕方がわからない」になりがちなところが、Tailwind CSSの仕組みを少し理解することで今後のプロンプトでの修正指示なども変わるでしょうし、下手したら「自分で直した方が速いや」になるかもしれません。
セミナー限定の配布ファイルあります
今回もセミハンズオンスタイルで進めていこうと考えておりますので、Tailwind CSS公式のプレイグラウンドで操作するだけでなく、お手元のエディタやAIエージェントで開いて実行できる環境、Figmaの変数とTailwindの変数をやりとりするスキルなども含め、これらを事前に配布予定です。
※既に講座をご購入いただいている皆様には、別途講座の付録パートに今回の配布ファイルはじめReact版の最新のコード、「DESIGN.md」を作るような他のスキルなどもあわせ、使い方解説の動画を用意しますので少々お待ちください
この配布ファイルは練習用途だけでなく、AIエージェントが理解できるガイドラインやコマンド、自動化のスキルまでを事前に組み込み済です（Claude Code / Copilot）。ご自身のFigmaのファイルを変換したり、モックアップとして「静的なHTML」をプロンプトの指示で複数ページを自由に作れるようにしてあります。
ゼロから自分で書かなくても、プロンプトの指示だけで「アレ作って、コレ作って」「この部分にコレ足して」ができるようにしているのと、先にGitHubで公開している「Figmaの変数⇄Tailwindのテーマを双方向でやりとりできるスキル」とか「DESIGN.md作るスキル」は、このHTML環境にあわせて内容を変更して配布ファイルに忍ばせてあります。
（追記）
中に入っている「create-mockup」スキルは、当初HTMLを生成するだけで止めていました。でも、生成されたモックアップのコードをそのままFigmaに持っていけると、「デザイナーさんとか普段コードを書かない方はFigmaにデータを移動してそっちで編集する（そしてコードに再変換する）こともできるし、さらに便利になるな…」と思いまして、修了後にFigma MCPを介してキャプチャ、もしくは編集しやすいFigmaのフレームにするオプションを追加しました。
Gemini CLIが「Antigravity CLI」にバージョンアップしたついでにこの特典の内容についても聞いてみました。
このプロジェクトは、「AIエージェントを活用したデザイン・コーディングの自動化と同期」 を極めて高いレベルで実現するために最適化された、非常に先進的で整理されたテンプレートです。
大層なお褒めの言葉を頂いております。なお、こちらの環境一式は本セミナー限定の特典で、当面はGitHubなどのパブリックでの公開は予定しておりません。
というわけで、2026年5月22日（金）21:00〜、お会いしましょう。
【CeeBeeDee】これから覚えるTailwind CSS