長友ひより/MyNote をテンプレートにして作成

開始行:
#settextcolor(#772637) #setbgcolor(#FEF9F5) #setheadercolor(#D59DA8,"linear-gradient(90deg,#EDD5D7)",... #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/documen... ~ ~ ***プロンプトを作る（ChatGPT） プロンプトが生成される → __[[プロンプト>https://docs.google.com/document/d/1kBmp... ~ ~ ***コードを書く（Claude） ファイルが生成される → __[[HTML>https://drive.google.com/file/d/1Cy_Q0CglWZUNs... → __[[CSS>https://drive.google.com/file/d/174TSy-XJnSurSz... → __[[JavaScript>https://drive.google.com/file/d/1sfizKJ6... ※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とは 人間向け -プロジェクト概要 -ファイル構成 -今後の予定 -…など ~ ~ ~ #hr CENTER:''xxxxx'' #hr RIGHT:'''個人的に調べてみたいこと''' ~ ***xxx -xxx --xxx ~ ~ ~

終了行:
#settextcolor(#772637) #setbgcolor(#FEF9F5) #setheadercolor(#D59DA8,"linear-gradient(90deg,#EDD5D7)",... #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/documen... ~ ~ ***プロンプトを作る（ChatGPT） プロンプトが生成される → __[[プロンプト>https://docs.google.com/document/d/1kBmp... ~ ~ ***コードを書く（Claude） ファイルが生成される → __[[HTML>https://drive.google.com/file/d/1Cy_Q0CglWZUNs... → __[[CSS>https://drive.google.com/file/d/174TSy-XJnSurSz... → __[[JavaScript>https://drive.google.com/file/d/1sfizKJ6... ※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とは 人間向け -プロジェクト概要 -ファイル構成 -今後の予定 -…など ~ ~ ~ #hr CENTER:''xxxxx'' #hr RIGHT:'''個人的に調べてみたいこと''' ~ ***xxx -xxx --xxx ~ ~ ~

ページ名: