WORKS
Ni.5 SALON
ヘッドスパ・フェイシャルサロン
ホームページ制作
PROJECT OVERVIEW
制作概要
- PROJECT
- Ni.5 SALON ホームページ
- CATEGORY
- ヘッドスパ・フェイシャルサロン
- TYPE
- 1ページ構成のサロンサイト
- DEVICE
- PC / スマートフォン対応
- SCOPE
- デザイン / コーディング
- TECHNOLOGY
- HTML / CSS / JavaScript
DESIGN CONCEPT
静けさと上質さを、ひとつの画面に。
完全個室のサロンが持つ落ち着いた空気を、色・余白・動きで表現しました。
- 01
黒を基調とした配色
深い黒と写真の光だけで構成し、サロンの落ち着いた雰囲気を伝えます。
- 02
たっぷりの余白
文字を詰め込まず、ゆったりとした余白で読みやすさと品格を両立しました。
- 03
やわらかな動き
スクロールに合わせてゆっくり現れる演出で、心地よい読み進めを演出します。
FULL PAGE DESIGN
PCサイト全体
自動でスクロールします（マウスを乗せると停止）
DESIGN DETAILS
デザインの詳細
RESPONSIVE DESIGN
スマートフォン版
スマートフォン専用に構成を組み直し、指で読み進めやすい余白と文字サイズに整えました。PCの縮小ではなく、スマホ幅で作り込んだデザインです。
MOTION DESIGN
実際の動き
静止画では伝わらない、スクロールや操作に合わせた動きを、短い動画でご紹介します。再生ボタンで、ご自身のタイミングでご覧いただけます（音声はありません）。
PC / 約56秒
ゆっくり現れる、静かなサロンサイト
- HERO写真がゆっくり現れ、キャンドルの光が揺らめきます。英字のコピーは1行ずつ下から浮かび上がります。
- SCROLL見出しや本文が、スクロールに合わせてふわっと表示されます。
- ABOUT3つの項目は、マウスを乗せるとそれぞれの説明が開きます。
- MENU / FLOWメニューの写真がやわらかく現れ、ご来店の流れの縦線がスクロールに合わせて伸びます。
- FAQよくあるご質問は、クリックで開閉できます。
- HEADERスクロールするとヘッダーが暗い半透明に変わり、上部の細い進行ラインが伸びます。
SMARTPHONE / 約56秒
指で読み進める、スマホサイト
- HERO写真がゆっくり現れ、英字のコピーが1行ずつ表示されます。
- MENUハンバーガーボタンで全画面のメニューが開き、もう一度押すと閉じます。
- ABOUT3つの項目は、タップすると説明が開きます。
- SCROLL / FAQ見出しや本文がふわっと現れ、よくあるご質問はタップで開閉できます。
- RESERVEスクロールすると、画面下部に予約ボタンのバーが現れます。
※動画は、実際のNi.5 SALONサイトの動きを画面収録したものです（音声なし）。マウスの矢印やタップの表示は、操作を分かりやすくするための録画用の表示で、サイトの機能ではありません。FIRST VIEW の動きは、初回表示と同じ演出を最初から再生して収録しています。
コメント