AI活用によるWEBサイト制作①
公開の仕組みと横文字用語をやさしく整理し、自分に合った公開のやり方を選べるようにします。
前半は「基礎と公開」、後半は「AIでの制作の発展」です。
本日の研修ねらい
AI活用によるWEBサイト制作またはアプリ開発をする
Webの公開の流れと用語を理解し、非エンジニアでも「自分の現在地」に合った公開方法を選べる状態を目指します。
AIを使うからこそ、基礎知識が重要です
「AIに任せれば用語はいらない」わけではありません。リポジトリ・ブランチ・デプロイなどの言葉がわかると、指示の精度が上がり、詰まったときに自分で検索もできます。
今日は横文字を「怖がらずに地図として持つ」ことがゴールです。
用語と公開の地図
index.html や階層、ビルド／デプロイをかみ砕き、公開レベル別ガイドで自分のスタート地点を見つけます。
AIでの制作の発展
難易度が上がる内容には逃げ道を用意しています。分からなければ前半の Canvas / Netlify に戻ってOKです。
超かみ砕き！はじめてのWeb用語マップ
専門書の1ページ目のように、下のカードを上から順にざっと読むだけで大丈夫です。覚えなくても「なんの話か」がつかめればOKです。
index.html って何？
サイトのトップページの定番ファイル名です。サーバーは「このフォルダの最初に何を見せる？」と聞かれたとき、だいたい index.html を探します。だから「表紙・玄関」のイメージです。
階層（フォルダ構造）
PCのフォルダのように、中にフォルダやファイルを入れ子にして整理する仕組みです。「どのフォルダの、どのファイルか」がパス（住所）になります。画像やCSSのリンク切れは、多くはこの住所の書き間違いです。
レスポンシブ対応
スマホ・タブレット・PCなど、画面の幅に合わせてレイアウトがきれいに変わる設計です。今はスマホ閲覧が主流なので、「PCだけきれい」では不十分とされます。
ブランチ（Branch）
本番のコードを壊さないよう、コピーを分けて試すための「枝」です。よく使うのは main（公開の主役）。枝で作業して、問題なければ本流に合流、というイメージです。
ビルド（Build）
人が書いたソースを、サーバーやブラウザが扱いやすい形にまとめ直す作業です。フレームワークを使うと「ビルドして初めて本番用のファイルができる」ことが多いです。
デプロイ（Deploy）
完成したファイルをインターネット上のサーバーに置いて、URLで誰でも見られる状態にすることです。「配送・開店」のイメージ。ビルドした結果を載せるのが一般的です。
「index.html が玄関、フォルダが住所、ブランチで安全に試して、ビルドしてから デプロイして公開」
動画①：Google AIでHPが4分で作れる時代
サムネイルをクリックすると、このページ内で再生が始まります（Facadeパターン）。
いまのAIと「自分でサイトを持つ」ことの距離感
この動画で学べること
Google AIの最新ツールを使い、制作会社に外注せずに無料で爆速にWebサイトやLPを作る2つの方法を実演しています。
コードとAI
「AIでWebサイトを作る = コードを書かない」ではなく、AIがコードを生成してくれるということ。
Google系AIツール
Google系のAIツール（Gemini等）は無料で使え、初期投資ゼロで始められる。
外注ゼロと品質
制作会社への外注（30〜40万円）をゼロにできる可能性がある反面、自分で品質を判断する目は必要。
動画②：Gensparkで5分でHP作成から公開まで
サムネイルをクリックすると、このページ内で再生が始まります（Facadeパターン）。
生成から公開まで一気通し
この動画で学べること
Gensparkという新しいAIツールを使って、ほんの数分でWebページを生成し、そのまま公開URLを取得するまでの流れを解説しています。
「作る」と「公開」のあいだをつなぐ視点
- 「作る」と「公開する」を同時にやってくれるAIツールが登場している。
- ただし「公開」の裏側ではサーバーやURLの仕組みが動いている — それを知っておくと応用が利く。
- このページ前半の「用語マップ」や「レベル別ガイド」が、その裏側の地図になる。
動画③：Gemini最強の使い方 — プロ級サイト制作
実習で参照するGitHub公開パートは8:43〜。サムネイルから再生すると523秒から始まります（Facade・data-start）。
制作サイクルと GitHub 公開
この動画で学べること
Geminiを使ってプロ級のWebサイトを制作する方法を解説。8:43以降ではGitHubを使った公開手順も紹介されています。
制作の基本サイクルと実習パート
- Geminiでのコード生成＋プレビュー確認の繰り返しが制作の基本サイクル。
- 8:43〜は実習で使うGitHub公開の参考パート（この動画の
data-start="523"はそのまま維持）。
あなたに合った公開方法（レベル別ガイド）
上から読んで、わからなくなったところで止まってOK。下の段ほど手軽です。デザインは桜テーマに合わせて再構成しています（元資料：web-publish-tiers）。
🚀 上級者
IDEとGitHubとCloudflareで本格的なデプロイ
対象
- Webエンジニアとして生業にしていきたい方向け
- ツールの連携を自分で組める、またはそれを学びたい方
使うもの
AI IDE（Antigravity / Cursor / Windsurf 等）※ AntigravityはGoogleのVSC系AI IDE。UIはCursorに近いです- GitHub（リモートリポジトリ）
Cloudflare Pages（自動デプロイ）
ワークフロー（専門用語のまま）
1. IDEでコーディング 2. Gitでローカルにコミット（変更履歴を記録） 3. GitHubのリモートリポジトリにpush 4. CloudflareがGitHubと連携し、pushをトリガーに自動ビルド＆デプロイ 5. カスタムドメインをCloudflare DNSで設定（オプション）
知っておくべき用語（すべてわかる方向け）
- リポジトリとブランチの違い
- コミットとpushの違い
- CIとCDの意味
- ビルドとデプロイの違い
- DNS / CNAMEレコードとは何か
「これはちょっと難しそう…」と感じた方は、次のレベルへどうぞ。
⚡ 中級者向けを見る⚡ 中級者
HTMLファイルをドラッグ＆ドロップで公開 ― Netlify
対象
- ある程度ツールは使えるが、GitやCLIは知らない方
- HTMLファイルを作れれば十分、難しい連携はいらない方
使うもの
- テキストエディタ（VSCode、メモ帳など）
Netlify（無料）- ブラウザだけでOK
ワークフロー（やさしい言葉で）
- HTMLファイル（index.html）を手元で作る
- Netlify（netlify.com）にアカウント登録
- 「Sites」画面にHTMLファイルをドラッグ＆ドロップ
- 数秒でURLが発行される → 公開完了
先輩の知恵：AIのコードからHTMLファイルを作るには？
AIから出力されたコードをコピーし、以下の手順でPC上に保存します。
🪟 Windows（メモ帳の場合）
① 「メモ帳」を開き、コードを貼り付け（Ctrl＋V）
② 「ファイル」→「名前を付けて保存」
③ ファイル名を index.html と入力し、ファイルの種類を すべてのファイル に変更して保存
🍎 Mac（テキストエディットの場合）
① 「テキストエディット」を開き、メニューの「フォーマット」→「標準テキストにする」を選択
② コードを貼り付け（⌘＋V）
③ 「ファイル」→「保存」でファイル名を index.html にして保存（「.html」拡張子を使用）
Netlify Dropの「24時間消滅トラップ」に注意！
アカウント未登録のままでもドラッグ＆ドロップ公開は可能ですが、24時間後にサイトが自動削除されてしまいます。課題提出のURLが後から見れなくなるトラブルを防ぐため、必ず先に無料アカウントを作成・ログインしてからアップロードしてください。
必要な前提知識
- HTMLファイルとは何かを知っている
- ブラウザで検索・アカウント登録ができる（それだけでOK）
「HTMLって何？」という方は、次へどうぞ。
🔰 初心者向けを見る🔰 初心者（ここがあなたのスタートラインです）
AIに作ってもらって、ボタン一つで共有 ― Gemini Canvas
対象
- ツールやコードには触れたくない方
- とにかく公開（共有）さえできればそれでいい方
使うもの
- Gemini（gemini.google.com のCanvas機能）
Googleアカウント（持っていればOK）
ワークフロー
- 1 Geminiを開く
- 2 Canvasでページの内容を伝える
- 3 AIがHTMLを生成
- 4 右上「共有」→ メニューから「共有」
- 5 URLが発行 → 共有完了
難しい知識は不要
- GitHubは使いません
- コードを書く必要はありません
- デプロイという概念も不要です
ここまで読んでくれてありがとうございます。
「上2つは難しかった」という感覚を持てたなら、それ自体があなたの現在地を正確に教えてくれています。
まずはここから始めましょう。
実習：GitHub を使って WEB サイトを公開してみよう
コース情報共有の流れに沿って、GitHub Pagesで index.html を公開するイメージをつかみましょう。細かい操作は動画③（8:43〜）を正としてください。
GitHub Pagesの具体的な操作手順（5ステップ）
GitHubアカウントを作成・ログイン
https://github.co.jp/ からアカウントを作成し、ログインします。
リポジトリ（保存場所）を作成
- 画面右上の「＋」→「New repository」を選択
- 名前を入力（例：myportfolio）
- 表示設定を「Public」にする
- 「Add a README file」にチェック → 「Create repository」
ファイルを作成して保存
- 「Add file」→「Create new file」を選択
- ファイル名に index.html と入力
- コピーしておいたHTMLコードを貼り付け
- 「Commit changes」を押して保存
GitHub Pages を有効化
- 「Settings」タブ → 左メニュー「Pages」
- Branch を「main」に変更 → 「Save」
公開を確認（3〜4分待つ）
- 「Actions」タブを開く
- 黄色のくるくる → 緑のチェックマークに変われば完了
- 表示されたURLをクリックしてサイトを確認
用語がまだしんどいときは
この実習は上級者ルートのイメージです。無理にここまでやらず、中級者（Netlify）・初心者（Gemini Canvas）だけでも「公開できた」は大きな一歩です。
まず安心して：難しければ前半で十分です
ここから先は難易度が上がります。分からない場合は、前半で紹介した Gemini Canvas や Netlify を使った公開方法に戻って進めても十分です。
すべてをこなす必要はありません。「自分の現在地」に合ったルートを選んでください。
動画（後半）— 2本
AIを使った制作の発展編。サムネイルをクリックで再生します。
AI Studioを活用したプロフェッショナルな制作フロー
この動画で学べること
Geminiの強力な機能を引き出せる開発者向け環境「Google AI Studio」を用いて、企業サイトレベルのデザイン性の高いWebサイトを内製（自作）する方法を解説しています。
通常のGeminiチャットとの違い
- AI Studioを使うことで、より高度なパラメーター調整（System Instructionsなど）が可能になります。
- 「AIにどう振る舞ってほしいか」を根底から指定できるため、より意図通りの精度の高いコード生成が実現します。
AIを活用した実務レベルのコーディング
この動画で学べること
同じくGoogle AI Studioを使い、さらに一歩踏み込んだ「実務や案件で使えるレベルのWeb制作」へのアプローチ方法を学びます。AIを補助ツールとしてどう扱うかの解像度が上がります。
後半の進め方
実習内容は前半とつながっています
後半は「AIでどう作るか」にフォーカスします。公開の土台は、前半のレベル別ガイドで選んだ方法（Canvas / Netlify / GitHub連携など）と組み合わせてください。
手が止まったら、
TODAY's MISSION
用語の地図を持ち、自分に合った公開のやり方を選べたかを振り返りましょう。
今日のチェックリスト
-
STEP 01: 用語マップを読んだ
index.html・階層・レスポンシブ・ブランチ・ビルド・デプロイのうち、「なんの話か」が説明できればチェック。
-
STEP 02: 公開レベル別ガイドで現在地を決めた
上級 / 中級 / 初心者のどれを第一候補にするか、心の中で決めたらチェック。
-
STEP 03: 動画を1本以上観た（または実習を試した）
前半・後半どちらでもOK。止まったら前半の Canvas / Netlify に戻ってよし。
-
STEP 04: 次にやることを1行メモした
例：「まず Gemini Canvas で共有URLを作る」「Netlify に index を載せてみる」など。
次のステップ（Day 9）
引き続きコースのカレンダーから次の教材に進み、制作と公開の経験を重ねていきましょう。