#author("2026-07-13T15:10:33+09:00","default:member","member") #author("2026-07-20T14:05:20+09:00","default:member","member") *綺麗肌図鑑 化粧品に関する知識などを紹介するサイト #image(肌.jpeg) -''東島百合子'' -'''Webデザイン、化粧品、スキンケア、''' https://yupichi.github.io/MULGLOW/ [[相互評価シート>https://docs.google.com/spreadsheets/d/1_qs0k7JUZRa-6NQt05N7eRmcdoNuJUANFGY2upbIIxs/edit?usp=sharing]] ← ここからコメントをお願いします。 ~ **概要 ***背景と目的 私は普段からスキンケアや化粧品に興味があり、SNSやインターネットで美容に関する情報を集めている。しかし、情報量が多く、自分の肌質に合った情報を見つけることが難しいと感じた。また、同じ化粧品でも成分や使い方によって効果が異なるため、正しい知識を持つことの重要性を実感した。そこで、肌質や成分、スキンケア方法について分かりやすく学べるサイトを制作したいと考えた。 スキンケア初心者や自分に合った化粧品を探している人に向けて、肌質ごとの特徴やおすすめ成分、スキンケアの正しい手順を分かりやすく伝えることを目的とする。また、肌質診断機能を取り入れることで、利用者が自分の肌について理解し、適切な化粧品選びができるよう支援することを目指す。 私は普段からスキンケアや化粧品に興味があって、SNSやインターネットで美容に関する情報見ています。同じ化粧品でも成分や使い方によって効果が異なるため、正しい知識を持つことの重要性を考えました。そこで、肌質や成分、スキンケア方法について分かりやすく学べるサイトを制作したいと考えました。 スキンケア初心者や自分に合った化粧品を探している人に向けて、肌質ごとの特徴やおすすめ成分、スキンケアの正しい手順を分かりやすく伝えれるWEBサイト ~ ~ ***成果物の仕様 ~ ~ ***制作ツール -Illustrator、Visual Studio Code、Photoshop、chatgpt ~ ~ ~ ~ #hr CENTER:''進捗記録'' #hr ~ **2026.07.13 前回に引き続き、Webサイトの制作および最終的なブラッシュアップ作業を行った。また、次週の最終成果報告（プレゼン）に向けて個人ページの整理を完了させた。 ***実施した作業内容 - スキンケア紹介サイトの最終コーディングおよびブラッシュアップの完了 - 個人ページのタイトル・サブタイトルの確定、およびメインビジュアルの掲載 - 氏名、キーワード、成果物（制作したWebサイト）へのリンクの配置 - 大見出し「概要」欄に、サイトマップやワイヤーフレーム等の図を表組み（|50|50|C）を用いて整理・掲載 ~ ~ **2026.07.06 前回決定した「クリニックのような清潔感のあるサイト（白統一）」というコンセプトに沿って、Webサイトのコーディングおよびデザインの制作作業を継続して進めた。 ***実施した作業内容 - コンセプトに合わせた情報設計、および画像・テキスト素材の配置 - index.html を起点としたWebサイト全体の構築 - Macローカル環境とサーバー（GitHub Pages等）での表示に差異が出ないよう、ファイル名（半角英数・大文字小文字）に留意しながらの制作・更新作業 ~ ~ **2026.06.29 共同編集のスプレッドシート（汎用シート）を用いて、受講生全員のプロトタイプを閲覧し、相互に意見・感想の聴取を行った。 ***見出された問題点・要望 -おすすめのスキンケアを具体的に教えて欲しい、という意見や需要が多く見られた。 ~ ***今後の方向性（コンセプトの決定） - 聴取した意見をもとに「おすすめのスキンケアを紹介するWebサイト」としての方向性を固めた。 - サイトのコンセプトは「クリニックのような清潔感のあるサイト」とし、デザインの配色も白を基調に統一させる方向で検討。これをもとに実装・制作を進める。 ~ ~ **2026.06.22 ***今回作成したプロトタイプの説明 サイトマップ #image(サイトマップ.png) ~ ~ **2026.06.15 ***現状分析 「テーマ内容」に関する先行事例 -@cosme 化粧品の口コミや成分情報を掲載 -LIPS 化粧品のレビューや使用方法を紹介 -美容雑誌・美容メディア 肌質別のスキンケア方法や成分解説を掲載 ***「表現形式」に関する先行事例 -@cosme公式サイト 商品検索やカテゴリ分けが分かりやすい -LIPS公式サイト 写真や図を活用した見やすい構成 -SHISEIDO公式サイトスキンケアの手順を分かりやすく説明 -日本と韓国のスキンケア文化の違い -国ごとの人気成分や美容トレンド -[[AFTER0CLINIC>https://after90clinic.com/?gad_source=1&gad_campaignid=23781302281&gbraid=0AAAABDWEzQvuTSMbUfFFJIiDMyghoadTZ&gclid=CjwKCAjwl97RBhBWEiwAa9rbXacuBvu3yvZ2saJkbBePQHDgcirvjj-rgWAi7JI-i-ptCf7dJlfv6hoCix4QAvD_BwE]] ***「技術」 Google Sitesの使い方 画像編集ソフトの活用 情報の整理方法 ***課題定義 -化粧品の正しい使用方法を分かりやすく伝える -肌質ごとに適した成分を整理する -Google Sitesの操作方法を習得する -サイトの公開方法を調べる -サイト名やコンセプトを決定する -使用する画像や図表を準備する ***制作上のアイデア -1. 化粧品の正しい使用方法 化粧水、乳液、美容液、クリームの役割を解説する スキンケアの順番を図で説明する 使用量や使用タイミングを紹介する -2. 肌質と成分の関係 乾燥肌、脂性肌、混合肌、敏感肌の特徴を説明する 肌質ごとにおすすめの成分を紹介する -3. 情報収集 化粧品メーカーの公式サイト 皮膚科学に関する資料 美容専門サイト -4. 公開方法 githubで公開 -5. サイト名 「綺麗肌図鑑」 -6. 素材収集 成分やスキンケア手順を説明するオリジナル図解 フリー素材サイトの画像 ~ ~ **2026.06.08 ***テーマ決め -一人飯in FUKUOKA -私の香水 -"化粧品の知識" -学生の扶養年収いくら ~ ***成果物の仕様 -形式：Webサイト - ~ ~ ~