【第8回余談】Webって何でできてる？ — アンケートの裏側¶

※これは第8回「アンケート設計」の本題に入る前（または後）の 5分程度の余談 です。操作の話ではなく、「皆さんが毎日使っている Web の正体」を概念として知る話です。

なぜ今この話を？¶

これから皆さんは、アンケートを Google フォーム や Microsoft フォーム で作るかもしれません。これらは全部「Webアプリ」、つまり Web ページの一種です。

「アンケートを作る」前に、そもそも Web とは何か、Web ページの正体は何か を少しだけ知っておくと、世界の見え方が変わります。

1. WWW（World Wide Web）とは¶

インターネット上に置かれた、互いにリンクでつながった文書の集まり
「Web（クモの巣）」という名前は、リンクが網目状につながっている様子から
あなたが見ている画面は、世界のどこかのサーバーにある文書を、ブラウザが取り寄せて表示しているだけ

あなたのブラウザ  ──「このページちょうだい」──→  サーバー
あなたのブラウザ  ←──「はい、これです」（HTML）──  サーバー

2. Web ページの正体は「HTML」¶

Web ページは、見た目は華やかでも、中身はただの構造化されたテキスト（文字） です。それが HTML（HyperText Markup Language）。

例えば、こんな文章があるとします：

私の好きな食べ物・ラーメン・寿司

これを HTML で書くと：

<h2>私の好きな食べ物</h2>
<ul>
  <li>ラーメン</li>
  <li>寿司</li>
</ul>

<h2> = 見出し（heading）
<ul> = 箇条書きリスト（unordered list）
<li> = リストの項目（list item）

→ 第4回でやった「Word の見出し・段落」と同じ「構造化」の考え方が、Web の世界にもあります。タグで「ここは見出し」「ここはリスト」と意味づけしているだけ。

自分で確かめてみよう¶

どんな Web ページでも、右クリック →「ページのソースを表示」で、その HTML が見られます
「華やかなページも、中身はタグ付きのテキスト」を体感できます

2.5 なぜ「中身と見た目が分かれている」と強いのか（種まき）¶

Web が軽くて速くて、しかも AI と相性がいい のには理由があります。 中身（テキスト＝HTML）と見た目（飾り付け＝CSS）が、別々に分かれているからです。

分かれていると、こんないいことがあります：

軽い・速い：中身はただの文字なので、データが小さい
誰がどこを変えたか追える：文字の変更なので「差分」が見える（プログラマが使う Git の発想）
AI が読みやすい・直しやすい：AI に「ここ直して」と頼みやすい。 「大量のファイルを AI に一気に読ませて理解させる」みたいな芸当ができるのも、中身がプレーンな文字だから

逆に、Word / Excel / PowerPoint は…¶

.docx や .pptx は、中身（データ）と見た目（レイアウト）が1つのファイルにガッチリ固められています。

	Web（HTML＋CSS）	Office（.docx / .xlsx / .pptx）
中身と見た目	分かれている	固まっている（密結合）
AIとの相性	読みやすい・直しやすい	渡しにくい・直しにくい
変更の差分	追える	追いにくい
その結果	1ファイルで管理	「資料_最終_修正2_本当に最終.docx」が増殖

最後の行、心当たりありませんか？あれは皆さんがだらしないのではなく、 「中身と見た目が固まっていて、差分が追えない」というファイルの仕組みが生む現象です。

⚖️ ただし「固まっている」のは欠点だけではない¶

公平に言うと、Office の「見たまま作れる（中身と見た目が一体）」は 長所でもあります。

図やレイアウトを視覚的に直感でいじれる
プログラムを知らない人ともそのまま共有できる

だから「Office はダメ、Markdown が正義」ではありません。場面による選択です。速く確実に・AI と組んで・後から自動化したいなら「分けておく」方が強い。見た目を直感でいじりたい・非技術者と共有したいなら Office が便利。

今日からの Excel に向けて、一つだけ¶

これから皆さんは Excel を学びます。それは必要なスキルです。でも頭の隅に、「データと見た目は、分けて持っておくこともできる」 という発想だけ置いておいてください。

データをプレーンな形（テキスト・CSV・コード）で持っておくと、特定の会社の製品に縛られず、AI とも組みやすい。これが、道具に振り回されない一番の防御です。

この続き（「操作＝GUI」と「プレーンテキスト＝CLI」の話）は、後の回でもう少し詳しく扱います。

3. アンケートフォームも HTML¶

Google フォームや Microsoft フォームの「ラジオボタン」「チェックボックス」「自由記述欄」—— これらも全部 HTML の部品です。

<input type="radio"> 選択肢A
<input type="checkbox"> チェック項目
<textarea></textarea> 自由記述

→ 皆さんがフォームを作るとき、裏側ではこういう HTML が自動生成されています。 「フォームを作る」＝「HTML を書かずに、HTML を作っている」 ということ。

3.5 今日使う Colab も「Web アプリ」¶

今日、皆さんが開いている Google Colab（コラボ）も、実は Web の上で動いています。ここまでの話が、今まさに目の前で起きている例です。

👉 今日の Colab 演習ノートを開く

Colab とは何か¶

ブラウザの中で Python を動かせるサービス（Google が提供）
自分のPCに何もインストールしなくていい
計算は Google のサーバー上で行われ、結果がブラウザに返ってくる

あなたのブラウザ（Colab画面）
   │  「このコードを実行して」
   ↓
Google のサーバー（Python が動く場所）
   │  計算する
   ↓
あなたのブラウザに結果が返る

→ 第6回で「大きなExcelファイルが自分のPCだと重い、ブラウザ（クラウド）だと開ける」という話をしましたが、Colab はまさに「計算をクラウドに任せる」仕組みです。皆さんのPCの性能に関係なく、同じように動きます。

なぜ Colab を使うのか¶

アンケートの回答（Google フォーム → スプレッドシート）を、 そのまま Python で読み込んで分析できる
「フォームで集める（Web）」→「Colabで読む（Web）」→「分析する」が、 全部ブラウザの中で完結する
インストール不要なので、BYOD（自分のPC）でも環境の違いに悩まされない

これも「操作」より「概念」¶

Colab の使い方（セルの実行ボタンの押し方など）を覚える必要はありません。大事なのは、「ブラウザの中で、クラウドの計算力を借りて、データを扱える」 という仕組みを知っていることです。

4. 検索の仕組み（おまけ）¶

検索エンジン（Google等）は、世界中の Web ページを巡回して索引（インデックス）を作っている
あなたが検索すると、その索引から「関連しそうな順」に並べて返す
「上に出る = 正しい・信頼できる」ではない（広告や SEO 対策で順位は操作される）

5. AI 時代の「調べる」¶

ここ数年で、「調べる」のやり方が変わりつつあります。

旧	新
Google で検索 → リンクを開く → 自分で読んで判断	ChatGPT に質問 → AIが要約して答える
情報源（誰が書いたか）が見える	情報源が見えにくい（AIが混ぜて答える）
自分で信頼性を判断	AIの答えが正しいか、自分で検証する必要

→ アンケートを設計する前に「そのことは、もう誰かが調べているかも」と検索/AIで確認するのも大事なリテラシーです（一次データ・二次データの話）。

アンケート設計への接続¶

今日の本題（アンケート設計）に戻ると：

自分のテーマは、既に世の中にデータがあるか？（検索・AIで確認）
それでも自分で調べたいことを、フォーム（＝Webの仕組み）で集める
集めたデータを、次回以降 Excel で整理・分析する

「Web の正体を知る → フォームで自分のデータを作る → データを分析する」という流れの中に、皆さんは今います。

本資料の作成について¶

本資料は、担当教員（小野原）が生成AI「Claude」（Anthropic社）と協働して作成しました（2026年）。内容は教員が確認しています。誤りや違和感があればご指摘ください。

【第8回 余談】Webって何でできてる？ — アンケートの裏側¶