CASE STUDY 03
自主制作
美容サロンサイト
HTML / CSS / JS

Fleur

企画・デザイン・コーディング

https://hiro329biz-cpu.github.io/Hair_salon-site/

FleurのPC・スマートフォンモックアップ — DESKTOP / MOBILEHTML / CSS / JS

PROJECT DETAILSCASE STUDY 03 / Fleur

Fleur / CASE STUDY

43°03′N / 141°21′E

来店前の不安を、静かな余白でほどく。

SURFACE

余白で伝える上質感

アイボリーとブラウンの穏やかな配色に、ゆったりした余白を合わせました。

PATH

来店前の不安を減らす情報設計

コンセプト、料金、スタッフ、カタログを順に見られ、予約判断に必要な情報を整理しています。

SYSTEM

スマートフォンでの予約導線

モバイルでも写真と情報の読みやすさを保ち、予約ボタンへ迷わず進める設計です。

TYPE自主制作 / Individual project
ROLE企画・デザイン・コーディング
TEAM1 person / 全工程を担当
STACKHTML / CSS / JavaScript / Responsive / UI Design
DEVICEResponsive

VIEW LIVE SITE ↗

IMPLEMENTATION NOTE

実装・検証内容

HTML・CSS・JavaScriptでサロンサイト全体を実装
メニュー、料金、スタッフ、カタログの情報階層を整理
予約導線へ自然に到達できるページ構成を設計
PC・スマートフォンの主要幅で画像比率と可読性を確認

FleurのPC版全体デザイン — 01DESKTOP1440px VIEW

Fleurのスマートフォン版全体デザイン — 02MOBILE390px VIEW