業務SaaS（シンプル）

だれに向けたページか

飲食店・小売・介護などで、紙やExcelでシフトを組んでいる店長・本部の担当者。 「操作がかんたんそう」「自分の業種でも使えそう」が数スクロールで分かること。派手さより、整った動き。

色

文字

• 英字・数字：Inter（600・700）
• 日本語：Noto Sans JP（400・700）。見出しも本文も同じ書体で、太さだけで差を付ける

ページの構成と演出

1. メインビジュアル（A03）：最初は画面いっぱいの職場の写真に白い見出し。スクロールすると写真が縮み、上下左右に余白のある角丸カードになる。カードの横（スマホでは下）に説明とボタンが現れる
2. 悩み：「紙のシフト表・LINEでの交代連絡・月末の集計」の3つ
3. できること（B03）：PCでは左に写真＋画面の見本（HTMLで作った小さな画面）を固定し、右の4項目（シフト作成・打刻・交代の申請・集計）を読み進めると、左の写真と画面の見本が切り替わる。スマホでは項目ごとに写真と画面の見本を並べる
4. 業種別の使い方（B05）：飲食・小売・介護・物流の4枚のカードが、スクロールで上に積み重なる。奥のカードは少し小さく暗くなる（position: sticky だけで成立し、JS は奥のカードを小さくするだけ）
5. 料金：3プラン（料金は見本の値）
6. 導入の流れ・よくある質問（details）
7. 無料で試す：紺の面に大きなボタン
8. フッター

動きの決まり

• JSや GSAP が無いとき：写真は最初から角丸カード／できることは項目ごとに写真つき／業種カードは sticky で重なる（CSSだけ）。全部読める
• prefers-reduced-motion のときは、カードの重なりも止めて普通に縦に並べる
• 料金・導入社数・お客様の声は見本の値（〇〇）。会員が本物に替える

写真（codex）

職場の全景／ノートPCの手元／スマホでの打刻／紙のシフト表を見る手元／飲食の厨房／小売の店内／介護施設／物流の倉庫、の8枚。顔は写さない。画面の中身は写真ではなく HTML で作る（文字化けを避ける）。

下層ページを作るときの決まり

• 区切りは「白」と「薄い青」の交互。紺の面は1ページに1回まで
• 青い文字は --c-accent-text。ボタンは青地に白文字
• 演出は1ページに1つまで（下層は読ませるページなので）