Figma MCP × AI x Vibe Coding 4時間で完成させるレスポンシブWebポートフォリオ

Figmaデザイン + AI活用コーディング + デプロイまでフルスタックコース!! [Figma + バイブコーディング (HTML/CSS/Tailwind/React) + Git + vercel デプロイ] 自分のデザインそのまま!!1ピクセルの誤差もなくバイブコーディングで完成! AI活用で実務の生産性を5倍高めるフルスタック攻略本! デザインもコーディングもすべて可能なフルスタックデザイナー、あなたもなれます。 ✅ デザインの意図まで一ピクセルの誤差なく具現 ✅ AIが理解するデザイン設計 ✅ AIを正確にコントロールするプロンプト制作能力 ✅ AIが自由に作成したコードをサクサク修正する能力 デザインからコーディング、デプロイまで1/5に短縮される驚きの体験をお届けします。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Figma
Figma
Portfolio
Portfolio
AI
AI
Vibe Coding
Vibe Coding
HTML/CSS
HTML/CSS
Figma
Figma
Portfolio
Portfolio
AI
AI
Vibe Coding
Vibe Coding

学習した受講者のレビュー

4.9

5.0

blake choi

100% 受講後に作成

正直、最近AIが新しく出るたびに、将来自分の仕事もなくなってしまうのではないかと漠然とした不安がありましたが(涙)、コードを前にして無力さを感じる自分が嫌で、Jヨン先生の講義を決済しました。 普通、MCPについて調べるとツールの機能説明で終わる場合が多いですが、この講義は本当に実戦を扱っている感じがして、とても良かったです。 デザイン・トークンを活用し、Cursorが理解できるように渡すプロセス自体が面白かったですし、AIとやり取りしながらウェブで形になっていく自分の制作物を見て、「バイブコーディング」というのが何なのか、しっかり学ぶことができました。 特に、Notionで丁寧にまとめてくださった資料には本当に感動しました。動画を見ていて聞き逃した部分も、Notionに沿って進めれば解決できました。 次の講義もオープンしたら必ず受講します。先生、ありがとうございました!!

5.0

janey23

89% 受講後に作成

本当に講義を楽しく拝聴しました。 Vibe Coding最高の講義だと思います。 MCPを接続して、Cursorがそのまま90%作り上げてしまうのが新世界でしたし、いつもコーディングに行き詰まっていたのですが…デベロッパーツールを活用して修正していくのは本当に感動です。 一つ一つ修正するのが少し退屈な時もありましたが、講義をすべて見終えたら、どんな構造でも修正していける自信がみなぎってきました。 良い講義をありがとうございます。 実務のスピードが2倍は向上しそうです〜。 いつも素晴らしい講義をありがとうございます〜。

5.0

hylimhy65

100% 受講後に作成

フィグマとコーディングを少しずつ扱える私にとって、今回の講義はスキルアップに非常に大きな助けとなりました。 これまでレイアウトを作成しながら迷ったり難しかったりした部分を、とてもスッキリと解消してくれた感じです。 何より、MPCを連携してデザイン通りに実装するのは本当に不思議でした。 本当に作業スピードが2、3倍は速くなりそうな予感がします。 そして、AIが自動で作成した結果をデベロッパーツールを活用して簡単に修正するのも、とても印象的でした。 今回の講義を通じて、本当に素早くレスポンシブウェブページを完成させられるという自信がつきました。 素晴らしい講義を作ってくださった講師の方に、心から感謝申し上げます。

受講後に得られること

  • 私のデザインそのままに!1ピクセルの誤差もなくAIを活用して実装

  • Figma Auto Layoutの完全理解と実装

  • Figmaレスポンシブウェブの理解および制作・実装

  • Figma Variablesの登録および適用方法の習得

  • HTML/CSSレイアウト構造およびレスポンシブWebの完全な理解と実装

  • デベロッパーツールの活用法を完全習得

  • AI活用で完璧にコントロールする戦略的バイブコーディング・プロンプト

  • AIが勝手にコーディングした結果を修正する方法を習得

  • GSAP ScrollTriggerの制作方法の理解および実装

  • TailwindCSSを活用して手軽にレスポンシブWeb制作を実現

  • Reactリファクタリングを通じた概念および基本構造の理解

  • デザイン → ライブコーディング → Gitバージョン管理 → Vercelデプロイまで、ウェブポートフォリオ制作の全過程を経験

Figma MCP × AI x Vibe Coding
デザインそのまま!1ピクセルの誤差もなく実装するフルスタックポートフォリオ


※ ご案内いたします。

本講義はAI技術の発展速度に合わせて継続的なアップデートが行われており、
現在までに計3次のアップデートが進行中です。

今後行われる第4次アップデートでは
[UIUX・プロダクトデザイナーのためのAIベースのフルスタックポートフォリオ制作]をテーマに
カリキュラムがさらに拡張される予定です。

コンテンツの追加および講義範囲の拡大に伴い、
第4次アップデートからは受講料が値上げされる予定です。

現在の受講生の方は、今後のアップデート内容まで追加費用なしで受講可能です。


📢 講義紹介

実務+講師歴25年の講師が教える!

デザインからコーディングまで、AIを活用して生産性を5倍高めるフルスタックデザイナー



🎯 こんな悩み、ありませんか?

 ☑デザインはできるのに、コーディングのことだけを考えると自信がなくなりますか?

☑ プロンプトを数行入れただけで、AIが勝手に作り出した結果にがっかりしたことはありませんか?

☑ AIを活用して、自分のデザインを1ピクセルの狂いもなく具現化したいですか?

☑ デザイン → フロントエンド開発 → デプロイまで、全過程をしっかり理解したいですか?

☑ デザインと開発の両方を網羅する1人クリエイター(1人起業家)を夢見ていますか?

☑ AIを通じて、トレンド感のあるウェブサイトを自分で作りたいですか?


💡 それなら、この講義が答えです。

デザイン設計から
 ☑AIを活用した開発、
 ☑そして実際のデプロイまで

👌実務ですぐに活用できる核心的なノウハウを、この講義にすべて詰め込みました。

1️⃣ 本講義で扱う核心プロセス


💎 Figmaベースの戦略的設計

AIが正確に理解できるデザイン構造を設計します。

  • Auto Layout
    どんな解像度でも柔軟に対応するレスポンシブなボックス構造の設計

  • Variablesのシステム化
    カラー、間隔、数値を体系化し、AIがデザインの意図を即座にコードへ置換できるように設定

  • レイヤー命名戦略
    AIがコード構造を素早く把握できる効率的なネーミングルール

  • Tokens.jsonの抽出
    デザインシステムをコードと連携させるトークンベースの設計


💎 Vibe Coding

自分のデザインそのままを100%コードに変換する、AIリーディング技術を学習します。

  • Cursor、Antigrvity、Claude、Codex AI & MCP Server 連動

  • プロンプトエンジニアリング戦略

  • 1ピクセルの誤差もない実装方式

  • Interactive UI 実装手法

👌AIを単なる自動化ツールではなく、共に働く開発パートナーとして活用する方法を扱います。


💎 デザイン → 開発 → デプロイのフルコースの流れ

  • Figmaでポートフォリオをデザイン

  • AIを活用したHTML/CSS実装

  • Tailwindでレスポンシブ・リファクタリング

  • Reactベースのインタラクティブウェブ構築

  • Git & GitHub バージョン管理

  • Vercelによる実サービスデプロイ

👌全過程を一つの実務ワークフローとして経験します。


2️⃣ 本講義を通じて得られる核心能力


🚀 AIが理解するデザイン設計能力

  • 構造化されたレイヤー設計能力

  • システムベースのデザイン思考

  • AI親和的な設計能力


🚀 AIをコントロールする開発能力

  • AIが作成したコードの分析および修正能力

  • プロンプト設計能力

  • デザイン意図を維持する精密な実装能力


🚀 実践パブリッシング能力

  • HTML / CSS 構造の理解

  • Tailwindベースのレスポンシブ実装能力

  • React構造の理解および適用能力


🚀 デプロイまで完成させる実務経験

  • Gitを活用したバージョン管理

  • GitHubリポジトリの運用

  • Vercelを通じた実サービスデプロイ経験

  • 世界中の誰もがアクセス可能なポートフォリオの完成

🎯こんな方におすすめです

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

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

デザインからデプロイまで
すべてこなせるフルスタックの専門家に
なりたい方
圧倒的な生産性で
ハイクオリティなインタラクティブ・ポートフォリオを制作し、就職や転職を成功させたい方

🎁受講後には

 ☑ デザインと開発の両方を網羅する「圧倒的な競争力」
       「デザインしかできない人」から「デザインとコーディングの両方が可能な専門家」へと生まれ変わります。
       就職・転職市場において、企業が最も欲しがる第一候補の人材になります。

☑ 作業速度が5倍速くなる「AIワークフロー」の習得
     AIを秘書のように使いこなし、複雑な機能を短時間で実装し、企画やデザインといったより価値のある仕事に
     集中できるようになります。

☑ 自分だけの高品質な「フルスタックポートフォリオ」を保有
     FigmaのデザインからReactの開発、実際のウェブデプロイまで完了した生きたポートフォリオの保有はもちろん、
     制作の応用方法を習得します。

☑ AIと協業した制作プロセス全体の資産化
     単なる成果物の一枚ではありません。アイデアがFigmaの設計になり、再びAIコーディングを経てデプロイされるまでの
    ワークフロー全体をポートフォリオの強力なストーリーとして盛り込むことができるようになります。

📚このような内容を学びます。

  • [Figma] Variableの登録および適用

  • Cursor AI Figma MCP Server接続

  • [Vibe Coding] Desktopモードのデザイン
    - HTML/CSS静的ページの完成
    - ScrollTriggerを活用したアニメーションの実装
    - 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%

  • オンライン、オフライン受講生10000名以上!

  • YouTubeチャンネル「コーディングするデザイナー、イケてるウェブデザ(잘난웹디)」運営

  • 現) UIUX企画、デザイン & フロントエンドブートキャンプ講師(イゼンDXアカデミー - 江南店)

  • 現)UIUX企画 + デザイン & + コーディング => ポートフォリオ制作グループレッスン

⚠️受講前のご注意事項

学習資料

  • 本講義では Figma、Cursor、Antigravity を使用します。

  • 講義内容とソースはNotionで提供します。

前提知識および注意事項

こんな方に
おすすめです

学習対象は
誰でしょう?

  • デザインはできるけれど、コーディングの壁にぶつかってポートフォリオ制作が止まっている方

  • AIを使ってみたものの、思い通りの結果が得られずもどかしい思いをされた方

  • AIプロンプトを通じて、自分の意図通りに成果物を100%具現化したい方

  • デザインからデプロイまで一人でテキパキとこなすフルスタック専門家を夢見る方

  • デザインとコーディングの両方のスキルを兼ね備えた開発者、そしてフルスタックデザイナー

  • AIを通じて業務生産性を5倍向上させたい方

  • 就職や転職のために、ハイクオリティなインタラクティブ・ポートフォリオを切実に必要としている方

前提知識、
必要でしょうか?

  • Figma超初心者の方でも挑戦できる無料講座を提供

  • HTML/CSSの超初心者の方でも挑戦できる無料講座を提供

こんにちは
jyoungです。

9,780

受講生

426

受講レビュー

242

回答

4.8

講座評価

13

講座

こんにちは。

AI活用UIUXフルスタックデザインディレクターのJ.ヨンです。

私は20年以上にわたり、ウェブ・アプリサービスの企画、デザイン、開発の実務を経験しており、
現在はUIUXウェブ企画・デザイン・フロントエンドのブートキャンプ講師として活動しています。

実務経験を基に、これまで500人以上の受講生がデザインおよびIT分野へ就職できるようサポートしてきました。現在もAI時代に合わせた新しいポートフォリオ制作方法と実務スキルの教育に注力しています。



私の講義哲学は!

実務に即投入できるスキルの構築

単にツールの使い方を学ぶのではなく、企画からデザイン、開発、配布まで、実務と同じプロセスを経験しながら、現場ですぐに活用できる能力を身につけられるようサポートします。

現場が求める核心的なスキルの集中習得

急速に変化する採用市場で必要とされる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分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

20件

4.9

20件の受講レビュー

  • wjsduwls01011742님의 프로필 이미지
    wjsduwls01011742

    受講レビュー 9

    平均評価 5.0

    5

    89% 受講後に作成

    本当に講義を楽しく拝聴しました。 Vibe Coding最高の講義だと思います。 MCPを接続して、Cursorがそのまま90%作り上げてしまうのが新世界でしたし、いつもコーディングに行き詰まっていたのですが…デベロッパーツールを活用して修正していくのは本当に感動です。 一つ一つ修正するのが少し退屈な時もありましたが、講義をすべて見終えたら、どんな構造でも修正していける自信がみなぎってきました。 良い講義をありがとうございます。 実務のスピードが2倍は向上しそうです〜。 いつも素晴らしい講義をありがとうございます〜。

    • jyoung
      知識共有者

      janey23様、心のこもった受講評をいただき誠にありがとうございます。今回の講義を通じてリファクタリングの実力も向上されたとのこと、本当に嬉しく思います。 改めて感謝申し上げます^^ J.ヨンドリーム

  • quscogus4235님의 프로필 이미지
    quscogus4235

    受講レビュー 7

    平均評価 5.0

    5

    33% 受講後に作成

    MCPの講義をいくつか受講してきましたが、確かに他のMCP講義とは差別化されていると感じました。単なる機能説明だけでなく、Figma MCPとAIを実際のワークフローの中でどのように連携させて使うべきかを体系的に示し、リファクタリングの過程まで見せてくださったので非常に満足しています。 個人的には、数あるMCPの授業の中でも最高だと感じました。 特にFigma変数の使い方も非常にうまく整理されており、全体的にバイブコーディング(Vibe Coding)方式で作業速度を向上させる流れがとても良かったです。受講後には「あ、これはすぐに使える」と思えるポイントが多く、ただ聞いて終わる講義ではなく、実際に手に馴染む講義でした。やはりJ.ヨン講師の講義は信頼して受講できます。 ポートフォリオを準備している方々にもおすすめです。

    • jyoung
      知識共有者

      ウンス様 温かい受講レビュー、本当にありがとうございます~~ ライブコーディング形式なので撮影に苦労もありましたが、一瞬で疲れが吹き飛ぶような気持ちです。 本当に感謝しております。一生懸命学習されて、 素敵なポートフォリオの作成、そして実務で大きな助けとなるよう応援しています^^ ありがとうございました^^

  • hihihj07017384님의 프로필 이미지
    hihihj07017384

    受講レビュー 8

    平均評価 5.0

    5

    100% 受講後に作成

    いつの間にか8年目のプロダクトデザイナーになりました。AIが登場し、自分の居場所を奪われるのではないかと戦々恐々としている自分の姿が嫌で、講義を申し込みました! 自分のポートフォリオを直接作ってみれば、実務でもどのようにAIを活用できるか感覚を掴めると思ったからです。 Figmaで変数を設計し、デザイントークンを整理して、MCPを通じてCursorに伝えるプロセスは、本当に新世界でした!! これまでは開発側にハンドオフした後はデザイナーの役割は終わりだと思っていましたが、今ではコード分析で不要な構造を削ぎ落とし、Reactでリファクタリングする過程まで理解できるようになり、実務でより広い役割を担えるようになりました。 先生の講義を受けて、AIは恐ろしい道具ではなく、正確に指示すれば強力になるパートナーだということが分かりました。ありがとうございます!

    • jyoung
      知識共有者

      実務8年目のプロダクトデザイナーの方にそのように評価していただき、本当に感謝しております。 おっしゃる通りです。私も最初はAIがすべてをこなしてしまったら仕事を失うのではないかという恐怖がありましたが、継続的にAIを扱ってみた結果、結局のところ勝者は「AIを使いこなす者」なのだと感じています。これからもAI活用能力を高める方法を模索・研究し、発信していきたいと思います。ありがとうございます。^^

  • hylimhy658998님의 프로필 이미지
    hylimhy658998

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    フィグマとコーディングを少しずつ扱える私にとって、今回の講義はスキルアップに非常に大きな助けとなりました。 これまでレイアウトを作成しながら迷ったり難しかったりした部分を、とてもスッキリと解消してくれた感じです。 何より、MPCを連携してデザイン通りに実装するのは本当に不思議でした。 本当に作業スピードが2、3倍は速くなりそうな予感がします。 そして、AIが自動で作成した結果をデベロッパーツールを活用して簡単に修正するのも、とても印象的でした。 今回の講義を通じて、本当に素早くレスポンシブウェブページを完成させられるという自信がつきました。 素晴らしい講義を作ってくださった講師の方に、心から感謝申し上げます。

    • jyoung
      知識共有者

      hylimhy65様 もう完走されたのですね。難しかった部分がすっきりと解消されたとのこと、私の方こそ感謝の気持ちでいっぱいです。MCPを連携させてのバイブコーディングは、本当にAIの驚くべき進歩ですよね。 作業の生産性を高める上で、大いにお役に立てれば幸いです。 私もより良い講義でまたお会いできるよう努めてまいります。 ありがとうございました。 J.youngより

  • blake8807226801님의 프로필 이미지
    blake8807226801

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    正直、最近AIが新しく出るたびに、将来自分の仕事もなくなってしまうのではないかと漠然とした不安がありましたが(涙)、コードを前にして無力さを感じる自分が嫌で、Jヨン先生の講義を決済しました。 普通、MCPについて調べるとツールの機能説明で終わる場合が多いですが、この講義は本当に実戦を扱っている感じがして、とても良かったです。 デザイン・トークンを活用し、Cursorが理解できるように渡すプロセス自体が面白かったですし、AIとやり取りしながらウェブで形になっていく自分の制作物を見て、「バイブコーディング」というのが何なのか、しっかり学ぶことができました。 特に、Notionで丁寧にまとめてくださった資料には本当に感動しました。動画を見ていて聞き逃した部分も、Notionに沿って進めれば解決できました。 次の講義もオープンしたら必ず受講します。先生、ありがとうございました!!

    • jyoung
      知識共有者

      blake choi様、感動の受講レビューをいただきありがとうございます。 本当の実戦を扱っている感じがしたとのこと、私の方こそ感謝の気持ちでいっぱいです。 これからもより一層奮起して、さらに良い講義でお会いできるよう努めます。 J.youngより

jyoungの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!