MAKING-OF GUIDE

「鮨 一心」制作ガイド

銀座六丁目・八席のおまかせ鮨店(架空)のフラッグシップサイト。コンセプトから配色、画像生成、実装技法、三度の推敲まで、制作の全過程をここに記す。
Full making-of documentation for the Sushi Isshin flagship site. Japanese-first; brief English notes inline.

← サイトへ戻る

概念CONCEPT

与件は「一日二回転・八席のみ・おまかせ33,000円」。情報量の少なさこそが高級鮨の言語であり、サイトもそれに倣った。装飾は削り、間(ま)を構造として扱う。漆黒の静けさの上に、ヒノキの温かい光がひとすじ落ちる——店に入った瞬間の空気を、スクロールで再現することを目指した。

文体は職人の口調。短い言い切り、体言止め、感嘆符なし。「魚が決める。私は、従うだけです。」のように、名詞で終わらせて余韻を残す。Copy was written in Japanese first — terse declaratives, quiet craftsman pride, zero exclamation marks.

配色PALETTE

漆黒しっこく #0D0B09
地色。漆の黒
白木しらき #E8DCC4
見出し・予約札。ヒノキの肌
鈍色にびいろ #6E6A62
小さなラベルのみ(本文には不使用)
しゅ #9E2B25
判子の一点のみ。乱用しない
きん #C7A94F
髪の毛ほどの罫線と進行表示

本文は可読性のため #C6BDAC(漆黒上でコントラスト比 約10:1、WCAG AA/AAA準拠)。鈍色は大きめのラベル・装飾にのみ使用し、本文には使わない。朱は「判子の瞬間」——ブランドの中黒、予約札の印、地図の現在地——の三箇所に限定した。

文字TYPOGRAPHY

画像ASSETS — GPT IMAGE 2

全4点を GPT Image 2(quality: high)で生成し、1点ずつ目視検品。「日本の文脈」(日本人の手、ヒノキ、漆、正しい盛り付け)と「文字なし」をプロンプトで明示した。実際に使用したプロンプト:

1. hero-nigiri.webp(1536×1024)

A cinematic still-life film photograph of a single piece of nigiri sushi — a glistening slice of medium-fatty tuna (chutoro) draped over a small hand-pressed mound of pale vinegared rice — resting alone on a seamless black lacquered tray. Hard dramatic side light rakes across the frame from the left… palette of deep black, warm rose-red tuna, and ivory rice. Michelin-level Japanese culinary photography, austere, reverent, no text, no watermark, no hands, no garnish clutter.

黒漆に一貫。ヒーロー直下の「一貫に、二十七年。」の場面。

2. chef-hands.webp(1536×1024)

A cinematic 35mm film photograph, close-up on the weathered hands of an older Japanese sushi master forming nigiri behind a pale hinoki cypress counter — fingers mid-press… no face in frame… warm amber-and-black palette with the pale honey tone of hinoki wood. Editorial Japanese craft photography, restrained and precise, film grain, no text, no watermark.

主人の章。顔は写さず、手だけで二十七年を語らせる。

3. counter.webp(1536×1024)

A cinematic wide interior photograph of an intimate high-end Tokyo omakase sushi restaurant, empty before service: a single straight counter of pale unfinished hinoki cypress wood with exactly eight simple wooden chairs in a row… palette of lacquer black, warm hinoki blond, and faint gold. Architectural Digest Japan style, no people, no text, no watermark.

開店前の八席。ご予約の章の空気づくり。

4. kohada.webp(1024×1024)

A cinematic macro film photograph of a pristine whole Japanese seasonal fish — a small silver-blue kohada (gizzard shad) with iridescent spotted skin — resting on a bed of crushed ice… Palette of gunmetal silver, deep black, ice white. Reverent Japanese ingredient photography, editorial and austere, no text, no watermark, no hands.

仕事の章。江戸前の象徴、小鰭のマクロ。

技法TECHNIQUES

漆のシーン(WebGL シェーダー)

ヒーロー背景は素の WebGL(three.js 不使用、約120行)。fbm ノイズで漆の刷毛目をつくり、約55秒周期で光の帯が斜めに横切る。ポインターに遅れてついてくる微かな金の残光も重ねた。「高価で、ほとんど見えない」が設計基準。WebGL 非対応時は CSS グラデーションに静かに退避する。

float g  = fbm(q * vec2(6.0, 1.6) + vec2(t * .008, 0.));  // 刷毛目
float d  = abs((uv.x + uv.y * .38) - mix(-.35, 1.55, fract(t * .018)));
float band = smoothstep(.42, 0., d);                        // 光の帯
col += gold * band * (.35 + .65 * g) * .075;                // ほとんど見えない強さ

おまかせの流れ(スクロール駆動の献立)

本サイトの中核。ScrollTrigger で 100svh のステージを pin し、十品を一品ずつクロスフェード。輪郭だけの巨大な漢数字(-webkit-text-stroke)が皿の背後に浮かび、右端の金の罫線が進行を示す(三/十)。スクロール量は一品あたり900px、easing はすべて calm 系(power2)。

ScrollTrigger: { trigger: wrap, start: "top top",
  end: "+=" + (n * 900), pin: true, scrub: 0.8 }

包丁の切れ目(clip-path リビール)

画像は刃が通るように斜めの clip-path で現れる。金の髪線(blade)が先に走り、その軌跡を追って面が開く。

from: polygon(0% 0%, 0% 0%, -30% 100%, -30% 100%)
to:   polygon(0% 0%, 130% 0%, 100% 100%, -30% 100%)   // 14度の刃筋

予約札(ふだ)

ご予約の章は木札のメタファー。白木のグラデーションに木目の repeating-gradient、上端に紐穴、朱の丸印「一心」を capsize。電話番号は反転ホバー。

そのほか

推敲THREE PASSES

第一稿全節をデスクトップ・375pxで実査。暗部のWebP再圧縮ノイズを黒潰しカーブで除去し、768w のモバイル用 srcset を追加。白木の上で読めなかった図版キャプションにスクリムを敷き、「お席とご予約」「徒歩3分」の改行を語句単位で制御。予約札の二段組も再調整。仕上げに、開店の所作のようなヒーロー登場アニメーションを追加。
第二稿重大な不具合を二つ捕獲。CSSの scroll-behavior: smooth が Lenis と衝突しアンカー移動が全滅していたため分離。スクロール位置が復元された状態での再読み込みで、GSAPの once:true トリガーが初期化中に自壊し献立のピン留めごと落ちる問題を toggleActions 方式に置換して解消。合わせて、料理名を縦組みに改め(デザイン仕様どおり)、漢数字を輪郭線から金の透かしへ、ナビに現在地表示、予約札に紐穴を支点とした揺れのホバーを追加。
第三稿日本語の全文を一文字ずつ再読。「ネイティブのコピーライターが署名できるか」を基準に、十箇所を書き直した。「まかないの飯炊き」→「飯炊きと追い回し」、「梅肉をひとつ」→「梅肉をひと刷毛」、「魚の力が立っている時は、手を加えない」→「力のある魚に、余計な仕事はしない」、「余韻は、お帰りの道までを含めて」→「余韻は、帰り道まで」など、職人の口から出る言葉に揃えた。お願い書きも接客の定型に修正。仕上げに、ヒーローへ二十四節気の印「七月・小暑」を添えた。最終確認:デスクトップ・375px 双方でコンソールにエラーなし、横スクロールなし。

出荷SHIP IT

ビルド工程なしの静的サイト。そのまま Cloudflare Pages へ。

npx wrangler pages deploy . --project-name sushi-isshin