NIGHT CAREMOISTURE SERUM?4,200
CASE STUDY / E-COMMERCE / 2026
夜のEC体験を、
「選びやすさ」から再設計。
スキンケアブランド「YORU-SHIGOTO」の自主制作デモECサイト。世界観を整えるだけでなく、商品を探す・比較する・選ぶ・購入するまでの迷いを減らすことを目的に、情報設計からUI、HTML・CSS・JavaScript実装、動作検証まで一貫して構築しました。
INFORMATION ARCHITECTUREUI DESIGNHTMLCSSJAVASCRIPTRESPONSIVE
PROJECT自主制作デモEC
PLATFORMカラーミーショップ
ROLE企画・UI・実装・検証
CREATOR酒井 風太 / IVY
01
PROJECT OVERVIEW
見た目だけで終わらない、
購入までつながるブランド体験。
「きれいなサイト」を目標にするのではなく、商品選びの迷いを減らす設計と、夜のケアにふさわしい静かな世界観を両立させました。
- TYPE
- スキンケアECサイト / 自主制作
- SCOPE
- 構成・文章・UI・HTML・CSS・JavaScript
- PAGES
- トップ / 商品一覧 / 商品詳細 / カート
- DEVICE
- スマートフォン〜PCのレスポンシブ対応
- QA
- 主要導線とインタラクションを実機確認
※実在商品の販売を目的としたサイトではなく、EC設計・デザイン・実装力を提示するための自主制作ポートフォリオです。
02
CHALLENGE & STRATEGY
ECで起こる「選べない」を、
3つの設計で解決。
商品の魅力を並べるだけでは、初めて訪れた人は自分に必要な商品を判断できません。ブランドの雰囲気と、行動につながる分かりやすさを同時に設計しました。
01
FINDABILITY商品名ではなく、
悩みから探せる入口
「乾燥」「時短」「基本ケア」など、利用者が普段使う言葉を入口に設定。商品知識がなくても探し始められる構成にしました。
02
GUIDANCE3つの質問で、
おすすめへ導く診断
選択肢を段階的に絞るNight Care FinderをJavaScriptで実装。質問・進行状況・結果表示まで一つの体験として設計しました。
03
CONVERSION迷わず次へ進める、
購入導線と追従CTA
商品一覧・詳細・カートまでのつながりを確認し、必要な場面では固定CTAを表示。世界観を壊さず、次の行動を明確にしました。
03
BEFORE / AFTER
雰囲気だけではなく、
情報の順番を再設計。
中央のハンドルを左右へ動かしてください。左側は商品を並べるだけの一般的なECを再現した比較用モデル、右側は悩みから選び、次の行動へ進める今回の設計です。
ONLINE SHOP
NEW & RECOMMENDおすすめ商品を
おすすめ商品を
掲載しています。
YORU-SHIGOTO
PICK YOUR NIGHT CARE今夜の自分に合う
今夜の自分に合う
ケアを選ぶ。
乾燥時短基本ケア
04
USER JOURNEY
発見から購入まで、
迷いを残さない6ステップ。
ブランドを知った直後に商品を押しつけず、「探す」「診断する」「比べる」を挟むことで、納得して商品詳細へ進める流れを作りました。
STEP 01世界観を知る
夜の時間とブランド思想をヒーローで伝える。
STEP 02悩みから探す
自分の状況に近い入口を選ぶ。
STEP 03診断で絞る
3つの質問から候補を提案。
STEP 04商品を比較
カードで役割・価格を見比べる。
STEP 05詳細を確認
使い方・FAQ・注意点まで理解。
STEP 06カートへ進む
数量と金額を確認して購入導線へ。
05
FEATURE LAB
デザインと機能を、
同じ目的に向ける。
目立つためだけの演出ではなく、理解・選択・行動を助ける機能に限定して実装しました。タブを押すと各機能の内容を確認できます。
SMART GUIDANCE3つの質問で、
3つの質問で、
今夜のケアを提案。
質問ごとに選択内容を集計し、条件に合う商品名・価格・説明・リンクを結果画面へ表示します。リセット機能と進行バーも実装しました。
選択内容のスコアリング進行状況の可視化商品情報の動的切り替えもう一度選べるリセット機能
QUESTION 0202 / 03
今、見直したいケアは？
Aケアの最初に行うクレンジング
Bケアの仕上げに行う保湿ケア
PRODUCT DISCOVERY比較しやすく、
比較しやすく、
詳細へ進みやすい商品UI。
画像・カテゴリー・商品名・価格・詳細ボタンの優先順位を整理。スマートフォンでは2列、PCでは情報量に合わせたグリッドで表示します。
商品データの動的出力画像の遅延読み込み商品詳細への明確なリンクレスポンシブ商品グリッド
NIGHT CAREMOISTURE SERUM
?4,200
NIGHT CARECLEANSING GEL
?3,600
INTERACTION DESIGN次の行動を助ける、
次の行動を助ける、
静かなインタラクション。
ローディング、スクロール表示、画像拡大、追従CTA、ページ上部ボタンを実装。動きが苦手な利用者にはアニメーションを抑える設定も用意しました。
ブランドローディングスクロールリビール商品画像モーダル固定CTA・トップボタン
商品を見る →
↑
06
DESIGN SYSTEM
夜の静けさと、
選びやすい情報設計。
CALM / 静けさ
深いネイビーと余白で、夜に見るサイトとして落ち着くトーンを設計。
CLEAR / 明快さ
英字ラベル、番号、見出しの階層で、現在地と情報の役割を明確化。
CONTINUE / 続けやすさ
特別感よりも「毎晩続けられる」を文章・導線・機能の軸に設定。
DEEP NIGHT#081528
NAVY#101F34
GOLD#BD8F36
MOON#D9BC7C
PALE#F1F5F9
DISPLAY / MINCHO夜を、自分に戻る時間へ。
感情やブランドメッセージを伝える見出し。
UTILITY / GOTHICPRODUCT
INFORMATION
INFORMATION
商品情報・ボタン・説明の読みやすさを支える書体。
07
CODE ARCHITECTURE
容量制限を、
役割分離で乗り越える。
カラーミーショップには保存容量の上限があります。機能を増やし続けるのではなく、共通・トップ・商品一覧・商品詳細へコードの責任範囲を分け、保守しやすい構成へ整理しました。
YORU-SHIGOTO / TEMPLATE ARCHITECTURE
COMMON共通HTML / CSS
ヘッダー・フッター・共通機能
TOPトップ専用
ブランド・診断・商品導線
LIST商品一覧専用
商品カード・絞り込み表示
DETAIL商品詳細専用
説明・画像拡大・追従CTA
診断ロジックをトップへ移動
トップページでしか使用しない約14,200文字分の診断JavaScriptを、共通HTMLからトップHTMLへ分離しました。
整理前
約80%
整理後
約59%
変更箇所を判断しやすい構成
共通機能とページ専用機能を分けることで、修正時の影響範囲を小さくし、追加実装の余白も確保しました。
08
QUALITY & ACCESSIBILITY
「動いた」で終わらせず、
使える状態まで確認。
RESPONSIVE
スマートフォンとPCで、文章・カード・ボタン・固定要素の見切れを確認。
ACCESSIBILITY
見出し階層、alt、button要素、aria属性、キーボード操作を意識して構築。
REDUCED MOTION
端末設定に応じてアニメーションを停止するprefers-reduced-motionに対応。
REAL FLOW TEST
トップ・一覧・詳細・カートを実際に移動し、数量と合計金額まで確認。
09
PROCESS
考える、作る、確かめる。
小さく改善を重ねる制作。
01 / CONCEPT世界観の定義
夜・セルフケア・継続をブランド軸に設定。
02 / STRUCTURE情報設計
悩み・手順・診断の3つの探索導線を設計。
03 / UI画面デザイン
ネイビー×ゴールドで階層と余白を統一。
04 / BUILDHTML/CSS/JS
テンプレート制約内で機能を実装。
05 / TEST実機確認
主要ページと購入導線の動作を確認。
06 / REFACTOR整理・軽量化
コードの役割分離と容量削減を実施。
AI-ASSISTED DEVELOPMENT
AIを「答え」ではなく、
制作を前へ進める道具として活用。
生成されたコードをそのまま採用するのではなく、目的を細かく分解し、画面で確認しながら修正を重ねました。要件を言語化し、実装結果を評価し、問題があれば原因を切り分ける工程を自分で進行しています。
デザイン・営業・運用の視点をつなぎながら、AIを活用して制作速度と試行回数を高めることも、このプロジェクトで示したスキルの一つです。
HUMAN目的・構成・判断
AI SUPPORT案出し・コード補助
ITERATION実装・確認・改善
OUTPUT運用できる完成形
AVAILABLE FOR SELECT PROJECTSデザインから実装まで。
IVY / CREATIVE PRACTICE
デザインから実装まで。
伝わる体験を、形にする。
ブランドの魅力を整理し、迷わず行動できる流れへ設計する。見た目だけで終わらせず、公開後も使い続けられる形まで一つにつなげます。
01WEB DESIGN世界観・情報設計・導線を一つの体験として構成。
02FRONT-ENDHTML・CSS・JavaScriptで動きと使いやすさを実装。
03AI-ASSISTEDAIを活用し、検証と改善の速度を高める制作進行。
PLANNINGDESIGNFRONT-ENDIMPROVEMENT
