AIとつくる はじめてのWeb開発
0/42
カリキュラム
上から順に進むのがおすすめです。各セクションの最後に「理解度チェック」が あり、全問正解でそのセクションはクリアになります(先のセクションも自由に 読めます)。
学習を始める
はじめに
3レッスン
このサイトの使い方
AIに任せて作るための「言葉」と「勘どころ」を身につける
AIと一緒に作るとは?
「コードを書く」から「言葉で頼む」へ
つまずかない学び方のコツ
完璧を目指さない。迷ったらAIに聞く
AIの基礎
8レッスン
AIの歴史(ざっくり)
ChatGPTの衝撃から、プロンプト→ハーネスへの進化まで
生成AIの種類
文章・画像・動画・音声・音楽…作るものでAIは分かれる
AIエージェントの活用法
「答えるAI」から「作業するAI」へ
プロンプト(指示の出し方)
頼み方しだいで結果は大きく変わる
エラーとの付き合い方
止まっても大丈夫。エラーは“直し方のヒント”
AIを活用する時の注意事項
便利だけど万能ではない。事故を避ける常識
セキュリティ関連
鍵を外に置かない・他人のものを勝手に触らない
API・トークン・料金
AIを“アプリから”使うとお金の話になる
生成メディア
4レッスン
画像生成
文章から画像を。SNSは“サイズ”が命
動画生成
迷ったら MP4・1080p。4Kはアップスケールで
音楽生成
WAV と MP3 の違い/そして“裁判”の話
音声生成
ナレーション自動化。声の“なりすまし”に注意
Claude
4レッスン
Claudeの種類(Chat・Code・Cowork・Design)
同じ賢さを、場面ごとの“入り口”で使う
Claude Code
コードを書き・動かし・直す“作業する相棒”
MCP(外部ツール連携)
AIに“道具”を後から差し込むUSBポート
Skills(得意技の再利用)
MCPが“道具”なら、Skillsは“手順書”
開発の土台
8レッスン
ターミナルの基礎
コンピュータに“文字で命令する”場所
コードエディタ(VS Code)
コードを“見て・直す”ための専用ノート
プログラムの種類
“表側”と“裏側”、どこで動くかで分かれる
サーバー
お願いに応えて答えを返す“厨房と店員”
URLとドメインの仕組み
ネット上の“住所”の読み方と仕組み
データベース
情報をきれいにしまって、すぐ取り出せる棚
Markdown記法
記号でサッと見た目を整える書き方
Git/GitHub
Gitは“セーブ&履歴”、GitHubは“ネット上の保管庫”
Web開発
8レッスン
デザインの基礎(UI/UX)
見た目より“伝わる・迷わせない”が先
HTML・CSS
HTMLは“骨組み”、CSSは“見た目(服)”
JavaScript
ページに“動き・反応”を与える
Node.js
JavaScriptを“ブラウザの外”でも動かす土台
React
画面を“部品(ブロック)”で組み立てる
Next.js
Reactで本格サイトを作るための“全部入りセット”
ログイン機能(認証)
会員機能の心臓部。自分で作らず“専門サービス”に任せる
デプロイ・公開
手元の試作品を、世界に“開店”する
その他の言語
1レッスン
Python
読みやすい万能ナイフ。AI・データ・自動化が得意
公開・マネタイズ
5レッスン
アプリリリースまでの流れ
アイデアから公開まで、全体地図でつかむ
マネタイズの基本(稼ぎ方の種類)
作ったもので“どう稼ぐ”か、まず型を知る
決済と手数料(お金を受け取る仕組み)
支払いは“決済サービス”に任せるのが基本
料金プランと価格の決め方
いくらで・どう分けるか。無料と有料の線引き
集客の基礎(SEO・SNS・AI検索)
作っただけでは誰も来ない。“見つけてもらう”仕組み
総まとめ
1レッスン
総まとめ(これまでの総復習)
学んだ要点を1枚で振り返る“チートシート”