こんにちは 😊
講師の J.Young です。

ついに新しい講義でご挨拶することになりました。

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

今回の講義は、単なる「コーディング講義」ではありません。

AIが理解するデザイン設計から、
AIを活用したバイブコーディング、
そして実際のデプロイまでつながるフルスタック完成プロセスです。

🎯 この講義で学ぶ核心

✔Figma AutoLayoutを活用した体系的な設計
✔レスポンシブ構造の設計手法
✔Variable登録 → トークン化 → AIが理解するデザイン構造の構築
✔Figma MCPサーバー連携によるAIバイブコーディング
✔自分のデザインを1ピクセルの狂いもなく実装する方法
✔デプロイまで繋がる実践プロセス

単に「AIがコードを代わりに書いてくれる」ということではありません。

AIのミスまで自ら見つけ出し、構造を理解し、
最適化されたレスポンシブウェブへとリファクタリングする能力まで、共に訓練します。

👩‍💻 このような方におすすめです

• 🎨 自分のデザインをそのままVibe Codingで具現化したい方

• 🧠 デザインから開発・デプロイまで可能なフルスタックデザイナーになりたい方

• 🔥 Figmaの高度な機能までしっかり学びたい方

• 💻 HTML / CSS / JavaScript / Tailwind / Reactまで知りたいフロントエンド入門者

• ✨ インタラクティブで完成度の高いレスポンシブWebポートフォリオを作りたい方

• ⚡ AIを活用して業務生産性を5倍以上向上させたい方

📘 学習方法

すべての過程はNotionで体系的に整理されています。
設計 → 実装 → 修正 → デプロイまで
皆さんが自ら復習し、繰り返し学習できるように構成しました。

AI時代、
これからは「コーディングが得意な人」ではなく
AIと共に最も速く結果を出せる人が競争力となります。

4時間以内に、
皆さんのポートフォリオを一段階引き上げてみてください。

講義でお会いしましょう。

ありがとうございます。
講師 J.Youngより

こんにちは？インストラクターJ.youngです。

本当！ ScrollTriggerを活用したポートフォリオ制作講義を
過去2次アップデート映像をレスポンシブウェブとして追加制作し、続いて3次から7次までアップデートを
以下のように進めました。
ご確認の上、ポートフォリオの制作や実務に多くのお役に立てれば幸いです。
より幸せで豊かなチュソクのどれかを送ってください〜
ありがとうございます。

J.youngドリーム

アップデート映像結果=>
- 2次：アップデート映像反応型ゲルラリー追加制作

-3次：Y軸にスクロールするゲラリー製作

-4次：マウスポインタに従うイメージ制作

-5次：固定セクションにY軸にサブセクションスクロールするインタラクティブ制作

- 6次：X軸で左右に揺れスクロールするゲルラリー製作

7次：スクロール時に挨拶するキャラクター/マウスによってカラーが塗りつぶされるテキスト/波テキスト作成