目次

目次

  • AIの種類
  • 役割の違い
  • 画像を作る
  • Codexで画像を動画にする
  • 軽くWebサイトを作る
  • 自サイト_要件整理シート.md
  • 提出するもの

Webサイト型AI

ローカルアプリ型AI

ローカルコマンド型AI

専門分野系AI

AIの種類

AIの種類

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

Webサイト型AI

ローカルアプリ型AI

ローカルコマンド型AI

専門分野系AI

役割の違い

役割の違い

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

Webサイト型AI

画像づくり

ローカルアプリ型AI

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

ローカルコマンド型AI

説明だけ

専門分野系AI

動画や音楽

ChatGPTとCodexの違い

ChatGPTとCodexの違い

ChatGPT

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

Codex

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

ChatGPTに画像を作ってもらう

ChatGPTに画像を作ってもらう

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

前提

画像は2枚まで作る

Photoshop for ChatGPTで軽く整える

Photoshop for ChatGPTで軽く整える

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

選んだ画像

軽く加工する

Codexで画像を動画にする１

Codexで画像を動画にする１

  • ダウンロードした画像をWebサイト制作基礎フォルダに入れておく
  • wingetでプログラムツールと動画加工ツールを入れる 
winget install Python.Python.3.12
winget install Gyan.FFmpeg

Codexで画像を動画にする２

Codexで画像を動画にする２

  • 2枚画像を置いたことを伝える
  • 動画にしてほしいことを伝える
  • 秒数や切り替えのエフェクトを指示する
  • 差し込みたいテキストを指示する
  • 使うツールを指示する
  • 動画生成が可能かテストしたいので、サイズは小さめでよい 
# 前提

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

# 条件

- 2枚の画像を使って短い動画にしてください
- 動画の長さは＜秒数＞秒にしてください
- 画像の切り替えは＜エフェクト＞にしてください
- 差し込みたいテキストは＜テキスト＞です
- 使うツールは＜ツール名＞です
- 音は入れません

# 目的

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

軽くWebサイトを作る

軽くWebサイトを作る

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

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

# 条件

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

# 目的

- 画像や動画を使ったWebサイトを軽く作ってみる

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

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

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

作ったWebサイト

ブラウザ

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

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

  • 自分で作るものを前回の要件整理のように整理してみる
  • 今日は好きなことやハマっていることを紹介する小さいサイトで試す
  • 見た人に何を知って欲しいかも考えてみよう

好きなこと

小さいサイト

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

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

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

人

場所

物

動き

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

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

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

## 見て欲しい人
- 

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

提出するもの

提出するもの

  • 作った画像
  • 加工した画像
  • 10秒前後の音なし動画
  • 自サイト_要件整理シート.md
  • ランブック

作った画像

加工した画像

10秒前後の音なし動画

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

ランブック