デジタルメディア概論

第2回 — Notion × AI Studio × 文字起こし

2026.04.22

今日のゴール

動画の中身を、Notionに「自分のページ」として残す

  • 動画 + 文字起こしテキスト を素材に、Notionページを1枚作る
  • スクショ・AI要約・自分の言葉、全部使ってOK
  • 同じ素材なのに、できあがりは人それぞれ違う —— その違いを最後に見比べる

まずは準備

準備

開いておくもの

  1. 授業ポータルページ(今日の素材がここに)
  2. Notion(前回作った「デジタルメディア(水曜)」ページ)
  3. Google AI Studioaistudio.google.com(学校アカウントでログイン)

※ ログインできない人・前回のページが見つからない人は手を挙げてください。

AIをさらに使いこなす

テキストだけじゃない。画像も動画も読めます。

ワーク

1. 画像を読ませる

  1. AI Studio の入力欄、左下の +ボタン から画像をアップロード
  2. Notionの「デジタルメディア(水曜)」 のページをスクショしてみる。
  3. 02_20260422」のページを作りたいのでページの作り方を教えて、と聞いてみよう!

確かめてみよう!

AI Studioのアップロードボタン
ワーク

2. 動画を読ませる

  1. 配布データにある hamster.mp4 をダウンロード
  2. +ボタン から、その動画をアップロード
  3. この動画を要約して」と聞いてみる
hamster.mp4のプレビュー
ワーク

3. URLの先を読ませる

  1. AI Studio に https://www.ydc.ac.jp/ を貼り付ける
  2. このページの内容を要約して」と聞いてみる
  3. 自分の学校のサイトをちゃんと読めているか確認してみよう

画像・動画・URL — AI Studio はいろんな形式の情報を受け取れる。

ワーク

4. 検索と組み合わせる

  1. AI Studio の左下 Tools を開く
  2. 「Grounding with Google Search」 を ON にする
  3. 横浜デザイン学院について教えて」と聞いてみる
  4. さっきURLを直接渡したときの回答と、異なるところはありますか?

同じ質問でも、情報の渡し方で答えが変わるか、確かめてみよう!

気づいたこと

色々なものが読める

テキスト以外も「読んで」答えてくれる。(Geminiは画像・動画の扱いは得意)

無料で使える

ブラウザでログインするだけ。
特別な設定は何もいらない。

じゃあ、この動画も渡せる?

hamsterと同じやり方で、今日扱う動画も試してみよう

ワーク

mission.mp4 をアップしてみる

  1. 授業ポータルから mission.mp4 をダウンロード
  2. AI Studio の +ボタン から mission.mp4 をアップロード
  3. そのまま待ってみる

全員一斉にアップすると、学校のWi-Fiはさらに重くなる。

今日のミッション

ミッション

「動画内容」をNotionにまとめる

配布した動画(mission.mp4)の内容を、動画と文字起こしを見ながら、自分のNotionページに整理してもらいます。

AIをうまく使いこなしながら、正しい情報を、人に見やすい状態に整理できるかのトレーニングをしてみましょう!

ミッション

手順

  1. 配布データから 文字起こしテキスト を確認
  2. AI Studio にテキストを貼って要約させる
  3. 動画(mission.mp4)を見る(約7分)— 要約と同じことを言っている?
  4. 要約と動画を見比べて、おかしいところがないか確認する
  5. 文字起こしをNotionにコピペし、話者が大事にしてたところが伝わるように改行・太字・文字色をつける等で整える
  6. 見出しで構造化 — 強調してた話題ほど大きく、軽く触れた部分は短く

完成イメージ

第1回のまとめ — 自分用
2026.04.22 / コスゲ
テーマ — AIを使ったものづくり
  • AIに使われるのではなく、使いこなす側になる
  • 毎週Notionに記録を残す
気づいたこと
  • 「自分の物差しを持つ」が大事 ← 一番響いた

こんなふうに —

  • 見出しで構造化されている
  • スクショや図が入っている
  • 講師の言葉+自分の言葉が混ざっている

まず、AIに要約させてみる

動画を見る前に、テキストだけでどこまで分かるか試す

ワーク(5分)

文字起こしテキストをAIに渡す

  1. 配布された文字起こしテキストを開く
  2. AI Studio にテキストを貼り付けて「要約して」と聞く
  3. 出てきた要約を Notionに貼り付けておく

この要約が正しいかどうかは、まだ分からない。次に動画で確かめます。

動画視聴(約7分)

さっきの要約と同じことを言ってる?

ルール

動画の見方 — ただ聞き流さないこと!

「先生は、何を一番伝えたかったか?」

手元のAIの要約と照らし合わせながら、
動画の話者は、どこに力を入れて、何を繰り返していたのか?を思い出し、
要約と一致しているのかを確認しましょう!

  • 要約と動画で力の入れ方が違うところに注目
  • 気になったらNotionにキーワードだけメモ
  • スクショは Cmd+Shift+4 → 範囲指定。撮ったらNotionにドラッグ

AI要約と動画、言ってることは同じ?

要約だけでは見えなかったものを書き出す

ワーク(10分)

ズレを書き出す

  • AIの要約と動画で、違うところはあった?
  • 動画では強調してたのに、要約では軽く扱われてたところは?
  • 逆に、要約には書いてあるのに動画ではほとんど触れてなかったところは?
  • 気づいたことをNotionに箇条書き

話者の意図で構造を作る

「大事にしてたこと」を、見た目で表現する

ワーク(10分)

文字起こしを、意図ベースで整える

ただ見やすくするのではなく、話者が何を大事にしてたかが伝わる構造にする。

  1. 配布の文字起こしを Notionにコピペ
  2. 繰り返し強調してた話題は大きく区切る。さらっと流してた部分は短くまとめる
  3. 改行・記号・太字(Cmd+B)・色付け等で「ここが核心」と分かる見た目にする

まだ見出しは使わない。次のステップで学びます。

「見出し」って、なに?

文章の地図を描く道具です

見出しの正体

見出し = 文章の塊につける「ラベル」。読まなくても、何が書いてあるか一目でわかる。

見出しなし

今日は朝にカフェに行ってアイスコーヒーを飲んで、それから本屋でデザインの本を買って、夜は友達と映画を見ました。映画はとても面白かったです。

見出しあり

今日のできごと
朝 — カフェ

アイスコーヒー

昼 — 本屋

デザインの本を購入

夜 — 映画

面白かった

同じ内容でも、見出しがあると「探せる」「読み飛ばせる」「あとで戻れる」。

ワーク(10分)

Notion で見出しを作ってみる

  1. Notionで /heading と打ってみる → 大・中・小の3種類が出る
  2. または、行頭で # + スペース(H1)、##(H2)、###(H3)
  3. テスト用に、自分のページに H1 / H2 / H3 を1つずつ作ってみる
  4. 大きさの違い・色の違いを確認

大事なところほど大きい見出しにする、というだけのルール。

作り込み開始

整えた文字起こしに、見出しと他のブロックで構造を入れる

ワーク(10分)

見出しを使って、構造化する

  • さっき改行で区切った塊に、H2 や H3 の見出しをつける
  • 箇条書きにできるところは /bullet または - + スペース でリスト化
  • 引用したい部分は /quote引用ブロック
  • 長くなる注釈は /toggle折りたたみ

2コマ目で続きをやります。今は途中でOK。

休憩

動画ミッション — 仕上げ

15分でページを完成させる

ワーク(15分)

「完成」の条件

  • 文字起こし全文が、見出し(H2 / H3)で区切られている
  • 話者が強調していた部分が、構造で目立っている
  • 箇条書き・引用ブロック・太字が使われている
  • スクショが1枚以上貼られている
  • ページの一番上から下まで、"読み返せる" 状態になっている

完成したら手を挙げてください。講師が見にいきます。

みんなで「職業図鑑」を作る

1つのNotionページに、全員で違う職業を書き込む

ワーク

やること

下のリンクから講師のNotionページを開いてください。8つの職業の子ページが用意してあるので、1人1つ選んで中身を埋めてください。

職業図鑑ページを開く

  • AIは必ず使う — AI Studioで調べる、要約させる、何でもOK
  • AIだけで終わらせない — 求人サイト・企業の公式ページなど一次情報で必ず照合する
  • 子ページに書いてある枠を埋めていく形式
ワーク

用意してある8つの職業

  1. Webエンジニア / Webデザイナー
  2. グラフィックデザイナー / 映像編集
  3. UXリサーチャー
  4. AIエンジニア / プロンプトエンジニア
  1. プロジェクトマネージャー(PM)
  2. マーケティング / SNS運用
  3. 教育・研修の設計
  4. バックオフィスDX担当

この中から選んでもいいし、自分で別の職業を調べてもOK。被らないようにしよう。

ワーク

各子ページに入っている枠

  1. この仕事は何をする? — 具体的な業務内容
  2. 求められるスキル・ツール — 何ができないといけないか
  3. 働き方・条件 — 給料の目安、リモート/出社、フリーランスか会社員か
  4. 求人を1つ見つけて貼る — 実際の求人URLとそこから読み取れること
  5. AIの回答と実際で違ったところ — 照合結果

この枠を全部埋めたら完成。

ワーク

手順

  1. 職業図鑑ページをリンクから開く
  2. 調べたい職業の子ページを開く(被ったら別のを選ぶ)
  3. AI Studioで調べる(検索グラウンディングON推奨)
  4. 求人サイトや企業ページなどの一次情報で照合する
  5. 子ページの5つの枠を埋めていく