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