毛穴悩みに特化したブランド「dotbye」のWebページ制作を担当。プロダクトデザイナーの意向をもとに、ページ構成の提案やコーディングを実施。「キャラクターを活かした楽しいページにしたい」という要望を反映し、動きのあるブランドサイトを完成させました。
| ターゲット |
10~20代の主に女性 キャラクターが好き、毛穴悩みがある層 |
|---|---|
| 目的 |
コンセプトと商品の魅力を伝え、ブランドのファンを育成 キャラクターの世界観を深め、親しみやすさを感じてもらう |
| 課題 |
・ブランドキャラクターについての情報が少ない ・公式サイトがないことで不安に感じるユーザーがいる ・商品が好きな人とキャラクターが好きな人を結びつける場がない |
| 改善 |
・キャラクタープロフィールページを設ける ・キャラクターを動かすことで世界観をわかりやすく表現 ・ページ内を回遊することで、楽しみながら商品について理解できる |
| 制作期間 |
企画/情報設計/WF２週間 コーディング(6P)4週間 |
| 使用ツール | Figma / VScode |
ページデザインの一覧になります。
画像をスクロールして、ご確認いただけます。
キャラクターの表情が変わるアニメーションを設定。
PC版では左右のキャラクターにも動きを追加。
キャラクターを自己紹介シート風に紹介。
SNSや商品リンクを設置し、ページ内の回遊性を向上。
ECサイトへのリンクを細かく設置。
商品イメージの泡が吹き出すようなアニメーションを設定。
ECサイトへのリンクを細かく設置。
効果をわかりやすく3STEPで解説した。
ECサイトへのリンクを細かく設置。
オイルバターのような質感を表現した。
サイトの雰囲気に合わせて、問い合わせフォームを設置。
