板金加工（綺麗系・高級感）のWebデザイン見本

装置メーカー・設計事務所の購買や設計の担当者。図面1枚から相談できる、仕上がりのきれいな板金屋を探している。静かで上質なページで「仕上げまで気を配る会社」だと伝え、図面の相談に進ませる。


業種	製造・BtoB（精密板金加工）。架空の会社「白銀板金工業」
系統	綺麗系（広い余白・細い罫線・太い明朝の大見出し＋字間の広い英字・灰の階調・ゆっくり）
骨組み	K04 カードが重なっていく：6つの区切りが全部カード（角を丸めた上辺＋上向きの影）で、`position: sticky` で次のカードが前のカードの上に重なる。カードごとに地の色が変わる（明灰→白→暗→白→明灰→暗）
形	スマホのまま横に延長：PCでも1列。写真の帯とカードの色は画面の端まで、文字の列だけ最大 680px（表紙の見出しだけ横幅いっぱい）
スライド	Swiper（製作事例4件。点・矢印・キーボード。自動送りなし。JSなしは scroll-snap で指送り）
メインビジュアル	文字が主役（タイポ）：「一枚の板から。」を画面の高さの約4分の1の大きさで。うしろに板の折れ図（細い線の SVG）。写真は使わない
演出の型	E03（見出しが1文字ずつ、ぼかし＋透明から）／E07（円に沿って回る文字）。B03 は外した
外した型と理由	B03「写真を固定して項目で切り替える」は、カードが次々に重なる骨組みと動きの主役がぶつかる（固定する面が無い）。代わりに工程カードは、上に写真の帯・下に4工程の表で見せる
動きの主役	カードが重なる動き（CSS の sticky だけ・GSAP 不使用）。E03 は表紙の見出しを読み込み時に1回だけ、E07 は小さな回る文字（40秒で1周）で、どちらも脇役

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

--c-bg #f5f5f4・--c-bg-alt #fff・--c-text・--c-sub・--c-line #c9ccd1・--c-accent #3f4246・--c-accent-text #3f4246・--c-on-accent #fff・--c-2 #a9acb1・--c-3 #111214（見出しの墨）。 暗いカード（工程・相談）は .t-dark が同じ名前の変数を上書き（--c-bg #1a1b1d・--c-text #ecedee・--c-sub・--c-line・--c-accent・--c-accent-text・--c-on-accent・--c-3）。書体：--font-head BIZ UDPMincho／--font-en Syncopate（後ろに Noto Sans JP）／--font-ja Noto Sans JP。

動かないとき

JS なし：重なる動きは CSS なので動く。表紙の見出しは最初から出ている。実例は指で横に送れる。prefers-reduced-motion：見出しの出現と回る文字を止める。 JS が1つだけ手伝う：カードが画面より背が高いとき、top を負の値にして下の端まで読めるようにする（なくても、画面の高さに収まる内容なので普段は問題ない）。

スライドの作り方

Swiper（MIT）。JS が .swiper クラスを付けて初期化。無いときは overflow-x: auto; scroll-snap-type: x mandatory。

写真の出どころ

新しく作る：bend（プレスブレーキで曲げる手元・顔の1枚。写真.json に prompt を残す）。すでに images/ にある：weld（溶接の手元）・item（穴あき筐体・白背景）。写真庫の他の写真（削った面・測る手・工場／007）は、画像を開いて確かめたところ切削加工の写真で板金ではないので使わない。