土木・解体の採用サイト（ポップ・元気）のWebデザイン見本

高校を出たばかりの人・ほかの仕事から転職を考えている20代。「土木はきつそう」と思っている人と、その家族。「この現場、楽しそう」と思わせる勢いと、休み・給料・資格の安心を両方見せる。


業種	建設・工務店・不動産
テイスト	ポップ・元気
色	オレンジ・黄（黒を締めに）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A08 巨大な文字「DIG」「BUILD」に切り抜きのショベルカーが重なり、スクロールで文字が左右に割れる／G01 切り抜いた先輩が画面の隅からのぞき、区切りごとに吹き出しのひとことが変わる／F06 太いオレンジ→黄のグラデの帯（道路）が区切りをまたいで伸びていく
架空の会社	「ひらく土木株式会社」— 道路・造成・解体を手がける、社員30名の土木会社

だれに向けたページか

高校を出たばかりの人・ほかの仕事から転職を考えている20代。「土木はきつそう」と思っている人と、その家族。 「この現場、楽しそう」と思わせる勢いと、休み・給料・資格の安心を両方見せる。

メインビジュアル（演出① A08）：黄色の画面に、2段の巨大な文字「DIG」「BUILD」。中央に切り抜きのショベルカーが重なる。スクロールすると上の段は左へ、下の段は右へ割れ、ショベルカーは少し上がる。下に黒と黄の縞の帯
先輩のひとこと（演出② G01）：右下の隅から、切り抜いた先輩（ヘルメットの後ろ姿）がのぞく。区切りに入るたびに吹き出しのひとことが変わる（「道路は、50年先まで残るんやで」「資格の費用は、ぜんぶ会社持ちや！」など）。吹き出しは4.5秒で消え、ヘルメットだけのぞかせる。押すと引っ込む・もう一度押すと出る
仕事を知る：土木・造成・解体の3つ。写真＋短い文
道路の帯（演出③ F06）：「1日の流れ」の区切りから「数字で見る」の区切りまで、オレンジ→黄の太い帯が S字に曲がりながら、スクロールに合わせて伸びていく。帯の上に時刻の札
数字で見る：休み・残業・資格の支援（〇〇）
先輩の声：3人（後ろ姿の写真・見本の声）
募集要項：表
応募する：黒い面に黄色の大きなボタン
フッター

JSや GSAP が無いとき：文字は割れずに並び、先輩は黒と黄の縞の帯の下（ページの流れの中）に止まって最初のひとことを出したまま、帯は全部描き終わった形で見える
prefers-reduced-motion のときも、上と同じ「動かない版」
先輩は画面の隅だけ。本文やボタンにかぶらないよう、スマホでは小さく（幅 78px）し、吹き出しは数秒で消える。押すと隠れる
給料・休日・人数・お客さまの声は見本の値（〇〇）。建設業の許可番号も〇〇。会員が本物に替える

ショベルカー（切り抜き）／先輩の後ろ姿（切り抜き）／道路の現場／解体の現場／橋を見るチーム／水平器を持つ手／お昼休み、の7枚。顔は写さない。