
Figma UI3 基礎 + 実務定着 超スピード完走コース
jyoung
Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走(修了)できるように構成されています。
入門
Figma, ui
Figmaデザイン+AI活用コーディング+デプロイまで、フルスタックコース!! [Figma+バイブコーディング(HTML/CSS/Tailwind/React)+Git+vercelデプロイ] 自分のデザインをそのまま!! 1ピクセルの誤差もなく、バイブコーディングで完成! AI活用で実務の生産性を5倍に高めるフルスタック攻略ガイド! デザインもコーディングもすべてできるフルスタックデザイナーに、あなたもなれます。 ✅ 自分のデザインの意図まで、1ピクセルの誤差もなく実装 ✅ AIが理解できるデザイン設計 ✅ AIを正確にコントロールするプロンプト作成能力 ✅ AIが勝手に書いたコードも、てきぱき修正できる能力 デザインからコーディング、デプロイまでを1/5に短縮できる、驚きの体験を味わえます。
受講生 330名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
blake choi
正直、最近AIが新しく出るたびに、将来自分の仕事もなくなってしまうのではないかと漠然とした不安がありましたが(涙)、コードを前にして無力さを感じる自分が嫌で、Jヨン先生の講義を決済しました。 普通、MCPについて調べるとツールの機能説明で終わる場合が多いですが、この講義は本当に実戦を扱っている感じがして、とても良かったです。 デザイン・トークンを活用し、Cursorが理解できるように渡すプロセス自体が面白かったですし、AIとやり取りしながらウェブで形になっていく自分の制作物を見て、「バイブコーディング」というのが何なのか、しっかり学ぶことができました。 特に、Notionで丁寧にまとめてくださった資料には本当に感動しました。動画を見ていて聞き逃した部分も、Notionに沿って進めれば解決できました。 次の講義もオープンしたら必ず受講します。先生、ありがとうございました!!
5.0
자니?
本当に講義を楽しく拝聴しました。 Vibe Coding最高の講義だと思います。 MCPを接続して、Cursorがそのまま90%作り上げてしまうのが新世界でしたし、いつもコーディングに行き詰まっていたのですが…デベロッパーツールを活用して修正していくのは本当に感動です。 一つ一つ修正するのが少し退屈な時もありましたが、講義をすべて見終えたら、どんな構造でも修正していける自信がみなぎってきました。 良い講義をありがとうございます。 実務のスピードが2倍は向上しそうです〜。 いつも素晴らしい講義をありがとうございます〜。
5.0
hylimhy65
フィグマとコーディングを少しずつ扱える私にとって、今回の講義はスキルアップに非常に大きな助けとなりました。 これまでレイアウトを作成しながら迷ったり難しかったりした部分を、とてもスッキリと解消してくれた感じです。 何より、MPCを連携してデザイン通りに実装するのは本当に不思議でした。 本当に作業スピードが2、3倍は速くなりそうな予感がします。 そして、AIが自動で作成した結果をデベロッパーツールを活用して簡単に修正するのも、とても印象的でした。 今回の講義を通じて、本当に素早くレスポンシブウェブページを完成させられるという自信がつきました。 素晴らしい講義を作ってくださった講師の方に、心から感謝申し上げます。
私のデザインそのまま!1ピクセルの誤差もなくAIを活用して実装
Figma Auto Layoutを完全に理解して実装する
Figma レスポンシブWebの理解および制作・実装
Figma Variablesの登録および適用方法の習得
HTML/CSSレイアウト構造およびレスポンシブWebの完全な理解と実装
開発者ツールの使い方を完全習得
AI活用で完全にコントロールする戦略的バイブコーディング・プロンプト
AIが勝手にコーディングした成果物を修正する方法も習得する
GSAP ScrollTriggerの作成方法の理解と実装
TailwindCSSを活用して、簡単にレスポンシブWebサイトを制作できます
Reactリファクタリングを通じた概念および基本構造の理解
デザイン → バイブコーディング → Gitバージョン管理 → Vercelデプロイまで、Webポートフォリオ制作の全工程を経験
☑デザインはできるのに、コーディングのことを考えるだけで自信がなくなりますか?
☑ プロンプトを数行入力しただけで、AIが勝手に作った成果物に失望したことはありませんか?
☑ AIの活用を通じて、自分のデザインを1ピクセルの誤差もなく実装したいですか?
☑ デザイン → フロントエンド開発 → デプロイまで、全プロセスを正しく理解したいですか?
☑ デザインと開発の両方を網羅する1人のクリエイター(1人起業家)を目指していますか?
☑ AIを活用して、トレンディなウェブサイトを自分で作ってみたいですか?
☑ デザイン設計から
☑AIを活用した開発、
☑そして実際のデプロイまで
👌実務ですぐに活用できる核心ノウハウをこの講義にすべて詰め込みました。
AIが正確に理解できるデザイン構造を設計します。
Auto Layout
どの解像度にも柔軟に対応するレスポンシブなボックス構造を設計します
Variablesの体系化
カラー、間隔、数値を体系化し、AIがデザインの意図を即座にコードへ置き換えられるよう設定
レイヤーの命名戦略
AIがコード構造を迅速に把握できる効率的な命名ルール
Tokens.jsonの抽出
デザインシステムをコードとつなぐトークンベースの設計
私のデザインをそのまま100%コードに落とし込むAIリーディング技術を学びます。
Cursor、Antigrvity、Claude、Codex AI & MCP Server連携
Prompt Engineering戦略
1ピクセルの誤差もない実装方法
インタラクティブUI実装技法
👌AIを単なる自動化ツールではなく、共に働く開発パートナーとして活用する方法を扱います。
Figmaでポートフォリオをデザインする
AIを活用したHTML/CSS実装
Tailwindでレスポンシブにリファクタリング
ReactベースのインタラクティブなWeb構築
Git & GitHub バージョン管理
Vercelによる実際のサービスデプロイメント
👌全工程を一つの実務ワークフローとして体験します。
構造化されたレイヤー設計能力
システムベースのデザイン思考
AIフレンドリーな設計能力
AIが作成したコードを分析・修正する能力
プロンプト設計能力
デザイン意図を維持する精密な実装能力
HTML / CSS構造の理解
Tailwindを基盤としたレスポンシブ実装能力
Reactの構造を理解し、適用する能力
Gitを活用したバージョン管理
GitHubリポジトリの運用
Vercelを通じた実サービスのデプロイ経験
世界中の誰もがアクセスできるポートフォリオを完成

自分のデザインそのままを
Vibe Codingで
実装したいデザイナー
デザインはできるものの、
コーディングが難しく、ウェブサイト制作を諦めていた方

AIで業務の生産性を
5倍向上させたい方
AIを秘書として活用し
デザインから開発、デプロイまで
ウェブサイトを素早く
制作・実装したい方

デザインからデプロイまで
すべてできるフルスタック専門家に
なりたい方
圧倒的な生産性で
高品質なインタラクティブポートフォリオを制作し、就職や転職を成功させたい方
☑ デザインと開発の両方を網羅する '圧倒的な競争力'
"デザインだけできる人"から"デザインとコーディングの両方ができる専門家"へと生まれ変わります。
就職・転職市場で企業が最も欲しがる第一候補の人材になります。
☑作業速度が5倍速くなる「AIワークフロー」を習得
AIを秘書のように使いこなし、複雑な機能を短時間で実装し、企画やデザインといったより価値のある仕事に
集中できるようになります。
☑ 自分だけの高品質な'フルスタックポートフォリオ'を保有
フィグマデザインからReact開発、実際のWebデプロイまで完了した生きたポートフォリオを保有するだけでなく、
制作への応用方法を習得します。
☑ AIと協働した制作プロセス(Process)全体の資産化
単なる成果物1枚ではありません。アイデアがFigmaの設計となり、さらにAIコーディングを経てデプロイに至るまでの
ワークフロー全体をポートフォリオの強力なストーリーとして盛り込めるようになります。
[Figma] Variableの登録および適用
Cursor AIとFigma MCP Serverの接続
[Vibe Coding]デスクトップモードのデザイン
- html/css静的ページの完成
- ScrollTriggerを活用したAnimationの実装
- gnbMenuに該当するコンポーネントを接続
[Vibe Coding]タブレットモードデザイン
[Notion記録] AIが理解できるプロンプト
Gitバージョン管理およびGithubへのデプロイ & vercelへのデプロイ
Claude + Anitigravity MCP -Vibe Codingでモバイルウェブを制作する
Claude + Codex MCP -Vibe Codingでモバイルウェブを制作する
実務+講師歴25年の講師
UIUXデザイナー、プロダクトデザイナー、コーディングするデザイナーとして500名以上が就職!
2025年の就職率92%、2026年現在の就職率95%
オンライン・オフラインの受講生1万人以上!
YouTubeチャンネル「コーディングするデザイナー・チャルナンウェブディ」を運営
現)UIUX企画、デザイン&フロントエンドブートキャンプ講師(イゼンDXアカデミー -江南店)
現) UIUX企画 + デザイン & + コーディング => ポートフォリオ制作グループレッスン
本講義ではFigma、Cursor、Antigravityを使用します。
講義内容とソースはNotionで提供します。
Figma基礎:
本講義ではFigmaの基本的なツールの使い方は扱いません。Figmaが初めての方は
[コーディングするデザイナー チャルナウェブD]YouTubeチャンネルで[Figma & UIUXデザイン|超スピード完走コース]
でFigmaの基礎講座を受講してから本講座を受講すると、学習に大いに役立つかと思います。
HTML/CSS基礎 :
本講義ではHTML/CSSの基礎文法を詳しく扱っていません。コーディングが初めての方や基礎に不安がある方は、私の無料講義である HTML/CSS基礎をしっかり学ぶ超スピード完走コースを先にご視聴ください。基本概念を身につけてから受講すると、AIを活用した実務コーディングをより簡単かつスピーディーに習得できます
学習対象は
誰でしょう?
デザインはできるけれど、コーディングの壁にぶつかってポートフォリオ制作が止まってしまった方
AIを使ってみたものの、思い通りの結果にならず、もどかしい思いをされた方
AIプロンプトを通じて、自分の意図どおりの成果物を100%実現したい方
デザインからデプロイまで一人でこなせるフルスタックのプロフェッショナルを目指す方
デザインとコーディングの両方のスキルを備えた開発者になり、フルスタックデザイナーになる
AIを通じて業務の生産性を5倍向上させたい方
就職や転職のために、高品質なインタラクティブポートフォリオを切実に必要としている方
前提知識、
必要でしょうか?
Figma完全初心者の方でも挑戦できる無料講座を提供します
HTML/CSS超初心者の方でも挑戦できる無料講座を提供
インフラン認証
キャリア認証
10,849
受講生
470
受講レビュー
247
回答
4.8
講座評価
15
講座
こんにちは。
私は20年以上にわたり、ウェブ・アプリサービスの企画、デザイン、開発の実務を経験しており、
現在はUIUXウェブ企画・デザイン・フロントエンドのブートキャンプ講師として活動しています。
実務経験を基に、これまで500人以上の受講生がデザインおよびIT分野へ就職できるようサポートしてきました。現在もAI時代に合わせた新しいポートフォリオ制作方法と実務スキルの教育に注力しています。
単にツールの使い方を学ぶのではなく、企画からデザイン、開発、配布まで、実務と同じプロセスを経験しながら、現場ですぐに活用できる能力を身につけられるようサポートします。
急速に変化する採用市場で必要とされるAI活用能力、問題解決能力、協調性を中心に学習します。
面接官が関心を持つようなプロジェクトとポートフォリオを作成することに集中します。
これからは企画し、デザインし、実装し、デプロイまでできる
フルスタッククリエイター(Fullstack Creator)の能力が必要です。
デザインツールの基本活用能力 + Claude、Codex、Figmaを活用して実際のサービスを制作し、
AIと共に成果物を作る方法を経験していただきます。
- 何から始めればよいか分からず途方に暮れている方、
- ポートフォリオの競争力を高めたい方、
- AIを活用してより速く成長したい方であれば、私が皆さんの心強いガイドに
なります。
皆さんの成果物が完成する瞬間まで、共に歩んでまいります。
実務経歴
2017~現在 | Digital Product Director & UX Consultant
2015~2017 | Executive Director, EliEsel Inc.
2003~2015 | Executive Director, Amusingware Inc.
2003 | Head of Design, Seowoo C&D
講義経歴
就職ポートフォリオ制作およびプロジェクトメンタリング
企業出講および実務能力強化教育
大学・企業・教育機関向けの実務講義
デザイン・開発ポートフォリオコンサルティングおよびグループメンタリング
実務プロジェクトベースのチームコーチングおよびポートフォリオ指導
企業在職者および就職準備生を対象とした実務教育
AIベースのUIUX・フロントエンド実務教育およびコンサルティング
- 現) UIUX企画・デザイン・フロントエンド ブートキャンプ専任講師(Ezen DXアカデミー - 江南店)
- デザイン・開発ポートフォリオ専門講義およびチームグループ講義
* 運営中のYouTube(コーディングするデザイナー)
オープンチャットルームの運営
よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
講義に関する質問やポートフォリオに関するフィードバックを差し上げます。
- オープンチャット名:チャルナンウェブディ
- コード:jyoung
全体
77件 ∙ (9時間 14分)
全体
26件
4.8
26件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
5
フィグマとコーディングを少しずつ扱える私にとって、今回の講義はスキルアップに非常に大きな助けとなりました。 これまでレイアウトを作成しながら迷ったり難しかったりした部分を、とてもスッキリと解消してくれた感じです。 何より、MPCを連携してデザイン通りに実装するのは本当に不思議でした。 本当に作業スピードが2、3倍は速くなりそうな予感がします。 そして、AIが自動で作成した結果をデベロッパーツールを活用して簡単に修正するのも、とても印象的でした。 今回の講義を通じて、本当に素早くレスポンシブウェブページを完成させられるという自信がつきました。 素晴らしい講義を作ってくださった講師の方に、心から感謝申し上げます。
hylimhy65様 もう完走されたのですね。難しかった部分がすっきりと解消されたとのこと、私の方こそ感謝の気持ちでいっぱいです。MCPを連携させてのバイブコーディングは、本当にAIの驚くべき進歩ですよね。 作業の生産性を高める上で、大いにお役に立てれば幸いです。 私もより良い講義でまたお会いできるよう努めてまいります。 ありがとうございました。 J.youngより
受講レビュー 8
∙
平均評価 5.0
5
いつの間にか8年目のプロダクトデザイナーになりました。AIが登場し、自分の居場所を奪われるのではないかと戦々恐々としている自分の姿が嫌で、講義を申し込みました! 自分のポートフォリオを直接作ってみれば、実務でもどのようにAIを活用できるか感覚を掴めると思ったからです。 Figmaで変数を設計し、デザイントークンを整理して、MCPを通じてCursorに伝えるプロセスは、本当に新世界でした!! これまでは開発側にハンドオフした後はデザイナーの役割は終わりだと思っていましたが、今ではコード分析で不要な構造を削ぎ落とし、Reactでリファクタリングする過程まで理解できるようになり、実務でより広い役割を担えるようになりました。 先生の講義を受けて、AIは恐ろしい道具ではなく、正確に指示すれば強力になるパートナーだということが分かりました。ありがとうございます!
実務8年目のプロダクトデザイナーの方にそのように評価していただき、本当に感謝しております。 おっしゃる通りです。私も最初はAIがすべてをこなしてしまったら仕事を失うのではないかという恐怖がありましたが、継続的にAIを扱ってみた結果、結局のところ勝者は「AIを使いこなす者」なのだと感じています。これからもAI活用能力を高める方法を模索・研究し、発信していきたいと思います。ありがとうございます。^^
受講レビュー 1
∙
平均評価 5.0
5
正直、最近AIが新しく出るたびに、将来自分の仕事もなくなってしまうのではないかと漠然とした不安がありましたが(涙)、コードを前にして無力さを感じる自分が嫌で、Jヨン先生の講義を決済しました。 普通、MCPについて調べるとツールの機能説明で終わる場合が多いですが、この講義は本当に実戦を扱っている感じがして、とても良かったです。 デザイン・トークンを活用し、Cursorが理解できるように渡すプロセス自体が面白かったですし、AIとやり取りしながらウェブで形になっていく自分の制作物を見て、「バイブコーディング」というのが何なのか、しっかり学ぶことができました。 特に、Notionで丁寧にまとめてくださった資料には本当に感動しました。動画を見ていて聞き逃した部分も、Notionに沿って進めれば解決できました。 次の講義もオープンしたら必ず受講します。先生、ありがとうございました!!
blake choi様、感動の受講レビューをいただきありがとうございます。 本当の実戦を扱っている感じがしたとのこと、私の方こそ感謝の気持ちでいっぱいです。 これからもより一層奮起して、さらに良い講義でお会いできるよう努めます。 J.youngより
受講レビュー 9
∙
平均評価 5.0
5
本当に講義を楽しく拝聴しました。 Vibe Coding最高の講義だと思います。 MCPを接続して、Cursorがそのまま90%作り上げてしまうのが新世界でしたし、いつもコーディングに行き詰まっていたのですが…デベロッパーツールを活用して修正していくのは本当に感動です。 一つ一つ修正するのが少し退屈な時もありましたが、講義をすべて見終えたら、どんな構造でも修正していける自信がみなぎってきました。 良い講義をありがとうございます。 実務のスピードが2倍は向上しそうです〜。 いつも素晴らしい講義をありがとうございます〜。
janey23様、心のこもった受講評をいただき誠にありがとうございます。今回の講義を通じてリファクタリングの実力も向上されたとのこと、本当に嬉しく思います。 改めて感謝申し上げます^^ J.ヨンドリーム
受講レビュー 8
∙
平均評価 5.0
5
MCPの講義をいくつか受講してきましたが、確かに他のMCP講義とは差別化されていると感じました。単なる機能説明だけでなく、Figma MCPとAIを実際のワークフローの中でどのように連携させて使うべきかを体系的に示し、リファクタリングの過程まで見せてくださったので非常に満足しています。 個人的には、数あるMCPの授業の中でも最高だと感じました。 特にFigma変数の使い方も非常にうまく整理されており、全体的にバイブコーディング(Vibe Coding)方式で作業速度を向上させる流れがとても良かったです。受講後には「あ、これはすぐに使える」と思えるポイントが多く、ただ聞いて終わる講義ではなく、実際に手に馴染む講義でした。やはりJ.ヨン講師の講義は信頼して受講できます。 ポートフォリオを準備している方々にもおすすめです。
ウンス様 温かい受講レビュー、本当にありがとうございます~~ ライブコーディング形式なので撮影に苦労もありましたが、一瞬で疲れが吹き飛ぶような気持ちです。 本当に感謝しております。一生懸命学習されて、 素敵なポートフォリオの作成、そして実務で大きな助けとなるよう応援しています^^ ありがとうございました^^
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!