Making-of Guide

制作ガイド
旅館月白（つきしろ）

奥箱根・一日八組の湯宿「月白」のウェブサイトを、コンセプト設計からコピーライティング、コーディング、画像生成まで一貫してClaude（Fable 5）が制作した記録です。

概念Concept

「一泊、月と湯とともに。」──月あかりを含んでほのかに白く光る湯けむり。その色の名「月白（げっぱく）」を宿名に借り、サイト全体を「日没後の奥箱根」の一枚の絵として設計しました。

デザイン原則は三つ。間（ま）を構造として使うこと。動きは湯けむりのように遅く、決して弾まないこと。そして装飾ではなく精度（ヘアライン罫、揃ったグリッド、小さなラベル組版）で高級を語ること。

配色Palette

日本の伝統色から五色。すべてCSSカスタムプロパティとして定義しています。

藍鉄あいてつ・基調
#1C2733

墨すみ・深部背景
#17191C

月白げっぱく・文字色
#EAEDEA

金茶きんちゃ・強調
#B8945A

露草つゆくさ・補助
#7A97AB

四季モードに応じて差し色--seasonが変わります：春＝桜鼠 #C9A9B4／夏＝苔 #7C9070／秋＝柿渋 #C1693C／冬＝月白鼠 #A9BCCB。

組版Typography

しっぽり明朝 B1見出し・宿名。オールドスタイルの濃い明朝が「旅館の墨文字」の趣を出す。font-feature-settings:"palt"で詰め組み。
Zen角ゴシック New本文。line-height 2.0／letter-spacing 0.06em のゆったりした組み。
EB Garamond数字・欧文アクセント（料金、温度、pH、時刻）。和文の中で数字だけ細く上品に。

縦組み

月白の湯宿

ヒーローの宿名（ルビ付き<ruby>月白<rt>つきしろ</rt></ruby>）、各章の側面ラベル（序・部屋・湯・料理・四季・予約）、献立の品書きにwriting-mode:vertical-rl; text-orientation:uprightを使用。品書きは右から左へ読む本物の会席のお品書きの組み方です。

画像Assets — GPT Image 2

全7点をGPT Image 2（quality: high）で生成。日本文化の正確さ（露天風呂は石と檜、会席は余白の多い盛り付け、庭は苔と灯籠）をプロンプトで指定し、生成後は一枚ずつ目視検品しました。文字入り画像は不採用の方針です。実際のプロンプト（原文・英語）：

hero-rotenburo.webp1536×1024 / high

Open-air Japanese onsen rotenburo bath at blue hour, rough-hewn dark volcanic stone basin edged with hinoki cypress wood decking, gentle white steam drifting off the milky mineral hot spring water, view over layered misty Hakone mountain ridgelines, deep indigo dusk sky with a pale gibbous moon, wet stone reflections, one small stone lantern glowing faint warm gold at the edge, quiet luxury Japanese ryokan, editorial photography, natural ambient light, 35mm lens, muted palette of deep indigo blue, moonlit grey-white and a whisper of warm gold, serene and still, no people, no text, no watermark

room-washitsu.webp1536×1024 / high

Luxury Japanese ryokan washitsu guest room interior, fresh green tatami mats, low dark walnut table with a simple ikebana arrangement of a single camellia branch, shoji paper screens slid open to an engawa wooden veranda overlooking a private moss garden with a maple tree, soft diffused morning light streaming across the tatami, tokonoma alcove with a dark ceramic vase, linen zabuton floor cushions, quiet wabi-sabi luxury, editorial interior photography, natural light only, muted palette of ivory, tatami green, deep indigo textile accents and warm wood, no people, no text, no calligraphy, no watermark

kaiseki.webp1536×1024 / high

Sparse Japanese kaiseki course arranged on a dark black lacquer tray, one small seasonal sashimi arrangement on a handmade dark ceramic plate, tiny mound of fresh wasabi, a single red maple leaf as garnish, cedar chopsticks resting on a river-stone hashioki beside the plate, a small gold-rimmed sake cup, deep shadow with soft directional light from one side, dark moody background, Michelin-level minimalist Japanese plating with generous negative space, editorial food photography, 85mm lens, palette of ink-black lacquer, jade and warm gold accents, no people, no text, no watermark

season-haru.webp1024×1024 / high

Close detail of a Japanese ryokan garden in spring, weeping cherry tree with pale pink blossoms, fallen sakura petals drifting on the water surface of a stone tsukubai water basin, wet dark stones and fresh moss, soft overcast light, shallow depth of field, quiet editorial photography, muted palette of pale pink, stone grey and moss green, no people, no text, no watermark

season-natsu.webp1024×1024 / high

Close detail of a Japanese ryokan garden in deep summer after rain, vivid green moss covering old stones, a bamboo kakei water spout dripping clear water into a stone basin, dappled shade under green maple leaves, humid glistening atmosphere, shallow depth of field, quiet editorial photography, lush deep green palette with dark wet stone, no people, no text, no watermark

season-aki.webp1024×1024 / high

Close detail of a Japanese ryokan garden in autumn at dusk, brilliant crimson and amber momiji maple leaves scattered across dark wet stone steps and moss, a stone lantern softly out of focus behind, cool blue twilight mixing with warm leaf color, shallow depth of field, quiet editorial photography, no people, no text, no watermark

season-fuyu.webp1024×1024 / high

Close detail of a Japanese ryokan garden in winter, fresh snow resting on the roof of a stone lantern and on black pine branches, light snowfall in the air, indigo twilight, faint warm glow of a paper lantern as soft bokeh in the far background, hushed and still, shallow depth of field, quiet editorial photography, palette of moonlit white and deep indigo, no people, no text, no watermark

技法Techniques

1. 湯けむりシミュレーション（Canvas 2D）

ヒーローの露天風呂の上を、26個の「湯けむりの房」がゆっくり立ちのぼります。放射状グラデーションのスプライトを一度だけ事前描画し、各房は二層のサイン波（低周波の揺らぎ＋高周波のさざめき）で横に揺れながら上昇。mix-blend-mode:screenで写真に溶け込ませています。

const sway = Math.sin(t*p.w1+p.phase)*p.a1
           + Math.sin(t*p.w2+p.phase*1.7)*p.a2;   // 二層の揺らぎ
const env  = Math.sin(Math.PI*k)**1.4;             // 生滅のエンベロープ
ctx.globalAlpha = p.alpha * env;
ctx.drawImage(sprite, x-r, y-r*.72, r*2, r*1.44);

IntersectionObserverでヒーローが画面外に出ると停止、prefers-reduced-motionでは描画しません。

2. 月の満ち欠けスクロールインジケーター

画面右下の月が、頁の進みに合わせて新月から満月へ。SVGマスク内の「影の円」をスクロール率に応じて横に滑らせるだけの、軽い仕掛けです。

<mask id="moonMask">
  <circle cx="16" cy="16" r="11" fill="#fff"/>
  <circle id="moonShadow" cx="16" cy="16" r="11" fill="#000"/>  <!-- 影 -->
</mask>
// scroll: 影をずらす → 新月(p=0) … 満月(p=1)
moonShadow.setAttribute("cx", 16 + 23*p);

3. 四季モード

春・夏・秋・冬の切り替えで、庭の写真がクロスフェードし、俳句調の一行と説明文が入れ替わり、差し色--seasonが全站で変わります。選択はsessionStorageに保存し、初期値は実際の今月から判定（7月なら夏）。画像は先読みしてから交代させるのでちらつきません。

4. スクロールの振り付け（GSAP + Lenis）

Lenisの慣性スクロールにScrollTriggerを同期。すべての出現はpower2.out・1.3〜1.6秒の長い緩急で、写真は額装の中で±8%だけ視差移動します。献立の品書きは右の列から順に、一列ずつ静かに立ち上がります。

5. 品書きの縦組み

会席の献立はwriting-mode:vertical-rlの縦書き列。flex-direction:row-reverseで右端＝先付から始まり、モバイルでは横スクロール（実際の巻物のように）で読めます。

過程Process — 3 Passes

第一検（構造と文章）

品書きの縦組みでflexの縮小により「食事」が二行に割れていた不具合を修正（flex:none）。品書きは読み始めの「先付」が右端に来るよう、読み込み時に右端へスクロール。
モバイルでスクロールの誘導線がヒーローの帯文と重なっていたため、誘導線をPC限定に。
泉質の括弧書きが「弱ア／ルカリ性」で折れていたのを改行制御。俳句の一行も読点でのみ折り返すようJS側で語句をブロック化。
文章の総点検：「全室　客室露天風呂」→「全室に露天風呂」（室の重複）、湯の段落を「地下八〇メートル」「呼びならわしてきました」に改稿、名前の由来の重複主張を解消。
画像をWebP再エンコードで9.0MB→0.7MBに削減。ヒーローに960w版を追加（モバイルは29KB）。

第二検（余白と質感）

品書きの列群が左寄せになっていたのを右掛けに修正——本物のお品書きの掛かり方に。
客室に「其の一・其の二・其の三」の金の小ラベル、品書きに料理長の署名と縦組みの落款「月白」を追加。
四季の写真に14秒のケンバーンズ（1→1.045）、湯のデータ行に一段ずつの立ち上がり（0.14秒差）を追加。
コンセプト章の冒頭に露草色の薄い霞——ヒーローの湯けむりの名残りを演出。

第三検（仕上げ）

JS無効環境向けの<noscript>フォールバック（全コンテンツ表示）を追加。
og:image、フッターのタップ領域44px、スウォッチの罫線などの最終調整。
客室「宵」の紹介文を改稿（「最上階に、ただ一室。」）。
デスクトップ・モバイル最終スクリーンショット、コンソールエラーゼロ、横スクロールなし、四季のセッション復元を確認。

出荷Ship It

ビルド工程はありません。静的ファイルのままCloudflare Pagesへ：

npx wrangler pages deploy . --project-name tsukishiro