トップの水墨の門と立体の庭¶

Overview¶

トップ（/）の最初の訪問では、署名と水墨の門を筆の順に描き、色を差して立体の庭に移し、カメラが門をくぐる。
2 回目以降の訪問は、門の内側の庭を、イントロなしで出す。
プロフィールの 4 つのセクションは、庭の木の枝に掛けた和紙に置く。

この文書は、コードの構成と、見た目の数値を持つ。
数値は、docs/design/prototypes/top/ の試作の値である。
サイトの全体像は fukuemon.dev Design Doc にある。

• ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く
• ADR-0027: トップの庭の絵を、訪問者の端末の日付と時刻で、季節と時間帯ごとに変える

Scope¶

持つもの。

• コードの構成と、ディレクトリの間の import の向き
• 同じシードから同じ絵を作るための、乱数を使う順と、墨の絵の SVG のサイズの上限
• イントロの各段の時間
• 季節と時間帯の決め方
• 時間帯ごとの場面の色と、季節ごとの葉とパーティクル
• 和紙の文の幅、行間、見出しの大きさ、余白
• 庭の中のボタンの並び
• 試作のファイルと、試作の作り直し方の所在

持たないもの。

• 版画風の挿絵の版の仕様。挿絵の Design Doc が持つ。
• 紙と墨の色のトークン。デザインシステム（packages/ui）の Design Doc が持つ。
• 動きの規則と、トップの庭の例外。全体の Design Doc の「動き」 が持つ。

Design¶

コードの構成¶

apps/web/src/features/top-garden/ は、墨の絵の SVG を作るコード、立体の庭を three で描くコード、その両方が読む庭の配置、トップのプロフィールの本文を持つ。 墨の絵の SVG を作るモジュールは、layout.ts と、ink/ の brush.ts、ink-art.ts、ink-svg.ts、ink-trees.ts の 5 つである。 どれも React と DOM に依らない TypeScript で書く。 ビルドのときに Node で動く。 ink/InkGate.astro は、ヘッダーのロゴと同じ sign.svg を components/sign/ から読む。 stage/stage.ts の stageScript は、stage/season.ts と stage/visit.ts の関数と applyStage を、文字列にしてトップの head の inline script に埋め込む。 埋め込んだ関数は、ブラウザで、表示の前に動く。 readOverride は、開発のビルドの inline script にだけ埋め込む。

コードは、墨の絵、head のスクリプト、立体の場面という関心ごとで、3 つのディレクトリに分ける。 それぞれ、動く場所と制約が違う。 墨の絵と場面の両方が読む layout.ts、rng.ts、intro-timing.ts は、このディレクトリの直下に置く。 Profile.astro は、3 つのどれにも当たらないので、直下に置く。 ディレクトリの間の import は、scene/ から stage/ へは型だけ、stage/ から scene/ へは場面のバンドルの URL（?worker&url）だけにする。 ink/ と scene/ は、互いを import しない。 この 3 つの向きは、oxlint.config.ts の no-restricted-imports が止める。 pnpm run lint が、向きに反する import で失敗する。 stage/ から scene/ へは、?worker&url 以外の接尾辞と、接尾辞の無い import を止める。 scene/ から stage/ へは、import type だけを通す。 import { type X } の形は、Oxlint が通すので、import type を使う。 ../stage/../scene のように、途中で戻るパスと、直下のファイルを通った間接の import は、止めない。

同じシードから同じ絵ができる¶

同じシードからは、同じ線のデータと、同じ SVG の文字列ができる。 乱数を使う順は、試作の docs/design/prototypes/top/src/h-strokes.mjs と同じにしてある。 線を足すか、消すか、並べ替えると、それより後の線がすべて変わる。

試作の i-mon.html の墨の絵の 281 本の線の後ろに、ink/ink-trees.ts が、塀の向こうと門の奥の木の線を足す。 木の線は、試作の線より後に乱数を使うので、試作の線を変えない。 出力は、線が 399 本、path が 543 本である。 SVG のサイズの上限は gzip で 45 KB で、ユニットテストが確認する。

イントロの各段の時間¶

最初の訪問は、開いてから約 10.1 秒で終わる。
署名を出さないときは、署名の段がなくなり、墨の絵から後ろの段が 0.6 秒早まる。

• 色を差し始めるのは、墨の絵を描き終える時刻と、場面の準備が終わる時刻の、遅いほうである。
  • 墨の絵を描き終える時刻は、開いてからの時刻で決めず、墨の線と署名の CSS の遷移が終わった時刻にする。遷移は最初にスタイルが付いた時点から動くので、HTML が遅く届くと、その分だけ後ろにずれるためである。
  • 遷移を取れなかったときに早く色が差さないよう、開いてから 5.6 秒より前には色を差さない。
  • 松の円の不透明度の遷移は、墨の線より後に終わるので待たない。色が差した後も、松の円は現れ続ける。
• 墨の門、塀、飛び石、石、木の線は、立体の配置を最初のカメラで投影した位置に描く。色が差すときに、線と立体がずれないためである。
  • 木の線は、立体の木と同じ幹と枝の形から作る。 奥の木から手前の木へ、1 本ごとに幹、枝、葉の順で描く。 塀、門の梁、屋根に隠れる部分は描かない。 隠れる部分で切った後に 24px より短く残る区間は、点のように見えるので描かない。
• 墨の線は、SVG の path の stroke-dashoffset を CSS の遷移で動かして描く。
• 左下の署名は、イントロの間だけ出す。
• 文を出す時刻とカメラが止まる時刻は、色を差し始めた時刻からタイマーで決める。描くのが遅い端末でも、決めた長さで終わるためである。
• 文を出してからイントロを終えるまで（色を差し始めてから 3.7〜4.5 秒）に、庭の中のボタンか矢印キーで別の和紙へ移ると、カメラは 4.5 秒まで門をくぐる動きのまま進み、その後に移った先の和紙へ動く。
• 「飛ばす」のボタン、Esc、Tab では、カメラを動かさずに、門の内側の最後の状態にする。
  • 「飛ばす」は、押したボタンが消えるので、プロフィールの見出しへフォーカスを移す。
  • Tab は、ブラウザのデフォルトの動作を止めず、最後の状態でそのまま次の要素へフォーカスを移す。Esc は、フォーカスを動かさない。
  • 場面の準備ができるまでは、最後の状態を描けないので、「飛ばす」のボタンを出さず、Esc と Tab を受けない。

墨の絵と署名の置き方¶

墨の絵は、設計の画面（1600 × 900）の座標で描いた SVG で、絵を置く枠の中央に置く。 絵の幅は、枠の縦横比で変える。 cqw と cqh は、枠の幅と高さの 1% である。

• 墨の線: 色は --fd-color-text である。遠景の山並みはにじませ、中景と近景の線はかすれさせる。
• 松の円: 色は --fd-color-primary で、不透明度は 0.2 である。
• 署名: 色は --fd-color-text である。枠の左から 5cqw、下から 4cqh に置き、幅は clamp(11rem, 24cqw, 24rem) にし、反時計回りに 5 度回す。

墨の絵と署名の色と長さは、InkGate.astro の <style> に、セマンティックトークンと値を直に書く。 デザインシステムの規則（色はテーマ変数のユーティリティで書く）の例外である。 SVG を set:html で HTML に置くので、SVG の中の path にユーティリティを付けられないためである。

イントロの遷移とアニメーションの時間とイージングも、InkGate.astro と GardenStage.astro の <style> に値を直に書く。 デザインシステムの規則（動きはテーマ変数のユーティリティで書く）の例外である。 値はこの文書の「イントロの各段の時間」の時刻に合わせたイントロだけのもので、ほかの画面では使わないためである。

季節と時間帯の決め方¶

head のスクリプトが、ページを開いた時点の端末の日付と時刻で、季節と時間帯を決める。

• 境目の時刻は、後ろの時間帯に入る。10 時は昼、19 時は夜になる。
• 場面の色は、時間帯で決める。紙と墨の色（イントロの墨の絵、端の余白、色が差す前の「飛ばす」のボタン）は、テーマで決める。
• 開いたまま OS のテーマが変わったら、紙と墨の色をトークンから読み直し、庭を描き直す。場面の色は変えない。
• 夜の場面の端の余白だけは、テーマの紙の色を使わず、夜の mist の色にする。

時間帯ごとの場面の色¶

場面の色は、場面のモジュールの中に置き、トークンにしない。
キーは試作の名前で、色は sRGB の 16 進数である。

時間帯ごとの光と明かりの強さ。

空に描く日と月。
位置は、1600 × 900 の設計の画面での座標である。

• 墨の濃さは、時間帯で変えない。
• 夜は、季節の木の葉の色に #10151c を 30% 混ぜる。

季節ごとの葉とパーティクル¶

• 冬は、白砂の色に白を 55%、苔の色に白を 60% 混ぜる。
• 夏の蛍は、朝と昼には出さない。夜の蛍は、加算で重ねて光らせる。
• 時間帯の表と季節の表を掛け合わせて、16 通りの絵を作る。組み合わせごとの素材は持たない。

和紙の文¶

文は DOM のまま、three の CSS3DRenderer で 3D に置く。
3D の場面の 1 m は、文の 260px に当たる。

• 見出しは、下に 0.625rem の余白をとって、字の色を 35% にした罫を引き、罫の下を 1rem あける。
• 段落の間は、1rem あける。
• 一覧の行は、上下に 0.625rem の余白をとり、字の色を 25% にした罫で区切る。
• 和紙は、文の左右に 0.18 m、上下に 0.2 m の余白を持つ。和紙の上下に軸木を付け、2 本の紐で木から伸びる枝に掛ける。
• 和紙を掛ける木は 4 本である。門の内側の松（プロフィール）、季節の木（経歴）、池のほとりの松（技術スタック）、灯籠のそばの季節の木（ポートフォリオ）の順に並ぶ。
• 見せる文は、今いる場所の 1 つだけにする。ほかの場所の和紙は、字の無い紙として見え、クリックを受けない。
• 文は、0.7 秒で不透明度を上げて出す。
• 庭を出したまま画面の幅が 768px をまたいだときは、和紙の大きさをセクションの大きさから測り直し、和紙と枝を掛け直す。 文の幅は、768px をまたいだときだけ変わるためである。

庭の中のボタンの並び¶

庭の中のボタンは、画面の下に固定する。
画面の端から、幅が 768px 以上のときは 1.25rem、768px より狭いときは 0.5rem 離す。

• 4 つの文へ移るボタンは、隣どうしの境の線を 1 本にしてつなぐ。
  • ボタンは、霞の色の面に、時間帯の枠の色（garden-edge-day、garden-edge-night）の枠を付ける。
  • 角は丸めない。4 つのボタンで 1 本の帯にするので、ボタンの間に角が出ないようにするためである。
  • 今いる場所のボタンは、背景と字の色を反転する。
• 「動きを止める」と「文だけで読む」は、下線を付けた字のボタンにして、1rem の間をあけて並べる。
  • 押した状態の「動きを止める」は、下線を 2px にする。
• 幅が 768px 以上のときは、4 つの文へ移るボタンと 2 つの操作を、1.5rem の間をあけて 1 段に並べ、下の中央に置く。
• 幅が 768px より狭いときは、2 段にする。上の段に 4 つの文へ移るボタン、下の段に 2 つの操作を、それぞれ中央に並べる。
• ボタンの字は、操作の字の text-label（16px）である。
• 4 つの文へ移るボタンの左右の余白は、幅が 768px 以上のときは 1rem、768px より狭いときは 0.25rem にし、幅と高さを 44px 以上にする。
• 幅 320px では、「ポートフォリオ」の 7 文字のため、4 つの文へ移るボタンが 1 行に収まらないので、2 行に折り返す。
  • 字は 16px のままにする（TEXT-MIN-SIZE）。
• 4 つの文へ移るボタンの枠は 4 辺に付け、隣のボタンと 1px 重ねる。
  • 折り返した行の境も、線が 1 本になる。
  • 今いる場所のボタンの枠は、隣の枠より手前に出す。
• イントロの間は、場面の準備ができてから文を出すまで、「飛ばす」のボタンだけを右下に出す。
  • ボタンは、面に枠を付け、角を丸めない。
  • 面と枠と字は、色が差す前はテーマの紙と墨の色にし、色が差した後は、庭の中のボタンと同じく時間帯の色にする。
  • 色は、transition-colors で 150ms かけて替える。
  • 画面の端からの距離は、庭の中のボタンと同じにする。

ヘッダーと霞¶

庭を出している間、サイトのヘッダーは、背景を透明にし、下の罫を消して、画面の上端に重ねる。
字が場面の色に重なって読みにくくならないよう、画面の上端と下端に霞を敷き、ヘッダーのロゴとリンク、庭の中の字のボタンを霞の上に置く。
ヘッダーは、stage-on が付いた時点で文書の流れの外に置き、庭を描くまでは庭の面の下に隠す。
庭を描いた時点で外すと、本文が上へずれ、CLS に数えられるためである。
庭を描けずに stage-on を外したときは、ヘッダーが文書の流れに戻り、本文がヘッダーの高さだけ下がる。

霞の高さと、霞の色で塗りつぶす範囲は次のとおり。

• 残りの範囲は、霞の色から透明へ、縦の線形のグラデーションで薄くする。
• 面を持たない字（ヘッダーのロゴとリンク、2 つの操作）は、霞の色で塗りつぶす範囲に収める。 4 つの文へ移るボタンは、霞の色の面を持つので、範囲から出てもよい。
• 768px より狭いときは、ヘッダーのロゴの高さを 2rem、ロゴとリンクの間とリンクどうしの間を 0.5rem にする。 幅 320px でも、ヘッダーを 1 段に収めるためである。
• 霞、字、ボタンの枠、フォーカスの輪の色は、和紙と同じく時間帯で決め、テーマに依らない。 どれもセマンティックトークンで、組はコントラストのチェック（pnpm run check:contrast）が確認する。

• 庭を出している間は、ヘッダー、庭の中のボタン、霞の範囲で、surface、text、border-field、focus をこの表の色に差し替える。 イントロで色が差した後は、「飛ばす」のボタンの範囲でも差し替える。 ヘッダーとボタンのコードは、テーマの色の名前のまま書く。
• 庭を出している間、フォーカスが当たった「本文へスキップ」のリンクは、画面に固定した庭とヘッダーより上に出す。
  • 場面の準備の前は、Tab でイントロが止まらない。 このときも、リンクを描いている途中の墨の絵の上に出す。 リンクが絵に重なるほうが、フォーカスが見えないより害が小さいためである。

Interface¶

試作のファイル¶

試作は docs/design/prototypes/top/ にある。
バンドルの作り方、録画の作り直し方、URL の引数、署名の差し替え方は、試作の README にある。

ページが持つ状態¶

head のスクリプトは、次の値を書く。

• 動きを減らす設定のときは、stage-on を付けず、場面のバンドルを読み込まない。
• localStorage を読めないか書けない端末では、最初の訪問かを判定できないので、intro を付けず、庭だけを出す。
• fd-top-seen は、庭を出すかにかかわらず、ページを開いた時点で書く。
• 場面のバンドルの読み込みに失敗したら、stage-on と intro を外し、ふつうのページにする。書いた fd-top-seen は消さない。
• WebGL を使えない端末でも、読み込みに失敗したときと同じく、stage-on と intro を外し、ふつうのページにする。
• ページを開いてから 6 秒たった時点で、場面のバンドルが scene-ready を書いていなければ、stage-on と intro を外し、ふつうのページにする。通信が応答を返さずに止まると、読み込みの失敗が届かないためである。この判定は、2 回目以降の訪問でも行う。
  • 6 秒の時点で場面を組み立てている途中なら、組み立て終えてから判定する。組み立ては同期の処理でメインスレッドを占め、その間はタイマーの関数が動かないためである。

場面のバンドルは、庭を描き始めた後に、次の値を書く。

• 最初の訪問では、garden-ready を、文を出す時刻（9.3 秒）に書き、カメラが止まる時刻（10.1 秒）に intro と enter を外す。
• 場面を組み立てた時刻、色を差し始めた時刻、イントロを終えた時刻を、performance.mark の garden-scene-ready、garden-enter、garden-intro-done で記録する。E2E が、イントロの段の時刻を確認するために読む。
• 「文だけで読む」を押したときと、描く途中の例外か WebGL のコンテキストの喪失で描けなくなったときは、この値をすべて外し、セクションを元の場所に戻し、stage-on と intro を外す。

場面のバンドル¶

場面のバンドルは、three と場面のモジュールを 1 つにまとめた JavaScript のファイルである。 トップの head の inline script が、庭を出すときだけ、module の script で読み込む。

• バンドルの大きさの上限は、gzip で 160 KB（160,000 バイト）である。
  • ビルドの後に pnpm run check:garden-bundle が確認する。
• バンドルは、ビルドのときに Vite が IIFE の 1 ファイルにまとめ、ファイル名にハッシュを付けて /_astro/ に置く。
  • 開発サーバーはバンドルを ES モジュールのまま配るので、どちらでも動く module の script で読み込む。
• 場面の色は、デザインシステムのトークンの対象の外である（デザインシステムの Design Doc の Scope）。