第3回 AIの種類と画像動画サイト作成

AIの種類

Webサイト型AI: ChatGPT、Gemini、Claudeなど
ローカルアプリ型AI: Codex、Antigravityなど
ローカルコマンド型AI: Codex CLIなど
専門分野系AI: 画像、動画、音楽などに特化したAI

役割の違い

画像づくりや軽い加工はChatGPTで行う
ファイル整理やブラウザ確認はCodexで行う
コマンド型AIは今回は説明だけにする
実写風動画や音楽は専門サービスで扱う

Webサイト型AI

画像づくり

ローカルアプリ型AI

ファイル整理
ブラウザ確認

ローカルコマンド型AI

説明だけ

専門分野系AI

動画や音楽

ChatGPTとCodexの違い

ChatGPT

会話もできるが、実は画像生成や加工が得意
チャットを切り替えると情報が抜けがち
欲しい素材を相談しながら画像生成するとよい

Codex

授業フォルダを見ながらファイルを扱う
作ったWebサイトをブラウザで確認する
困った時はプログラムも使って対応する

ChatGPTに画像を作ってもらう

前提、やってほしい条件、目的に分けて頼む
画像は2枚まで作る
サイトで見せたい場面の材料として使う
使う画像を選ぶ理由を短く確認する

前提

画像は2枚まで作る

Photoshop for ChatGPTで軽く整える

選んだ画像を1回だけ軽く加工する
明るさ、余白、ピントやぼかしの調整
加工した画像をダウンロードする

選んだ画像

軽く加工する

動画の道具は名前を確認してから入れる

ダウンロードした画像をWebサイト制作基礎フォルダに入れておく
Windowsでは、先生の指示がある時だけ動画の道具を入れる
Macの人は実行せず、先生の画面を見る
先に入れる道具の名前を確認する
確認画面やエラーが出たら、閉じずに見せる

先に確認する文

winget search --id Python.Python.3.12 -e --source winget
winget search --id Gyan.FFmpeg -e --source winget

先生の指示後だけ使う文

winget install --id Python.Python.3.12 -e --source winget
winget install --id Gyan.FFmpeg -e --source winget

Codexに短い動画を頼む

2枚画像を置いたことを伝える
動画にしてほしいことを伝える
秒数や画像の変わり方を伝える
差し込みたいテキストを指示する
PythonとFFmpegを使うと伝える
短い動画にできるか試すので、サイズは小さめでよい

# 前提

- Webサイト制作基礎フォルダに画像を2枚置いています
- 小さめのサイズで、短い動画にできるか試したいです

# 条件

- 2枚の画像を使って短い動画にしてください
- 動画の長さは＜秒数＞秒にしてください
- 画像の変わり方は＜変わり方＞にしてください
- 差し込みたいテキストは＜テキスト＞です
- 使う道具はPythonとFFmpegです
- 音は入れません

# 目的

- 画像から動画を作れるか確認します

作った画像や動画は公開前に見る

授業中に作ったものは、そのまま公開しない
実在人物、ロゴ、既存キャラクターに見えないか見る
他人の作品、個人情報、商用利用してよいかを見る

授業で作る

公開前に見る

画像や動画を入れたページを作って見る

さっき作った画像や動画を材料として使う
CodexにWebサイトのファイルを作ってもらう
完成度より、作って見て直す流れを体験する

# 前提

- Webサイト制作基礎フォルダに、画像と動画を置いています
- 配置している画像や動画を使うサイトにしたいです

# 条件

- HTML、CSS、JSを1つのHTMLファイルにまとめてください
- 画像と動画をページ内に表示してください
- まずは動作確認用なので、複雑にしないでください
- 作ったファイルをブラウザで確認できるようにしてください

# 目的

- 画像や動画がページに表示されるか確認します

作ったWebサイトをブラウザで見る

Codexにブラウザで表示を確認してもらう
自分でも画面を見て、伝わるか確認する
画像や動画が出ているか見る

作ったWebサイト

ブラウザ

好きなことやハマっていることを選ぶ

前回と同じように、自分で作るものを書く
今日は好きなことやハマっていることを紹介する小さいサイトで試す
見た人に何を知ってほしいかも考えてみよう

好きなこと

小さいサイト

画像で見せたい場面を決める

紹介したいものが伝わる場面を考える
人、場所、物、動きのうち必要なものだけを書く
画像には文字を入れない
人物名や店名をAIに勝手に決めさせない

自サイト_要件整理シート.mdを作る

紹介したいものを書く
見てほしい人を書く
見た人に知ってほしいことを書く

## 紹介したいもの
- 

## 見てほしい人
- 

## 見た人に知ってほしいこと
-

今日残すものを確認する

必ず残す: 自サイト_要件整理シート.md
見せられるようにする: 作った画像、加工した画像、音なし動画
先生が必要と言った時だけ: ランブック

必ず残す

自サイト_要件整理シート.md

見せられるようにする

画像・加工画像・音なし動画

必要な時だけ

ランブック

目次