CASE STUDY

CASE14

KOSE(コーセー)/ADDICTION|コスメブランドECサイト制作事例
KOSE(コーセー)/ADDICTION|コスメブランドECサイト制作事例
KOSE(コーセー)/ADDICTION|コスメブランドECサイト制作事例
KOSE(コーセー)/ADDICTION|コスメブランドECサイト制作事例

KOSE(コーセー)/ADDICTION|コスメブランドECサイト制作事例

KOSE(コーセー)が展開するコスメティックスブランド「ADDICTION」の、ブランドサイトとECサイトを統合したハイブリッド型ECサイトを制作しました。

ブティックスターでは、UI設計、Webデザイン、コーディング、サイト統合を担当。ブランドの世界観を表現しながら、商品一覧・商品詳細ページ・コンテンツ導線を通じて、商品理解と購入しやすさを両立するECサイトを設計しました。

コスメECサイトでは、ブランドイメージだけでなく、商品の色・質感・使い方・コンテンツとの連動が購入判断に影響します。本事例では、メイクアップブランドの世界観と、ECサイトとしての使いやすさを両立することを重視しました。

  • BRAND BUILDER
  • BIZ NAVIGATOR
  • EC BRANDING
  • PHOTO MODE
  • AD PLANNER
  • BASE CONTROL
CREDIT・CLIENT

Producer / UI Design:Hiroyuki Takada/高田博之(Boutiquestar)
Web Director:Yuki Oshio/大塩由紀(Boutiquestar)
Web Designer:Kiyoshi Nunokawa/布川聖
System Engineer:Boutiquestar Inc.

PROJECT

ブランドサイトとECサイトを統合したハイブリッド型ECサイト構築
・UI/UX設計
・Webデザイン制作
・コーディング
・サイト統合
・ブランド表現と購入導線の設計

POINT01

ブランドの世界観を伝えるビジュアル設計

トップページのファーストビューには、ブランドの印象を強く伝えるムービーをフルワイドで配置し、訪問直後にADDICTIONの世界観が伝わる構成にしました。

続くコンテンツでは、商品ビジュアルやブランドイメージをダイナミックに配置し、ブランドサイトとしての表現力と、ECサイトとして商品へ進みやすい導線の両立を図っています。

ブランドの世界観を伝えるビジュアル設計

POINT02

カラー展開を選びやすい商品詳細ページ

コスメECでは、色味や質感の違いを分かりやすく伝えることが重要です。

商品詳細ページでは、カラーバリエーションを確認しやすく、選択したカラーをそのままカートに入れられる導線を設計。ユーザーが迷わず商品を比較・選択できる使いやすさを重視しました。

カラー展開を選びやすい商品詳細ページ

POINT03

商品を探しやすく、購入へつなげる商品一覧ページ

商品一覧ページでは、各商品の特徴が見やすく伝わるレイアウトを設計しました。

一覧画面上でもカラーを確認・選択しやすくすることで、商品詳細ページへ移動する前の比較検討をスムーズにし、購入までの導線を短くするUIを実現しています。

商品を探しやすく、購入へつなげる商品一覧ページ

POINT04

メイク提案と連動したコンテンツ導線

メイクのハウツームービーや複数のビジュアルコンテンツをアーカイブ化し、商品理解を深めるコンテンツ導線を設計しました。

単に商品を並べるだけでなく、使い方やメイク提案を通じてブランド体験を高め、購入検討につながるコンテンツマーケティングを実現しています。

メイク提案と連動したコンテンツ導線

POINT05

Instagram連動による商品発見コンテンツ

Instagramの投稿画像をサイト内コンテンツとして活用し、ビジュアルから商品詳細ページへ自然に遷移できる導線を設計しました。

ユーザーがブランドの世界観に触れながら商品を発見し、そのまま購入検討へ進めるようにすることで、SNSとECサイトを連動させた購買導線を実現しています。。

Instagram連動による商品発見コンテンツ
TOPへ戻る