Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

AI Coding

バイブコーディングで作ってみる自分だけのランディングページ(with Cursor)

開発はよく分からないけれどVIBE CODING(vibe coding)を始めてみたい方々、自分のお店(飲食店、カフェなど)や自分のサービス(弁護士・税理士・病院など)を宣伝できるランディングページを自分で直接作ってみたい方々のための講座です。VIBE CODINGのスタート地点をきちんとご案内いたします。

  • dongkid111
바이브코딩
vibecoding
커서
cursor
git
Git
vercel
Cursor AI
Vibe Coding

こんなことが学べます

  • Cursorでバイブコーディングする方法

  • バイブコーディングを上達させるコツ

  • バイブコーディングに必須のGit&GitHub基礎

  • ランディングページ公開のために知っておくべき最低限の知識

  • Vercel, Supabaseの基本的な使い方

  • 簡単なMCP経験

バイブコーディングの時代、遅くなる前に参加してみてください! 🔥

深い開発知識がなくても、ご希望のサービスを作れる時代になりました。

バイブコーディングで独自のランディングページを作成しながら

  • Cursorの使い方

  • Git&GitHubの基本

  • Vercel/Supabaseの使用

  • MCP(Model Context Protocol)の使用

を自然に身につけてみてください。

あなたが必ず知っておくべき事実は3つあります🔍

💡バイブコーディングは魔法の棒ではありません。
バイブコーディングをしてみると、エラーなどにより詰まる場合が必ず生じます。

これをAIと対話しながら解決することはできますが、開発を全く知らないと問題解決の速度が非常に遅くなります。

そして開発が全く分からないと、バイブコーディングをしても一定レベル以上のサービスを実装するのは現実的に難しい。

だから開発勉強をある程度やったり、エラーや問題状況を自分で解決できる程度の最小限の開発知識だけは着実に学習していくことをお勧めします。

一応この講義とともにバイブコーディングを上手くするための必要最小限の開発知識が何なのか感を持って、今後の勉強計画を立ててみてください!

バイブコーディング学習前に覚えておくべきこと

💡Gitはバイブコーディングの基本です。
バイブコーディングをうまく行うには、Git(ソフトウェアのバージョン管理のためのツール)の基本的な使い方は知っておく必要があります。

バイブコーディングをしてみると

「あ、以前のデザインがもっと綺麗だったのに😢」、

「もともとうまく動作していて今回の作業をAIがしてからむしろ動作しないんだ、戻りたい」

と思うようになることが多いのですが。

Gitを学ばなければ、私の仕事の履歴から好きな場所にいつでも戻ることができます。

Gitは開発者の方も最初に少し難しい内容でもあり、きちんと学ぶには学ばなければならない内容が膨大ですが、この講義で学ぶGit基礎知識だけでもバイブコーディングを十分にやっていくことができます。

Gitの主な命令の説明

💡 AIをうまくリードすることは、バイブコーディングの鍵です。
バイブコーディングの鍵は、AIをうまくリードすることです。

AIが私が望む方向で、正確で満足度の高い結果を生み出すことができるようにすることが重要です。

  • PRD (Product Requirements Document), TRD (Technical Requirements Document)

  • カーソルルール

  • コンテキスト

  • LLM選択など


AIをうまくリードするのに役立つことが知られているいくつかの方法があります。この講義でみんなを見てみましょう。

もちろん、開発知識が多いほど、より明確で具体的な指示をAIに出すことができ、それが一番良いのですが、まだ開発初心者でも最小限のバイブコーディング品質を維持するための方法を一緒に見てみましょう!

PRD(Product Requirements Document)とは?

バイブコーディングの出発点をしっかりつかみましょう🏃🏻

バイブコーディングは一見簡単に見えますが、事実上開発のすべての知識が総集合される領域でもあります。

だから最初は道を失わないために最小限の開発関連の知識、AIを上手く扱うコツなど、その出発点をよく握らなければならず、今すぐ簡単な結果を作ってみたという驚きと喜びをエネルギーにして、次の段階にさらに進むことができなければなりません。

次のステップだとしたら

  • CursorなどのAIコーディングツールが言うことをよりよく理解し、よりよく指示できるように開発勉強をしてみる

  • サービスを展開するためのさまざまな方法(Vercelなど)を学ぶ

  • Supabaseなどの外部サービスの使い方を学ぶ

  • MCPを活用してCursorとする開発作業の効率性を最大化するなど

があるでしょう。このレッスンをバイブコーディングのタイトな出発点とし、

私が未来に本当に作りたいサービスのために、どの部分を今後さらに勉強していくべきか悩んでみてほしいです。

必要な部分は私も今後ずっと講義で作っていけるようにします。 🙂

講義に関するQnAは、Inflearnの質問でいただくか、下記のオープンチャットルームやディスコにお寄せいただきありがとうございます。
みんな一緒に幸せなバイブコーディングを続けてください〜🎵


オープンチャットルームリンク) https://open.kakao.com/o/gmcDaOIh

ディスコードリンク) https://discord.gg/4dRXMGzk

こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングをぜひ経験してみたい方

  • VIBEコーディングをすでにしているが、もっと上達するためのコツを知りたい方

  • ランディングページの開発を外注せずに、ご自身で制作してみたい方

  • Lovable, ReplitなどウェブベースのVibeコーディングはしてみたけれど、直接自分のPCでVibeコーディングをしてみたい方

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

  • 開発のごく基礎概念(クライアント、サーバーが何かなど)は知っておくと良いでしょう。

こんにちは
です。

안녕하세요, 개발자 및 창업가 김현승입니다.

현재 저는

"PM을 위한 서비스 용어/기능/정책 관리 툴, SpecLive"

"가치관 기반 소개팅앱, 폴잇"

"매력적인 신규 서비스와 초기 유저들이 만나는 곳, Service101"

이라는 서비스들을 운영 중이고,

1인개발자 커뮤니티도 운영하고 있습니다.

AI를 활용해서 개발 효율성을 향상시키는 것에 진심입니다 :) 

경력

  • 공동창업(독서기록 및 독서모임 앱-에필, SeedTIPS)

  • Knowre 백엔드 개발자

  • 코드잇 테크니컬 라이터

  • SNOW 안드로이드 앱 개발자

학력

  • 고려대학교 정보보호대학원 석사 졸업

  • 경찰대학 법학과 학사 졸업

강의

  • 스코클 AITC 데이터 분석 교육 과정 제작

  • 미래산업과학고 미래유망교육 프로그램 진행

カリキュラム

全体

47件 ∙ (4時間 6分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • with.emars님의 프로필 이미지
    with.emars

    受講レビュー 2

    平均評価 5.0

    5

    53% 受講後に作成

    와. 친절하게 세세한 부분까지 알려주시니 너무 좋네요. 전에 오프라인 커서교육을 한번 들었었는데, 가물가물 했던 것들이 다시 상기되면서 머리에 쏙쏙 들어옵니다. 강사님 번창하세요!!!

    • 바이브부스터
      知識共有者

      감사합니다 with.emars님, 이 강의로 바이브 코딩의 시작점을 잘 잡아보시고 앞으로 원하는 웹페이지 자유롭게 만들수 있게 되시길 기원합니다. 앞으로는 점점 더 난이도를 높여서 실제로 무언가 돌아가는 서비스 제작 및 수익화 강의까지도 계획 중에 있으니 관심 부탁드려요 :)

  • 김정인님의 프로필 이미지
    김정인

    受講レビュー 1

    平均評価 5.0

    5

    90% 受講後に作成

    요즘 바이브코딩으로 꼭 개발자가 아니더라도 간단한 프로그램정도는 만들 수 있다고 해서 수강해봤는데 많은 도움이 되었습니다. 바이브코딩이 뭔지, 어떻게 하면 잘 할 수 있는지 자세하게 알게 된 것 같아요. 이제 남은 건 저의 노력일 것 같네요ㅎㅎ 남은 강의도 열심히 들을게요 좋은 강의 감사합니다~~

    • 바이브부스터
      知識共有者

      강의를 잘 들어주셨다니 감사합니다. 이번 강의를 다 들으시고 직접 자신의 프로필 페이지 같은 것도 따라서 만들어보시기를 추천드립니다. 실습을 많이 하다보면 실력이 더 빠르게 느실 거예요. 앞으로도 바이브 코딩에 관한 다양한 강의를 만들 예정이니 계속 관심 가져주시면 감사하겠습니다 :)

¥6,572

似ている講座

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