AIを使ったWebサイト制作について
課題でやったこと
企画をまとめる（自分）
「Camera Roll to Vlog - 写真フォルダからはじめる動画編集」
- 概要
- Vlog（short動画）の作り方
- Adobe Premiere Proの使い方
- コンセプト
- 課題
- 動画では見ながらの作業がしづらい
- →自分のペースで学べる、文字ベースの解説にする
- 全体の進捗状況がわからず心が折れそうになる
- →どの段階まで進んでいるのか定期的に表示する
- 文字や画像だけではわかりづらい
- →適宜動画も挿入して説明する
- 初めてで何を準備すればいいかわからない
- →編集環境の設定や、素材撮りのポイントから紹介する
- そもそもPCに慣れていない
- →ショートカットも丁寧に記載する
- 他の解説動画などとの差別化
- →プレミアを使ってみたいという人をターゲットにする、自由度の高さを活かせる説明にする
- ターゲット
- いま写真フォルダに入ってる素材を使って、思い出をまとめてみたいと思っている人
- 初めてプレミアプロを触ってみたいと思っている人
- ペルソナ
黒木 葵 Kuroki Aoi
- 19歳、大学1年生、女性
- 宮崎県在住
- 自然が好き
- スマホでよく写真を撮る
- たまに旅行をする
- 行き当たりばったり
サイトマップや画面構成をまとめる（Gemini）
文字でまとめてもらったもの
→ Webサイト画面構成案
プロンプトを作る（ChatGPT）
プロンプトが生成される
→ プロンプト
コードを書く（Claude）
ファイルが生成される
→ HTML
→ CSS
→ JavaScript
※ChatGPTやGeminiにも同じように投げて、一番良いと思ったものを採用した
修正（自分）
Codexを使ってブラッシュアップ
下準備
- VSCodeとCodexを連携する
- 拡張機能の「Codex」をインストールする
- ChatGPT(Plusプラン)でログインする
- ※Codexアプリもあるが、VSCodeのほうが作業状況が分かりやすいと思う
- VSCodeとGitHubを連携する
- ChatGPTに相談して、ブラッシュアップの詳細を決める
- 企画案、プロンプト、現時点でのファイルを見てもらう
- 話しながら、最終的な改善案を自分で考える
- やり取りを基に、AGENTS.mdとREADME.mdを作ってもらう
バイブコーディングについて
個人的に調べてみたいこと
AGENTS.mdとは
AI向け
- このサイトの目的
- 守ってほしい設計方針
- 変更してよいもの / よくないもの
- デザインの方向性
- 作業後に報告してほしいこと
- …など
README.mdとは
人間向け
- プロジェクト概要
- ファイル構成
- 今後の予定
- …など
xxxxx
個人的に調べてみたいこと
xxx
