採用コンサル（可愛い系／かわいい）のWebデザイン見本

求人を出しても応募が来ない小さな会社の社長・総務の人。「採用コンサルは堅くて高そう」と思っている人。かわいく親しみやすいのに、やることは具体的と伝え、無料相談につなげる。


業種	士業・コンサル
系統	可愛い系（丸み・太い線とずらした影・ポップな書体・弾む動き・吹き出しとシール）
テイスト	かわいい
色	青（空色と紺。差し色にたまご色とももいろ）
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）：支援した会社の事例。矢印は `scrollBy` だけの JS
メインビジュアル	画像1枚のLP風（大きなコピー）：会議の写真1枚を全面に、太く大きいコピー「採用、いっしょにふくらまそう。」とボタン
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A03 全画面の写真が、余白のある角丸カード（太い線つき）に縮む／C03 支援の5ステップが横に流れ、途中で背景が白→空色→紺に変わる＋「1 —— 5」の進み具合
架空の会社	「くもまる採用研究所」— 社員10〜50人の会社の、求人票づくりから面接まで手伝う採用コンサル

だれに向けたページか

求人を出しても応募が来ない小さな会社の社長・総務の人。「採用コンサルは堅くて高そう」と思っている人。 かわいく親しみやすいのに、やることは具体的と伝え、無料相談につなげる。

C03 の紺の面 #0f1b3d の上の文字は #ffffff／補足は #cbd5e1（11.37）。

メインビジュアル（A03）：会議の写真1枚が全面。大きなコピーと「無料で相談する」。スクロールすると写真が四辺から縮み、太い紺の線とずらした影のついた角丸カードになる。角に「相談無料」のシールがポンと出る
こんなお悩み：吹き出し4つ（くもまるのイラストつき）
くもまるのこと：会社の紹介と、雲のマスコット（SVG）
C03 支援の5ステップ：PCでは縦にスクロールすると横に流れ、背景が白→空色→紺に変わっていく。下に「1 —— 5」の進み具合。スマホでは指で横に送る（各カードが自分の色を持つ）
事例（scroll-snap）：3社の「before → after」カード（〇〇件）
料金：3プラン（〇〇円）
よくある質問：details
無料相談：大きなボタン
フッター

CSSだけ（scroll-snap）。overflow-x: auto; scroll-snap-type: x mandatory。矢印は JS の scrollBy だけ。JSなしでも指で送れる。

新しく作る：ホワイトボードの前の3人（メイン）／握手の手元。写真庫から：005 打ち合わせの手元・小さな事務所／024 相談・事務所。顔は写さない。

料金・件数・事例の数字・電話番号・住所はすべて見本の値（〇〇）。会員が本物に替える。