IT企業（スタイリッシュ／ポップ・元気）

だれに向けたページか

中小企業の社長や総務の担当者。紙とExcelの作業を減らしたいが、ITに詳しくはない。 ページで知りたいのは「何をしてくれる会社か」「うちでも頼めるか（実績・費用感）」「どう相談すればいいか」。 動きは派手にしても、言葉はやさしくする。

色

文字

• 英字の見出し：Space Grotesk（700）
• 日本語：M PLUS 1p（見出し 800・本文 400）、本文 16px・行の高さ 1.8

形

• 角丸は大きめ（16〜24px）
• 写真は少なめ。図形・インラインSVGのイラスト・グラデーションが中心
• 濃い紫の帯に、明るい色の図形が浮かぶ

ページの構成（上から）

1. ヘッダー：会社名・メニュー・「無料で相談する」
2. メインビジュアル：濃い紫の背景＋大きな見出し「紙とExcelの仕事を、アプリに。」＋浮かんで動く図形（SVG）
3. こんなお悩み：4つ（入力が二重／探すのに時間／担当者しか分からない／ミスが出る）。吹き出しの形
4. できること：3つ（業務アプリ／今あるシステムとつなぐ／作った後の保守）
5. 実績：3件（架空。業種と「何がどう楽になったか」を一言）
6. 進め方：相談→見える化→試作→本番→保守、の5段階。横に伸びる線でつなぐ
7. 料金の目安：3つの型（金額は伏せ字。会員が入れる）
8. よくある質問：4つ（開いたり閉じたりできる）
9. CTA：濃い紫の帯＋「まずは30分、話を聞かせてください」＋ボタン
10. フッター

動き（GSAP）

• メインビジュアルの図形が、ゆっくり漂う（ループ。prefers-reduced-motion なら止める）
• 見出しが画面に入ったとき、言葉ごとに下から出る
• 「進め方」の線が、スクロールに合わせて左から伸びる
• 実績の数字がカウントアップする
• GSAP が読めないときは何もしない（if (!window.gsap) return;）。CSSだけで全部読める

決めること（この見本で決める）

• GSAP を zip の中に入れるか、CDN から読むか

写真（codex・承認後に作る）

打ち合わせの手元／画面を指さす手／オフィスの風景（人は後ろ姿）、の3枚だけ。あとは SVG。

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

• 濃い紫の帯（--c-dark）は1ページに1回まで。CTA に使う
• 英字の見出し（Space Grotesk）＋日本語の説明の2段
• 動きはページごとに2種類まで。全部に動きを付けない