ブラウザだけで「バイブコーディング」を学べる場所を作った｜環境構築不要の学習プラットフォーム「学習スタジオ」

バイブコーディングを「実際に手を動かして学びたい」と思ったとき、ちょうどいい場所がなかなか見つからない——そんな課題を感じたことはありませんか？

YouTube動画を見ても手は動かせない。書籍を読んでもAIの進化が速すぎて情報が古い。既存のプログラミング学習サービスは「自分でコードを書く」前提で、「AIに依頼する」というバイブコーディングのスタイルには対応していない。

ブラウザを開くだけで、AIに依頼してコードが生成されて、動くものが目の前にできる。 その体験を、環境構築なしで誰でもできるようにしたい——そう思って、「学習スタジオ」を作りました。

学習スタジオとは

学習スタジオは、バイブコーディングをゼロから体系的に学べるインタラクティブな学習プラットフォームです。現在β版として公開しています。

特徴

• 環境構築が一切不要：ブラウザを開くだけですぐに始められます
• 段階的なカリキュラム：Level 0（完全初心者）からLevel 5（業務自動化）まで、全36コースを用意
• 2種類のシミュレータ：チャット型AIとIDE統合型AI、両方の開発スタイルを体験できます
• 無料で始められる：入門コースを含む7コースが無料で受講可能

コースの構成

1つのコースは複数のレッスンで構成されています。

• スライド形式のレッスン：ステップ図解で視覚的に学べる
• プロンプトのコピー機能：教材のプロンプトをワンクリックでコピーして、シミュレータですぐ試せる
• 理解度チェック：各コースの最後にクイズで理解度を確認
• 進捗管理：レッスン完了数やクイズの得点が自動で記録される

一番の特徴：2種類のシミュレータ

学習スタジオの一番の特徴は、ブラウザだけで実際に手を動かせる2種類のシミュレータです。ツールのインストールは一切不要。ブラウザを開くだけで、すぐに実践できます。

①デスクトップシミュレータ

「ファイル」「ブラウザ」「ターミナル」「AIチャット」のアイコンが並ぶ仮想デスクトップです。ChatGPTやGemini、Claudeのようなチャット型AIを使った開発フローを体験できます。

1. AIチャットにプロンプトを送る
2. コードを受け取る
3. ファイルに保存する
4. ブラウザで確認する

この一連の流れを、ブラウザ内の仮想デスクトップ上で実際に体験できます。

②IDEシミュレータ

CursorやVS Codeのように、エディタ内でAIに直接依頼する開発スタイルを再現したシミュレータです。

• 左にファイルツリー
• 中央にコードエディタ（行番号付き）
• 右にAIチャットパネル + ライブプレビュー

1画面にエディタ・AIチャット・プレビューがすべて統合されています。

なぜ2種類あるのか

バイブコーディングには大きく2つのスタイルがあります。

• チャット型：ChatGPT等にプロンプトを送って、返ってきたコードをコピペする方法
• IDE統合型：CursorなどのAI搭載エディタを使って、エディタ内で直接AIに依頼する方法

学習スタジオでは、この2つのスタイルを両方体験できるように、それぞれ専用のシミュレータを用意しました。初心者にとって「環境構築」は最大のハードルですが、学習スタジオではそのハードルがゼロです。

段階的なカリキュラム

Level 0（完全初心者）からスタートして、段階的にスキルアップできる構成です。

全36コースのうち、現在受講可能なのは12コースです。残りのコースは順次公開していきます。

無料で体験できるコース

以下のコースは無料で受講できます。「バイブコーディングってどんな感じ？」を気軽に体験してみてください。

• 学習スタジオUIの使い方（2レッスン）
• 【チャット型】AIコーディング入門（6レッスン）
• 【IDE統合】AIコーディング入門（6レッスン）
• HTML/CSS/JavaScriptの基礎（7レッスン）
• LP制作（8レッスン）
• Linuxコマンド入門（7レッスン）
• Linux/ターミナルとは（6レッスン）

まとめ

バイブコーディングを「実際に手を動かして」「環境構築なしで」「体系的に」学べる場所を作りたい。その思いで学習スタジオを作りました。

まだβ版で、すべてのコースが揃っているわけではありません。でも、無料コースだけでもバイブコーディングの基本的な流れを体験できます。

「バイブコーディングってどんな感じだろう？」と思ったら、ぜひブラウザで開いてシミュレータを触ってみてください。

学習スタジオを無料で試す →