‘Mel-t’架空コスメ商品ページ
想像上を現実に表現・・・・・・・・・・・・・・・・
概要
これは何？
空想化粧品の商品webページ
背景と目的
- 頭の中で作ったものを実際に表現した作品という先行事例
- 想像を具現化したらどうなるかという検証結果
コンセプト
- 化粧品とサイトのデザインの組み合わせによって視覚的にも刺激があるようなヴィジュアル
- 現在のメイクする上で解決しきれていない問題や悩みを解決するデザイン
成果物の仕様
webページ
(企画書)
制作ツール
サイト・Visual Studio Code,HTML,CSS
化粧品・Blender,CLIP STUDIO PAINT
プロジェクトの期間
プロジェクトの期間｜2026.04.09 -
まとめ
- 化粧品のコンセプトと企画に右往左往しすぎて作業着手が遅くなってしまった
- 中間報告において、設定が足りてなかったと感じる
- 後期も引き続きにはなるが、スケジュールの計画からちゃんと実行していきたい
調査
現状調査
・化粧での悩みについて
知恵袋
note
先行事例
カネボウ化粧品
資生堂
イヴ・サンローラン・ボーテ
MIRIMU公式サイト
技法・技術情報
プロジェクト管理
スケジュール
ToDo
ピンタレストでデザイン参考資料集めワイヤーフレーム、サイトマップ制作- ％％コスメの設定、コンセプト決定％％
- 化粧品のビジュアル決定、cg作成
- web制作
作業を先延ばしにしない
進捗記録
2026.06.25
商品企画書制作
onedrive
2026.06.18
商品企画書制作
2026.06.11
- 作品概要着手
- 企画案決定、誰でも自由に使いやすい、パーソナルカラーセットコスメブランド
- パーソナルカラーコスメブランドの先行事例調査
2026.06.04
- 商品企画練り直し、解決したい問題とそこからの案だし
感じている問題
- 消耗品なのに値段が高く、財布がきつい
- パーソナルカラーがわからない
- 色選びが難しい
- チーク、リップなど、部分部分の色同士の相性が悪く、チグハグの顔になってしまうことがある
- 種類が多く手数が多いため、時間がかかってしまう
案だし
- 容器をリサイクルメインの素材を使ったお手頃コスメ
- 容器の形やデザインを捨てたお手頃コスメ
- パーソナルカラー診断がネットショップと同じところに設置してあるコスメブランド
- 相性がいい色でセット売りしてあるコスメ
- 相性がいい色の範囲で、ある程度自分の好きな色を選べるセットカスタム
- 下地プラスファンデなど、一個にいくつかの機能がある化粧品が多いコスメブランド
2026.05.21
HTML制作
ページ
2026.05.14
頂いたフィードバックから
HTML制作
2026.05.07
化粧品の詳細決定
- コンセプト・近未来、シルバー系、爽やか
- モチーフ・四芒星、りぼん、軌道線 等
- ブランド名・LUMIO
- 仮のイメージ画像をAIで生成
アイデア出しとデザイン
onedrive
2026.04.30
ワイヤーフレーム、サイトマップ制作
タイトル等の記載
2026.04.23
お題決定！
- 架空の化粧品ブランドのウェブサイト、空想のものを形にすること
狙い
- web制作の知識をより詳細に習得したい
- 自分自身の発想力、デザイン力、表現力をみたい
- できれば、化粧品の画像を3dcgを勉強して表現できるようにしてみたい
手順設定
- コスメの設定、コンセプト決定
- ピンタレストでデザイン参考資料集め
- ワイヤーフレーム、サイトマップ制作
- 化粧品のビジュアル決定、cgで作成、またはイラストかAI
- web制作
- 発表
早速、コスメのデザイン、コンセプト案、キーワード
- メイクのモチベ上昇
- コンプレックス解消
- 女児心をくすぐる
- プリキュア、セーラームーンぽいデザイン
- ジェンダーレスに則った、シンプルかつスタイリッシュなデザイン
- 落ち着く、視覚的刺激が少ないデザイン
- 暖色、寒色、テーマカラーの設定
- 心も強くする、ロックなデザイン
- 寒色、さっぱり、すっきり、爽快、整理整頓
- 暖色、癒し、感情の上昇、エネルギッシュ
- 心に別世界を作る、排他的なデザイン
ピンタレストボード
2026.04.16
三案の発表方法の確認と吟味
- イベント、円形ギャラリーや、どこか場所を借りて行う
- 一人では厳しい。毎日の当番や運び込みなど。
- 地元で場所を借りる場合、ターゲット層の限定や、集客が難しい。
- vlogや動画、動画のため、一方的な情報提供になりやすい。
- そもそも設定している内容が、対象者がかなり限られている
- web、経験があるため、手を出しやすい。
課題の決め方を再思考
- 一番学びたいと思っていること。
- より、興味を持って取り組める内容
2026.04.09
調査
- メイク講座(イベント方式)
- メイク動画、私のすっぴんを犠牲にできるかどうか！
- 気になる部位だけ見れるWEB形式のメイク紹介ページ
- コンプレックスに向き合う化粧品開発
- コンプレックスに関して、原因解明と解消を手伝うページ、本
- メイク体験、イベント方式
- 肌質別おすすめ化粧品 クオリティ、値段比較
- 作業捗る、癒されるWebサイト
- コスプレイベント、撮影当日の動きや準備段階のvlog コスプレという趣味への敷居を低くする目的で
- 絵文字を全部見てみよう！ジャンルごとにわけ、可愛くて色鮮やかな文章へ促進
三案の絞り込み
- 架空の化粧品開発webサイト
- メイク動画（私のすっぴんを犠牲にできるかどうか）又は、イベント形式のメイク講座、体験
- コスプレイベント、撮影当日の動きや準備段階のvlog 敷居を低くする目的で
