#author("2025-06-02T11:14:18+09:00","default:art-gs","art-gs") #author("2025-06-03T00:43:51+09:00","default:art-gs","art-gs") *視覚伝達の方法論的理解に向けたWeb制作実践 自身が考案したコスメブランドを販売する 架空のWebサイト ・・・・・・・・・・・・・・・・ #image(image.jpg.jpg) -'''Keywords：UI, Web, Figma,HTML,CSS,AI''' -//[[Figma>https://www.figma.com/design/ZKV9EZH9YAXGoSrLikglKH/%E7%84%A1%E9%A1%8C?node-id=0-1&t=SjwOsjuCshDSMr2z-1]] -[[Figma>https://www.figma.com/design/ZKV9EZH9YAXGoSrLikglKH/%E7%84%A1%E9%A1%8C?node-id=0-1&t=SjwOsjuCshDSMr2z-1]] ~ **概要 ~ ***研究背景 昨今、ECサイトやSNSなどオンライン上での製品販売が一般化し、ブランド価値や製品特性を視覚的に伝達するWeb表現の重要性が高まっている。特にコスメ製品のように、感性や体験価値（UX）に依拠するプロダクツにおいては、単なる商品情報だけでなく、使用感や世界観といった要素の伝達が購買行動に影響を与えるとされている。 一方で、Web上における視覚表現の多くは、美的訴求に重点が置かれる傾向が強く、UXデザインの意図や使用文脈を的確に伝える情報設計の手法は、まだ十分に整理されていない。 ~ ***研究目的 そこで、自身が開発したコスメブランドのプロダクツをWeb上で通信販売することを想定し、商品に込めたUXデザインの意図や使用方法を、視覚的にわかりやすく顧客に伝達するためのWeb表現のあり方を検討する。 これにより、視覚伝達を通じた情報設計の手法と、そのユーザー理解への影響を明らかにすることを目指す。 ~ ***研究方法 本研究では、自身が開発したコスメブランドの商品を題材に、Webサイト上での通信販売を想定したプロトタイプの制作を行った。制作にはFigmaを用い、商品の魅力やこだわりのUXデザインを、視覚的にわかりやすく伝えることを目指した。 ~ サイト内では「ブランドコンセプト」「商品情報」の2つを主な情報要素とし、それぞれをどのようにレイアウト・デザインすれば、ユーザーが直感的に理解しやすくなるかを検討した。Figma上で画面遷移や操作感も含めたプロトタイプを作成し、インターフェース全体の流れや情報の伝わり方について実践的に確認した。 ~ ***結論 本研究の取り組みにより、感性や使用感といった言語化しづらい情報を、視覚的に伝える手法の可能性が示された。これにより、Web上でも製品の特徴や魅力がより直感的に伝わる表現が実現できることがわかった。 また、個人や小規模ブランドにおいても、自身の想いやデザイン意図を視覚的に整理・伝達するためのWeb構成の工夫が重要であることが確認され、今後の商品ブランディングにも応用可能であると考えられる。 ***ターゲット ・コスメプロダクツに興味がある人 ・大切な人への贈り物を考えている人 ・花が好きな人 ・収集癖がある人 ~ ***アウトプット ・Figmaにてプロトタイプの作成 ~ ***使用したツール ・Figma ・HTML ・AI（ChatGPT） ~ ***まとめ 本研究では、コスメブランドのWebサイト制作を通じて、UXデザインの意図や使用方法を視覚的に伝達するための情報設計・表現手法を模索した。特に、Figmaを用いてモバイル表示に対応したプロトタイプを制作し、文字サイズや画像の扱い、ボタン配置、アニメーション表現など、ユーザー視点に立ったデザインの工夫を行った。 ~ 制作を進める中で、Web制作に関する専門的な知識やツールの扱いに戸惑う場面も多く、コーディング作業では細かなミスが大きな不具合につながる難しさも経験した。しかし、自らの手で書いたコードが実際に画面に反映されたときの達成感や、ユーザー（クライアント）の視点を考えながらデザインを工夫するプロセスは、大きなやりがいと学びをもたらした。 ~ 今回の取り組みを通して、視覚的表現による情報伝達の奥深さと、Web制作の可能性の広がりを実感することができた。今後は、本研究で得た経験をもとに、より完成度の高いWeb制作やUX設計に挑戦していきたい。 ~ ~ ~ #hr CENTER:''進捗記録'' #hr **2025.5.19 [[スタディログ>https://drive.google.com/drive/folders/143C6R3_X35df8M7AXeutKmzRVvP9WWUr]] ~ ~ **2025.5.12 学んだこと ・githubの使い方 次回までに ・Figma作り直す（縦列揃える、文字入れる、プロトタイプ機能をつけるetc...) ・まずはWebサイトに慣れるために、コードができたらgithubにアップロードしブラウザでどう見えるか随時確認する **2025.5.11 Visual Studio Code[[参考1>:https://www.youtube.com/watch?v=auGKppIIV4Y]] [[参考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%84%A1%E9%A1%8C?node-id=0-1&t=g7ikc7zRon2niIvL-1] フォント：Googleフォント、モリサワフォント、Adobeフォント ~ ~ **2025.4.21 ◯Webサイトの主なつくりかた（2025.4.7参照) 1.戦略 ターゲットに自分の作ったコスメプロダクトを知ってもらい、製品の魅力だけでなくUXとしての良さも伝え、コスメプロダクトの新しい体験価値を見出す 2.要件 サイトマップ参照←進捗としてはここまで 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け #image(map.jpg) ◯サイトマップ制作での特徴 参考文献；https://www.future-shop.jp/magazine/ec-site-sitemap-creation-procedure Figmaに慣れていく **2025.4.14 ◯制作について プロトタイプはFigmaにて 生成AI（chat GPTやfirefly）を有効活用 ◯参考サイト SHIRO；https://shiro-shiro.jp/ext/product.html?srsltid=AfmBOoqLrvhf5S-TKcAUXxylAa7ITv2ijEkk5T6BLR42reXimpAaMRgz ポール&ジョー：https://www.paul-joe-beaute.com アディクション：https://www.addiction-beauty.com Floranotisjillstuart：https://www.jillstuartfloranotisjillstuart.com/site/floranotis/c/c20/ Decorte：https://www.decorte.com **2025.04.07 ◯Webサイトの主なつくりかた 1.戦略 だれに？どのように？なにを？なぜ？ 2.要件 どんな内容をいれる？ 3.構造 具体的に内容を詰めていく 4.骨格 どこにどうまとめるか 5.表層 飾り付け --- ◯Webつくるため、慣れるためには ・figmaを使ってみる（無料、比較的使いやすい） ・大学院のサイトを更新してみる（Webのプログラミングに慣れる） //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ //~ //***XXXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ //~ //~