● WORKS — N°01

Repi
Perfume E-Commerce

WEB Design Solo

「ときめきを、纏う。」をテーマにした香水ブランド「Repi」のECサイト。
ブランド設計から実装までを一人で手がけ、ふわりと香る日常をそのままデザインに落とし込みました。

— 01

Overview概要

— 02

Target

20〜30代の女性。自分へのご褒美や小さな贅沢を大切にし、上品で物語のある香水・ライフスタイル雑貨を選ぶ層。

Goal

「Repi」の世界観を五感で体験してもらい、"一滴のときめき"を商品と一緒に持ち帰りたくなるECサイトを作ること。ブランドを知ってから購入まで、ひと続きの物語として設計しました。

— 03

キーモチーフはマーガレット。儚げで透明感のある花の佇まいをブランドの象徴とし、背景画像を固定することで「香りがふわりと漂う空気感」をスクロール中も感じられるように設計しました。

配色はクリームベージュとホワイトを基調に、深緑をアクセントに。Cormorant Garamondのセリフ体とShippori明朝を重ねて、西洋の上品さと和の繊細さを同居させています。

香りの物語を「ひらく／ときめく／よりそう」の三幕構成で表現し、商品紹介の前にまず"世界観への共感"を生む導線に。POP-UPやInstagramへの導線も自然に溶け込ませ、リピート訪問を促進しています。

— 04

01

固定背景 × スクロール演出

マーガレットのビジュアルを背景に固定し、中央のコンテンツだけがスクロールする設計に。香りがずっと漂っているような没入感を目指しました。
02

香りの三幕構成

Top / Middle / Last のノートを「ひらく・ときめく・よりそう」という言葉で物語化。商品の前にブランドストーリーへの共感を生む導線を設計しました。
03

細部のインタラクション

花モチーフのカスタムカーソル、タブ切替え、ドロワーメニュー、ふわっと出てくるreveal演出など、触れるたびに小さなときめきを感じるUIを実装しました。
04

ブランディング〜実装まで一気通貫

ロゴ・商品ビジュアル・トーン設計から、HTML/CSS/JSでの実装まで一人で担当。デザインの意図をそのままコードに反映できる強みを活かしました。

— 05

デザインだけで終わらせず、実装まで自分の手で完成させることで「思い描いた世界観をそのまま形にできる」ことを証明した作品です。香りというカタチのないものを、スクロール・タイポグラフィ・インタラクションで感じてもらう——ブランドを"体験"として届けるデザインを目指しました。