バイブコーディング With Claude Codeでウェブサービス作り

Name: バイブコーディング With Claude Codeでウェブサービス作り
Price: 12100 KRW
Rating: 4.9 (8 reviews)

現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

（4.9）受講レビュー 8件

受講生 86名

ref63184917

AI 코딩

AI 활용법

실습 중심

claude

바이브코딩

HTML/CSS

JavaScript

Next.js

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

受講後に得られること

Claude Code実戦技術を学ぶことができます。
Claude Codeを通じてWebサービスを作ることができます。

現職スタートアップCTOが教えるVibe Coding入門

開発者だけがコーディングする時代ではありません。

ランディングページの簡単なプロジェクトまで外注に任せていた時代は、時間もかかりお金もそれなりにかかりました。しかし、最近は違います。コーディングをしたことがない方でも簡単に作れる時代が来ました。

本講義では、Claude Codeを活用したTODOアプリからプロ級ランディングページまで、実際にデプロイ可能なサービスを作成します。PRD作成法、Playwright MCPを活用した自動テストなど、実務ですぐに使える主題を扱います。

さらにReplit、V0、Claude Codeの違いとそれぞれの長所・短所もご紹介し、ツール選択時に考慮すべきポイントを明確にお伝えします。

私は現在スタートアップのCTOであり、バイブコーディングを通じて様々な外注および機能を開発しています。実務で得たバイブコーディングの知識を共有して、開発生産性を向上させていただきます。

実務適用事例：

外注プロジェクト2週間→4日短縮
開発人員3名 → 1名に縮小

制作過程で特に気を遣った点：

すべての例題は実際のサービスレベルで実装
デプロイURLまで持っていく完成型講座

この講義の特徴

📌 現職CTOの実務ノウハウ: 実際のスタートアップで検証された方法論のみをお伝えします
📌 即座にデプロイ可能な成果物: 講義が終わると2つのポートフォリオを所有することになります
📌 バイブコーディング哲学: 単純なツールの使い方ではなく、新しい開発パラダイムを体得します
📌 非開発者の方でも簡単に: コーディングを全くやったことがない方でも簡単に作ることができます。

他の講義との違い：

❌ 10時間の退屈な理論 → ⭕ 核心だけを込めた実戦圧縮
❌ コピー&ペーストの真似 → ⭕ 理解して応用する実習
❌ "Hello World"で終了 → ⭕ 実際のサービスデプロイまで

こんな方に
おすすめです

学習対象は
誰でしょう？

個人事業主の方
ランディングページを素早く開発したい方
バイブコーディングを初めて接する方
PM、企画者、デザイナーの方
Replit、V0 Saasサービスの代替案＆限界を感じた方

こんにちは
です。

受講生

受講レビュー

回答

4.9

講座評価

講座

안녕하세요! 현재 6년차 백엔드 개발자이자 스타트업 8around의 공동창업자이자 CTO로 활동하고 있습니다.

현재 8around 공동창업자 & CTO
이전 Peertec 백엔드 개발자
이전 넛지헬스케어 백엔드 개발자
이전 디노플러스 SI 연구원

"시대 흐름에 따라 코딩의 패러다임은 계속 변화합니다.
스타트업은 빠른 생산성이 생명입니다."

실무에서 배운 살아있는 지식들을 아낌없이 공유하여
함께 성장할 수 있으면 좋겠습니다.

특히 스타트업 CTO로서 경험한 빠른 개발과 효율적인 문제 해결,
그리고 AI 도구를 활용한 10배 생산성의 노하우를 전달해드리겠습니다.

쓰레드 주소: https://www.threads.com/@_ju_tiger_lee_?xmt=AQGzlyBCdXBzZhOxuDhnkJBbfE_do6IUVKX1C-ZEkvA1xU0

カリキュラム

全体

15件 ∙ (4時間 2分)

セクション 1．バイブコーディングを始める

3件 ∙ (19分)

セクション 2．自分だけのTODOサイト作り

4件 ∙ (57分)

4. 初期設定
09:11
5. HTML&CSS&JSとは？
15:19
6. TODOサイト作成
18:45
7. PlayWright MCPで自動テストする
14:03

セクション 3．自分だけのランディングページ作り

8件 ∙ (2時間 46分)

8. Replitでランディングページ作成
17:48
9. PRD作成
15:02
10. Task Masterでタスクを細分化する
28:15
11. CLAUDE.mdファイルとは？
10:24
12. ランディングページ開発
40:11
13. SuperClaudeを活用する
39:55
14. Plan モードでSuperClaudeを極限まで活用する
06:03
15. Vercel デプロイ
08:38

講座掲載日:

最終更新日:

受講レビュー

全体

8件

4.9

8件の受講レビュー

suhye0n
受講レビュー 2
∙
平均評価 5.0
5
53% 受講後に作成
様々なバイブコーディングツールの中からClaude Codeを選択する過程を直接見せていただけて良かったです。単純に使い方だけを説明してくださるのではなく、なぜClaude Codeを使うのか理由を知ることができて良かったし、MCPやClaude Codeの実際の活用方法も詳しく扱ってくださったので、すぐに真似して活用しやすいです。おすすめします！
- ref63184917
  知識共有者
  気持ちの良い受講レビューを書いていただき、ありがとうございます。やはりClaude Codeを初めて選ぶ時は多くの悩みがありましたが、書いていただいたレビューを見ると無駄な心配だったようです。今後もより良い講義を作れるよう努力いたします。
uxinsight
受講レビュー 2
∙
平均評価 5.0
5
33% 受講後に作成
- ref63184917
  知識共有者
  高い評価をいただき、ありがとうございます〜！お役に立てたようで嬉しいです。
yongwchoi261087
受講レビュー 23
∙
平均評価 4.8
5
33% 受講後に作成
Claudeについて概念を掴むのにとても役立ちました。ありがとうございます。
- ref63184917
  知識共有者
  お役に立てて良かったです〜！より良い講義でお会いできるよう頑張ります。
vmfmgl1221
受講レビュー 13
∙
平均評価 4.6
4
100% 受講後に作成
- ref63184917
  知識共有者
  高評価のレビューをありがとうございます。
jgkoodmb5445
受講レビュー 13
∙
平均評価 5.0
5
33% 受講後に作成
- ref63184917
  知識共有者
  星5つありがとうございます！

￥1,588

似ている講座

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

Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

ludgi

Whisperをローカルで実行し、FastAPIとNext.jsを活用してAI音声認識アプリを迅速に開発する実践プロジェクトの講義です。リアルタイム音声認識まで実装し、短時間で簡単なポートフォリオとして活用できる成果物を完成させることができます。

초급

Next.js, FastAPI, whisper

Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

ludgi

Next + React Query で SNS サービスを作成する

zerocho

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

Next + React Query で SNS サービスを作成する

zerocho

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

초급

React, Blog, Next.js

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

3Dリーフレットの作成 - インタラクティブWebプロジェクト

studiomeal

インタラクティブWebプロジェクトは、CSSとJavaScriptを使って創造的なインタラクションのある例を一つずつ作成するシリーズです。

중급이상

HTML/CSS, JavaScript, Interactive Web

3Dリーフレットの作成 - インタラクティブWebプロジェクト

studiomeal

React start with Next.js

zk202308a5410

Reactが初めてなら？ Reactの基本概念をしっかりと固めながらも素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみてください。実務での開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todo例題はとても重要なので2回開発する必要があります。一度はコンポーネント中心で、次にはブラウザの経路に合わせて処理されるルーティング中心で！ログインはZustandを利用してください！本当に少ない量のコードでグローバル状態を処理できます。

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

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

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

중급이상

React, Next.js, cursor

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

codecamp

非開発者が4週間で収益化サービスを作る：AIバイブコーディングウェブ + アプリ ALL IN ONE

dingcodingco

コーディング知らなくてもOK！あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作り、すぐにサービスまで連結します。

입문

Flutter, Next.js, cursor

非開発者が4週間で収益化サービスを作る：AIバイブコーディングウェブ + アプリ ALL IN ONE

dingcodingco

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

초급

Interactive Web, JavaScript, HTML/CSS

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

JavaScriptビギナー：頑丈な基本を作る

tonextday

4つの講座で構成されたJavaScriptの講座の1番目の講座です。

초급

JavaScript, oop

JavaScriptビギナー：頑丈な基本を作る

tonextday

JetBrains JavaScript Day 2025

JetBrains

JetBrains JavaScript Day 2025の全セッションが一堂に！世界中のJavaScript専門家が集まり、ノウハウ、アイデア、そして実務経験から得た洞察を共有します。急速に変化するJavaScript生態系の中で先を行くことができる最新情報に出会ってみてください。

초급

JavaScript

JetBrains JavaScript Day 2025

JetBrains

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

초급

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

JavaScript + jQuery基礎から実務まで：基礎Part.2

usefulit

理論と実習を通じてJavaScriptを習得できる講義です。コーディングに初めて接する方も簡単に理解できるように、次々と説明しています。 Part 2はJavaScriptの関数とイベント、関数の種類、コアライブラリを扱っています。

입문

JavaScript, jQuery

JavaScript + jQuery基礎から実務まで：基礎Part.2

usefulit

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

usefulit

理論と実践を通じて、JavaScript を習得できる講義です。コーディングを初めて触れる方でも、段階的に説明するので簡単に理解できます。Part 1 では、JavaScript の概要、変数、データ型、演算子、制御文、jQuery の基礎を扱います。

입문

JavaScript, jQuery

JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

usefulit

知っていれば定時退社できるSpring Bootバックエンドバイブコーディング体験

nullnull8537

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

입문

Java, Spring Boot, IntelliJ IDEA

知っていれば定時退社できるSpring Bootバックエンドバイブコーディング体験

nullnull8537

Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

gymcoding

探索 → 計画 → 実装 → コミット。検証されたAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで23個のミッションで習得し、3個の実戦プロジェクトを完成します。

입문

React, Next.js, cursor

Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

gymcoding

Node.js サーバーエンジン作成 – Express.js クローンで学ぶフレームワーク設計

nhcodingstudio

Express.jsを使用するレベルを超えて、実際にその内部エンジンをゼロから最後まで直接実装し、真のサーバーの動作原理を体で習得する講義です。ルーター、ミドルウェア、リクエスト-レスポンスオブジェクト、静的ファイル処理、テンプレートレンダリングなどExpressのすべての構成要素をゼロから直接作成し、サーバー開発者として成長する経験を提供します。

초급

JavaScript, Node.js, Express

Node.js サーバーエンジン作成 – Express.js クローンで学ぶフレームワーク設計

nhcodingstudio

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

この講義を通じて、受講生はHTML、CSS、JSでインスタグラムに似たWebサービスを作成することができます。（フロントのみ実装しました！バックエンドサーバー構築は今後講義撮影予定です。）

초급

HTML/CSS, JavaScript, Clone Coding

モバイル、タブレット、pcレスポンシブインスタグラムクローンコーディング

jeong4726

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

CSS Gridは、複雑なレイアウトも簡単かつ直感的に実装できる強力なツールです。今回の講義では、CSS Gridの核心概念から実践活用法まで段階別に分かりやすく学べるように構成しました。もう複雑なfloatやflexboxに縛られず、効率的なレイアウト設計の定石を学びましょう！今すぐ始めましょう！

초급

HTML/CSS, jQuery, Figma

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

Webプログラミング(HTML5+CSS+javaScript)

software25766

初心者のためのWebプログラミング講義。 HTML、CSS、JavaScriptの基本的な文法と活用法を段階的に学習できるように構成されています。 Webページの構造とデザイン、インタラクション機能の実装など、Web開発の重要な要素をカバーしています。

입문

HTML/CSS, JavaScript, Responsive Web

Webプログラミング(HTML5+CSS+javaScript)

software25766

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

バイブコーディング With Claude Codeでウェブサービス作り

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

受講後に得られること

現職スタートアップCTOが教えるVibe Coding入門

この講義の特徴

こんな方におすすめです

受講後には

バイブコーディングを通じて作った成果物。

この講義を作った人

受講前の参考事項

実習環境

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

似ている講座

バイブコーディング With Claude Codeでウェブサービス作り

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

受講後に得られること

現職スタートアップCTOが教えるVibe Coding入門

この講義の特徴

こんな方におすすめです

受講後には

バイブコーディングを通じて作った成果物。

この講義を作った人

受講前の参考事項

実習環境

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

似ている講座

こんな方に
おすすめです

こんにちは
です。