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/）のメインページをそのまま制作してみるコースです。（講義の完成ファイルを添付！）

初心者や開発入門者でも十分に付いていけるチュートリアル形式のClaude Code開発講座です。 企画者、デザイナー、非エンジニアを対象にオフラインで講義した経験をもとに、本には載っていない初級例題から中級開発例題まで、一連の流れで学ぶことができます。 Claude Codeを活用して、Hello Worldからラッキードロー、Claudeデザイン＋Excelデータ連動によるデバイス別最適化カフェメニュー管理ウェブページ、さらにはDBやクラウドサービスにデプロイ可能なSaaSウェブアプリケーションまで、段階的に開発するプロセスを体験します。 理論・実習・プロジェクトのステップごとにチュートリアルが提供され、6段階のレベル別実習を通じてAI協業開発手法を習得し、クラウドへのデプロイと運用まで、開発サイクル全体を経験します。

: "環境構築から7つの実務プロジェクトまで、データドメインを横断するディープラーニング・フルスタックの旅（全35講）" 単にサンプルコードをなぞるレベルを超え、実際の現場で扱う多様な形態のデータをディープラーニングで料理する方法を学びます。CPU/GPU開発環境の構築から始まり、ゴミの分別（画像）、株価予測（時系列）、心電図の異常検知（AE）、アニメーション化（GAN）、医療画像セグメンテーション（U-Net）、サウンド分類（オーディオ）まで！ディープラーニングの核心アルゴリズムを、実践プロジェクトを通じて体系的に攻略します。

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

TARSプロンプトエンジニアリングの原則に基づき、AIエージェントと協業して実践的なウェブサービスを開発するプロセスです。UI/UXコンポーネントの制作からCRUD機能、API連携、データ視覚化まで、フロントエンドとバックエンドを網羅するフルスタック開発の経験を積み、最終的に自身のアイデアを実行可能なMVPとして完成させます。

コーディングの基礎から自作アプリのリリースまで一気に？！基礎と実践を一つに繋ぐ、アプリビルド・オールインワン。

コーディングなしのフルスタックシステム構築：韓国語のプロンプト（バイブコーディング）だけで、データ収集からAI・ML分析、ウェブダッシュボードまで、パイプライン全体を自ら完成させます。 100%自動化パイプラインの所有：毎朝テレグラムでS&P 500のスクリーニングおよび投資意見を受信する、独立した株式分析ツールを確保します。 実践データに基づいた投資フレームワークの習得：実際に運用されているソースコードを基に、機関レベルのデータ分析およびリスク管理能力を自分のものにします。

デザインを初めて始める方でも、 60分で自分だけのブランドロゴを完成させることができます。 この講座はCanvaとFigmaを活用し、 非専門家でも手順通りに進めれば成果物ができるロゴ制作入門講座です。 ✔ ブランドコンセプトをロゴで表現する方法 ✔ カラー・フォント選択の基準の理解 ✔ ロゴデザインの基本原則の適用 ✔ 多様なプラットフォームで活用可能な成果物の制作 センスではなく、 論理で作るロゴデザインを体験してください。

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

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

プロンプトだけで財務諸表を分析し可視化する魅力的なコーディングの世界へ招待します。 コード一行なしにAIと相談しながらサービスを作りデプロイまで進めます。

文書(SDD) → コード自動化。 プロンプトを打つのではなく、システムに仕事をさせましょう。 Skills、Sub-agents、Commandsで自分だけのAI開発エージェントを構築し、5つの実践プロジェクトで収益化サービスまで完成させます。

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

この講義は、AIを使ってはいるものの、どこまで信じて使うべきか迷っている方のために、 AIを仕事や作業プロセスに過度になりすぎず、かつ実際に役立つ形で活用する方法を扱います。 専門的な開発知識や複雑なツールを前提とせず、誰もが自分のワークフローの中でAIをどのように活用すればよいかに焦点を当てます。 プロンプトを複雑に作成する方法よりも、**「どんな瞬間にAIを使うべきで、いつは使わない方がいいのか」**、 AIの結果をそのまま信じずに**「確認し、整える思考法」**を中心に解説します。 この講義を通じて、AIをすべてを代行してくれる自動化ツールではなく、 共に考えを整理し、作業を補助してくれる**「実用的なパートナー」**として活用するための基準を身につけることができます。

コーディングの基礎から自社Webサービスの運営まで一度に？！基礎と実践を一つに繋ぐ、Webビルド・オールインワン。

まだ新しいデザインツール Figma を検討中ですか? 簡単に、そして素早く、一つずつ 따라하다 보면 어느새 나도 피그마 전문가!

コーダー（パブリッシャー）への就職や実務において、最も競争力となるモバイルウェブ制作能力を向上させることができます。コーダーとしてモバイルウェブを制作するための、ほぼすべての制作手法とノウハウを固めることができます。特に、最近のコーダーや開発者に求められるデザイン能力をフィグマ（Figma）の学習で大幅にカバーできるよう、FigmaによるモバイルウェブUIデザイン作業のプロセスも詳細に説明しました。モバイルウェブパブリッシング授業の最大の強みであるHTMLワイヤーフレームの詳細な作成法を、すべてのページ一つひとつ丁寧に解説します。講義を通じて、HTMLワイヤーフレームの制作能力が大きく向上するはずです。モバイルウェブパブリッシングは、CSS変数（Var）を活用してモバイルやタブレットに最適化したレイアウトを完璧に合わせる学習を通じ、実務とほぼ遜色のないレベルの作業能力を身につけることができます。Flexレイアウトを中心に、中上級のCSS実践能力を十分に備えることができます。

この講義では、生成型人工知能モデルの中でもDiffusionモデルに関連する実習を行います。代表的なDiffusionモデル応用論文であるprompt-to-prompt論文を一緒に読んで実装することで、最新の人工知能論文を理解する能力を養うことができることを期待しています。

きれいな画面100個より、動くプロトタイプ1個！Figmaの条件付きロジックで本物のように動作するプロトタイプを作成し、AI時代でも揺るがないデザイン思考力を養いましょう。

AIがコードを代わりに書いてくれる時代、あなたはコーダー(Coder)として残るのか、'設計者(Architect)'として飛躍するのか？ この講義は基礎実装は可能だが、次のステップが見えなかったり'水増し経歴'の沼にはまることを不安に思うジュニア開発者のために設計されました。 私たちは単純なクリーンアーキテクチャ理論学習を超えて、ロバート・C・マーティン(Uncle Bob)の高水準設計原則をAI時代の武器にすることを目標とします。

Claude Code AX開発のための必須CS知識を扱います。 インタラクティブ教材を通じて簡単に理解できる講義です。