コスゲ タツヤ
- 埼玉県生まれ・湘南在住
- 本業はエンジニアという職業
- 長年教育業に携わり、講師・学生・スタッフと異なる立場で28の教育現場を経験
- 7個くらいの仕事を今してる
- THE COACH 応用A・Bコース修了（2023）
講義のルールと注意点・1
- Google Meet に接続 — 資料共有・チャット質問に使います
- イヤホンを持参 — Meet の音声用。ハウリング防止のため必須
- カメラはON・名前は「学籍番号＋名前」に設定 — 出席確認は Meet の参加状況で取ります
講義のルールと注意点・2
この講義はPhaseによって準備するものが違います。
Phase 1 では VSCode が中心。教室に着いたら、以下の準備をお願いします。
- 配布素材をダウンロード （前日夜を目処にポータルページにアップしています）
- VSCode に読み込み（フォルダを開く）
- Google AI Studio と ポータルページをブラウザで開いておく
配布素材を VSCode × Live Server で開く
algorithm2026フォルダがデスクトップにあることを確認（ない場合は作成）- 配布素材をダウンロード →
algorithm2026の中で解凍 - VSCode で 「フォルダを開く」→ 解凍した
02_20260416_dataを読み込み lesson/index.htmlを右クリック →「Open with Live Server」- Chrome が立ち上がれば OK
フォルダ構成
algorithm2026/
└── 02_20260416_data/ — （4/16用）
├── lesson/ — 授業で使う
│ ├── index.html
│ └── style.css
└── assignment/ — 課題用
├── index.html
├── style.css
└── README.md※ Live Server 拡張機能が未インストール / うまく開かない場合はチューターに声をかけてください
ワーク① — テキストを人間が見やすい形にしてみよう
lesson/index.htmlの中に書かれたぐちゃぐちゃなテキストを、タグは使わずに、人間が読みやすい形に整えてみましょう。
目安時間 — 10分
ここはあえて、AIは使わずに！できたら、スクショしておいてください！
周りの人と見せ合ってみよう
- 同じテキストなのに、整え方は人それぞれだったはず
- でも共通してるのは — 「塊」と「順番」と「階層」を作ったこと
- これが"構造化する"ということ
- スクショした画像をMeetのチャットに投稿してみよう
構造化力、効きます
仕事のコミュニケーションは、ほぼテキスト。
Slack、メール、議事録、提案書、ドキュメント —
「何の話か」「結論は何か」「判断してほしいのはどこか」が
すぐ分かる文章を書けます！目指せそんな人！
参考：石倉秀明『THE FORMAT — "伝わる文章"には「型」がある』
https://www.amazon.co.jp/dp/4763140183
実は — テクノロジーの世界も、基本はテキスト
普段見ている画面の裏側は、ほぼ全部テキストで動いています。
- Webページ — HTML（テキスト）
- アプリ同士の通信 — JSON / API（テキスト）
- プログラム — ソースコード（テキスト）
- AIへの指示 — プロンプト（テキスト）
たとえば、このページの裏側
見えている画面
- パスポート
- 航空券
- クレジットカード
裏側のソース
<h1>旅行の持ち物リスト</h1>
<p>海外旅行に行くときに
忘れがちなものをまとめました。</p>
<ul>
<li>パスポート</li>
<li>航空券</li>
<li>クレジットカード</li>
</ul>画面の裏では、常にテキストで情報が流れています
Webページを読んでいるのは人間だけじゃない
- 人間 — 見た目で意味を判断する
- 検索エンジン — 見出し・本文の構造から重要語を拾う
- スクリーンリーダー — 視覚障がいのある人に構造を音声で伝える
- AI — ページを解析・要約・操作する（ChatGPT, Claude, Gemini など）
共通点 — みんな「構造」で意味を読み取ろうとしている
AI検索（ベクトル検索）にもマークアップは効く
ChatGPTやGeminiが社内資料やWebを検索して答えるとき、裏では「ベクトル検索」という仕組みが動いています。
- チャンク分割 — 長文を意味のかたまりで切る。
<h2>で切れると答えが欠けない - メタデータ抽出 —
<h1>＝タイトル、<article>＝本文として扱える - 検索結果の引用 — 「どの見出しから取ってきたか」を返せる
コンピューターに「タグ」で意味を教える → これがHTML
HTML = HyperText Markup Language
<h1>カフェバイト引き継ぎメモ</h1>
<p>お疲れさまです。来週からシフトに入る人向けのメモです。</p>
<h2>開店準備</h2>タグで囲むことで「これは見出し」「これは段落」と伝えられます
人間は視覚で判断、コンピューターはタグで判断
人間向け — 記号や余白で伝える
お疲れさまです。来週から シフトに入る人向けのメモです。
【開店準備】
・コーヒーマシンの電源（最優先）
・レジを開けて釣り銭確認
・ミルクの在庫チェック
コンピューター向け — タグで伝える
<h1>カフェバイト引き継ぎメモ</h1>
<p>お疲れさまです。来週から
シフトに入る人向けのメモです。</p>
<h2>開店準備</h2>
<ol>
<li><strong>コーヒーマシンの電源</strong></li>
<li>レジを開けて釣り銭確認</li>
<li>ミルクの在庫チェック</li>
</ol>同じ「構造化」でも、相手が違えば表現手段が異なります
HTMLの基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
ここに本文を書く
</body>
</html>よく使うタグ一覧
| タグ | 意味 |
|---|---|
<h1>〜<h6> |
見出し（大 → 小） |
<p> |
段落（本文のひとかたまり） |
<ul> + <li> |
順番なしリスト（箇条書き） |
<ol> + <li> |
順番ありリスト（手順など） |
<strong> |
重要な部分の強調 |
リストは <ul>/<ol> の中に <li> を入れて使います
<ul>
<li>パスポート</li>
<li>航空券</li>
</ul>
<p>
電源は
<strong>最優先</strong>
で入れる
</p>タグの入れ子構造
<body>
├ <h1>カフェバイト引き継ぎメモ</h1>
├ <p>お疲れさまです...</p>
├ <h2>開店準備</h2>
└ <ol>
├ <li>コーヒーマシンの電源</li>
├ <li>レジを開けて釣り銭確認</li>
└ <li>ミルクの在庫チェック</li>
</ol>
</body>タグの中にタグを入れる → 構造がツリー状になる
ワーク② — カフェメモ全体をHTML化
ワーク①で自分が記号で整えた構造を、HTMLタグに翻訳しましょう。
使うファイル — lesson/index.html
（もとの <pre> ブロックは消して、その位置に HTML を書いていきます。）
- タイトルは
<h1>、セクションは<h2> - 手順の順番が大事なら
<ol>、順番不問なら<ul> - 「最優先」「必ず」など強調は
<strong>で囲む - サブ項目は入れ子にしてOK
目安 — 15分 / Live Server で表示を見ながら進めよう
同じAIに、2パターン投げる
-
プレーン版（ワーク①で自分が整える前の、元のぐちゃぐちゃテキスト）を貼って
「目次を作ってください」と指示 → 結果をスクショ -
HTML版（ワーク②で自分がマークアップしたコード）を貼って同じ指示
→ 結果をスクショ - 2つの出力を並べて比較Meetのチャットにも画像のスクショを投稿してみよう！
※ チャットのスレッドは別々に分けてください！同じスレッドで続けると、前のやりとりに引きずられて純粋な比較になりません
何が変わった？
- 原文で強調したかったこと、どちらの出力で残ってる？
- AIが勝手に足した情報、入っていない？
- 項目の順番や階層、意図通り？
- プレーン版のとき、AIは何を推測して補った？
プレーンで渡すと、AIは勝手に構造を推測する。
つまり — 構造化は、AIに"勝手に考えさせない"ための技術
まずやってみよう — あるメッセージを3秒だけ見てもらいます
ある画像を3秒間表示します。
- メモは取らない
- 普通に眺めてください
- 3秒経ったら閉じます
今のメッセージ、何を言いたかった？
自分の言葉で書いてみよう
どうして、その答えだと判断した？
- 大きい文字があったから？
- 目立つ色だったから？
- 中央にあったから？
だからCSSが生まれた
HTMLだけだと、見出しも本文も "とりあえず表示" されるだけ。
でも人は見た目で判断するから、見た目で人に深く意図を伝える道具が必要になった。
HTML
人間・AI・検索エンジン・スクリーンリーダー...etc
多くの読み手に、意図の構造を届ける
CSS
対象は人間に絞られる。
その代わり、印象・感情まで深く届く
CSS = Cascading Style Sheets
HTMLとCSSは、別ファイルに分けて書く
02_20260416_data/
├── lesson/
│ ├── index.html
│ └── style.css
└── assignment/
├── index.html
└── style.cssindex.html — 構造を書くファイル
style.css — 見た目を書くファイル
今回は、授業内素材は lesson/、課題は assignment/ と役割ごとに分けています
HTMLから CSS を <link> で呼び出す
INDEX.HTML
<head>
<meta charset="UTF-8">
<title>カフェメモ</title>
<link rel="stylesheet" href="style.css">
</head>STYLE.CSS
h1 {
color: #2D4084;
font-size: 28px;
}<link> が style.css を読み込む矢印の役割
CSSの基本文法
考え方
どのタグに {
何を: どうする;
}- どのタグに → セレクタ
- 何を → プロパティ
- どうする → 値
実際のCSS
h1 {
color: #2D4084;
font-size: 28px;
}h1 タグの色を紺に、
文字サイズを 28px にする、という意味
HTMLタグは、画面上では「四角の箱」になっている
見出しも、段落も、リストも、ぜんぶ見えない箱に入っている。
CSSはこの箱の色・サイズ・余白を操作する言語。
- content — 中身の文字や画像
- padding — 中身と箱の内側の余白
- border — 箱のふち
- margin — 箱と箱の間の余白
最初に覚えるのは、この5つ
| プロパティ | 役割 | 例 |
|---|---|---|
color |
文字色 | color: #2D4084; |
background |
背景色 | background: #f7f8fc; |
font-size |
文字サイズ | font-size: 20px; |
margin |
外側の余白 | margin: 16px; |
padding |
内側の余白 | padding: 12px; |
同じカフェメモ、CSSを変えるだけで印象が変わる
A — ポップでカラフル
カフェバイト♡
コーヒーマシン電源入れてね☆
新人バイト — 「ノリはいい？」
B — 業務マニュアル風
カフェバイト引き継ぎメモ
コーヒーマシンの電源を最優先で入れる
新人バイト — ちゃんとしてそう
やること — style.cssに書いて カフェメモの見た目をデザイン
HTMLだけの状態
- コーヒーマシンの電源を最優先で入れる
- レジを開けて釣り銭を確認
- ミルクの在庫チェック
HTML + CSS
- コーヒーマシンの電源を最優先で入れる
- レジを開けて釣り銭を確認
- ミルクの在庫チェック
AIを活用していきましょう!
Step 1 — まず「どう見せたいか」を書く
AIに指示を出すための材料になります！
- 誰向け？（例 — バイト初日の新人）
- どんな印象にしたい？（例 — 落ち着いた、読みやすい）
- 具体的なキーワード（例 — 紺系の色、余白多め、重要箇所は太字）
思いつかない人は次のスライドのテンプレをそのまま使ってOKですよ！
Step 2 — style.css の雛形をAIと一緒に書く
lesson/index.htmlを開き、全体をコピー（Cmd+A → Cmd+C）- Google AI Studio を開き、右の指示テンプレを貼りつけ
[HTMLを貼り付け]の箇所に、コピーしたHTMLを貼る- 送信 → 返ってきた CSSのコード部分をコピー
lesson/style.cssを開いて、全部消して貼り付け → 保存- ブラウザ（Live Server）で表示確認
指示テンプレ
以下のHTMLに対して、
〇〇な印象になるCSSを
style.css として書いてください。
印象 — （Step 1で書いた言葉）
読み手 — （Step 1で書いた言葉）
[HTMLを貼り付け]Step 3 — style.css を自分で書き換える
書き換えは 2方向 ある。両方やってみよう。
A — デザインの場所を変える（セレクタ）
/* before */
h1 { color: #2D4084; }
/* after — h1ではなくh2の見た目を変える */
h2 { color: #2D4084; }/* strong にだけ色をつける */
strong { color: #c0392b; }B — デザインを変える（プロパティ）
/* 色を変える */
h1 { color: #2D4084; }
↓
h1 { color: #c0392b; }/* 文字サイズを変える */
p { font-size: 16px; }
↓
p { font-size: 20px; }コツ — 一度に1箇所だけ変えて保存。ブラウザの変化を目で見る。Cmd+Zで戻せます！
Step1が思いつかない人は、これをベースに
自分で決められるなら、自分の意図で進めてOKです！
迷ったら下のどちらかをそのまま使っても、少しアレンジしてもいいですよ！
テンプレA
読み手 — バイト初日の新人
テンプレB
角丸で堅苦しくない
読み手 — 初めてのアルバイト経験者
できあがったものを、見直してみましょう
画面のできあがりと、Step 1で書いた「意図メモ」を見比べてみてください。
- AIが最初に出したCSSは、意図どおりでしたか？ ズレていたのはどこですか？
- 自分で値を書き換えたとき、どこを変えたら何が変わりましたか？
- もう一度やるなら、最初の指示をどう書き直しますか？
でも「何を頼むか」を決めるのは、自分の意図を言葉にできる人だけです。
オリエン動画の内容をHTMLとCSSでWebページにする
参照 — 第1回オリエンの動画 ・ orientation_text.md（配布済の文字起こしテキスト）
- オリエン動画の内容を理解し、僕がどんな意図で / 何を強調して伝えていたかを読み取る
- 配布テキストの中身を
02_20260416_data/assignment/index.htmlに貼り付け、HTMLでマークアップする - CSS でデザインを変更し、見た目でも意図が伝わるようにする
作業は 02_20260416_data/assignment/ フォルダの中で進めます。
詳しくは assignment/README.md を読んでください。
課題の補足ポイント
- README.mdに色々書いたから見てね！
- 今日紹介したHTMLタグを使えばOKです！自分で調べたタグを使ってももちろんいいですよ！
- 聞きたいことがあれば質問OK！ご連絡くださいね！
提出物
assignment/ フォルダの中に、以下を揃えて 02_20260416フォルダごと提出してください。
assignment/index.htmlassignment/style.css-
assignment/memo.md（解釈メモ 200字以上）- 動画から、どんな意図を読み取ったか
- それを、HTMLとCSSのどこに反映したか
- AIにどんな指示・相談を出したか
課題の提出場所
https://lecture-cms.tatsuyakosuge.com/submit
Zipデータにして添付・提出してくださいね！