アプリケーション開発の基礎知識
Day 8・9 で学んだ Web"制作"（見せるサイト）から、今日は Web"開発"（動くアプリ）の世界へピボットします。
専門用語を最小限に、「違い・フレームワーク・AIツール・公開」の全体像を直感的に掴むのが今日のゴールです。
本日の研修ねらい
AI活用によるWEBサイト制作またはアプリ開発をする
Day 10 の目的は「アプリの基本構成を理解し、業務改善に活かす開発思考を養う」こと。Day 8・9 で扱った「Web制作」（静的サイト）から、今日は「Web開発」（動的アプリ）の世界へピボットします。
今日からWeb"開発"の世界へ
Day 8・9 で学んだのは Web"制作"（ホームページ＝情報を"見せる"パンフレット）の世界でした。Day 10 から入るのは Web"開発"（アプリ＝データが"動く・保存される・計算される"道具）の世界です。
ただし今日は基礎知識の回。用語と全体像を押さえるだけで十分なので、アレルギーを起こさずリラックスしてついてきてください。
今日は「用語アレルギー」を起こさないことがゴール
「Web開発」「フレームワーク」「サーバーサイド」…いかにも難しそうな横文字が並びますが、ひとつひとつ"例え話"で置き換えて整理していきます。
覚える必要はありません。「そういう世界があるんだ」と地図を持てれば、今日は大成功です。
概念整理＋AIツール紹介
Web制作とWeb開発の違い・フレームワークとは何か、そして Bolt.new / GitHub Copilot など注目のAIツールを押さえます（動画3本）。
実践フロー：Claude / Dify / GAS
AIを使った 企画→設計→実装→公開 の一連を体験。Dify・GAS を使った社内限定の公開方法も学びます（動画3本）。
Padlet 登録＋課題制作
今日までに学んだツールを総動員して、自分の業務に役立つ1作を作り、Padlet に第一稿を投稿します（Day 13 成果発表の準備）。
最重要：「Web制作」と「Web開発」の違い
今日の出発点。ここさえ掴めば、このあとの動画・ツール紹介がすっと入ってきます。覚える必要はありません。左右を見比べて「こういう対比なのね」と感じる程度でOK。
🎨 Web制作（サイト）
- 情報を「見せる」のが目的
- パンフレットのようなもの
- 例：コーポレートサイト、LP、ブログ
- 技術：今まで学んだ HTML / CSS の領域
⚙️ Web開発（アプリ）
- ユーザーが操作し、データが「動く・保存される・計算される」のが目的
- 道具のようなもの
- 例：ログイン機能、予約システム、計算ツール、社内PDF処理ツール
- 技術：HTML/CSS に加えて フレームワーク・DB・サーバー が関わってくる
🧰 フレームワーク＝"便利な土台セット"です
アプリをゼロから作るのは難易度が高すぎるので、先人たちが用意してくれた"土台・便利な部品の詰め合わせセット"のことをフレームワーク（React、Vue など）と呼びます。
難しい中身は覚えなくてOK。受講生のみなさんは「AIが裏でそういう便利な土台を使ってくれているんだな」と知っておくだけで十分です。
動画（前半）— 3本
サムネイルをクリックすると、このページ内で再生が始まります（Facadeパターン）。
💡 今日のキーツール2選
Web"開発"を前に進めるうえで、押さえておきたいAIコーディングツールを2つ紹介します。無理に使い始める必要はありません。「こういう立ち位置のツールなんだ」と地図に入れておくだけでOKです。
Bolt.new
初心者でも ブラウザ上でプロンプトを打つだけ で、一気にWebアプリ（フレームワークを使った本格的なもの）を作ってデプロイまでできる"魔法の最新AIツール"。Web開発のハードルを下げる救世主として、まず試してみてほしい1本です。
デメリット注意：強力な反面、無料だと数回のやり取りですぐに制限（ガス欠）にかかります。課金しても割とすぐに上限が来るため、長時間の開発には向いていません。
公式サイト
GitHub Copilot
主にプロのエンジニアが VS Code などのエディタに組み込んで使うコード自動補完AI。「プロの現場ではこういうツールが使われているんだ」という紹介にとどめてOK。受講生が無理に使う必要はありません。
公式サイト後半は「作ってみる・公開してみる」の体験編
後半では、Claude などのAIで 企画 → 設計 → 実装 → 公開 の一連を体験します。
完璧にこなす必要はありません。動画を見て「こんな世界があるんだ」と掴めればOK。Step 3 の GAS 公開だけは手を動かしてみるのが今日のおすすめです。
動画（後半）— 3本
サムネイルをクリックすると、このページ内で再生が始まります。動画ごとに下のカードで要点を補足しています。
🎬 人間の役割は"AIディレクター"
Claude などのAIを使って「企画 → 設計 → 実装 → レビュー」という一連のソフトウェア開発プロセスを体験します。
ここで大事なのは AIに丸投げしない こと。人間が『AIディレクター』として要件を定義し、指揮を執ることで、狙い通りのアウトプットに近づきます。
🤖 Dify：最強のAIアプリ開発ツール
今大注目の AIエージェント構築プラットフォーム。単なるチャットAIではなく、複数のAIモデルや外部ツール（検索API など）を組み合わせて、自社専用の"AIアプリ"をノーコードで作れる のが特徴。
Bolt.new が"Webアプリを作るAI"なら、Dify は"AIを部品にして組み立てるAI"です。
🔐 GAS なら"社内限定"で無料公開できる
GAS（Google Apps Script）のうれしいところ
社内向けのちょっとした便利ツール（今回提供する PDF分割結合ツール など）を、無料で、かつ Googleアカウントの認証に守られた状態で社内限定公開 するのに最適なのが GAS です。
AIに公開手順を聞く
下のプロンプトをコピーして、お好きなAI（ChatGPT / Claude / Gemini）に送ってください。
このHTMLコードをGAS上に公開するための手順を詳しく教えてください。
ChatGPT
Claude
GeminiAIの手順通りにGASで公開する
script.google.com を開き、AIが返してくれた手順どおりに「新しいプロジェクト」→HTMLファイル作成→「デプロイ」と進めます。
⚠️ 公開範囲を必ず「自分のみ」または「組織内のみ」に
GAS の公開設定時、「アクセスできるユーザー」を 自分のみ または 組織内のみ に設定してください。
「全員（匿名ユーザー含む）」を選ぶと、URLを知っている誰でもアクセスできてしまい、情報漏洩リスクがあります。必ず社内限定で公開しましょう。
TODAY's MISSION
今日までに学んだAIツールを総動員して、自分の業務に役立つ1作を作り、Padlet に投稿しましょう。
🎯 実習：自分の業務に役立つものを1つ作る
集大成アウトプット
今まで学んだツール（Manus / Bolt.new / Cursor / NotebookLM / Gemini Canvas / Antigravity / Dify など）を総動員して、自分の業務に役立つ「アプリ」または「Webサイト」を作成しましょう。
完璧でなくて大丈夫。Day 13 の成果発表に向けた"第一稿"を出すのが今日のゴールです。
📌 作ったものはここにシェア
【DX】社員教育とAIコース 課題シェアボード（Padlet）
※ 初回は Padlet の新規アカウント登録が必要です（Google アカウントで即登録可）
今日のミッションリスト
-
STEP 01: Web制作とWeb開発の違いを自分の言葉で説明できる
「見せる／動かす・保存する」「パンフレット／道具」など、例え話で他人に説明できればチェック。
-
STEP 02: フレームワーク＝「便利な土台セット」と理解した
React・Vue などの名前を覚える必要はなし。「AIが裏で使ってくれる便利な土台」という感覚が掴めればOK。
-
STEP 03: Bolt.new / GitHub Copilot の位置づけを掴んだ
Bolt.new＝初心者救世主、GitHub Copilot＝プロ向け補完AI、と区別できればチェック。
-
STEP 04: GAS で公開する手順をAIに聞いて試した（または動画で確認した）
AIに「このHTMLをGASで公開する手順は？」と聞いて、社内限定で公開する流れをイメージできればチェック。
-
STEP 05: Padlet に作品を1つ投稿した（Day 13 成果発表の第一稿）
完璧じゃなくてOK。Padlet に第一稿を出したら今日は100点満点です。
次のステップ（Day 11）
次回 Day 11 からは、今日触れた「アプリ開発」の世界に本格的に踏み込みます。今日掴んだ「制作と開発の違い」の感覚が、そのまま活きてきます。