カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 美容・サロン |
| 系統 | 綺麗系（余白・細い線・細いゴシック・彩度を落とした青・ゆっくりした動き） |
| テイスト | シンプル／ナチュラル・やさしい |
| 色 | 青（くすんだ空色。白と淡い霧色の面） |
| 形 | スマホのまま横に延長：PCでも段組みにしない。1列・大きな文字のまま、写真と色の帯は画面の端まで。文字の列だけ 560px に収める |
| スライド | Swiper：デザインの見本（ネイル・まつげ）。点・矢印・キーボード。自動送りは止められる |
| メインビジュアル | 分割（2〜3枚）：まつげ・ネイル・お部屋の縦長写真3枚を横に並べ、時間差で上下にずらす |
| アニメーション | あり（GSAP＋ScrollTrigger＋Swiper） |
| 演出の型 | B04 全画面のお部屋写真の中の小窓だけが「まつげ→ネイル→眉」と入れ替わる／B08 料金の区切りだけ、PCでは左右を固定し中央だけスマホ幅で流す／F01 写真が区切りの境目をまたいで置かれる |
| 架空の店 | 「Mizuha（みずは）eyelash & nail」— まつげとネイルを1回の来店で済ませられる、席が2つの小さな店 |
だれに向けたページか
仕事と家のことで忙しい20〜40代。「まつげとネイル、別々の店に通うのが大変」な人。 静かで清潔そう、を一目で伝え、同時に施術できることと料金を迷わず読ませる。
「スマホのまま横に延長」と B08 の両立
- ページ全体は「スマホのまま横に延長」。PCでも1列のまま、帯と写真は端から端まで
- B08（左右固定・中央だけスマホ幅）は料金の区切りだけに使う。左右は青い霧色の舞台に、施術の写真と短い言葉を固定する
- これで「延長した1列」と「B08 の舞台」の違いが、同じページの中で見比べられる
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f7fafc |
背景（白） |
--c-mist |
#e6eff6 |
霧色の面 |
--c-blue |
#7aa6cc |
細い線・図形（線なので 3 以上） |
--c-deep |
#3f6f99 |
ボタンの面（白い文字 5.32） |
--c-main |
#1f3447 |
見出し（12.21） |
--c-accent-text |
#2f6491 |
白・霧色の上の青い文字（5.98／5.38） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Zen Kaku Gothic New 300（細いゴシック。大きく、字間を広く）
- 英字：Jost 300（細い幾何学の書体）
- 本文：Zen Kaku Gothic New 400 16px・行の高さ 2.0
ページの構成と演出
- メインビジュアル（分割）：縦長写真3枚（まつげ・ネイル・お部屋）が端から端まで並ぶ。読み込み時に時間差で幕が上がり、スクロールすると3枚が違う速さで上下にずれる。その下に大きな細字のコピー
- ごあいさつ：1列の短い文。写真が次の区切りとの境目をまたぐ（F01）
- B04 お部屋の小窓：全画面のお部屋写真を止めたまま、中の小窓だけが「まつげ→ネイル→眉」と入れ替わり、横の言葉も替わる
- Swiper デザインの見本：ネイル・まつげの写真
- B08 料金：PCでは左右に霧色の舞台を固定し、中央のスマホ幅の料金表だけが流れる。スマホでは普通の1列
- 同時施術の流れ：番号つきの1列
- 予約・アクセス：境目をまたぐ写真（F01）とボタン
- フッター
動きの決まり
- JSや GSAP が無いとき：分割の3枚は並んだまま、B04 の小窓は3つの小さな写真として縦に並ぶ、Swiper は指で送れる横並び。B08 は CSS の sticky だけなので JSなしでも同じ
prefers-reduced-motionのとき：上と同じ「動かない版」。Swiper の自動送りもしない- 動きはゆっくり（1.2〜1.6秒・
power2.out）。弾まない
スライドの作り方
Swiper（vendor/swiper-bundle.min.js・MIT）。点・矢印・キーボード・自動送り（「止める」ボタンで止まる）。JSなしは overflow-x: auto の横並び。
写真
新しく作る：まつげ（縦）／ネイル（縦）／お部屋（横）の3枚（分割と B04）。
写真庫から：014 ネイル3枚（Swiper）／017 眉・ケア用品（B04・Swiper）。庫の写真はピンク寄りなので、CSS で彩度を落として（saturate(.45)）青い店の色にそろえる。会員が自分の写真に替えたら、この1行は消してよい。顔は写さない（閉じた目元の寄りと手だけ）。
会員が本物に替えるもの
料金・所要時間・電話番号・住所はすべて見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- PCでも段組みにしない。文字の列は 560px、写真と帯は端から端まで
- 線は 1px の
--c-blue。角は丸めない（0〜2px） - 演出は1ページに1つまで。動きはゆっくり、弾ませない
