コンテンツにスキップ

挿絵

Overview

挿絵は、版面に足す和の感じの絵で、情報を運ばない。
トップには水墨の門の絵と立体の庭を置き、記事の一覧の冒頭には、トークンの色で描く版画風の図柄を置く。
画面のトークンとコンポーネントの全体は デザインシステム（packages/ui）の Design Doc にある。

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

Scope

持つものは次のとおり。

  • 挿絵を置く場所と、置かない場所
  • 版画風の挿絵の図柄、版の仕様、色と濃さの決め方
  • 版画風の挿絵の動きの層
  • 生成器と ArtBand の使い方

持たないものは次のとおり。

Design

置く場所

場所 挿絵
トップの庭 水墨の門の絵と、立体の庭
庭を出さないときのトップ 帯の位置に、止まった水墨の絵
記事の一覧の冒頭 版画風の図柄

挿絵は、記事の本文、コードを動かす画面、フッターには置かない。
水墨の絵と庭の絵は、トップの水墨の門と立体の庭の Design Doc にある。

色と濃さ

版画風の挿絵は、文字の色（--fd-color-text）と面の色（--fd-color-surface）の 2 色だけで塗る。
濃さは、層ごとの不透明度のトークン（--fd-art-*）で決める。
テーマを替えると、色と濃さが一緒に替わる。

トークン 層
--fd-art-far 遠景
--fd-art-mid 中景
--fd-art-near 近景
--fd-art-moon 月
  • ライトは近景ほど濃く、ダークは近景ほど面の色に近い。
  • 層は、面の色で下を隠してから、文字の色を重ねる。後ろの層が透けないので、ダークで近景を薄くしても奥の稜線が出ない。
  • SVG に色の値を書かない。mask は alpha で読み、白の色の値を書かない。

版の仕様

図柄は、次の表の版の仕様を共有する。
数値は scripts/build-art.mjs が持つ。

要素 実装 目的
輪郭の荒れ feTurbulence と feDisplacementMap。図柄ごとに変位の大きさを替える 刷りのずれ。刷ったものに見せる
霧 縦のグラデーションを mask に掛ける。下端が濃く、上端で面の色へなじむ 上端で面へなじませる
空 上端から下へ薄れる帯（一文字ぼかし）。霧だけを掛け、荒れを掛けない 荒れで上端の辺がずれ、空に筋が出るのを防ぐ
断ち落とし viewBox 0 0 1200 400 と preserveAspectRatio="xMidYMax slice" 帯の高さに関わらず下端を保つ

図柄

名前 ファイル 特徴
seigaiha seigaiha.svg 青海波。同心の弧の段を重ね、下の段ほど濃い。密なので低い帯でも幅を埋める
kasumi kasumi.svg、kasumi-motion.svg 霞の山並み。3 層の稜線と、動きの層の霞の帯
moonPine moon-pine.svg、moon-pine-motion.svg 月と松。空の一文字ぼかし、遠い稜線、右下から入る松の枝と、動きの層の月

記事の一覧の冒頭には seigaiha を置く。

動きの層

図柄は、版の層の上に、動きの層を 1 枚持てる。
動きの層は、読み込んだ直後に 1 回だけ濃度を上げて出て、5 秒を超えない。
位置は動かさない。

図柄 動き
kasumi 霞の帯が、4 秒で濃度を上げて出る
moonPine 月が、3 秒で濃度を上げて出る
seigaiha 動きの層を持たない

霞の帯は、面の色の帯の縁を、放射のグラデーションで四方にぼかす。
荒れを掛けると端が棒に見えるので、版の層に入れない。

帯と文字

ArtBand は、版の層と動きの層を重ねた帯を描く。
帯は aria-hidden="true" を持ち、SVG に読み上げの名前を付けない。挿絵は装飾であり、読み上げに渡さない。

  • ArtBand は子の要素を受け取らないので、帯の中に文字を置けない。文字を重ねるときは、帯の外に霞と文字を重ねる。
  • band の帯は高さが 120px で、上端の半分を面の色へなじませる（mask-t-from-50%）。
  • fill の帯は、relative を持つ親の全体に広げる。

Interface

置くファイル

パス 持つもの
packages/ui/src/art/<図柄>.svg 図柄ごとの版の層の SVG
packages/ui/src/art/<図柄>-motion.svg 図柄ごとの動きの層の SVG
packages/ui/src/base/ArtBand/ArtBand.tsx SVG を帯として描くコンポーネント
scripts/build-art.mjs 版の仕様を共有して SVG を組む生成器

@fukuemon/ui は、パッケージの . から ArtBand と、型の ArtBandProps、ArtBandLayout、ArtMotif を出す。
ArtBand は ?raw で SVG を文字列として読み込む。

ArtBand の props

prop 意味
motif 図柄の名前。kasumi、seigaiha、moonPine
layout 置き方。band（デフォルト）か fill

生成器

pnpm run build:art は、scripts/build-art.mjs で packages/ui/src/art/ に SVG を書き出す。
生成器は乱数の種を固定するので、生成し直しても同じ SVG になる。
SVG を手で直さず、生成器を直して書き出し、一緒にコミットする。

チェック

  • pnpm run check:art は、書き出すはずの中身と今の SVG を比べ、食い違うかファイルがないと終了コード 1 にする。pnpm run check に入っている。
  • ArtBand.test.tsx は、帯を読み上げから外すこと、band が 120px の帯を埋めること、動きの層が 5 秒以内の 1 回だけの遷移で動くことを確認する。