inflearn logo
知識共有
inflearn logo
Challenge
終了

6週間完成!開発実務のための高濃縮バイブコーディング(Cursor AI、Figma)

実務に適用可能なVibeCodingのノウハウをお伝えします。 思い通りに修正できなかったUIを、100%企画通りに開発できます! 就職のための「VibeCoding」ポートフォリオを作ることができます。 実務に導入可能な安定的で最も安全で現実的なVibeCoding法を体験できます。

573명이 수강한

강의로 진행되는 챌린지!

React
Next.js
cursor
prompt engineering
Vibe Coding

80개 수업 학습

6회 미션 수행

라이브 5 회

성취의 증표, 수료증을 발급해요.

질문하고 즉시 답을 얻어요.

무제한 복습, 내 것으로 만들어요.

지식공유자와 멘토링 혜택!

추가 자료를 통해 학습을 이어나가요.

codecamp님과 함께해요!

15,841

受講生

496

受講レビュー

232

回答

4.8

講座評価

15

講座

"Try anything, Try everything!"

コードキャンプは有能なエンジニアを養成し、開発の未来を変えるという目標を掲げています。社会的、経済的、教育的な背景に関わらず、誰にでもキャリア転換の機会を提供するために、インフラン(Inflearn)に登場しました。コードキャンプと一緒にキャリアアップに挑戦しましょう!

もっと見る

共同知識共有者

*ご声援にお応えして、2期の募集を開始しました*

講義の後、皆さんは...


1. どんなFigmaデザインも100%実装

バイブコーディングでFigmaデザインを100%実装できず、もどかしい思いをしていませんか?

私たちのチーム、または自分が作りたい正確な
Figmaデザインをバイブコーディングで
100%正確に、素早く生成する秘訣を公開します。

不完全な初期Figma MCPの結果物 → 正確に生成する(ヤノルジャホームページの例)

2. 企画意図通りに機能を100%実装

5分で作れる単純なバイブコーディングサービスではなく、
本格的なサービスを作りたいと思っていませんか?

このコース以降は、実際の実務でも完全自動化バイブコーディングを適用して作業できます!

もっともらしい機能ではなく、本当に実務で必要な機能を作ります!

実務のためのバイブコーディングは
違わなければなりません。


開発者・非開発者を問わず、状況に応じて
実務に適用可能なバイブコーディングを学ぶことができます。

  • バイブコーディングに特化した開発原理・概念を含めて、非開発者でも十分に学習可能です。

  • 開発者がバイブコーディングで自己主導的に成長できるようにロードマップを提案します。

最も厳しかったが、最も自信のあるカリキュラム

バイブコーディングの特性上、毎回異なる結果物も、誰もが同じ成果を出せるように検証し完成しました。

チャレンジに参加すると、ライブコーディングとミッションフィードバックまで追加で提供され、学習効果を最大化できます!

実務型カリキュラムとチャレンジを一緒に確認してみてください。

1週目

  • バイブコーディング with Cursor AI: 失敗しないバイブコーディングの秘訣

  • 共通要素の作成:繰り返し使用されるものを先に作る


  • UI生成 - もどかしさゼロ!自分が望むUI成果物を100%引き出す方法

  • Vercel CI/CD デプロイ(自分の成果物をデプロイして提出する)

  • [ミッション]:授業に沿ってUIを生成し、Figmaデザイン通りに100%実装して提出!

  • [ライブ] :実務バイブコーディングとは?

2週目

  • Rule 高度化:金の卵のようなAI、言うことをよく聞かせる

  • 機能実装 - データ非連動:データがなければ、簡単です!

  • [ミッション]: 授業に従ってデータ非連動100%実装後提出

  • [ライブ] :最新情報アップデート (受講生のみ公開)


3週目

  • 機能実装 - データ連携:データがあっても、簡単です!

  • API連携:え?全部自動でやってくれるって?

  • [ミッション]: 授業に沿ってデータ連動及びAPI 100%実装後に提出

  • [ライブ] : 最新情報アップデート (受講生のみ公開)


4週目

  • ログイン作成:UIも君が勝手に作ってくれるの?

  • 権限分岐の実装:君にできないことはないのか?

  • [ミッション]:授業に応じてログインおよび権限分岐を100%実装後に提出

  • [ライブ] : 最新情報アップデート (受講生のみ公開)


5週目

  • 並列処理:10倍速ければ、Moneyも10倍稼げるよね?

  • [ミッション]:授業に従って並列処理で機能を100%実装後に提出

  • [ライブ]:最新情報アップデート(受講生のみ公開)


6週目

  • レスポンシブデザイン:あー面倒くさい、これも君が勝手にやってよ!

  • [ミッション]:授業に従ってレスポンシブでUI 100%実装後提出

  • [ライブ] : 最新情報アップデート(受講生のみ公開)


購読型ITマガジン(収益化転換)

  • 決済システム:VibeCodingで簡単かつ最も安定的な方法

  • 画像とサムネイル:Supabaseで画像システムを構築

  • ログインと権限分岐:購読者と非購読者を区別する

  • [ミッション]:授業に従ってレスポンシブにUI 100%実装後提出



🍌 受講前の注意事項

Cursor AI 有料プランが必要です。

最善の結果を出すために、Cursor AIの有料プランを使用しています。Claude 4.0基準でAI生成を行うため、トークン消費がある点をご了承ください。

Figmaは無料プランで利用できます。

バイブコーディングでプロジェクトを作成する際は、Figmaの有料サービスであるデブモードがなくても可能です!提供されたデザインを皆さんのページにコピペして使用してください。



🍌 前提知識と注意事項

  • 基礎的なHTML、CSS、Javascriptの知識があると良いです。

  • Reactの基礎知識があれば、バイブコーディングがもっと簡単になります!

  • プロンプトの書き方と開発の概念を一緒に学ぶことができます




🍌 こんな方におすすめです

  • バイブコーディングでフロントエンドを素早く作りたい開発者なら

  • Figmaで企画及びデザインが可能な方、特にUI/UXデザイナー&PMなら

  • 毎月入ってくる「第2の給料」を退勤後に簡単に作りたいなら

  • スタートアップで素早い成果物が必要なら

この講義がぴったりだと思います。



もしかして、ノウォンドゥが
初めてですか?

これまでいただいたノウォンドゥ様のキーワードと受講レビューをまとめました。
この講義を通じてノウォンドゥ様と一緒にアプリ開発者として成長してみてください🚀

#親切な講義
#几帳面
#パワフル
#耳にすっと入る
#本物の開発者
#メンターのメンター


#コーヒー豆
#いいねいいね

1월

4일

챌린지 시작일

2026년 1월 4일 午後 03:00

챌린지 종료일

2026년 2월 15일 午後 02:30

챌린지 커리큘럼

全体

91件 ∙ (40時間 57分)

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

授業資料
챌린지 전용 수업
ライブ

챌린지에서 배워요

  • <budget:token_budget>199980</budget:token_budget> バイブコーディングでFigmaデザインを100%同じようにUI生成する方法

  • # 실用的なプロンプトの提供 プロンプトエンジニアリングにおいて最も重要なのは、理論だけでなく実際に使える具体的な例を持つことです。このセクションでは、様々な状況で即座に活用できる実践的な

  • バイブコーディングで機能中心の全体プロジェクト完成

  • バイブコーディング ポートフォリオ

  • 会社で使える実務中心のVibeCoding

こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングで実サービスを構築したい誰でも

  • 会社でVibe Codingを使いたい誰もが

  • バイブコーディングのポートフォリオが必要な誰でも

  • 洗練された1人起業サービスをバイブコーディングで作りたい誰でも

  • 自分のサービスを作りたいUIUXデザイナー

  • 自分のサービスを作りたい企画者またはPM

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

  • React基礎

  • HTML、CSS基礎

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

이 강의의 지난 수강평

취소 및 환불 규정
챌린지는 지식공유자가 설정한 수업 최소 정원이 충족되지 않을 경우, 폐강 안내가 고지되며 결제 내역이 자동취소됩니다.

codecampの他の講座

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

¥23,556

29%

¥33,445