inflearn logo
知識共有
inflearn logo

Vibe Codingで作る本物のウェブサービス:旅行MBTIウェブサイトを完成させる

AIプロンプトだけで旅行MBTI診断ウェブアプリを作成し、韓国観光公社の公共Open APIを実際に連動させて実サービスレベルまで完成させる実戦バイブコーディング講座です。プロンプト分割技法を用いて、粗削りな結果を完成度の高いウェブアプリへと改善し、APIキーのセキュリティやデプロイまで全過程を扱います。

19名 が受講中です。

難易度 入門

受講期間 1か月

No-code
No-code
api
api
AI
AI
prompt engineering
prompt engineering
Vibe Coding
Vibe Coding
No-code
No-code
api
api
AI
AI
prompt engineering
prompt engineering
Vibe Coding
Vibe Coding
Thumbnail

受講後に得られること

  • 公共Open API連携とセキュリティ処理を含む実サービスレベルのウェブアプリ制作

  • プロンプト5段階分割(分析軸・質問設計・結果構造・データ構造・デザイン/UX)によるAI成果物の品質改善

  • 公共データポータルでの活用申請から認証キーの発行・実データの連動・CORS解決まで、実践的なAPI活用プロセス


開発なしで
自分だけのウェブサービス



アイデアはあるけれど、開発者がいなくて途方に暮れていませんか?

精巧なAIプロンプトと公共Open APIの連携だけで、考えていた旅行MBTIウェブアプリを実際のサービスレベルまで完成させることができます。
私は8年目のフロントエンドエンジニアで、LINEでの勤務経歴をもとに、単なる機能の羅列ではなく「なぜこのように設計するのか」という根本的な理解を助けるためにこの講義を作りました。
AIの成果物を高度化し、APIを安全に連携させる実践的なノウハウをすべて詰め込みました。



この講義で得られること

コードなしで実践的なウェブアプリ、完成まで
共にします。

8年目のフロントエンドエンジニアの実務経験を
基に、単なる機能実装を超えて「なぜこのようにバイブコーディングをすべきなのか?」についての深い理解を得ることができます。私はLINEでの経験など、様々なスタートアッププロジェクトを通じて得たインサイトを共有し、皆さんの設計基準を確立するお手伝いをします。

AIプロンプトだけで実際の観光MBTIアプリを作り、韓国観光公社のOpen APIを連動させる全過程を扱います。プロンプト5段階分割技法でアウトプットの品質を改善し、APIキーのセキュリティやデプロイまで、実サービスレベルの成果物を自ら作り上げる経験ができます。

単なるツールの使い方を超えて、実務で通用する問題解決能力を養います。公共データポータルの活用申請から認証キーの発行、難しく感じていたAPI連携のプロセスを直接経験することで、どのような困難にも対処できる自信を得られるはずです。

非開発者でもアイデアを形にできる
実践的なウェブサービス開発スキルを身につけることができます。


8年目のフロントエンドエンジニアによる
コードなしのウェブサービス作りへの旅程


LINEを退職した後、多くの非開発者の方々が開発に関心を持っているものの、どこから始めればよいか分からず苦労している姿を目の当たりにしました。

いざ勇気を出してバイブコーディングを始めても、その次にどうやってさらに実力を積み上げればよいのか、道が分からず困っている方が多くいらっしゃいました。

単なる機能の習得を超えた根本的な原理の理解が切実に求められていました。

そこで私は、構造的な悩みと実質的な基準に対する答えを探し始めました。

過去の私のように、単なる使い方を超えた深い理解を求める皆さんのために、この講義を準備しました。


過去の漠然とした不安を解消する羅針盤に、今こそ出会ってください。この講義で、あなたも実際のサービスを完成させることができます。



カリキュラム

MBTIウェブアプリ:ノーコード10分完成

セクション 1

バイブコーディングの基礎と第一歩

バイブコーディングの概念を理解し、プロンプトだけで旅行MBTIウェブアプリを初めて作成します。初期の成果物を検討しながら、なぜプロンプトを分割する必要があるのか、その必要性について学習します。

Claude Artifactsの活用

セクション 2

韓国観光公社API連携の実践

韓国観光公社の公共Open APIを申請し、認証キーを発行して実際のデータと連動させる過程を学習します。CORS問題の解決など、実際のサービス構築に必要なAPI活用法を習得します。

韓国観光公社API連携




講義のおすすめ対象

このような方におすすめです

アイデアだけがある非開発者、
自分だけのウェブサービスを作りたいなら

バイブコーディング入門後、実践サービス
完成を目指す受講生




受講前のご注意事項


実習環境

  • OS:Windows、macOS、Linuxのすべてに対応しています。

  • 必須プログラム:最新のウェブブラウザ(Chrome、Edgeなど)が必要です。

  • PCスペック:スムーズな実習のために8GB以上のRAMを推奨します。

前提知識および注意事項

  • 開発経験がなくても大丈夫です。ウェブサービス制作の基本概念を学びます。

  • AIプロンプトエンジニアリングの基礎知識があれば、学習の助けになります。

  • 旅行MBTIアプリを実際に作ってみる実習が含まれています。

学習資料

  • 講義で使用されるすべてのスライド資料を提供します。

  • 実習に必要なコード例およびAPI連携ガイドラインを提供します。

  • 公共データポータル(公的データポータル)の活用およびAPIキーの発行に関する案内資料を提供します。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • アイデアはあるけれど、開発者なしでウェブサービスを作りたい非開発者・企画者・マーケター

  • 観光データコンテストの参加者や、公共データの活用サイドプロジェクトを始めようとしている学生

  • バイブコーディング入門後、おもちゃレベルを超えて実戦的なサービスを完成させたい学習者

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

  • Claude、ChatGPT、Geminiなどの生成AIツールの基本的な使用経験

  • ウェブブラウザの使用と簡単なファイルのアップロード・ダウンロード能力

  • ウェブサービスの企画意図やユーザーニーズを言葉で説明できるコミュニケーション能力

こんにちは
Boazです。

キャリア認証

318

受講生

23

受講レビュー

19

回答

4.7

講座評価

2

講座

こんにちは。Boazです。
計4回の転職を経て、さまざまなスタートアップを経験し、LINEで働いたのち退職して
AXおよびAI教育会社を運営しています。

技術の登場背景と動作原理を分かりやすく説明しようと思っています。
そうすることで初めて、目的に合わせて使いこなせると信じているからです。

2つのYouTubeチャンネルを運営しています

よろしくお願いします 🤗

 

もっと見る

受講レビュー

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

似ている講座

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

無料