SubTitle ・・・・・・・・・・・・・・・・
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
昨年、卒業制作で取り組んだ自身のコスメブランドを販売する架空のWebサイト
昨年、卒業制作で取り組んだ自身のコスメブランドプロダクツを、Webで実際に通信販売することを仮定とし、どのように表現すれば、商品にこめたUXデザインや使用方法などがわかりやすく顧客に伝えることができるかを学ぶ。
コスメプロダクツに興味がある人
大切な人への贈り物を考えている人
花が好きな人
収集癖がある人
・Figmaにてプロトタイプの作成
・Webサイト
Figma
HTML
AI（ChatGPT）
ウェブサイト制作に取り組み始めた当初は、専門用語や使用するソフトの名称・使い方など、何も分からない状態で、戸惑うことが多くありました。
また、コーディング作業では、小文字と大文字の使い分けや、たった1文字のミスが大きなエラーにつながるなど、細かい注意が必要であることを実感し、想像以上に苦戦しました。
しかし、モバイル上で自分が書いたコードが文字として画面に表示されたときの感動や、クライアントのことを考えながら文字のサイズやアニメーションを工夫する楽しさを通して、Webサイト制作への興味と関心が一層高まりました。
こうした気持ちを持てたのも、日々支えてくださった先生、一緒に学ぶ同期のおかげです。本当にありがとうございました。
学んだこと
・githubの使い方
次回までに
・Figma作り直す（縦列揃える、文字入れる、プロトタイプ機能をつけるetc...)
・まずはWebサイトに慣れるために、コードができたらgithubにアップロードしブラウザでどう見えるか随時確認する
Visual Studio Code参考1:https://www.youtube.com/watch?v=auGKppIIV4Y
参考2:https://www.youtube.com/watch?v=Qnd3-PaTILc
・CSS,HTMLを学ぶ
・一つ試しにWebを作ってみる
Figmaにてイメージ作成
[https://www.figma.com/design/ZKV9EZH9YAXGoSrLikglKH/%E7%84%A1%E9%A1%8C?node-id=0-1&t=g7ikc7zRon2niIvL-1]
フォント：Googleフォント、モリサワフォント、Adobeフォント
◯Webサイトの主なつくりかた（2025.4.7参照)
1.戦略
ターゲットに自分の作ったコスメプロダクトを知ってもらい、製品の魅力だけでなくUXとしての良さも伝え、コスメプロダクトの新しい体験価値を見出す
2.要件 サイトマップ参照←進捗としてはここまで
3.構造 具体的に内容を詰めていく
4.骨格 どこにどうまとめるか
5.表層 飾り付け
◯サイトマップ制作での特徴
参考文献；https://www.future-shop.jp/magazine/ec-site-sitemap-creation-procedure
Figmaに慣れていく
◯制作について
プロトタイプは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
◯Webサイトの主なつくりかた
1.戦略 だれに？どのように？なにを？なぜ？
2.要件 どんな内容をいれる？
3.構造 具体的に内容を詰めていく
4.骨格 どこにどうまとめるか
5.表層 飾り付け
◯Webつくるため、慣れるためには
・figmaを使ってみる（無料、比較的使いやすい）
・大学院のサイトを更新してみる（Webのプログラミングに慣れる）