Module 5 — バイブコーディング入門講座

プログラミング基礎 & Web技術
バイブコーディングを始めよう

「コードが読めないのにAIに指示なんてできるのか」——
読めれば指示できる。指示できれば作れる。3時間でその一歩を踏み出そう。

3h
集中講座
4名
少人数制
7枚
ワークシート
¥16,500
税込

こんな人におすすめ

AIにコーディングを任せたいけど、何を指示すればいいかわからない コードの構造を少し知るだけで、AIへの指示精度が劇的に変わります。
HTML/CSS/JSの基本を知って、バイブコーディングの精度を上げたい 「ボタンを右に」ではなく「.btnにmargin-left:autoを追加して」と言える力を身につけます。
自分のWebサイトやアプリを作って公開したい副業希望者・個人事業主 GitHub Pagesで無料公開する方法まで、3時間で体験できます。
バイブコーディングに興味があるが、プログラミング経験がゼロ コードを書く講座ではなく「読んでAIに指示する」ための講座。未経験でもOKです。

講座の進め方

画面共有のライブ授業で、講師と一緒に手を動かしながら学びます。

1
解説パート
HTML/CSS/JS・GitHub・APIの仕組みを講師が画面共有でわかりやすく解説します。
2
ハンズオン実習
WS-1〜WS-6で実際にコードを書き、GitHubにプッシュ。詰まったら講師がその場でサポートします。
3
ワークショップ
バイブコーディング5ステップを実践。AIに正確な指示を出してUIを組み立てる体験をします。
4
設計テンプレート作成
WS-7で「マイ・バイブコーディング設計テンプレート」を完成させて持ち帰ります。

カリキュラム

コードが読めれば、AIに指示が出せる。
3時間でバイブコーディングの土台をつくります。

PART 1 Webの仕組みを理解する(55分)
オープニング & Webの仕組み
ブラウザにURLを入れたら何が起きる? クライアント↔サーバーの通信・ドメイン・ホスティングの全体像を図解で把握。WS-1「Web構造マップ」で自分の理解を可視化します。
クライアント/サーバードメインホスティングWS-1
HTML基礎 — 構造をつくる
Webページの「骨格」をつくるHTML。タグ・属性・ネスト構造の基本をハンズオンで体験。WS-2「自己紹介ページ作成」で実際にページを書いてブラウザで表示します。
タグ / 属性見出し / 段落リンク / 画像WS-2
CSS基礎 — 見た目を整える
HTMLに「デザイン」を加えるCSS。セレクタ・プロパティ・Flexbox・レスポンシブの基本を学び、WS-3「スタイリング実習」でプロフィールページを見栄え良く仕上げます。
セレクタFlexboxレスポンシブWS-3
PART 2 動きとバージョン管理を身につける(55分)
JavaScript基礎 — 動きをつける
ボタンを押したら色が変わる、入力を取得する——Webに「動き」を加えるJavaScriptの基本。変数・関数・イベント・DOM操作をWS-4「インタラクティブ要素追加」で実践します。
変数 / 関数イベントDOM操作WS-4
休憩 & KPT振り返り
前半を振り返るKPTセッション。Keep(よかったこと)/ Problem(困ったこと)/ Try(次に試すこと)を整理して後半に臨みます。WS-5「KPTシート」に記入。
KPT振り返りWS-5
GitHub & バージョン管理
コードの「履歴管理」と「公開」を担うGitHub。リポジトリ作成・commit・push・GitHub Pagesでの公開までを体験。WS-6「GitHub公開実習」で自分のページを世界に公開します。
Git基礎commit / pushGitHub PagesWS-6
PART 3 APIとバイブコーディングで統合する(70分)
API連携基礎
外部サービスと「会話」するAPIの仕組み。fetch関数でJSONデータを取得・表示する方法を学び、天気APIや翻訳APIを実際に叩いてWebページに表示します。
REST APIfetchJSON非同期処理
技術スタック選択ガイド
React? Next.js? Supabase? ——技術選択で迷わないためのフレームワーク。用途×規模で最適な組み合わせを選べるようになる「技術選択チェックリスト」を使って判断力をつけます。
フレームワークBaaS技術選択チェックリスト
GOAL — バイブコーディング実践 & WS-7完成
バイブコーディング5ステップ(Figma確認→クラス名決定→SVGアセット準備→AI指示→確認・微調整)を実践。WS-7「マイ・バイブコーディング設計テンプレート」を完成させ、明日から使える設計書を手に入れます。
5ステップ実践AI指示WS-7完成設計テンプレート

受講後1ヶ月のチャットサポート付き

講座終了後も安心。1ヶ月間のチャットサポートで、コーディングでつまずいたポイントや追加の質問にお答えします。
バイブコーディングを自分のものにするまで、しっかり伴走します。

質問し放題
コードレビュー対応
GitHub・デプロイサポート

3時間後、あなたは
「コードが読める人」になる。

HTML/CSS/JSが読める
コードの構造を理解し、AIに「ここをこう変えて」と正確に指示できるようになります。
GitHubでコードを公開できる
自分のWebページをGitHub Pagesで世界に公開。ポートフォリオの第一歩を踏み出せます。
バイブコーディング設計テンプレート
WS-7で完成させた「マイ・バイブコーディング設計テンプレート」が、明日からのAI開発の武器になります。

講師紹介

「AIで仕事を自動化し、
人間は本来やるべきことに集中しよう。」

東京都出身、バリ島在住。AIプロダクトの開発と、AIで仕事を自動化する仕組みづくりを専門とする。自身もClaude Codeを日常的に活用し、複数のプロダクトを開発・運用中。

「誰もが"作る側"になれる世界」を目指し、AutoMatesを運営。初心者がつまずくポイントを熟知した、実践重視の講義スタイル。

上山 翔太
AutoMates 主宰 / AIエンジニア・起業家

AutoMatesメンバーの声

Web開発基礎講座を受講した仲間のリアルな声を紹介します。
(画像はAI生成のイメージです)

小林さん(30歳)
小林さん(30歳)
事務職
HTML/CSS/JSを学びGitHub Pagesでポートフォリオ公開
完全未経験でしたが、HTMLで骨組み→CSSでFlexboxスタイリング→JavaScriptでDOM操作という流れが体系的で、3時間で自分のポートフォリオサイトをGitHub Pagesに公開できました。
安藤さん(37歳)
安藤さん(37歳)
フリーランスデザイナー
fetchでAPI連携、技術選定の考え方も習得
fetchでJSONデータを取得してページに表示する体験が衝撃でした。React vs Next.js vs Supabaseの技術選定ガイドも学べて、次のプロダクトで何を使えばいいか明確になりました。
伊藤さん(43歳)
伊藤さん(43歳)
中小企業経営者
Gitでバージョン管理、外注への指示が的確に
ブラウザ→サーバーの通信の仕組みやGit/GitHubの基本を理解できたので、外注エンジニアとの会話が噛み合うようになりました。commit・push・GitHub Pagesの流れは自分で回せるようになっています。

※ メンバーのプライバシー保護のため、お名前は仮名です。成果は個人差があります。

開催日程・申し込みの流れ

開催日次回日程調整中確定次第、優先案内します
時間3時間多少伸びることもございます
形式オンライン(Zoom)PC・音声・カメラ推奨
定員4名少人数制
料金¥16,500税込 / 1名

申し込みの流れ

STEP 1
フォーム送信
必要事項を入力して送信
STEP 2
決済(Stripe)
安全な決済ページでお支払い
STEP 3
Zoom URL配布
開催日前日にメールでお届け
STEP 4
当日開催
URLをクリックしてスタート!

よくある質問

はい、完全未経験者を前提に設計しています。HTMLタグの読み方から始め、7つのワークショップで手を動かしながら段階的に理解を深めていきます。「コードを書ける」ではなく「コードを読んでAIに指示できる」がゴールです。
PC(MacまたはWindows)とインターネット接続環境があれば大丈夫です。テキストエディタ(VS Code推奨)とGitHubアカウントの事前準備をお願いしています。セットアップ手順は申し込み後にお送りします。
各技術を深掘りするのではなく「AIに指示を出すために必要な読解力」に焦点を絞っています。プロのエンジニアになる講座ではなく、バイブコーディングの土台を最短で作る講座です。
AIにコードを書かせ、人間は設計・指示・確認に集中する開発スタイルです。本講座ではFigmaデザイン確認→クラス名決定→SVGアセット準備→AI指示→確認・微調整の5ステップフレームワークを学びます。
1ヶ月間のチャットサポートが付いています。コードのエラー解決・GitHub操作・バイブコーディングの実践で困ったことなど、何でもご質問いただけます。

準備はいい?
コードが読める自分になろう。

HTML/CSS/JS・GitHub・API連携・バイブコーディング5ステップ。
コードが読めればAIに指示が出せる——3時間でその一歩を踏み出そう。

予約・お支払いへ進む

※ Stripeによる安全なオンライン決済

3h 集中講座
4名 少人数制
7枚 ワークショップ
¥16,500 税込