補助金申請支援（綺麗系・LP）のWebデザイン見本

設備を入れたい・お店を広げたい小さな会社の社長（40〜60代）。「補助金は気になるが、書類がむずかしそう」と止まっている人。落ち着いた信頼感で、「30分の無料診断（使える補助金を探す）」につなげる。


業種	士業・コンサル（補助金の申請支援）
系統	綺麗系（細い明朝・1px の線・くすんだ藤色・ゆっくり）
骨組み	K08 会話で進む：「お客様の質問（左）→ 事務所の答え（右）」の吹き出しで全部が進む。悩み→解決→申請の流れ→補助金→声→料金→よくある質問→申し込みも、全部「質問と答え」。区切りの帯は無く、1本の会話
形	LP型（1枚もの）：ヘッダーはロゴと無料診断ボタンだけ（スマホの三本線は区切りへのリンク）。申し込みボタンは5か所（ヘッダー・最初の答え・料金・フォーム・スマホは下に固定）
スライド	CSSだけ（scroll-snap）：補助金のカード。矢印は JS の `scrollBy` だけ
メインビジュアル	文字が主役（タイポ）：縦書きの巨大な明朝「採択まで、ていねいに。」。写真は中央に細く1枚（顔の1枚）
演出の型	E04（英字1行のスクランブル）／B06（申請の流れが付箋のタブで積み重なる・CSSの sticky だけ）。C02（円柱のたわみ）は外した：scroll-snap と JS のたわみが両立しにくく、動きの主役が2つになるため
動きの主役	E04 のスクランブル（ファーストビューの英字・1.6秒・1回だけ）。B06 と会話は CSS のレイアウトで、出現アニメなし。GSAP 不使用
架空の事務所	「藤野補助金サポート室」

色と書体（共通の変数名13個だけ）

--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent（葡萄色）--c-accent-text --c-on-accent --c-2（淡い藤色）--c-3（見出しの墨色）--font-ja --font-head（Noto Serif JP 300/500）--font-en（Tenor Sans＋日本語の書体）。

動かないとき

JS なし：英字は最初から正しい綴り、付箋とスライドと会話は CSS なので同じ。prefers-reduced-motion：スクランブルなし、スムーズスクロールなし。

スライドの作り方

overflow-x: auto; scroll-snap-type: x mandatory。JS なしでも指で送れる。矢印ボタンは scrollBy だけ。

写真の出どころ

新しく作った：desk（藤の花と書類の机・顔の1枚）。写真庫から（画像を開いて、補助金の種類に合うか確かめて選んだ）：case6 工場のライン（設備）・case5 ノートパソコンの机（IT）・case2 服屋（販路）・case3 開店の朝（創業）・case1 厨房（省エネ）・case4 倉庫（人材）。「hands」は使わない。