#author("2026-06-08T22:04:32+09:00;2026-05-28T19:38:57+09:00","default:member","member") #author("2026-06-08T22:08:06+09:00;2026-05-28T19:38:57+09:00","default:member","member") #settextcolor(#772637) #setbgcolor(#FEF9F5) #setheadercolor(#D59DA8,"linear-gradient(90deg,#EDD5D7)",0.6) #hr CENTER:''AIを使ったWebサイト制作について'' #hr RIGHT:'''[[長友ひより/情報デザイン演習IIA_01]]''' ~ **課題でやったこと ***企画をまとめる（自分） 「Camera Roll to Vlog - 写真フォルダからはじめる動画編集」 -概要 --Vlog（short動画）の作り方 --Adobe Premiere Proの使い方 -コンセプト --初めてでも簡単に"いい感じ"のVlogが作れる -課題 --動画では見ながらの作業がしづらい -- →自分のペースで学べる、文字ベースの解説にする --全体の進捗状況がわからず心が折れそうになる -- →どの段階まで進んでいるのか定期的に表示する --文字や画像だけではわかりづらい -- →適宜動画も挿入して説明する --初めてで何を準備すればいいかわからない -- →編集環境の設定や、素材撮りのポイントから紹介する --そもそもPCに慣れていない -- →ショートカットも丁寧に記載する --他の解説動画などとの差別化 -- →プレミアを使ってみたいという人をターゲットにする、自由度の高さを活かせる説明にする -ターゲット --いま写真フォルダに入ってる素材を使って、思い出をまとめてみたいと思っている人 --初めてプレミアプロを触ってみたいと思っている人 -ペルソナ 黒木 葵 Kuroki Aoi --19歳、大学1年生、女性 --宮崎県在住 --自然が好き --スマホでよく写真を撮る --たまに旅行をする --行き当たりばったり ~ ~ ***サイトマップや画面構成をまとめる（Gemini） 文字でまとめてもらったもの → __[[Webサイト画面構成案>https://docs.google.com/document/d/1pDQo8hAIctAxb8oD9OmmDOzvNMRUHt-HYL_sie6OZlc/edit?usp=sharing]]__ ~ ~ ***プロンプトを作る（ChatGPT） プロンプトが生成される → __[[プロンプト>https://docs.google.com/document/d/1kBmpMT_w40aF9lS2GZ51-xR11A3OIjsQwcXQK-6wsdE/edit?usp=sharing]]__ ~ ~ ***コードを書く（Claude） ファイルが生成される → __[[HTML>https://drive.google.com/file/d/1Cy_Q0CglWZUNs2afh7tla9HpFyUeW5sO/view?usp=sharing]]__ → __[[CSS>https://drive.google.com/file/d/174TSy-XJnSurSzmXm-6_squE5KsybE_t/view?usp=sharing]]__ → __[[JavaScript>https://drive.google.com/file/d/1sfizKJ6NWk1ox9rUUw0RGtc9Jp5g9Txg/view?usp=sharing]]__ ※ChatGPTやGeminiにも同じように投げて、一番良いと思ったものを採用した ~ ~ ***修正（自分） -要らない要素を削除する ~ ~ **Codexを使ってブラッシュアップ ***下準備 -VSCodeとCodexを連携する --拡張機能の「Codex」をインストールする --ChatGPT(Plusプラン)でログインする --※Codexアプリもあるが、VSCodeのほうが作業状況が分かりやすいと思う -VSCodeとGitHubを連携する --VSCodeでログインする -ChatGPTに相談して、ブラッシュアップの詳細を決める --企画案、プロンプト、現時点でのファイルを見てもらう --話しながら、最終的な改善案を自分で考える --やり取りを基に、AGENTS.mdとREADME.mdを作ってもらう ~ ~ ~ #hr CENTER:''DiscordのBotについて'' #hr RIGHT:'''[[長友ひより/情報デザイン研究I]]''' ~ ***xxx -xxx --xxx ~ ~ ~ #hr CENTER:''バイブコーディングについて'' #hr RIGHT:'''個人的に調べてみたいこと''' ~ ***AGENTS.mdとは AI向け -このサイトの目的 -守ってほしい設計方針 -変更してよいもの / よくないもの -デザインの方向性 -作業後に報告してほしいこと -…など ~ ***README.mdとは -プロジェクトの記憶 -決定事項の記録 -AIへの指示書 人間向け -プロジェクト概要 -ファイル構成 -今後の予定 -…など ~ ~ ~ #hr CENTER:''xxxxx'' #hr RIGHT:'''個人的に調べてみたいこと''' ~ ***xxx -xxx --xxx ~ ~ ~