MAKING OF — 制作ガイド

火と鋼のサイトが
できるまで。

堺打刃物「重光」— コンセプト設計からコーディング、画像生成、三度の磨き込みまで、すべてClaude（Fable 5）による一貫制作の記録。

コンセプト

四代、百十余年。年産三百本、納期六ヶ月の受注生産——数字が語る堺の鍛冶場を、「火と鋼」の二相で組んだ。炭黒の静けさ（禅のグリッド、間、hairline罫線）の中に、炉の火（舞い上がる火の粉、緋のアクセント、刃文の光）を閉じ込める構成。コピーは短い断定文のみ。誇張語を使わず、数字に語らせる。

モバイル375pxを起点に設計し、デスクトップへ展開。日本語は全て書き下ろしで、翻訳文は一切ない。

配色 — 色名で設計する

炭黒すみぐろ #121212 — 地
鋼はがね #B9C0C6 — 刃・数字
緋あけ #D2622A — 熾火・アクセント
和紙わし #F2EDE4 — 文字
錆浅葱さびあさぎ #5C7A78 — 仕様ラベル

本文は和紙色（86%不透明）を炭黒に載せてWCAG AAを確保。緋は面積を絞り、罫線・句点・ラベルなど「熾火」の点でのみ使う。

タイポグラフィ

アセット — GPT Image 2 プロンプト

モデル gpt-image-2／quality high。全6点、文字なし・日本の文化的ディテール（藍の作務衣、豆絞りの鉢巻、朴八角柄、水牛口金、すだち・大葉）を指定。生成後にPillowでWebP再圧縮（q80）し、6点合計約430KBに削減。

HERO — 刃の接写（1536×1024）Extreme macro photograph of a hand-forged Japanese yanagiba kitchen knife blade, kurouchi black forge-scale finish on the upper blade, mirror-polished cutting bevel below, a soft wavy hamon temper line visible along the edge, blade lying diagonally in deep charcoal darkness, single warm ember-orange rim light grazing the spine from the left, cold steel-blue reflections in the polished bevel, extremely shallow depth of field, fine steel grain texture, moody chiaroscuro product photography, deep blacks, no text, no watermark
火造り（1536×1024）Japanese blacksmith forging a knife in a dark traditional Sakai smithy at night, hammer striking a glowing orange blade on an anvil, bright orange sparks arcing through darkness, smith wearing indigo samue work jacket and towel headband, face turned away in concentration, charcoal forge fire glowing deep in the background, smoke haze, cinematic documentary photography, shallow depth of field, near-black charcoal palette with ember orange highlights, Japanese craftsman, authentic workshop clutter of tongs and hammers, no text, no watermark
焼入れ（1024×1024）Close-up of Japanese knife quenching, a glowing orange hot blade held with iron tongs being plunged into a dark water trough, violent burst of white steam rising, droplets suspended, dark traditional smithy, the only light comes from the glowing steel and its reflection in the black water, high shutter speed capture, cinematic, charcoal blacks and ember orange, Japanese blacksmith hands with worn work sleeves at edge of frame, no text, no watermark
研ぎ（1024×1024）Japanese knife sharpener honing a blade on a large rotating waterstone wheel in a dark Sakai workshop, fine spray of water and grey stone slurry, weathered Japanese hands pressing the blade at a precise angle to the wet spinning stone, dramatic cool side light catching the water film, steel grey and charcoal palette with a faint warm lamp in background darkness, documentary macro photography, shallow depth of field, no text, no watermark
柄付け（1024×1024）Japanese craftsman fitting an octagonal magnolia wood handle with dark buffalo horn ferrule onto the tang of a finished knife blade, close-up of careful Japanese hands tapping the handle seat, wood shavings and a small wooden mallet on a dark worn workbench, quiet warm pool of lamplight in a dark workshop, honey-toned wood against charcoal darkness, documentary craft photography, shallow depth of field, no text, no watermark
静物（1024×1536）Quiet editorial still life, a finished Japanese yanagiba sashimi knife with octagonal magnolia handle and black buffalo horn ferrule resting on a slab of dark wet slate stone, beside it a single sudachi citrus and one shiso leaf, deep charcoal background fading to black, soft directional light from upper left, polished steel reflecting cool grey, generous negative space, sparse Japanese composition, photorealistic, moody and restrained, no text, no watermark全プロンプト一発採用（再生成なし）。文字入り画像・文化的誤り（中華風・洋手）はゼロだった。

技法

一　火の粉のキャンバス

ヒーローの闇に、炉から舞い上がる火の粉。2Dキャンバスのパーティクル（最大84個）が正弦波でゆらぎながら上昇し、寿命に応じて緋（#D2622A）から灰へ冷めていく。加算合成（globalCompositeOperation: "lighter"）で熾火の光を出す。

// 冷却カーブ：熱い白橙 → 緋 → 灰、透明へ
if (life < .5) { /* 255,176,120 → 210,98,42 */ }
else           { /* 210,98,42  → 118,112,108, α→0 */ }

IntersectionObserverでヒーロー外では停止。prefers-reduced-motion と ?static=1 では起動しない。

二　刃文が引かれるSVG

柳刃のシルエットに沿って、乱れ刃の温度線がスクロールで描かれる。波形は正弦波三本の合成で事前計算した195点のポリライン（元Q曲線の反射制御点は波が暴れたため差し替え）。pathLength="1" を指定すると dasharray/dashoffset が正規化され、進捗0〜1で制御できる。

<path pathLength="1" class="hamon-line" d="M 8 151 L 14 150.4 …"/>
/* css */ .hamon-line { stroke-dasharray:1; stroke-dashoffset:1; }
/* js  */ gsap.to(".hamon-line", { strokeDashoffset:0,
  scrollTrigger:{ trigger:".hamon-svg-wrap", scrub:.6 } });

三　工程の横スクロール

火造り→焼入れ→研ぎ→柄付けの四面。デスクトップはGSAP ScrollTriggerでセクションを固定して横流し（縦スクロール量を横移動へ写像、進捗は下端の緋の毛細線に表示）。モバイルはネイティブの scroll-snap 横スクロールに切り替え、同じ進捗バーを共有する。固定中に全要素が100vhへ収まるよう、pin時だけ見出しを二段組へ組み替える。

四　刃を撫でる光

刃の接写に、カーソル追従のスペキュラー光帯。mix-blend-mode: screen の斜めグラデーションをCSS変数 --sx で動かす。タッチ環境ではスクロール位置に連動。

.sweep-light { background: linear-gradient(105deg,
  transparent calc(var(--sx) - 14%),
  rgba(240,246,252,.34) var(--sx),
  transparent calc(var(--sx) + 14%)); mix-blend-mode: screen; }

五　数字と納期

創業114年・折り返し鍛錬16回・HRC61・年産300本のカウントアップ（easeOutCubic、1.6秒）。納期六ヶ月は6分割のタイムラインで、工程ごとに色分けした下線が時差で伸びる。

制作プロセス — 三度の磨き込み

第一の検分

刃文SVGの初版（Q曲線+T反射）が地震計のように暴れた→正弦合成の計算ポリラインへ全面差し替え。375pxで「妥協しな／い。」等の行頭落ちを発見→全見出し・導入文を文節単位の.nbで束ねる。納期バーが375pxで潰れる→3×2段組へ。工程セクションが固定時に100vhへ収まらずキャプションが切れる→pin専用のコンパクト二段組へ。GSAPのピンがrAF内で生成されない不具合→同期生成に変更。画像6点を1.2MB級から計430KBへ再圧縮。

第二の検分

ヒーローの裾に炉の照り返し（緋13%のラジアル）を足し、火の粉の下に奥行きを作った。細部の灯りを追加——刃の仕様行はホバーで値が和紙色に、ラベルが緋に灯る。沿革の菱形マーカーはホバーで緋に満ち、熾火の光暈をまとう。モバイルのメニュー、統計帯2×2の罫線、工程のスナップ横スクロールと進捗線、フッターの積み上げを実機幅で検証。横スクロールなし・コンソールゼロを確認。

第三の検分

全文を一字ずつ検分（ネイティブのコピーライター基準）。「掌が判を押す」→「掌で確かめる」、「刃が泣かない」→「刃が負けない」、「研ぎ直しは、生涯承る」→「研ぎ直しは、生涯。」など言い回しを推敲。固定時の工程パネルが小さくなり横移動が痩せていた問題を発見し、パネル幅36vwへ拡大（横移動量約920px）。ヒーローに静かな段差の登場アニメーションを追加。最終確認：デスクトップ・モバイル双方でコンソールエラーゼロ、読み込み失敗ゼロ、横スクロールなし。

出荷

npx wrangler pages deploy . --project-name shigemitsu-hamono

ビルド工程なしの静的サイト。index.html・css/・js/・assets/・guide/ をそのまま配信する。CDNはGSAP 3.12.5（jsdelivr）とGoogle Fontsのみ。

← サイトへ戻る