ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く¶

Status¶

承認

Context¶

トップのページの挿絵と、最初の訪問の演出と、プロフィールの見せ方を決める必要がある。

• 挿絵は、トークンの色で描く版画風の図柄で、トップ、記事の一覧の冒頭、about の帯にだけ置くと決めている。
• about は独立したページを作らず、トップ（/）にまとめると決めている。トップは、プロフィール（About.astro）を最初に出し、その帯に版画風の挿絵（ArtBand の woodland）を置いている。
• 運営者は、行き先を選ぶだけの表紙の画面は要らないと決めた。
• 運営者は、水墨画で場面が筆の順に描かれる演出を採ると決めた。
• 運営者は、イントロに庭の門を描き、門をくぐるとプロフィールが出る形にすると決めた。プロフィールは、立体の庭の中で、経歴や技術スタックを見て回れる形にする。
• 運営者は、文を看板に書く形に違和感があると判断し、文を木の枝に掛けた和紙に書くと決めた。
• 運営者は、色面だけで作った立体の庭（three）の試作を見て、絵の質が低いと判断した。
• 運営者は、最初の訪問のイントロは、文が見えるまでに 6.9 秒を超えてよいと決めた。2 回目以降の訪問は、速く表示することを求めた。
• 運営者は、最初に「Fukuemon」の署名を筆記体で書く演出を採ると決めた。
• 運営者は、three を配ることと、カメラが動くことを、2 回目以降の訪問にも認めると決めた。
• Design System は、動きの規則として、位置を動かさないことと、配る JavaScript を 0 バイトにすることを決めている。
• サイトの基盤の要求は、Lighthouse の Performance が 90 以上で、LCP が 2.5 秒以内であることを求める。
• pull request #50 で、5 秒を超える動きは 5 秒以内に止めると決めた。Design Doc への反映は未確認である。
• WCAG 2.2 の達成基準 2.2.2 は、自動で始まり、5 秒を超えて続き、ほかの内容と並んで出る動きに、止める手段を求める。
  • 出典: Understanding SC 2.2.2: Pause, Stop, Hide
• レスポンスヘッダの Content-Security-Policy は frame-ancestors だけを指定していて、インラインのスクリプトを止めない。
• 色と版面のトークンは、ADR-0024 が決めている。
  • ADR-0024: トークンを、fukuemon.dev の値のプリミティブトークン、セマンティックトークン、テーマ変数の 3 つの層にし、生成りの地と旧サイトの差し色にする

Decision¶

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

• 本文
  • トップの HTML は、プロフィールの本文を最初から持つ。本文は、プロフィール、経歴、技術スタック、記事の 4 つのセクションにする。検索と読み上げが、本文を読めるためである。
  • 庭を出さない訪問者には、同じ本文をふつうのページとして出す。庭を出さないのは、動きを減らす設定、JavaScript が動かない環境、WebGL が使えない環境である。
  • 庭の中に「文だけで読む」のボタンを置く。押すと、ふつうのページに戻す。
  • ふつうのページの帯には、止まった水墨の絵を置く。
• 最初の訪問の演出
  • 左下に、「Fukuemon」の署名を筆記体で書く。署名は、イントロの間だけ出す。署名は、輪郭を塗った SVG の path として置き、運営者の自筆の SVG に差し替えられる作りにする。自筆を用意するまでは、書体 Great Vibes の輪郭を使う。
  • 門は、2 本の柱に腕木を出して切妻の屋根を載せ、内側へ開く板の扉を付けた形（腕木門）にする。鳥居と見分けられるようにするためである。
  • 墨の絵は、山並み、塀、門、飛び石、石、松である。SVG の線にして HTML に置き、CSS の遷移で筆の順に描く。
  • 墨の門と塀と飛び石の線は、立体の配置を最初のカメラで投影した位置に描く。色が差すときに、線と立体がずれないためである。
  • 墨の絵を描き終え、場面の準備もできてから、色を差して門をくぐる。場面の準備が 6 秒で終わらなければ、ふつうのページを出す。
  • 「飛ばす」のボタンを置く。Esc と Tab でも、動かさずに最後の状態にする。
  • 最初の訪問の範囲は、端末で 1 回にする。
  • 最初の訪問のトップは、LCP が 2.5 秒以内という要求の対象から除く。イントロの間は、文を見せないためである。
  • イントロは 5 秒を超えるので、5 秒を超える動きを 5 秒以内に止める決定の例外にする。イントロは画面の全体を使い、ほかの内容と並ばず、「飛ばす」のボタンで止められるためである。
• 2 回目以降の訪問
  • 門の内側の庭を、イントロなしで出す。カメラは動かさず、プロフィールの文を最初に見せる。
  • 2 回目以降の訪問と、庭を出さないときのトップは、LCP と Performance の要求の対象にする。
• 立体の庭
  • 庭は three で描く。場面の束は別のファイルにし、庭を出すときだけ読み込む。
  • 場面を描いた絵に、墨の輪郭線、淡彩、紙の質感、端の余白を重ねる。イントロの水墨の絵と画風をつなぐためである。
  • 文は、DOM のまま three の CSS3DRenderer で 3D に置く。文を画像にせず、リンクとフォーカスを保つためである。
  • 文は、看板に書かず、木の枝に掛けた和紙に書く。和紙は 4 枚で、門の内側の松、季節の木、池のほとりの松、灯籠のそばの季節の木に掛ける。
  • 和紙と字の色は、時間帯で替える。字の後ろを 1 つの色の面にして、読みやすさを保つためである。
  • 見せる文は、今いる場所の 1 つだけにする。文は WebGL の絵と深度を共有せず、物の向こうの文も手前に見えるためである。
  • 文から文へは、4 つのボタンと左右の矢印キーで移る。文の中のリンクにフォーカスが移ると、カメラがその文へ動く。移った文の見出しを、読み上げに通知する。
  • 木の葉は、葉の形の小さな板を枝の先に集めて描く。石、木、灯籠、枝は、後から絵やモデルに差し替えられる作りにする。
  • 舞う物は位置が動くので、動きの規則の例外にする。動き続けるので、「動きを止める」のボタンを置く。
  • 舞う物は、5 秒を超える動きを 5 秒以内に止める決定の例外にし、「動きを止める」のボタンで止める。WCAG 2.2.2 が、5 秒を超えて続く動きに求める止める手段にあたる。
  • 場面の色は、場面のモジュールの中に置き、Design System のトークンの対象の外にする。時間帯ごとに 20 個を超える色を使い、場面のほかでは使わないためである。
• 設計の規則の例外
  • 位置を動かさない規則と、配る JavaScript を 0 バイトにする規則の例外を、トップの庭に認める。庭は 2 回目以降の訪問にも出すので、例外は最初の訪問に限らない。
• 挿絵
  • トップの挿絵は、水墨の門の絵と、立体の庭にする。
  • 記事の一覧の冒頭の挿絵は、トークンの色で描く版画風の図柄のままにする。
  • 挿絵は、記事の本文とコードを動かす画面には置かない。フッターの草の図柄は置かない。
  • 版画風の挿絵の色は、セマンティックトークンの面と文字の色から作り、テーマごとに替える。
• /about は置かない。
• 行き先を選ぶ表紙の画面と、ページの間の扉は作らない。
• HTML-in-Canvas は使わない。対応するブラウザが広がったら、段階的な強化として足す。

季節と時刻で絵を変える判断は、ADR-0027 にある。

PRD の「Lighthouse の Performance が 90 以上で、LCP が 2.5 秒以内（Moto G Power、Slow 4G 相当）。」の行の下に、次の 1 行を足す。

トップの最初の訪問は、この要求の対象から除く。最初の訪問だけに、水墨の門のイントロ（約 10 秒）を出すためである。2 回目以降の訪問のトップは、対象に含める。

承認の条件¶

実装の中で、次を確認する。 満たせないときの扱いも、ここに書く。

• Astro のページに組み、2 回目以降の訪問の、通信を含めた LCP と Performance を、基盤の要求の条件（Moto G Power、Slow 4G 相当）で測る。場面の束が届くまで、本文は紙の色の面の下に隠れる。要求を超えたら、ふつうの HTML を先に出し、「庭に入る」のボタンで庭を出す形に替える。
• 文と和紙のコントラストを、時間帯とテーマの組み合わせごとに測り、4.5:1 以上にする。
• 文字の選択、ページ内の検索、読み上げソフトでの読まれ方を確認する。ページ内の検索は、見せていない文にも当たる見込みである。
• 約 10 秒のイントロを、5 秒を超える動きを 5 秒以内に止める決定の例外にしてよいかを、運営者が確認する。WCAG 2.2.2 の解説は、イントロを直接は扱っていない。全画面の動きがほかの内容と並ばないという当てはめは、下書きを書いた者の読みである。
• 署名の書体 Great Vibes のライセンスを、リポジトリの文書に書く。ライセンスは SIL Open Font License 1.1 で、著作権の表示は「Copyright 2015 The Great Vibes Pro Project Authors」である。書体のファイルの名前の表の著作権の年は 2010 で、OFL.txt の著作権の年（2015）と違う。予約された書体名の指定は無い。
  • 出典: Great Vibes の OFL.txt

Verification¶

design/prototypes/top/ の試作（i-mon.html）で、chromium と Apple M2（ANGLE の Metal のレンダラー）で確認した。 file:// で開いた値で、通信の時間を含まない。

• 最初の訪問は、署名を入れて 8.3 秒で終わった。署名と墨の絵が 3.8 秒、色が差して門をくぐり終えるまでが 4.5 秒である。
• 色が差してから門をくぐり終えるまで、毎秒 60 コマだった。最も長いコマは 19 ms だった。
• 場面の束は、gzip で 155 KB だった。墨の絵の SVG は、gzip で 36 KB だった。署名の SVG は 8 KB だった。
• 最初の訪問で、文が見え始めるのは 7.5 秒だった。
• 2 回目に庭を出す形の LCP の指標は、140 ms だった。CPU を 4 倍遅くすると、376 ms だった。
• イントロの間も、h1 はアクセシビリティツリーにあった。
• 動きを減らす設定、JavaScript が動かない環境、WebGL が使えない環境で、ふつうのページが出た。
• 「文だけで読む」を押すと、4 つのセクションがふつうのページに戻った。
• 文の中のリンクにフォーカスを移すと、カメラがその文へ動いた。
• 場面の準備を 6 秒で打ち切る動き、移った文の見出しの通知、ふつうのページの帯の絵は、試作に入れていない。
• 実装は、線画を最後まで描いてから色を差す。実装では、最初の訪問のイントロは約 10.1 秒で終わり、文が見え始めるのは約 9.3 秒である。試作で測った 8.3 秒と 7.5 秒とは違う。
• 性能の低い端末、実機のスマートフォン、Safari、Firefox、読み上げソフトでの確認はしていない。

Considered Options¶

Consequences¶

Positive¶

• 最初の訪問の墨の絵から、そのまま庭に入る。
• プロフィールの本文は 1 つで、庭とふつうのページの両方が同じ DOM を使う。
• 行き先を選ぶ表紙、扉、代わりの静止画を作らなくて済む。
• 署名を、自筆の SVG に差し替えるだけで替えられる。

Negative¶

• 動きの規則の例外と、トップだけに配る three の束を持つ。例外は、2 回目以降の訪問にも及ぶ。
• 最初の訪問は、文が見えるまでの時間が、基盤の要求の 2.5 秒を超える。PRD に例外を書く。
• 文と和紙のコントラストを、時間帯とテーマの組み合わせごとに保つ必要がある。
• 場面の色を、Design System のトークンの外に持つ。
• 自筆の署名を用意するまで、書体のライセンスの表示を持つ。
• コードで描く石、木、筆の線は、人が描いた絵には届かない。
• 絵の見え方を、自動のテストで守りにくい。見た目の回帰のテストは、ふつうのページと、止めた庭の絵だけを対象にする。