鋳物工房（カッコイイ系）のWebデザイン見本｜カツプロデザインギャラリー

機械メーカーの設計・購買の担当者と、鉄の器や看板金物をつくりたいデザイナー。「小さい工房でも、腕と設備は本物」と伝える。スマホで見る人が多いので、スマホの見た目をそのまま主役にする。


業種	製造・BtoB（鋳物工房）
系統	カッコイイ系（夜の紺・極太の文字・直線と六角形・氷の青）
骨組み	K09 大きな番号の手順でつなぐ：「できあがるまで」を 01 木型→02 砂型→03 流す→04 仕上げ→05 つくれるものの5つの面にし、大きな番号と、上から下へ通る太い線（面をまたいでつながる）で手順として読ませる。面の地色は紺・紙色・濃い紺と替える
形	スマホのまま横に延長：PCでも段組みにしない。1列・大きな文字のまま、色の帯・図・写真は画面の端まで、文字の列だけ704px（線の余白64px込み）
スライド	Swiper：「つくれるもの」6件（05 の面の中）。点・矢印・キーボード。自動送りなし。JSなしは指で横に送れる並び
メインビジュアル	イラスト・図形：SVG の取鍋・湯・砂型の図（鋳型が満ちた完成の形で静止）。上に「cast」と「鉄を、かたちに。」
演出の型	E05（筆記体「cast」の一筆書き＋シール）／E07（円に沿う文字のステッカー）／F04（六角形・アーチの切り抜き）。E07 は回さず、止まった印にした。F04 も切り抜きの形だけ（現れる動きなし）
動きの主役	E05 だけ（素の JS・Web Animations。GSAP 不使用）。描き終わってからシールが弾む
架空の会社	「青砂鋳物工房（あおすないものこうぼう）」

色と書体

共通の13個：--c-bg（夜の紺）--c-bg-alt --c-text --c-sub --c-line --c-accent（氷の青）--c-accent-text --c-on-accent --c-2（コバルト）--c-3（見出しの白）--font-ja・--font-head（Murecho）--font-en（Unbounded＋日本語の書体）。 例外：--font-script（Mr Dafoe）を1つ足した。筆記体の一語（E05）は共通の書体変数に当てはまらないため。面の色は .t-alt .t-paper（明るい面・全部上書き）.t-cobalt が同じ名前の変数を上書き。SVG の色は CSS のクラスから変数で取り、script.js に色は無い。

E05 の作り方・動かないとき

SVG の <text> の stroke-dasharray/stroke-dashoffset を、書体が読めてから（document.fonts.ready）文字幅で測った長さで動かし、描き終わってから塗りを出す。そのあとシールが回りながら弾む。JS なし・動きを減らす設定：「cast」は塗られた状態、シールは最初から出ている。