アイラッシュサロン（綺麗系）のWebデザイン見本

30〜40代。派手なまつげより、すっぴんでも整って見える自然な目もとを求める人。値段より、仕上がりの品と落ち着ける空間で選ぶ人。


業種	美容・サロン（アイラッシュ）
系統	綺麗系（大きな余白・細い線・細い明朝・彩度を落とした白黒・ゆっくりした動き）
テイスト	高級感
色	白・黒・グレー
形	ページ全体が横に動く（PCでは縦スクロールでページ全体が横に進む。スマホと JSなしは普通の縦並び）
スライド	CSSだけ（scroll-snap）（デザインの4種類。矢印は `scrollBy` だけの JS）
メインビジュアル	イラスト・図形（細い線で描いた、閉じた目とまつげの SVG が主役）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A06 0→100% の数字とマスコット（1.5秒以内）／C03 横に流れる途中で背景が白→灰→黒に変わる＋番号の進み具合／F04 アーチ・丸で写真を切り抜き、下から形が伸びて現れる
架空のサロン	「atelier CILS（アトリエ・シル）」— 完全予約制、席がひとつのまつげエクステとまつげパーマのサロン

だれに向けたページか

30〜40代。派手なまつげより、すっぴんでも整って見える自然な目もとを求める人。値段より、仕上がりの品と落ち着ける空間で選ぶ人。

変数	値	使う所
`--c-white`	`#ffffff`	1枚目の地
`--c-mist`	`#efefec`	2枚目の地
`--c-gray`	`#cfcfcb`	3枚目の地（本文 #374151 で 6.1）
`--c-stone`	`#5c5c58`	4枚目の地（文字は白系）
`--c-black`	`#141414`	5〜6枚目の地
`--c-ink`	`#1a1a1a`	明るい地の見出し・線
`--c-accent-text`	`#55554f`	明るい地の英字の添え字（白で 7.5）
`--c-on-dark`	`#ecece9`	暗い地の文字（黒で 15 以上）
`--c-text`	`#374151`	明るい地の本文
`--c-sub`	`#4b5563`	明るい地の補足
アクセントの色は持たない（白黒の濃淡と細い線だけ）。写真も白黒寄りにそろえる（CSS の `grayscale`）。

読み込み（A06）：白い画面の中央に細い数字「000→100」と、線で描いた小さな目（マスコット）。100 になると目がまばたきして開き、幕が上へ消える。1.5秒以内。JSなしでは出さない
ページ全体が横に動く（C03）：PCでは縦にスクロールすると、6枚のパネル（01 はじめ／02 想い／03 デザイン／04 サロン／05 流れ／06 ご予約）が横に進む。進むにつれて地が白→薄い灰→灰→石の灰→黒→黒 と変わり、文字の色も一緒に切り替わる。画面の下に「01 ──── 06」と進み具合の線
メインビジュアル（イラスト）：閉じた目とまつげの細い線の SVG。読み込みのあと、線が一本ずつ描かれる。見出し「目もとに、静けさを。」
アーチの写真（F04）：02 と 04 のパネルで、アーチ形・丸形に切り抜いた写真が下から形が伸びて現れる
デザイン（scroll-snap）：ナチュラル／カール／フラット／ロングの4種類を、線のイラストつきのカードで横に送る
流れ：カウンセリング→施術→仕上げ確認→おうちでのケア
ご予約：黒の地に細い枠のボタン
フッター（最後のパネルの中）

スマホ・タブレット（1080px 未満）と JSなし：6枚が普通の縦並び。地の色は区切りごとに白→灰→黒と段々に変わる（これだけで C03 の色の変化が伝わる）。アーチの写真は最初から見えている
prefers-reduced-motion のときは、横に動かさず縦並び。読み込み画面も出さない
横の動きはスクロールに合わせるだけ。勝手には進まない
料金・住所は見本の値（〇〇）。会員が本物に替える

CSSだけ：overflow-x: auto; scroll-snap-type: x mandatory。矢印は scrollBy だけの JS。

新しく作る：閉じた目のまつげ（白黒寄り）・施術室。写真庫から：待合（003）・道具の静物（003）・まつげの道具（017。CSS で白黒に）。