CREDIT・CLIENT
Producer / UI Design:Hiroyuki Takada/高田博之(Boutiquestar)
Web Director:Yuki Oshio/大塩由紀(Boutiquestar)
Web Designer:Kiyoshi Nunokawa/布川聖
System Engineer:Boutiquestar Inc.
KOSE(コーセー)が展開するコスメティックスブランド「ADDICTION」の、ブランドサイトとECサイトを統合したハイブリッド型ECサイトを制作しました。
ブティックスターでは、UI設計、Webデザイン、コーディング、サイト統合を担当。ブランドの世界観を表現しながら、商品一覧・商品詳細ページ・コンテンツ導線を通じて、商品理解と購入しやすさを両立するECサイトを設計しました。
コスメECサイトでは、ブランドイメージだけでなく、商品の色・質感・使い方・コンテンツとの連動が購入判断に影響します。本事例では、メイクアップブランドの世界観と、ECサイトとしての使いやすさを両立することを重視しました。
Producer / UI Design:Hiroyuki Takada/高田博之(Boutiquestar)
Web Director:Yuki Oshio/大塩由紀(Boutiquestar)
Web Designer:Kiyoshi Nunokawa/布川聖
System Engineer:Boutiquestar Inc.
ブランドサイトとECサイトを統合したハイブリッド型ECサイト構築
・UI/UX設計
・Webデザイン制作
・コーディング
・サイト統合
・ブランド表現と購入導線の設計
POINT01
トップページのファーストビューには、ブランドの印象を強く伝えるムービーをフルワイドで配置し、訪問直後にADDICTIONの世界観が伝わる構成にしました。
続くコンテンツでは、商品ビジュアルやブランドイメージをダイナミックに配置し、ブランドサイトとしての表現力と、ECサイトとして商品へ進みやすい導線の両立を図っています。

POINT02
コスメECでは、色味や質感の違いを分かりやすく伝えることが重要です。
商品詳細ページでは、カラーバリエーションを確認しやすく、選択したカラーをそのままカートに入れられる導線を設計。ユーザーが迷わず商品を比較・選択できる使いやすさを重視しました。

POINT03
商品一覧ページでは、各商品の特徴が見やすく伝わるレイアウトを設計しました。
一覧画面上でもカラーを確認・選択しやすくすることで、商品詳細ページへ移動する前の比較検討をスムーズにし、購入までの導線を短くするUIを実現しています。

POINT04
メイクのハウツームービーや複数のビジュアルコンテンツをアーカイブ化し、商品理解を深めるコンテンツ導線を設計しました。
単に商品を並べるだけでなく、使い方やメイク提案を通じてブランド体験を高め、購入検討につながるコンテンツマーケティングを実現しています。

POINT05
Instagramの投稿画像をサイト内コンテンツとして活用し、ビジュアルから商品詳細ページへ自然に遷移できる導線を設計しました。
ユーザーがブランドの世界観に触れながら商品を発見し、そのまま購入検討へ進めるようにすることで、SNSとECサイトを連動させた購買導線を実現しています。。
