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

Figmaデザイン+AI活用コーディング+デプロイまで、フルスタックコース!! [Figma+バイブコーディング(HTML/CSS/Tailwind/React)+Git+vercelデプロイ] 自分のデザインをそのまま!! 1ピクセルの誤差もなく、バイブコーディングで完成! AI活用で実務の生産性を5倍に高めるフルスタック攻略ガイド! デザインもコーディングもすべてできるフルスタックデザイナーに、あなたもなれます。 ✅ 自分のデザインの意図まで、1ピクセルの誤差もなく実装 ✅ 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.8

5.0

blake choi

100% 受講後に作成

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

5.0

자니?

89% 受講後に作成

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

5.0

hylimhy65

100% 受講後に作成

フィグマとコーディングを少しずつ扱える私にとって、今回の講義はスキルアップに非常に大きな助けとなりました。 これまでレイアウトを作成しながら迷ったり難しかったりした部分を、とてもスッキリと解消してくれた感じです。 何より、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ポートフォリオ制作の全工程を経験

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


📢 講座紹介

実務と講師経験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連携

  • Prompt Engineering戦略

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

  • インタラクティブUI実装技法

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


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

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

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

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

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

  • Git & GitHub バージョン管理

  • Vercelによる実際のサービスデプロイメント

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


2️⃣ 本講座を通じて身につけられる主なスキル


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

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

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

  • AIフレンドリーな設計能力


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

  • AIが作成したコードを分析・修正する能力

  • プロンプト設計能力

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


🚀実践的なWeb制作スキル

  • 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で提供します。

事前知識および注意事項

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

  • デザインからデプロイまで一人でこなせるフルスタックのプロフェッショナルを目指す方

  • デザインとコーディングの両方のスキルを備えた開発者になり、フルスタックデザイナーになる

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

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

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

  • Figma完全初心者の方でも挑戦できる無料講座を提供します

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

こんにちは
jyoungです。

インフラン認証

キャリア認証

10,849

受講生

470

受講レビュー

247

回答

4.8

講座評価

15

講座

こんにちは。

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分)

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

受講レビュー

全体

26件

4.8

26件の受講レビュー

  • hylimhy658998님의 프로필 이미지
    hylimhy658998

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • hihihj07017384님의 프로필 이미지
    hihihj07017384

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • blake8807226801님의 프로필 이미지
    blake8807226801

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • wjsduwls01011742님의 프로필 이미지
    wjsduwls01011742

    受講レビュー 9

    ∙

    平均評価 5.0

    5

    89% 受講後に作成

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

    • jyoung
      知識共有者

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

  • quscogus4235님의 프로필 이미지
    quscogus4235

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    33% 受講後に作成

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

    • jyoung
      知識共有者

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

jyoungの他の講座

知識共有者の他の講座はこちら

似ている講座

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