お知らせ

Gemini CLIへのFigma MCPの追加方法を更新
「Figma × AI」の方で公開していた「103. Figmaからコードへ」の章の「GeminiへのMCP追加とVSCode拡張機能（9:15）」を最新版の内容に入れ替えました。今回は、先月更新した際に既にご覧いただいて実行されている方もいらっしゃると思いますので、前に入れたバージョンのアンインストール方法とあわせてインストール方法を紹介する内容に入れ替えました。 続きを読む...
Figma MCPの新ツールの解説を追加しました
新しいツールはまだβ版の扱いではありますが、「これはすぐにでも解説せねばならんな…」ということで秒速ではないですが、自分で言うのも何ですが鬼のような速さで解説動画を「Figma AI」講座に追加しました。先月追加したコンテンツについても若干ですが内容を更新して再録、講座内の章の並びも少し変更をしております。 続きを読む...
Figma Design の新機能「スロット」の解説を追加
2026年3月初頭に本丸「Figma Design」で皆さん待望の新機能「スロット」がオープンβとして公開されました。スロット自体の使い方はさほど難しいものではなく、フレームやオートレイアウトの延長線で使えるようなものになっています。今回まだオープンβの段階ではありますが、「Figma Design - マスター編」に追加コンテンツとして新規に登録しました。是非、ご覧ください。 続きを読む...
#こもりの講座　明日3月8日までは全商品36%OFF！
2026年3月6日、「1日限定」ですべての動画講座が【36%OFF】になる、年に一度の特別セールを開催します。初学者からプロまで対応した「Figma」関連の各種講座だけでなく、これから始めたい方向けの「React」や「TypeScript」など各種コーディング入門講座も全部まとめて、気になっていたあのコースをお得に始める大チャンス（セールとなっているパック商品は、現在の販売価格から36%OFF） 続きを読む...
Figma × AI にAIレディな作業環境の作り方を追加
昨日「Figma × AI」講座のコンテンツを大幅刷新してリニューアルリリースしたばかりなのですが、Figma MCPを使ってAIでコーディングしようにも講座内のサンプルで試す以外に、自分自身でオリジナルの作業環境を用意したい方も多いかと思い、新たに付録として「MCP を実行する環境作り」という章を追加しました（動画本数10本、時間約40分）。 続きを読む...
「Figma × AI」講座の内容を大幅にアップデート
2026年2月17日に公開された「Claude Code → Figma Design」のニュースに併せて、この度「Figma × AI」講座の内容を大幅に改訂しました。もともとは「Figma Design - マスター編」の追加コンテンツの位置付けで用意した内容であったため、若干講座内容に継ぎ接ぎ感があったこと、また公開から半年足らずでいろいろな情報が新しくなったこともあり、前述のニュースを受けて講座全体の内容構成を見直し、2026年2月現在の最新の情報で講座をアップデートしました。 続きを読む...
「使いながら覚えるTypeScript」をリリースしました
今回は「これからTypeScrptを覚えるんだ！」という方、「jQueryまでは何とかなったけど…」「書籍買ってはみたけど何だかわからなかった」とかそういう方を対象とし、とりあえず TypeScript を動かす環境を作って、実際に簡単な「買い物リストアプリ」を作りながら TypeScript のお作法を覚えてもらう講座を作ってみました。 続きを読む...
「 続・React入門」正式リリース日と講座の無料プレビュー
「これならできる！ React入門」の続編にあたる「現場で使える！ 続・React入門」が完成しました。告知段階では1月23日（金）前後としておりましたが、1日だけ予定を早めて、1月22日（木）を正式リリース日といたします。リリース日前日までとしていた先行予約価格は前日までとせず、正式リリース日当日の「1月22日（木）23:59まで」とします。 続きを読む...
Node.js のセキュリティリリースついでに
Node.js のセキュリティリリースが出ていたので、そのお知らせついでにアップデートの仕方とかを。 続きを読む...
AIにコードを書かせる時代に、なぜ私はコーディングの講座を作るのか？
AIがいろいろやってはくれますが全部をそれ任せにするのではなく、AIという優秀な部下がたまに間違ったことをしそうなときに、その間違いを適切に指導・修正できる「現場監督（ディレクション）」の能力、言葉を換えれば「AIにちゃんと働いてもらう」ための指示力を身につけてほしい。それが、私が今になって技術講座を作っている理由です。   続きを読む...
React 入門のコンテンツ追加と続編「現場で使える！ 続・React入門」の先行予約開始のお知らせ
次は実務で必須となる「機能」と「設計」を実装していきます。 Reactを使いこなす上でおさえておきたいステートを使ったインタラクティブな要素の実装やコンテンツの絞り込み、お問い合わせフォームの実装、そして外部データのモダンな取得方法までを網羅した続編の登場です。 続きを読む...
商品詳細ページでレビューを書けるようにしました
これまでカスタマーレビューのようなブロックを置いてなかったのですが、ぼちぼち講座のラインナップも増えてきたことですし、動画講座をご購入くださった方限定でレビューを書いてもらえるようにしました 続きを読む...
「これならできる！ React 入門」正式リリースのお知らせ
「これならできる！ React 入門」ですが、本日2026年の1月9日（金）に正式リリースいたしました。今回はこれからReactを始めたい方、途中で挫折してしまった方などを対象として、Reactの基本的なお作法であったり機能を紹介しながらWebサイトを作っていく内容になっております。あわせて「TypeScript」も型の定義とかの詳しい話は書籍やブログなどにまかせて、一旦はTypeScriptを使って得られるメリットを体験してもらうようにしています。   続きを読む...
生成AI × Figma MCP 講座タイトル変更と価格改定のお知らせ
以前のお知らせでも少し触れていましたが、現在「生成AI × Figma MCP」として単品販売している講座は、2026年1月1日より「Figma × AI」に変更して価格を改定いたします。 続きを読む...
【先行予約開始】「これならできる！React入門」をリリースします！
これから React を覚えたい方はもちろんのこと、 「Reactを一度も触ったことがない」「少し試したけど、途中で挫折してしまった」という方にこそ受けてほしい、最初の一歩を踏み出すためのカリキュラムです。Reactの基本から、ルーティング、ツールの導入、そしてTailwind CSSでのスタイリングまで。Web制作に必要な知識をギュッと凝縮した、これ一本で完結するお得な入門講座となっております。 続きを読む...
Tailwind CSS v4 実践ガイドに補講を追加
いよいよ2025年も終わりに近づいてきましたが、私はまだまだ動いています。今日は、先日発売した「Tailwind CSS v4 実践ガイド」に補講を追加しました。本編の補足であったり、本編に入れなくても良いけど知っておくと良さそうなこと、何かしらの本編の動画のアップデートがあった場合に「補講とアップデート」として足していこうと考えております。 続きを読む...
Tailwind CSS v4 実践ガイドをリリースしました
正式に「Tailwind CSS v4 実践ガイド 〜コンポーネント時代のCSS〜」をリリースしました。本講座では、Tailwind CSS v4 の新機能を活用しつつ、コンポーネントを使ってサイトなどを構築する機会も増えてきた現代にあわせて、これまで使っていたBEMなどのCSS設計を現代の技術でどう再構築するか、その答えを提供します。Tailwind CSS を使えば、コード量も少なくなってHTMLとCSSを行き来することもありません。つまるところ、制作時間そのものが大幅に短縮できる可能性があります。デザイナーとエンジニアの間での共通言語として、ぜひこの機会に習得してみてはいかがでしょうか。 続きを読む...
【先行予約開始】 脱・CSS翻訳。「Tailwind CSS v4 実践（仮）」をリリースします
「HTMLが汚くなる」などいろんな理由で敬遠されることも多そうなTailwindですが、当然世界規模で使われているからAIとの相性も良い。「食わず嫌いをするには、あまりにももったいない」ので、従来のCSSを最新のTailwindを使ってモダンな設計に書き換える（ついでに頭の中も書き換える）、新しい動画講座を作っています。今日から先行予約開始です。 続きを読む...
プロンプトより大切なコンテキストエンジニアリング
Figma MakeやMCPがデフォルトで使用する「React」や「Tailwind CSS」といった技術の仕組みを知らないまま、ただ見た目だけ整えたFigmaデータを渡しても、AIはそれを正しく解釈できません。逆に言えば、それらの仕組みをある程度理解して、AIが理解できる構造でデータを作ってさえあげれば、プロンプトなんて一言「これをコードにして」と言うだけで、推論の時間も短くなってほぼ完璧な結果が返ってくるでしょう。それらの技術をFigmaの中の言葉や作り方に置き換えて「Variants」や「Auto Layout」を使う意味を徹底解説しました。コードを書くための勉強ではなく、「AIに最高の仕事をさせるためのFigma構築術」となっています。 続きを読む...
誰でも環境作りができるプロンプトを追加
エンジニア的なお仕事をされていれば、ターミナルに2、3回コマンドを投げればできあがる環境ですが、やはりそういう面の知識がないと「そもそもどうやれば良いのか」「それを動かすには何が必要なのか」「どの技術を選択すれば良いのか」からして意味不明です。そこで、最初に質問に答えるだけで今時の開発環境作りに欠かせない「Vite」を使って自分好みの開発環境をAIエージェントが勝手に準備してくれるプロンプトを作ってみました。 続きを読む...
現在販売中の動画講座の概要をまとめました
現在好評販売中の各動画講座の概要をそれぞれまとめてみました。講座によっては購入特典として、販売中の別講座も閲覧可能なものもあるので実は価格の割にはお得だったりします。なお、講座の内容は不定期に更新・アップデートされます。Figma関連講座は、来年以降の大型アップデートなどがあった際も無償で対応予定です。 続きを読む...
環境構築いらずでFigma MCPを試そう！
クラウドの仮想環境を使えば、手元のマシンにエディタやらNode.jsをインストールすることなく、VSCodeの画面そのままをブラウザで操作することができます。そこで、今回マスター編に含まれる（単体販売あり）「生成AI × Figma MCP」のパートに新たに下記の10本の解説動画（約40分）を追加しました。 続きを読む...
Figma MCP 関連動画に新たに10本追加
「Figma MCPとは何ぞや」的な概要〜基本的な使い方、より良い結果を得るための「AIにも優しいFigmaファイルの作り方」ときたので、実際にFigma MCPを駆使して作業効率を上げたい方も多いかと思い、ガイドラインの作成方法やプロンプトの指示の仕方など、実装サンプルも使いながらの実践的な内容にまとめました 続きを読む...
Figma Sites講座にCMS機能の解説追加とブラックフライデーセール
FigmaがFigma Sitesに待望の「CMS」機能を追加して公開しました。現在日本語のヘルプもありませんし、英語のヘルプサイトと公式YouTubeの動画のみでしか知ることのできないこのCMS機能について、いち早く講座の中に新規追加コンテンツとして登録しました。さらにさらに！ここまで発売しているFigma関連の講座、全部入りのスペシャルパッケージを用意し2025年11月26〜28日の期間限定で販売いたします。 続きを読む...
ゼロから始める環境構築（macOS編）の販売開始
初学者の方はもちろん、これまでターミナルって難しそう…と敬遠されていた方でも順追ってやってもらえば、いまどきの開発環境はできると思います。もちろん、既に環境がある方はHomebrewとかはすっ飛ばしてもらっても大丈夫。MISEに入れ替えたい方は一旦インストール済のNode.jsをアンインストールする必要がありますが、お試ししてみたい方は実行パスを一時的に無効化してもらえば今の環境を壊さずに試せるでしょう。講座内容は商品ページにまとめておりますので、是非そちらをご覧ください。 続きを読む...
Figma Buzzの作業イメージを公開しました
Figma Buzzを使いたいけど上司や会社を説得しないといけなかったり、二言目には「すぐAdobeの資産が…」とか言うし…、みたいなこともあるかと思います。そこでデザイナーの仕事として1枚の絵から複数サイズの切り替え可能なテンプレートを作る流れ、そしてそれを元にデザイナーじゃない方がBuzzモードの画面で大量の画像を一括生成する（ついでにテキストの置換というか多言語化する）までの流れを丸っと動画として用意してみました。 続きを読む...
Figma Buzz（β版）の動画講座を販売開始
Figma Buzzはデザイナーさんの仕事を画像生成のもととなるテンプレート作成にあてて、それ以外の画像やテキストの差し替えといった簡単な作業をデザイナー職以外の人でもできるようにしたものです。もちろん、デザインツールに不慣れな方でもプリセットや公開されているライブラリを使って、書き出す画像やテンプレートは作れるようになっています。そして何より助かるのは、入れ替え用のテキストや画像はエクセルなどの表計算ソフトを使って用意しておき、それを元に大量の画像生成や多言語化の対応が容易になることでしょう。 続きを読む...
Figma MCPサーバが正式版になったので
解説と言うほどでもない短尺の動画ですが、マスター編と単品のそれぞれのコースに「10-05a」として追加しました。今回元々エディタで追加する手法は公開しているので特に必要はないかと思いますが、こちら一応コンテンツ追加のお知らせとなります。 続きを読む...
価格改定のお知らせとLINE公式アカウント開設
2025年11月1日より、Figma Design関連の動画コンテンツの価格を以下のように改定いたします。いずれの商品も2026年にもおこなわれるはずのFigmaの大型アップデート後も内容を精査し、新規パッケージを作ることなくこちらの商品自体を追加費用なしでアップデート対応する予定です。そして、このたびLINEの公式アカウントを開設いたしました。新規友だち追加で10%割引クーポンも 続きを読む...
AIにも人にも優しいFigmaの作り方を新規追加
今度は「AIにも優しい＝人にも優しいFigmaファイルの作り方」として、FigmaのファイルそのものをAIフレンドリーなものにするためのポイントなどをまとめて、新たに10本の動画を追加しました 続きを読む...
Figmaの元データとコーディング指示を配布開始
コーディング前のFigmaファイルのデータ（.fig）とVSCodeのCopilotへの指示（.md）、生成後のコーディングデータをダウンロードファイルとして公開しました。Figmaのダッシュボードのインポート画面から「.fig」ファイルを読み込んで内容確認ができます。 続きを読む...
生成AI × Figma MCPの解説動画を追加しました
「Figma MCP」の最新の事情を踏まえて「LLMとMCPの関係、AIエージェント」の基本的な話から、実際にエディタにMCPサーバを登録する方法、作成したFigmaのデザインをもとにAIが正しく内容を解析してコード化できるようなファイルの作り方、実際のプロンプトの指示の方法やカスタムのルールの作り方まで、まるっと1章分のコンテンツの追加です。 続きを読む...
Figma Sites 2025 β版の単体での販売を開始
Figma Sites 2025 β版の単体での販売を開始
Figma Sites β版の動画講座ですが、「Figma Sites 2025 β」として単品での販売を開始しました。アカウント登録不要でご覧いただける各講座の無料のプレビューにも追加しております。2025年10月3日時点でまだオープンβ版ということもあり、Figma側での正式リリース後こちらのコンテンツの更新準備が整うまでは、割引価格（税込 2,750円）での提供としておりますので是非この機会にご検討ください 続きを読む...
Figma Sites（β版）の解説動画を先行公開しました
これまで当サイトのFigma Design動画（どれでも構いません）をご購入いただいた皆様を対象にして、Figma Sitesの解説動画を先行して公開しました（もちろん、こちらは無料。正式版になっても無料のままで提供いたします）。これから単体商品の販売前までにご購入いただいた場合ももちろん無料でご覧になれます。 続きを読む...
追加コンテンツのお知らせ - 20250910
本編内実践編に追加する形でバリアントやバリアブルズを使って、モードを切り替えることで自動的に設定内容やコンポーネントの状態を切り替える解説を用意しました。 続きを読む...
夏休み応援クーポン - BON2025
この夏は土日祝日に有給休暇などを組み合わせて、比較的長めのお休みを予定されている方も多いかと思います。かといって、皆さんが帰省や旅行の予定ばかりでもないでしょうし、周りがお休みしてる間に勉強しようと思ってる方も意外と多いのでは？そんな皆さんを応援すべく、8月17日の深夜23:59まで利用可能な10%OFFのクーポン「BON2025」を発行しました。下記URLからアクセスしていただくと、お会計時に自動的にクーポンが適用されますが、もし適用されていない場合は「ディスカウント」欄を開いて「BON2025」と入力し適用してください。https://kmrvid.com/discount/BON20253日もあれば各コース全体はゆとりを持って終わると思います 😀購入前の参考までに無料の講座プレビューも用意しています。 続きを読む...
Figma Design 動画講座プレビュー
これまでいろいろなパートを寄せ集めた紹介動画のみを公開していましたが、下記リンク先にて基本編とマスター編それぞれの中からいくつか動画をピックアップし閲覧可能にしました。特にアカウントの登録などは必要ありません。こちら講座購入の検討にお使いいただければと。 続きを読む...
マスター編に実践コンテンツを追加しました
マスター編の学習内容をもとに実際の現場でも作る機会の多そうなコンポーネントなどを作ってみる実践コンテンツを追加しました。 続きを読む...
お支払い方法の変更方法と購入コースへのアクセス
こんにちは。いよいよマスター編の公開です。ここで今さらではありますが、ShopPay以外でのお支払い方法への変更手順と購入後のコースへのアクセス方法をこちらで解説いたします。 お支払い方法の変更 ShopifyではデフォルトでShopPayでの支払いが表示されてしまうのですが、ShopPayのアカウントを作成したくない方や、PayPalやGooglePay、ApplePayなどの他の決済手段を利用したい方は、商品詳細ページ「別の支払い方法」を選択するか、カートの画面でクレジットカードのパネルを開いて「代替決済方法」をクリックすることで、PayPalなどの決済方法を選択できるようになります（※ApplePayはiOSからのアクセスのみ表示されることを確認しています） ご購入いただいた商品の領収書は、マイページの注文詳細よりダウンロード可能です。社名など組織名での発行は支払い方法を上記の方法で変更後、チェックアウト時に表示される請求先住所の「社名（任意）」をご入力いただくことで対応しております。不具合などで発行されない場合はお問い合せください。 購入したコースへのアクセス方法 本サイトでは購入いただいた商品は、サイト内でLMS（Learning Management System）の仕組みを使っております。決済完了後の画面、もしくは決済完了のメールに記載されているコースへのアクセスリンクからすぐにアクセス可能です。ログインは必須にしておりますので、一度ログアウトされてしまった場合は上記メール、もしくはログイン後に表示されるマイページの「注文履歴」から注文を選択していただくと、同じように購入済コースへのアクセスリンクが表示されます。 LMSについて LMSの中は購入いただいた商品に合わせてコースが表示されます。いずれのコースもチャプターの各動画の途中でスキップできるようにしておりますので、必ずしも連続して動画を視聴する必要はありません。動画はパソコン環境だけでなく、タブレットやスマートフォンでの視聴にも対応しております。 なお配信者であるこもりの声は、環境音にかき消されやすい声質ですので、静かな環境かヘッドフォンなどでの視聴をお薦めいたします。 続きを読む...
Figma Design に特化した動画講座の配信にあたって
「自分がFigmaが使えてるのかわからない」「使いこなしたいけど周りに聴ける人がいない」という声や、私自身が企業研修などで半日〜1日かけ受講者に短時間で豊富な機能を説明することへの限界、受講者の皆さんの役に立てているのか？と感じていたこともあって、動画による講座で自分のペースで学んでいけるものを作ろうと、数年前から構成を考えて準備をしていたのがこの「Figma 講座」です。 続きを読む...