Course Home
Day 7 Progress0%
DAY 07

WEBサイト制作の基礎知識

Webサイトの仕組みから制作技術、専門用語まで。
AIツールでサイトを作るための「共通言語」を身につけます。

本日の研修ねらい

「AIで作る」ための共通言語を手に入れる

今日の内容は「エンジニアを目指す」ためのものではありません。
AIにWebサイトを作ってもらうとき、「ここのCSSを直して」「CTAボタンを追加して」と的確に指示できるようになるための最低限の共通言語を身につけることが目標です。

前半：Web制作の基礎

Webサイトの仕組み、HTML/CSS/JSの役割、専門用語15選を学び、フラッシュカードクイズで知識を定着させます。

後半：AIでサイト制作

Gemini Canvas、Readdy、Wix AIなどのノーコードツールを使い、実際にWebサイトを作ってみます。

コース目標

AI活用によるWEBサイト制作またはアプリ開発をする

研修目的：Webサイトの構造と制作手順を理解し、非エンジニアでも扱える基礎を固め、AI活用による制作準備を整える。

まずはここから！Webサイトの超基礎知識

そもそもWebサイトはどうやって表示されているの？

あなたが毎日見ているWebサイトは、実は「インターネット上の別のコンピュータ（サーバー）」に入っているファイルです。
ブラウザ（ChromeやSafari）がそのファイルをダウンロードして、画面に表示しています。
家にたとえると、サーバー＝家（データの保管場所）、ドメイン＝住所（URLの一部）、ブラウザ＝それを見に行く人です。

サーバー

Webサイトのファイルを保管し、24時間いつでもアクセスできるようにするコンピュータ。レンタルサーバーを契約して借りるのが一般的。

ドメイン

「example.com」のようなインターネット上の住所。人間が読みやすいように付けたIPアドレスの別名。

ブラウザ

サーバーからファイルを受け取って、私たちが見られる形に変換（レンダリング）して画面に表示するソフト。

動画1：ホームページ制作の知識・スキルの全体像

Web制作の全体像

Web制作に必要なスキルの地図

この動画で学べること

ホームページ制作に必要な知識とスキルの全体像を、図を使って分かりやすく解説しています。「何を」「どの順番で」学べばいいかの見通しが立ちます。
📄 動画で使われていた全体像の図（Googleドライブ）

ポイント整理

今日覚えるべき3つの視点

  • ユーザー（閲覧者）の視点： 使いやすい？快適？スマホでちゃんと見える？
  • 開発者（作る側）の視点： どの技術を使って作る？誰がメンテナンスする？
  • 検索エンジンの視点： Googleにちゃんと見つけてもらえる構造になっている？

動画2：3つの基本技術と+1のしくみ

3つの基本技術

家づくりに例えて理解しよう

Webサイトを構成する技術は、「家づくり」に例えるとスッと理解できます。

HTML = 骨組み・柱

「ここが見出し」「ここがリンク」「ここが画像」といった情報の構造を定義する言語。家で言えば柱や壁の骨組みにあたります。デザインは一切関係なく、とにかく「何がどこにあるか」を決めます。

CSS = 壁紙・外装

文字の色、背景色、余白、レイアウトなど見た目・デザインを整える言語。同じHTMLでもCSSを変えるだけでまったく違う見た目のサイトになります。家のリフォーム（内装工事）のイメージ。

JavaScript = 水道・電気・自動ドア

ボタンを押したらメニューが開く、入力ミスをその場で教えてくれるなど、動きや反応を加える言語。家で言えば水道・電気・自動ドアのような「使い勝手」を担当します。

CMS = セルフリフォームキット

WordPress等のCMS（コンテンツ管理システム）を使えば、コードを書かなくてもブラウザ上でサイトの内容を更新できます。業者（エンジニア）を呼ばなくても自分で家具を配置替えできる仕組みです。

動画3：知っておくべき専門用語15選

専門用語15選

用語がわかれば会話ができる

「分からない用語を分からないまま放置する」のが一番まずい対応です。以下の15個をざっと読むだけでも、AIへの指示やクライアントとの会話がグッとスムーズになります。

1. ファーストビュー

ページを開いた時に最初に目に入る領域。サイトの「顔」。

2. ワイヤーフレーム

デザイン前の設計図。画像や文章の配置を線画で整理したもの。

3. デザインカンプ

最終的な見た目の完成イメージ図。これをもとにコーディングする。

4. レスポンシブデザイン

PC・タブレット・スマホ、どの画面サイズでも最適に表示される設計手法。

5. モバイルファースト

閲覧者の大半がスマホなら、まずスマホ版からデザインする考え方。

6. トンマナ

トーン＆マナーの略。サイト全体の色・書体・雰囲気の一貫性。

7. CV（コンバージョン）

問い合わせや購入など、サイトの最終目標となるユーザーの行動。

8. CVR

コンバージョンレート。アクセスに対するCVの割合。

9. CTA

Call To Action。「今すぐ申し込む」等、行動を促すボタンや文言。

10. UU / PV

UU＝訪問した人数、PV＝見られたページ数。同じ人が5回見てもUU=1、PV=5。

11. ドメイン

「example.com」のようなインターネット上の住所。

12. サーバー

サイトのファイルを置く場所。24時間電源が入ったコンピュータ。

13. FTP

File Transfer Protocol。PCからサーバーへファイルを転送するルール。

14. Googleアナリティクス

サイト内でのユーザーの行動を分析するツール（店内の監視カメラ的な役割）。

15. サーチコンソール（サチコ）

どんな検索ワードで来たかを見るツール（お店の看板がどれだけ見られたかを分析）。

内容が難しかった方へ：動画おさらいパートナー

有志が作成した、Geminiの「カスタムGem」です。動画URLを送ると内容をわかりやすくまとめ、クイズ形式で復習をお手伝いしてくれます。
🔗 動画おさらいパートナーを開く

実習：フラッシュカードクイズで腕試し！

実習の目的と流れ

前半で学んだ動画の内容を「NotebookLM → Gemini Canvas」の流れでクイズアプリにしました。
実際にこの研修サイトの中で動くアプリです。まずは遊んでみてください！

この実習の「元ネタ」（どうやって作ったか？）

  1. NotebookLM に3本の動画URLをソースとして読み込ませた
  2. 「フラッシュカードのアプリを作りたいです。元になる問題と答えを100問作ってください」とプロンプトを投げた
  3. Gemini Canvas で出力されたデータを貼り付けてアプリ化した
  4. 完成版を「共有」→ 公開リンクを作成した → こちらが公開リンク

動画4：Gemini CanvasでWebサイトを作る

Gemini Canvas

AIに「作って」と言うだけでWebサイトができる

Gemini Canvasとは？

Geminiの「Canvas」機能を使うと、プロンプト（テキスト）を送るだけでHTMLのWebページを自動生成し、その場でプレビューすることができます。
さらに「思考モード」をONにすると、AIがより深く考えてから出力するため、クオリティが上がります。

「選択して質問」機能が便利！

プレビュー画面の右下にある「選択して質問」ボタンを使うと、ページの特定の部分（ヘッダーの文字、ボタンの色など）を選んで「ここだけ変えて」と直感的に修正指示が出せます。

動画5：Readdy（AIノーコードツール）

Readdy

プロンプトだけで本格サイトが完成

Readdy はプロンプトを入力するだけで、プロ並みのデザインのWebサイトを自動生成するAIノーコードツールです。

動画内のプロンプト例

参考：こんな指示でサイトが出来上がります

AIアートのポートフォリオサイト、作品展示欄と仕事依頼(AIアート制作、AI映像制作、MV制作、AI音楽制作) の問い合わせが出来る ポップでゆめかわいいデザインで遊び心のあるHPを作って
添付の画像のカラーを使用しヘッダーとフッターに統一感のある配色を設定し、ブランドイメージを強化します。デザイン教室のホームページトップページでは、ヒーローセクションにキャッチコピーとCTAボタンを配置し、ユーザー導線を明確にします。さらに、スクロールで紹介セクションへ自然に誘導できるビジュアルとテキスト配置を整えます。

動画6：Coolors（超高速カラーパレットジェネレーター）

Coolors

配色で「素人っぽさ」が一瞬で消える

なぜ配色が大事なのか？

プロのWebサイトと素人のサイトの最大の違いは、実は「配色の統一感」です。たった3〜5色のカラーパレットを決めて守るだけで、見た目の印象が劇的に変わります。
🎨 Coolorsを開く — スペースキーを押すだけで美しい配色候補が次々生成されます。

動画7：ワイヤーフレーム作成とWix AI

ワイヤーフレーム

設計図を描いてから作ろう

ワイヤーフレームとは？

家で言えば「間取り図」

ワイヤーフレームとは、Webサイトを作る前に「どこに何を置くか」を線画で整理した設計書です。
家を建てる前に間取り図を描くのと同じで、いきなり色やデザインに入らず、まず「構造」を決めるのがプロの流れです。
AIにWebサイトを作らせる時も、ワイヤーフレームを一緒に伝えると圧倒的に精度が上がります。

Wix AI

AIの質問に答えるだけでプロ級のWebサイトが自動生成されるサービス。
ワイヤーフレーム用プロンプト集

AIにワイヤーフレームを作らせるためのプロンプトテンプレート。

実習：GeminiのCanvas機能でWebサイトを作ってみよう

実習の目的

AIでWEBサイトを作る基本を覚える（参考動画 3:30〜）

① Geminiを開く

gemini.google.com にアクセスします。

② ツールから「Canvas」を選ぶ

左下のツール選択エリアから「Canvas」を選択します。

③ 思考モードに設定する

より精度の高い出力を得るために、思考モードをONにします。

④ プロンプトを送る

ビジネス英語が勉強できるwebサイトを作ってください

⑤ プレビューで確認する

生成されたコードがリアルタイムでプレビュー表示されます。

⑥ 改良する

右下の「選択して質問」ボタンを押し、任意の場所を選んで修正してみよう。
例）ヘッダーのサイト名を選んで、「English Lesson」という名前に変えてみよう。

TODAY's MISSION

Web制作の基礎知識を身につけ、AIでサイトを作る体験をしましょう。

CLEAR

📋 実習チェックリスト

  • STEP 01: HTML/CSS/JSの役割を理解する

    3つの技術が「家づくり」のどの部分に対応しているか説明できたらチェック！

  • STEP 02: フラッシュカードクイズに挑戦する

    前半のクイズアプリで、いずれかのカテゴリで3問以上マスターしたらチェック！

  • STEP 03: Gemini Canvasでサイトを生成する

    プロンプトを投げてWebサイトのプレビューが表示されたらチェック！

  • STEP 04: 生成されたサイトを「選択して質問」で改良する

    サイト名やボタンの色など、少なくとも1箇所を修正できたらチェック！