ヘアサロン（女性向け・可愛い系・スマホのまま横に延長）のWebデザイン見本

20〜40代の女性。大きなサロンが落ち着かない人、子どもを預けて短い時間で通いたい人。「ここなら気を張らずに行けそう」と思わせる。


業種	美容・サロン（ヘアサロン・女性向け）
系統	可愛い系（丸み・手書き風・やわらかい影・弾む動き・葉っぱのシール）
テイスト	ナチュラル・やさしい／かわいい
色	緑
形	スマホのまま横に延長。PCでも段組みにしない。写真と色の帯は画面の端まで、文字の列だけ読みやすい幅（最大 640px）。文字はスマホと同じく大きいまま
スライド	Swiper（`vendor/swiper-bundle.min.js`・MIT）。ページ送りの点・矢印・キーボード・自動送りの一時停止ボタン
メインビジュアル	コラージュ。切り抜きの人物と枝・丸・葉っぱ・手書きの文字を重ねる
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A09（切り抜きのコラージュが奥と手前で違う速さで動く）／B08（PCでは左右を固定し、中央だけスマホ幅で流す。メニューの区切りだけ）／B06（はじめての日の流れが付箋タブのように積み重なる。CSSだけ）
架空の店	「hair room ハルニレ」— 住宅街の、席が2つだけの小さなヘアサロン

だれに向けたページか

20〜40代の女性。大きなサロンが落ち着かない人、子どもを預けて短い時間で通いたい人。「ここなら気を張らずに行けそう」と思わせる。

メインビジュアル（A09・コラージュ）：画面いっぱいの若草色に、切り抜きの女性の後ろ姿・枝とはさみ・大小の丸・葉っぱ・手書きの「ふわっと、かるく。」。読み込み時にポンと弾んで出て、スクロールで奥のものほどゆっくり動く
ごあいさつ：1列。文字だけの区切り
サロンのすみずみ（Swiper）：写真のスライド5枚。点・矢印・キーボード・一時停止
メニュー（B08）：PCでは左に「MENU」の舞台（葉っぱの絵）、右に予約の札を固定し、中央のスマホ幅の料金表だけが流れる。スマホでは普通の1列
はじめての日（B06）：5つの手順が付箋タブのように上に積み重なる。タブの見出しは少しずつ右にずれる
ご予約・アクセス：端まで広がる緑の帯
フッター

弾む動き（back.out）とゆっくりした視差。回し続けない
JSや GSAP が無いとき：コラージュは止まったまま全部見える。Swiper は指で横に送れる並び（scroll-snap）に戻る。B08・B06 はCSSだけなのでそのまま動く
prefers-reduced-motion のときは自動送りしない・コラージュは動かさない

新しく作る：女性の後ろ姿（切り抜き）／ユーカリとはさみ（切り抜き）／サロンの中。写真庫から：003-salon の hero-right・shampoo、017-lash の flower、020-seikotsu の waiting。

料金・電話番号・住所は見本の値（〇〇）。会員が本物に替える。