学習スタジオは PC でご利用ください
PC で開くと、この画面でスライドを読みながらコードを書き、AIに質問して学べます。
お手数ですが、画面の大きい PC 環境
（または横向きタブレット）から
このページにアクセスしてください。
より快適に学習いただけます
学習スタジオβ版
インタラクティブな学習プラットフォームで、
バイブコーディングを学びましょう。
おすすめ導線
Level 0 から始める開発者向けの学習パス
バイブコーディング入門3 コース|合計 33分
無料学習スタジオUIの使い方
学習スタジオの画面操作方法を学びます。スライドの送り方、シミュレータの表示切替、スライドの縮小表示など、快適に学習を進めるためのUI機能を紹介します。
無料【チャット型】AIコーディング入門
ChatGPT / Gemini / Claude のような会話型AIだけを使って、簡単なWebページを作ります。要件の伝え方→コード生成→貼り付け→修正依頼の流れと、効果的なプロンプトの型を学びます。
無料【IDE統合】AIコーディング入門
エディタ統合型AI（Cursor / Antigravity / VS Code AI 拡張 など）を使って、自己紹介ページを作りながら「IDE内でAIに依頼→差分反映→動作確認→修正指示」の一連の流れを学びます。
AIと作るフロントエンドの基礎4 コース|合計 1時間45分
無料HTML/CSS/JavaScriptの基礎
AIが書いたコードを読み解けるようになるための、HTML / CSS / JavaScript の最低限の基礎を学びます。
無料LP制作コース
HTML / CSSを使ってランディングページを作成します。HTML/CSSの仕組みを理解する、レスポンシブデザインの基礎
Pro診断アプリ制作
JavaScriptを使って診断メーカーを作成します。初めてのJavaScript、if文/for文を使った条件分岐、イベントハンドリングの基礎を学びます。
ProTODOアプリ制作
JavaScript / localStorageを使ってTODOアプリを作成します。JavaScriptとは何か、DOM操作、localStorageでのデータ保存
AIと理解するWebの仕組み（サーバー / API / 開発環境）15 コース|合計 4時間13分
メインコース
Proクライアント・サーバー入門
普段使っているWebサイトの裏側で何が起きているのか？クライアントとサーバーの役割、HTTPリクエスト・レスポンスの仕組み、APIの基本概念を学びます。
ProWeb API活用コース
REST API / JSON / fetchを使ってニュース取得アプリを作成します。fetchによる非同期通信、JSONデータの扱い、一覧表示からキーワード絞り込みまでを実践します。
Pro自作APIサーバー入門
Node.js / Expressを使ってメモ保存APIを作成します。サーバーの役割、Expressの使い方、GET/POST/DELETEのエンドポイント作成までを、AIにコードを書いてもらいながら理解します。
Proフロント × API連携アプリ
API連携を使って投稿アプリを作成します。フロント・バックエンドの連携、CRUD操作、非同期処理の実践
ProAPIデプロイ入門
サーバー公開を使って公開APIを作成します。クラウドサービスへのデプロイ、環境変数の設定、APIの公開方法
ProGit / GitHub入門
Git / GitHub を使って、自分の作ったコードをバージョン管理しつつ世界に公開します。Git管理の基礎、コミット履歴、リモートリポジトリ、ブランチを学びます。
基礎知識
ProJSON・データ形式入門
JSON / CSV / データ構造を使ってデータ形式の理解を作成します。JSONとは何か、オブジェクトと配列の構造、CSV・XMLとの違い、APIレスポンスの読み方
Proデバッグ入門
DevTools / console.logを使ってデバッグスキルの習得を作成します。エラーメッセージの読み方、console.logでの値の確認、ブラウザDevToolsの使い方、よくあるエラーパターン
Linux / CLI
開発ツール
ProローカルCLIツール制作
CLIツールを使ってファイル整理自動化ツールを作成します。CLIツールの作成、ファイル操作の自動化、実用的なスクリプト開発
Pro環境構築 - Node.js編
Node.js / npmを使ってNode.js開発環境を作成します。Node.jsのインストール、npmの使い方、package.jsonの役割、ローカル開発環境の構築手順
GAS
Proスプレッドシート自動化
GASを使ってデータ集計・整形ツールを作成します。GAS（Google Apps Script）の使い方、スプレッドシートの読み書き、トリガー・定期実行の基礎、データの集計・整形
ProGASメール自動送信コース
GAS / Gmail APIを使ってメール自動送信ツールを作成します。Gmail APIの利用、テンプレートメールの送信、条件に応じた一斉送信、送信ログの記録
Pro週次レポート作成コース
GAS / Google Docs / スプレッドシートを使ってレポート自動作成ツールを作成します。スプレッドシートデータからGoogle Docsへの反映、テンプレート文書の生成、週次レポートの自動作成、PDF出力
バイブコーディングでWebアプリを作る8 コース|合計 2時間
メインコース
Proフォーム送信アプリ制作
POST通信を使って問い合わせフォームを作成します。POST通信の仕組み、フォームの作成、サーバー側でのデータ受信
ProDB連携アプリ制作
Firebase / Supabaseを使ってメモ保存アプリを作成します。データベースの基本概念、Firebase/Supabaseの使い方、CRUD操作の実装
Pro認証付きアプリ制作
ログイン認証を使ってログイン付きアプリを作成します。ログイン認証の仕組み、セッション管理、セキュリティの基礎
基礎知識
Proデータベースとは
「もしデータベースがなかったら？」という身近な想像から出発して、データベースの基本概念・テーブル構造・リレーショナルDBとNoSQLの違い・SQLの読み方を学びます。コードは書かず、AIの提案を理解できるようになることがゴールの概念コースです。
Pro認証の仕組み
会社のセキュリティゲートを例に、ログイン・セッション・認可など認証の基本的な仕組みを理解します。コードは書かず、概念の理解に集中するコースです。
Proセキュリティ基礎
Webセキュリティを使ってセキュリティの基礎知識を作成します。XSS・CSRF・SQLインジェクションとは、HTTPS通信の仕組み、入力バリデーションの重要性、セキュリティヘッダー
Proテスト入門
テストの基礎概念を使ってテストの基礎知識を作成します。なぜテストが必要か、単体テスト・結合テスト・E2Eテストの違い、テスト駆動開発の考え方、AIを使ったテスト作成
ProTypeScript入門
TypeScriptを使ってTypeScriptの基礎知識を作成します。TypeScriptとは何か、型の基本（string/number/boolean）、interfaceとtype、JavaScriptとの違いとメリット
バイブコーディングでAIアプリを作る3 コース|合計 1時間
ProAI文章作成の型
無料のチャットAIだけで、メール・提案文・告知文などの業務文章をAIに書かせる「依頼の型」を身につけます。APIキーや追加料金は不要です。
ProAI資料作成術
チャットAIに資料の構成と図解を設計させ、HTML/CSSで見栄えのする提案資料に仕上げます。外部APIや追加料金は不要です。
ProAI作業環境構築（Cursor / Claude Code）
学習スタジオを卒業して、自分のPCに本物のAI開発環境（Cursor / Claude Code）を整えます。サブスクリプションの範囲内で完結し、APIキーの取得は不要です。
バイブコーディングで業務を自動化する3 コース|合計 1時間
Proデータ収集・集計をAIに任せる
価格や情報の収集・集計といった繰り返し作業を、AIに書かせたスクリプトで自動化します。サブスクプラン内で完結し、追加料金は不要です。
ProAI議事録・レポート整形
会議メモや文字起こしテキストをAIに渡して、議事録や定型レポートに整形させる仕組みを作ります。音声APIなどの外部APIは使いません。
ProAI秘書環境（AIOS）制作
Claude Code の CLAUDE.md とスキルを使って、自分の業務を覚えた「AI秘書環境（AIOS）」を構築します。外部APIやBot連携は不要で、サブスク内で完結します。