酒井菫/情報デザイン前半 をテンプレートにして作成

開始行:
*視覚伝達の方法論的理解に向けたWeb制作実践 自身が考案したコスメブランドを販売する 架空のWebサイト ・・・・・・・・・・・・・・・・ #image(image.jpg.jpg) -'''Keywords：UI, Web, Figma,HTML,CSS,AI''' -[[Figma>https://www.figma.com/design/ZKV9EZH9YAXGoSrLikg... ~ **概要 ~ ***研究背景 昨今、ECサイトやSNSなどオンライン上での製品販売が一般化し... 一方で、Web上における視覚表現の多くは、美的訴求に重点が置... ~ ***研究目的 そこで、自身が開発したコスメブランドのプロダクツをWeb上で... これにより、視覚伝達を通じた情報設計の手法と、そのユーザ... ~ ***研究方法 本研究では、自身が開発したコスメブランドの商品を題材に、W... ~ サイト内では「ブランドコンセプト」「商品情報」の2つを主な... ~ ***結論 本研究の取り組みにより、感性や使用感といった言語化しづら... また、個人や小規模ブランドにおいても、自身の想いやデザイ... ***ターゲット ・コスメプロダクツに興味がある人 ・大切な人への贈り物を考えている人 ・花が好きな人 ・収集癖がある人 ~ ***アウトプット ・Figmaにてプロトタイプの作成 ~ ***使用したツール ・Figma ・HTML ・AI（ChatGPT） ~ ***まとめ 本研究では、コスメブランドのWebサイト制作を通じて、UXデザ... ~ 制作を進める中で、Web制作に関する専門的な知識やツールの扱... ~ 今回の取り組みを通して、視覚的表現による情報伝達の奥深さ... ~ ~ ~ #hr CENTER:''進捗記録'' #hr **2025.5.19 　[[スタディログ>https://drive.google.com/drive/folders/1... ~ ~ **2025.5.12 学んだこと ・githubの使い方 次回までに ・Figma作り直す（縦列揃える、文字入れる、プロトタイプ機能... ・まずはWebサイトに慣れるために、コードができたらgithubに... **2025.5.11 Visual Studio Code[[参考1>:https://www.youtube.com/watch?... [[参考2>:https://www.youtube.com/watch?v=Qnd3-PaTILc]] ~ ~ **GWのToDo ・CSS,HTMLを学ぶ ・一つ試しにWebを作ってみる ~ ~ **2025.5.2 Figmaにてイメージ作成 [https://www.figma.com/design/ZKV9EZH9YAXGoSrLikglKH/%E7%... フォント：Googleフォント、モリサワフォント、Adobeフォント ~ ~ **2025.4.21 ◯Webサイトの主なつくりかた（2025.4.7参照) 1.戦略 ターゲットに自分の作ったコスメプロダクトを知ってもらい、... 2.要件 サイトマップ参照←進捗としてはここまで 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け #image(map.jpg) ◯サイトマップ制作での特徴 参考文献；https://www.future-shop.jp/magazine/ec-site-sit... Figmaに慣れていく **2025.4.14 ◯制作について プロトタイプはFigmaにて 生成AI（chat GPTやfirefly）を有効活用 ◯参考サイト SHIRO；https://shiro-shiro.jp/ext/product.html?srsltid=Af... ポール&ジョー：https://www.paul-joe-beaute.com アディクション：https://www.addiction-beauty.com Floranotisjillstuart：https://www.jillstuartfloranotisjil... Decorte：https://www.decorte.com **2025.04.07 ◯Webサイトの主なつくりかた 1.戦略 だれに？どのように？なにを？なぜ？ 2.要件 どんな内容をいれる？ 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け --- ◯Webつくるため、慣れるためには ・figmaを使ってみる（無料、比較的使いやすい） ・大学院のサイトを更新してみる（Webのプログラミングに慣れ... //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~

終了行:
*視覚伝達の方法論的理解に向けたWeb制作実践 自身が考案したコスメブランドを販売する 架空のWebサイト ・・・・・・・・・・・・・・・・ #image(image.jpg.jpg) -'''Keywords：UI, Web, Figma,HTML,CSS,AI''' -[[Figma>https://www.figma.com/design/ZKV9EZH9YAXGoSrLikg... ~ **概要 ~ ***研究背景 昨今、ECサイトやSNSなどオンライン上での製品販売が一般化し... 一方で、Web上における視覚表現の多くは、美的訴求に重点が置... ~ ***研究目的 そこで、自身が開発したコスメブランドのプロダクツをWeb上で... これにより、視覚伝達を通じた情報設計の手法と、そのユーザ... ~ ***研究方法 本研究では、自身が開発したコスメブランドの商品を題材に、W... ~ サイト内では「ブランドコンセプト」「商品情報」の2つを主な... ~ ***結論 本研究の取り組みにより、感性や使用感といった言語化しづら... また、個人や小規模ブランドにおいても、自身の想いやデザイ... ***ターゲット ・コスメプロダクツに興味がある人 ・大切な人への贈り物を考えている人 ・花が好きな人 ・収集癖がある人 ~ ***アウトプット ・Figmaにてプロトタイプの作成 ~ ***使用したツール ・Figma ・HTML ・AI（ChatGPT） ~ ***まとめ 本研究では、コスメブランドのWebサイト制作を通じて、UXデザ... ~ 制作を進める中で、Web制作に関する専門的な知識やツールの扱... ~ 今回の取り組みを通して、視覚的表現による情報伝達の奥深さ... ~ ~ ~ #hr CENTER:''進捗記録'' #hr **2025.5.19 　[[スタディログ>https://drive.google.com/drive/folders/1... ~ ~ **2025.5.12 学んだこと ・githubの使い方 次回までに ・Figma作り直す（縦列揃える、文字入れる、プロトタイプ機能... ・まずはWebサイトに慣れるために、コードができたらgithubに... **2025.5.11 Visual Studio Code[[参考1>:https://www.youtube.com/watch?... [[参考2>:https://www.youtube.com/watch?v=Qnd3-PaTILc]] ~ ~ **GWのToDo ・CSS,HTMLを学ぶ ・一つ試しにWebを作ってみる ~ ~ **2025.5.2 Figmaにてイメージ作成 [https://www.figma.com/design/ZKV9EZH9YAXGoSrLikglKH/%E7%... フォント：Googleフォント、モリサワフォント、Adobeフォント ~ ~ **2025.4.21 ◯Webサイトの主なつくりかた（2025.4.7参照) 1.戦略 ターゲットに自分の作ったコスメプロダクトを知ってもらい、... 2.要件 サイトマップ参照←進捗としてはここまで 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け #image(map.jpg) ◯サイトマップ制作での特徴 参考文献；https://www.future-shop.jp/magazine/ec-site-sit... Figmaに慣れていく **2025.4.14 ◯制作について プロトタイプはFigmaにて 生成AI（chat GPTやfirefly）を有効活用 ◯参考サイト SHIRO；https://shiro-shiro.jp/ext/product.html?srsltid=Af... ポール&ジョー：https://www.paul-joe-beaute.com アディクション：https://www.addiction-beauty.com Floranotisjillstuart：https://www.jillstuartfloranotisjil... Decorte：https://www.decorte.com **2025.04.07 ◯Webサイトの主なつくりかた 1.戦略 だれに？どのように？なにを？なぜ？ 2.要件 どんな内容をいれる？ 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け --- ◯Webつくるため、慣れるためには ・figmaを使ってみる（無料、比較的使いやすい） ・大学院のサイトを更新してみる（Webのプログラミングに慣れ... //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~

ページ名: