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

Figma UI3バージョンで、基礎から実務まで体系的かつ、簡単でスピーディーに完走（修了）できるように構成されています。

html/css初心者入門者を対象に基礎をしっかり固め、もちろん レスポンシブレイアウト作成の実践を学ぶことができます。

"2026年度 UIUXデザイナー | コーディングするデザイナー エージェンシー合格ポートフォリオ公開" 面接官の目を引くUIUXウェブポートフォリオを制作する実践講義です。 単なるポートフォリオ制作ではなく、インタラクションを活用した差別化された成果物で、 UIUXデザイナーとしての就職競争力を高められるよう設計されたカリキュラムです。

本当！ウェブサイト制作 Step By Step!クルアラモード（https://crewalamode.com/）メインページをそのまま製作してみる過程です。サイトに盛り込まれているカラフルなインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします。

'ホテルヒュンダイラハン_木浦店'サイト制作で、実際のウェブサイトのメインページをそのまま製作・実装してみる講義です。 html/css基礎知識のある方を対象にhtmlMarkupとLayout制作の理解はもちろん、Fixheader、Image Slider、MenuOpen Bar、Scroll Animation制作までのウェブで必須のskillを学べるウェブページ制作実戦！講義です。

助けるサイト制作 Application Courseで、実際のウェブサイトのメインページをそのまま制作・実装してみる講義です。無料講義でオープンした助ける制作本番！講義です。 （本講義は助ける-Basic Courseを聞いて受講しなければ学習効果が大きいと見ることができます。）

[ウェブサイト制作 Step By Step] Basic-courseで、助ける(http://dopda.co.kr/) メインページをそのまま製作してみる過程です。本Basic CourseはCSSレイアウトの制作とアニメーションについて取り上げ、続いてApplication-courseではイメージスライド効果、レスポンシブ制作、スクロールアニメーション、Fix Headerなどのインタラクティブ要素を追加して開設される予定です。

[ウェブサイト制作 Step By Step] 初級講座で、韓国消費者時代ウェブ陣（現在はリニューアル済み）メインページをそのまま製作してみる過程です。

[ウェブサイト制作 Step By Step] 3段階講義で、ミュージャイン（https://musign.net）メインページをそのまま製作してみる過程です。サイトに盛り込まれている派手なインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。

HTML5とCSS3を活用してウェブサイト（ハンファケミカル/ソリューション）を制作する実習過程で、PCモードのレイアウトとレスポンシブページの制作を完璧に理解し、活用できる「実戦！ウェブページ制作！Step by Step!」のBasic Course講座です。（講義の完成ファイルを添付！）

実践！ウェブサイト制作！Step By StepのApplication Courseで、HTML/CSS/jQueryとプラグインを使用して、Y Studio（http://www.ystudio.co.kr/）のメインページをそのまま制作してみるコースです。（講義の完成ファイルを添付！）

「データ分析のその先へ、予測モデルの設計から最適化まで（全29講）」 データ分析は終えたものの、いざモデルを作ろうとすると途方に暮れていませんか？単なるライブラリの呼び出し方を超えて、各アルゴリズムの作動原理と最適なモデル検証戦略を完全に自分のものにできるようサポートします。

この講義は、RAG（Retrieval-Augmented Generation）を 👉 概念の説明だけで終わらせず 👉 実際に動作する構造を自ら作り 👉 拡張・高度化まで経験する実習中心の講義です。 単純なRAGの例題から出発し、 Advanced RAG → Modular RAG → エージェントベースのRAGまで 現場ですぐに活用できるレベルへと段階的に学習します。

コンピューターサイエンスを基盤とする経験豊富な開発者が、最新のAI技術スタックへと転換するための実務中心のカリキュラムです。LLMベースのアプリケーション設計から実装まで、既存のソフトウェア工学の知識を活用してAIソリューションの導入戦略を樹立します。伝統的な開発経験と現代のAI技術を融合させ、キャリアを再構築します。

デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

サーバー設定からブログ・YouTube自動化まで、n8nで完全なAIワークフローを構築します。 Contabo VPSベースのサーバーインストール、Ubuntu・Docker・Portainer環境の設定、ドメイン接続とHTTPSセキュリティ設定まで、安定した運用環境を実習します。 FastAPIとDockerを活用した検索API・ファイルサーバー開発、Airtableとn8nの連動、ブログAIエージェントの構築、画像・動画の自動化まで扱います。実際のサービス運営にすぐ適用可能な収益型自動化戦略を完成させることができます。

IntelliJを使用するJavaバックエンド開発者が、Claude Codeを利用して生産性を最大化する方法をお教えします。特に、Windows環境を使用している方が直面するバイブコーディング（Vibe Coding）環境の問題を完全に解決できるようサポートいたします。

単なるチャットボットを超えたエージェントの実装に行き詰まっていませんか？私が直接経験した試行錯誤と公式ドキュメントに基づいたノウハウで、実務に即座に適用可能な中級エージェント構築法をお教えします。

非専門家からスタートし、IBMやOracleなどのグローバルテック企業で大規模なUXプロジェクトをリードするまで、あらゆる試行錯誤を経て学んだUXの知識を共有します。 UXデザインの基礎を固め、就職準備のための次のステップへと飛躍するための入門講座です。

非専門家のためのn8n自動化の核心原理とワークフロー設計の基礎 n8nで構築する5段階の自動化：トピック入力から動画完成までのAPI連携実習 AI API（ChatGPT、ElevenLabs、Creatomate）を活用してn8nで動画を自動制作する方法

この講義では、Threadsのフィード、Amazonのショッピングカート、NetflixのストリーミングUI、Google Docsの共同編集、Micro Frontend、Agentic UI、Observabilityといった実際のサービス事例を通じて、フロントエンドのシステムデザインの思考プロセスを訓練します。

コーディングを知らなくても、自分のアイデアでサービスを作れるでしょうか？ AIと一緒なら可能です！ この講義では、Gemini、Lovable、Antigravity、Cursor、Claude Codeなど、 現場で使用されている「バイブコーディング（Vibe Coding）」ツールを活用し、 アイデアを実際のウェブサービスにする全過程を体験します。 単にツールの使い方を学ぶだけでなく、 自らサービスを企画し、デプロイし、決済までつなげる、 AI時代の新しいサービス開発手法を身につけます。 Point 1. 5つの核心バイブコーディングツールを完全攻略 - Gemini、Lovable、Antigravity、Cursor、Claude Codeの核心機能と活用法の習得 - AIと協業するバイブコーディング開発スタイルの理解 Point 2. コーディングなしで実際のサービスを作ってみる - 本の推薦サービスを自ら企画し、ウェブサービスとして実装する過程を実習 - アイデア → 開発 → デプロイまで、サービス制作の全体フローを理解 Point 3. サービスのリリースと運営までつながる実践スキル - ドメイン購入、サーバー設定、デプロイ過程の理解 - 決済モジュールの連動やSEO設定など、サービス運営の核心技術を学習

HTML、CSS、JavaScript(jQuery)の基礎はありますか？でも、ウェブサイト全体をどう作ればいいのかよくわからないですか？それなら、デザインを参考にしてショッピングモールのメインページの実装に挑戦してみてください。完成されたデザインを参考に、企画意図やデザインの詳細な事項を把握し、ウェブサイトを実装するノウハウをお教えします。

リサーチの自動化からバックエンドのデータ連携、さらには実際のライブ動的ウェブをデプロイする過程までを網羅し、個人が製品のライフサイクル全体を主体的にリードできるフルスタックの視点を養うことを目的としています。AI時代の競争力を強化したい方々に、アイデアを具現化する強力なエンジンとして活用する力を提供します。

コーディングを知らなくても、フルスタック開発を知らなくても、Rails開発を知らなくても、Inflearnのような複雑なプラットフォームを作ることができます。ウィンドサーフとカーサー、クロード コードを使います。

「こんなに忙しい世の中、AIを活用してポートフォリオを素早く作れるって？」 問題定義からリサーチの整理、アイディエーション、プロトタイピングまで！AIを実践パートナーとして活用し、完成度の高いUX/UIポートフォリオをスピーディーに作りましょう。 最新のAIツールはもちろん、実務で使われ続けている検証済みのツールまで、プロジェクトに合わせて戦略的に活用できます。

弊社の「実際の現場でのやり方」であり、入社する企画者や開発者のための「オンボーディング用動画」を公開します。デザイナーなしでサービス画面をデザインした後、Figmaを知らなくても画面UX Flowを作成し、プロトタイプを作る方法を教えます。弊社がサービス企画時に素早くプロトタイプを作成し、迅速な意思決定と必要な機能の確定を行い、フロントエンド開発に活用することで、生産性を最大化して業務を進めている方法です。反応が良ければ、他の「現場流」の講義もアップロードします。

HTML、CSS、JavaScriptのみでOpenAI APIを連携したAIウェブサービスを直接実装します。 Netlify Functionsを活用してAPIキーを安全に保護し、静的フロントエンド＋サーバーレスバックエンドの構成で実際のデプロイまで進めます。 単なるデモではなく、収益化可能な構造のMVPを最初から最後までIDEライブで完成させます。

SwiftUIの中級まで終えたあなたへ、次はAIをアプリに組み込む番です。Apple IntelligenceとFoundationModelsフレームワークを使って、インターネットなしでデバイス内で動作するオンデバイスAIアプリを完成させます。

迅速な実行と検証の時代、Vibeコーディングで誰よりも速く実行しましょう！広告、決済など収益化まで漏らさずに自分の手で実現してみましょう。

実装したいアプリ/ウェブアイデアはあるが、アプリサービス企画経験がなく、どのように始めなければならないのか幕を開けたスタートアップ代表、短期間に企画を体系的に学びたい実務者、キャリアの企画業務プロセスとノウハウを学びたいジュニア企画者とも専門家ができるようにフィグマを活用した新しい企画方式とPM 17年次の業務スキルを基礎からじっくりお知らせします。