町工場（スタイリッシュ）

だれに向けたページか

試作や小ロットの部品を頼める先を探している、メーカーの設計・購買の担当者。あわせて、ものづくりが好きな求職者。 「この会社は腕がいい」と数秒で伝わる迫力を出す。

色

文字

• 巨大な英字：Anton（縦長で太い）
• 小さな英字・数字：Inter Tight
• 日本語：Zen Kaku Gothic New（見出し 900・本文 400）

ページの構成と演出

1. メインビジュアル（演出①）：画面幅いっぱいの「PRECISION」。その上に切り抜いた部品の写真が重なる。スクロールすると文字は左右に割れ、部品は少し回りながら上がる
2. 文字の帯（演出②）：黒い帯に「0.001mm・試作1個から・難削材・短納期」が流れ続ける（CSSだけで動く）
3. 会社について：職人の手の写真に、白い文字の板が重なる。うしろに大きな「SINCE 1978」
4. できること（演出③）：PCでは左の写真が固定され、右の項目を読み進めると写真が切り替わる
5. 数字（演出④）：近づくと、ページ全体の背景が白から黒に変わる。数字は数え上がる
6. CRAFT（演出⑤）：巨大な文字の形に、金属の表面の写真をくり抜く。スクロールで写真が流れる
7. ご相談・採用：左右2つの大きな入口。乗せるとオレンジに塗られる
8. フッター

動きの決まり

• JSや GSAP が無いとき：文字は割れず、写真は項目ごとに並び、数字の区切りは最初から黒。全部読める
• prefers-reduced-motion のときは、文字の帯も止まる
• 数字・創業年・取引先数は見本の値。会員が本物に替える

写真（codex）

切り抜きの部品2つ／測定する手／加工中の機械／工場の全景／旋盤を扱う後ろ姿／金属の表面、の7枚。顔は写さない。

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

• 見出しは「巨大な英字（Anton）＋小さな日本語」の2段
• オレンジは1画面に1か所まで
• 黒い面は1ページに1回まで