制作ノート
「一花」ができるまで

いけばなアトリエ一花（いちか）― コンセプト設計から実装まで、Claude（Fable 5）による一貫制作の記録

コンセプト

架空の華道家・水原一花のアトリエサイト。掲げた言葉は「花で、空間を締める。」——ホテルや店舗の空間装花、催事・広告美術、そして銀座の小さな稽古場を紹介する、日本語ファーストのフラッグシップです。

設計の柱はひとつ。サイトそのものが、一つのいけばなであること。生成りの余白を大きく残し、要素は軸から外して置く。色は一輪だけ——紅。足すのではなく、引く。ページのどこを切り取っても「間」が主役になるよう組みました。

EN — A Japanese-first flagship site for a fictional ikebana artist. The site itself is designed like an arrangement: vast negative space (ma), elements placed deliberately off-axis, and a single strong color — beni red — placed like one flower.

配色 ― 伝統色で名指しする

生成り

#F5F2EB

地。和紙の白

墨

#1E1C1A

文字・枝の線

苔

#6B7458

葉。補助の緑

紅

#A63A50

一輪の緋。落款

白緑

#C6D3C1

淡いアクセント

紅は「一輪」の原則で運用します。各画面に赤はひとつの塊だけ——ヒーローの「花」の一字、落款、節気の名。赤が二箇所で競り合わないよう、常に主従を決めています。

タイポグラフィ

花で、空間を締める。

Zen Old Mincho ― 見出し・大きな一字（花・空・間）。font-feature-settings: "palt" で詰め、字間は .1〜.14em

枝の線と、残された余白。それだけで、場の空気は変わります。

Zen Kaku Gothic New 300 ― 本文。行間 2.0〜2.3、字間 .06em

手が覚えるまで、ゆっくりと。

Klee One ― 手書き風の注記（稽古の一言、節気の便り）

作品タイトルと題字まわりは writing-mode: vertical-rl ＋ text-orientation: upright の縦組み。店名「一花」にはルビ（いちか）を振っています。

画像 ― GPT Image 2

全4点。モデルは gpt-image-2（quality: high）。照明を「和紙の背景に、静かな拡散光、影はひとつ」で統一し、ギャラリー写真の連作に見えるよう揃えました。文字が写り込む要素は排除しています。

実際のプロンプト（抜粋・原文）

Fine-art gallery photograph of a minimalist Japanese ikebana arrangement: one dark camellia branch bearing a single deep crimson camellia flower and three glossy green leaves, standing in a matte black bizen-ware ceramic vase with rough unglazed texture, against a seamless warm off-white washi paper backdrop. Dramatic negative space above and to the right, quiet diffused daylight from the left, one soft shadow, editorial Japanese still-life photography, medium format, muted ecru palette with a single red accent, extreme restraint, no text, no watermark, no lettering

→ work-tsubaki.webp（椿、一輪）

Wide fine-art gallery photograph of a contemporary Japanese ikebana composition: long bare willow branches sweeping in a low horizontal arc from left to right, three violet-blue Japanese iris flowers with upright green blades rising off-center left, arranged on a hidden kenzan in a shallow black ceramic suiban filled with a thin mirror of water… quiet diffused daylight, soft reflection in the water, muted ecru and moss palette, no text, no watermark

→ work-yanagi.webp（五月の川）

…two small vivid red camellia buds and a few slender green pine sprigs with pale celadon-green lichen accents, sparse asymmetric arrangement leaning left in a tiny rustic dark ceramic bud vase… vast negative space, red and green on ecru, extreme restraint, no text, no watermark

→ work-beni.webp（点、ふたつ）― 白緑の地衣がパレットの5色目と呼応

Close-up documentary photograph of a Japanese woman's hands with short unpolished nails carefully placing a single camellia stem into a dark ceramic vase on a wooden table, ikebana practice, warm diffused daylight through a shoji paper window, shallow depth of field… no face visible, authentic Japanese interior, no text, no watermark

→ hands.webp（稽古）

技法

1. 花びらの落下キャンバス

ヒーローの背景で、紅の花びらが疎らに舞います。紙吹雪にならないよう、数は最大16枚。各花びらは回転（rot）・ひねり（tilt）・揺れ（sway）を持ち、tiltの余弦でY方向に潰すことで「表裏を返しながら落ちる」立体感を出しています。ポインタの移動速度は風として場に加算され、指数減衰します。

// 3D風の翻り：tiltの余弦で縦に潰す
var squash = 0.35 + 0.65 * Math.abs(Math.cos(p.tilt));
ctx.scale(1, squash);
// ポインタの速度 → 風（減衰付き）
wind.x += clamp(dx * 0.06); wind.x *= 0.96;

2. スクロール構図アセンブリ（哲学）

320svhのセクションに position: sticky のステージを置き、GSAP ScrollTrigger（scrub）で抽象的ないけばなが組み上がります。順序はいけばなの手順どおり——地の線、器、主枝（stroke-dashoffsetの描画）、副枝、葉、最後に紅の花、そして落款。進行度に応じて「線・空・花」の三つの言葉が入れ替わります。

tl.to(".asm-branch1", { strokeDashoffset: 0, duration: 2.6 }, 1.1)
  .to(".asm-flower",  { opacity: 1, scale: 1, rotation: 0 }, 5.2)
  .to(".asm-seal",    { opacity: 1, scale: 1 }, 6.6);

3. 作品ギャラリーの「開花」

hover／タップで作品が開きます：画像が1.055倍にゆっくり寄り、紅の落款（縦書き「一花」）が捺され、縦組みのタイトルが上から滑り込む。タッチ端末ではタップでトグル、キーボードではEnter／Spaceで開閉できます。

4. 不均衡グリッド（間）

作品は12カラムグリッドに対して 1–5 / 5–12 / 8–11 と軸を外して配置し、行もずらして重心を崩しています。余白は「空いたスペース」ではなく構造です。

5. 二十四節気ティッカー

今日の日付から現在の節気を算出し（24節気の開始日テーブル）、その頃の花と、手書き風の短い便りを表示します。下段では24の節気が静かに流れ、現在の節気だけが紅で灯ります。

6. 墨の筆線ディバイダー

セクションの継ぎ目はSVGの一筆。ビューポートに入ると stroke-dashoffset で左から右へ引かれます。

アクセシビリティと作法

prefers-reduced-motion でキャンバス・ティッカー・スクラブを停止し、完成形を静止表示
?static=1 のQAモードで全アニメーションを完成状態に固定
タップ目標44px以上。hover専用の情報なし（開花はタップ・フォーカスでも）
JS無効時も全コンテンツが見える（隠すのは html.js 配下のみ）

制作過程 ― 三つのパス

PASS 01

骨格と呼吸

題字の緋が三文字（花・空・締）に散っていたのを、「花」一字だけに絞った——赤は一輪の原則。句読点が行頭に孤立する改行（「〜変わりま／す。」など）を句節単位の inline-block で解消。全画面メニューがヘッダーより上に重なり、閉じるボタンが押せなかった重なり順の不具合を修正。画像4点を約4.7MB→約220KBへ再圧縮。

PASS 02

所作の磨き込み

作品画像に「和紙のカーテン」リビール（視界に入ると生成りの幕が引き上がる）を追加。背景の大きな一字（花・間・空）に16秒周期の呼吸を、稽古の写真に26秒の緩やかなドリフトを。ティッカーはホバーで静止。背景文字のはみ出しが生む横スクロールを overflow-x: clip で断った。コピーを一文ずつ再読し、「内容により、お見積りします」を「内容に応じて、お見積りいたします」へ。

PASS 03

最終検分

デスクトップ・375pxの両方で全セクションをスクリーンショット検分。コンソールエラーゼロ、横スクロールなし、lang・OG・alt・フォーカスリング・コントラスト（AA）・ページ重量（約0.4MB）を確認して出荷。

出荷

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

npx wrangler pages deploy . --project-name ichika-ikebana