inflearn logo
inflearn logo

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

デザインからコーディング、デプロイまでフルスタックコース!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + Vercel デプロイ] 自分のデザインをそのままVibe Codingで完成! AIを活用して作業生産性を5倍高めるフルスタック攻略本! デザインもコーディングもすべて可能なフルスタックデザイナー、あなたもなれます。 ✅ 自分のデザインの意図まで1ピクセルの誤差なく実装 ✅ AIが理解するデザインを設計 ✅ AIを正確にコントロールするプロンプト制作 ✅ AIが自由に作成したコードも分析して修正 する実務ワークフローを学びます。 本講義は、1次・2次に分けてオープンされる連載形式の講義です。 ✅ 1次オープン:2026年2月22日 - Figma - デスクトップモードのデザイン - Figma - Variables登録および命名規則 - Figma - タブレットモード&モバイルモードのデザイン - Vibe Codingのための準備 - 実践!Vibe Coding - Tailwind適用リファクタリング - Gitバージョン管理およびGitHubデプロイ ✅ 2次オープン:2026年3月9日 - React.jsリファクタリングおよびVercelデプロイ - JavaScriptを通じたインタラクティブウェブ実装

難易度 初級

受講期間 無制限

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

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

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

5.0

5.0

빛이나

20% 受講後に作成

本当に素晴らしい講義だと思います。まだ受講中ですが、できれば早く一度最後まで見て、必要な部分だけをまた見直す予定です。本当に助かっています。一つひとつバラバラに知っていた知識が、一つに繋がっていくような経験をしています。ジェイ・ヨン先生に直接お会いして学びたいくらいです。こんな内容を自分の部屋で学べるなんて…ありがとうございます。

5.0

hylimhy65

100% 受講後に作成

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

5.0

kjm228

100% 受講後に作成

Notionのまとめを通じて、すべての講義を丁寧に作成してくださった講師の方に感謝いたします。 講義を聞いていて少し理解できなかった部分は、Notionを読み返すことで理解することができました。 特に今回の機会にAuto Layoutを確実に理解することができ、AIを活用してどんなデザインもコーディングへと迅速かつ正確に変換するプロセスをしっかり学ぶことができました。 J.ヨン先生の講義はすべて受講してきましたが、特に今回の講義はデザイン+コーディングの実務に大きな助けになりそうです。 次の講義も楽しみに待っています!

受講後に得られること

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

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

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

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

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

  • AIの活用を通じて、1ピクセルの誤差もなくデザイン通りにコーディングで実装

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

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

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

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

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

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

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

📢 講義紹介

実務+講師歴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 AI & MCP サーバー連携

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

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

  • インタラクティブ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デプロイ


👤この講座を作った人

  • 実務+講師歴25年の講師


  • UIUXデザイナー、UX企画、ウェブパブリッシャー、コーディングするデザイナー、フロントエンドエンジニアとして500名以上を輩出!

  • オンライン・オフライン受講生10,000名以上!

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

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

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


⚠️受講前のご注意事項

学習資料

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

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

前提知識および注意事項

  • Figmaの基礎
    本講義では、Figmaの基本的なツールの使い方は扱いません。Figmaが初めての方は、私の無料講義であるFigma UI3 基礎 + 実務 固め 超スピード完講コースを先に学習してから受講されることを強くお勧めします。基礎を固めた上で本講義を受講していただくと、学習効果が最大化されます。

  • Html/CSS基礎 :
    本講義では、HTML/CSSの基礎文法を詳しく解説することはありません。コーディングが初めての方や基礎が不足している方は、私の無料講義である HTML/CSS基礎固め超スピード完講コースを先に視聴してください。基本概念を身につけてから受講されることで、AIを活用した実務コーディングをより簡単かつ迅速に吸収することができます。

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

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

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

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

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

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

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

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

こんにちは
jyoungです。

9,260

受講生

380

受講レビュー

229

回答

4.8

講座評価

15

講座

「デザイン・開発ポートフォリオメンターのJ.Youngです。」

私は過去20年間にわたり、ウェブデザインおよびアプリ開発会社を運営しながら、現場の厳しさを身をもって経験してきました。その経験を活かし、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家育成に邁進しています。

私の講義哲学は明確です。

  1. 基礎から実務まで 滞りのない繋がり

  2. 現場が求める核心技術の凝縮

  3. 就職成功を導く実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているものの時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じられる初心者の方まで。私が歩んできた20年の道のりを、皆さんの近道へと変えて差し上げます。堂々と実務家として立てるその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートいたします。

J.youngがお手伝いいたします!!
また!!学習中にご不明な点がございましたら、コメントを残していただければ
お役に立てるよう最善を尽くして回答させていただきます。

実務経歴

- 2017~現在) Web開発ディレクター
- 2015年~2017年 (株)エリエゼル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー -瑞草店)
- デザイン・開発ポートフォリオ専門講義およびグループ・個人指導


* 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ(デキるWebデザイナー)」オープンチャットに参加していただければ、
講義の質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:잘난웹디
- コード:jyoung

 

もっと見る

カリキュラム

全体

51件 ∙ (5時間 51分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • kjm2285477님의 프로필 이미지
    kjm2285477

    受講レビュー 1

    平均評価 5.0

    修正済み

    5

    100% 受講後に作成

    Notionのまとめを通じて、すべての講義を丁寧に作成してくださった講師の方に感謝いたします。 講義を聞いていて少し理解できなかった部分は、Notionを読み返すことで理解することができました。 特に今回の機会にAuto Layoutを確実に理解することができ、AIを活用してどんなデザインもコーディングへと迅速かつ正確に変換するプロセスをしっかり学ぶことができました。 J.ヨン先生の講義はすべて受講してきましたが、特に今回の講義はデザイン+コーディングの実務に大きな助けになりそうです。 次の講義も楽しみに待っています!

    • jyoung
      知識共有者

      kjm228様 もう完走されたのですね^^ ありがとうございます。 講義が学習のお役に立てたとのこと、私の方こそ感謝の気持ちでいっぱいです^^ 本講義の内容を応用して、ハイクオリティなポートフォリオを制作されることを応援しております。 ありがとうございました^^ J.youngより

  • hylimhy658998님의 프로필 이미지
    hylimhy658998

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • inmytoto님의 프로필 이미지
    inmytoto

    受講レビュー 2

    平均評価 5.0

    5

    20% 受講後に作成

    本当に素晴らしい講義だと思います。まだ受講中ですが、できれば早く一度最後まで見て、必要な部分だけをまた見直す予定です。本当に助かっています。一つひとつバラバラに知っていた知識が、一つに繋がっていくような経験をしています。ジェイ・ヨン先生に直接お会いして学びたいくらいです。こんな内容を自分の部屋で学べるなんて…ありがとうございます。

    • jyoung
      知識共有者

      ビチナ様、本当にありがとうございます。本当にお役に立てているとのことで、私も励みになります。ぜひ最後まで受講されて、ポートフォリオの完成と実務の生産性5倍向上を実現できるよう応援しております。 ありがとうございました。 J.youngより

jyoungの他の講座

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

似ている講座

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

期間限定セール

¥50,820

30%

¥9,013