KJR020's Blog

基盤

全ページで共有する色、文字、余白、幅、配置のルールを確認できます。部品ごとに値を直接指定する前に、用途に合うトークンを選びます。画面幅やテーマを変えて、情報の意味と優先順位が保たれることを確認します。

1. トークン

色、文字、余白、角丸、影などの値に用途を表す名前を付け、ページと部品で共有します。値の直接指定を減らし、変更時にブログ全体の意味と見た目を同じ基準で更新できるようにします。

1-1. 色の役割

色は情報の役割、操作可能性、状態を伝えるために使います。

  • Token
    • Light / Darkで同じ意味を保つsemantic tokenを選ぶ
  • 用途
    • ニュートラルは面と文字
    • 青は遷移
    • 赤は破壊的状態
    • 4色は記事内Callout
  • 色以外の手がかり
    • 色だけを唯一の手がかりにしない
Background / Card var(--background) ページと面
Foreground var(--foreground) 本文と主要情報
Primary var(--primary) 主要操作
Link var(--link) 遷移可能な情報
Secondary / Muted var(--secondary) 補助操作と弱い面
Muted foreground var(--muted-foreground) 補助情報
Border / Input var(--border) 領域の境界
Destructive var(--destructive) 破壊的な操作とエラー

Source src/styles/globals.css

1-2. 記事コールアウト色

Callout色は、本文から補足の種類を識別するためだけに使います。

  • 適用する場所
    • 面全体を塗らない
    • 左2pxの境界とタイトル文字へ適用する
  • 色以外の手がかり
    • 色が分からなくても、見出しから意味を判断できるようにする
Note var(--callout-note) 追加の背景情報や参照
Tip var(--callout-tip) 実装を進めるためのヒント
Warning var(--callout-warning) 注意が必要な条件
Danger var(--callout-danger) 破壊的・危険な操作

Source src/styles/globals.css

1-3. 文字階層

書体、サイズ、太さ、行高で、情報の階層を伝えます。下の標本は固定段のトークンです。ページタイトルと記事タイトルには、それぞれ専用の可変サイズを使います。

  • 書体
    • Headerはsystem sans
    • 本文と見出しはNoto Sans JP
    • コードとトークン名はJetBrains Mono
  • サイズと行高
    • 役割ごとに黄金比φを基準に定義する
  • 太さ
    • 見出しはh4からh1まで、1段上がるごとに100ずつ太くする。h1は900、h2は800、h3は700、h4とルール見出しは600とし、本文は400とする
    • 上位の見出しを、下位の見出しやラベルと同じ太さにしない
    • 欧文・数字の大見出し(.type-display)は、見出しの階層とは別に800とする
あいうえお Aa 012
Display
--font-size-display
太さ
--font-weight-display
用途
404など単一状態の強調
あいうえお Aa 012
Title 1
--font-size-title1
太さ
--font-weight-section
用途
固定サイズの見出し。ページタイトルは--text-page-title、記事タイトルは--text-article-titleを使う
あいうえお Aa 012
Title 2
--font-size-title2
太さ
--font-weight-section
用途
セクション見出し
あいうえお Aa 012
Title 3
--font-size-title3
太さ
--font-weight-subsection
用途
小見出し
あいうえお Aa 012
Body
--font-size-body
太さ
--font-weight-body
用途
本文
あいうえお Aa 012
Small
--font-size-small
太さ
--font-weight-body
用途
補助テキスト・メタ情報
あいうえお Aa 012
Caption
--font-size-caption
太さ
--font-weight-body
用途
短い補足

Source src/styles/globals.css src/layouts/BaseHead.astro

1-4. 黄金比スペーシング

余白は、要素どうしの関係と情報の区切りを伝えるために使います。

  • 値の選び方
    • 黄金比φのscaleから選ぶ
    • 局所的な数値を追加する前に、既存tokenで関係を表せるか確認する
  • 広げる順序
    • 同一要素内、部品間、セクション間、ページ外周の順に広げる
φ⁻³ --phi-neg3 var(--phi-neg3)
φ⁻² --phi-neg2 var(--phi-neg2)
φ⁻¹ --phi-neg1 var(--phi-neg1)
φ⁰ --phi-0 var(--phi-0)
φ¹ --phi-1 var(--phi-1)
φ² --phi-2 var(--phi-2)
φ³ --phi-3 var(--phi-3)
φ⁴ --phi-4 var(--phi-4)

Source src/styles/globals.css

1-5. 角丸・影

  • 角丸
    • 同じ面に属する情報のまとまりを伝える
    • 基準は0.618rem
    • 装飾だけを目的に丸めない
  • 影
    • 面の区切りには使わず、罫線と余白で示す
    • Dialog・Popover・Menuなど、本文の前面に重なる面にだけ使う
Small--radius-sm
Medium--radius-md
Large--radius-lg
Full9999px
Overlay shadow--shadow-overlayDialog・Popover・Menuなど、本文の前面に浮く面

Source src/styles/globals.css src/design-system/styles.css

1-6. モーション

UIの動きは短く規則的にし、表現的な動きはヒーローとくりに限ります。

  • トークン
    • UIのカーブとdurationはglobals.css、くりの値はKuri.astroのトークンを正本とする
    • くりの動きには、UIのトークンを流用しない
  • 標本
    • 各カーブは現在のトークン値から描画する
    • 再生すると、同じ値の動きを確認できる

UIのモーション

状態・階層・遷移を短く規則的に伝え、操作には即応します。

イージング
Enter --ease-enter 内容の入場。減速して止まる
Exit --ease-exit 退場。加速して短く消える
Move --ease-move 位置の移動、下線
Emphasis --ease-emphasis ヒーローの見出しなど、表現的な入場
In-out --ease-in-out 往復する動き
Duration
--duration-quick ポインターへの即時反応
--duration-fast Hover、矢印
--duration-base 下線、部品の状態変化
--duration-slow 内容の入場
--duration-hero ヒーローの見出し、伸び

キャラクターのモーション

くりの人格を、ポーズ、重心、間で表します。体は重く動かず、目だけが素早く動きます。

イージング
Emerge --ease-emerge 登場。罫線の下から出て、行き過ぎた位置で止まる
Touchdown --ease-touchdown 登場。行き過ぎた位置から足を罫線へ下ろす
Recover --ease-recover 登場。着地でつぶれた形から戻る
Anticipate --ease-anticipate ジャンプ前に沈む
Push --ease-push 押し出し。離陸の速度を空中の初速へつなぐ
Impact --ease-impact 着地の反動。すぐに止まる
Settle --ease-settle 反動から静止へ。呼吸の吸う・吐く
Eye lag --ease-eye-lag ジャンプ中、目が体に遅れて動く
Eye catch-up --ease-eye-catch-up 遅れた目が体に追いつく
Eye drop --ease-eye-drop 着地の衝撃で目が落ちる
Blink close --ease-blink-close まぶたは速く閉じる
Blink open --ease-blink-open まぶたはゆっくり開く
Doze --ease-doze まぶたが重くなり、一度持ち直す
Drift off --ease-drift-off 持ち直したまぶたが力尽きて閉じきる
Relax --ease-relax 寝入って体の力が抜ける
Eye swap --ease-eye-swap 開いた目の縁と眠った目の弧を入れ替える
Zzz fade --ease-zzz-fade 起きるとzzzが消える
Zzz float --ease-zzz-float zzzが浮かんで消える
Duration
--duration-blink-close まばたき: 閉じる
--duration-blink-hold まばたき: 閉じたまま
--duration-blink-open まばたき: 開く
--duration-kuri-wake 起きる
--duration-kuri-eye-swap 目の縁と眠った目の弧の入れ替え
--duration-kuri-enter 罫線の下からの登場
--duration-kuri-jump ジャンプ
--duration-kuri-doze うとうとして眠る
--duration-kuri-zzz-fade 起きたときにzzzが消える
--duration-kuri-zzz-float zzzが浮かんで消える1周期
--duration-kuri-breathe 呼吸の1周期
アクション

Source src/styles/globals.css src/components/Kuri.astro

2. レイアウト原則

ページの幅、列、余白、読み順を示します。画面幅に合わせて配置を変えます。情報の優先順位とDOM順は保ちます。

2-1. ページシェル

  • 構成
    • Sticky Header → Main → Footerで構成する
  • くりの配置
    • ホームと記事一覧では、見出し下の罫線上へ置く。記事詳細には置かない
Sticky Headerborder-bottom · backdrop blur
Mainページの主な内容を置く
Footerborder-top · privacy / social links

Source src/layouts/BaseLayout.astro

2-2. 16列グリッド

  • 列
    • Wideでは、シェルの内容幅を16列と列間の余白へ分割する。列間の余白は--grid-gutterで16〜24pxに補間する
    • 主要領域の幅と位置を列で決める
    • 列は配置をそろえる座標系で、CSS Gridの使用は要件にしない
  • 部品の内部
    • spacing tokenで配置する
16〜40px
主領域 1〜12列(内容幅1200px・列間24pxのとき894px)
補助領域 13〜16列 内容幅1200px・列間24pxのとき282px。補助情報がなければ余白として残す
16〜40px

Specification docs/design/grid-system.md

2-3. Breakpoints

  • 段階
    • Tailwindのmdとlgに合わせた3段階
  • 判定
    • viewport全体の幅で判定する
    • 上限は47.999remと63.999remで書く
  • 部品内部
    • 3段階はページの主要領域の構成だけに使う
    • 切り替えなしに収まる配置を優先する
    • 切り替える場合は、内容が収まらなくなる幅を境目にし、その理由をCSSのコメントに書く
    • 置き場所で幅が変わる部品は、コンテナクエリで部品の幅を判定する
ModeViewportTailwind左右余白主要領域
Compact48rem未満既定--shell-pad縦積み
Medium48rem以上・64rem未満md--shell-pad縦積み
Wide64rem以上lg--shell-pad主領域＋補助領域

2-4. 共通のページシェル

  • 最大幅
    • 確認用カタログを除く全ページで同じシェルを使う。最大幅は左右の内側余白を含めて1280pxとする
  • 列の分割
    • 16列へ分割するのはシェルの内容幅
対象決めること指定
全ページ外側の最大幅--shell-max
全ページ左右の内側余白。画面幅に合わせて16〜40pxに補間する--shell-pad
Privacy Policyシェル幅を保ち、本文の行長を抑える主領域の列数とmax-inline-size
検索シェルとは独立した重なり領域Command Paletteの実装
確認用カタログ独自のシェルにSidebarと本文を並べる。56rem未満ではSidebarを本文の上に折りたたむ.book-shell

2-5. 配置パターン

  • Wide
    • 記事詳細の本文は1〜12列、ホームの記事一覧は1〜11列へ置く
    • 補助領域は13〜16列
  • Medium以下
    • DOM順を保ったまま全幅で縦積みする
    • 記事詳細の目次は折りたたみ表示へ切り替える
記事ヘッダータイトルとメタ情報 1〜12列。マスコットは置かない
本文 / 記事一覧Wide: 本文1〜12列 / ホームの記事一覧1〜11列
目次 / メモWide: 13〜16列

2-6. 幅トークン

  • 指定方法
    • ページシェルは共通のCSS変数で指定する。重なり領域の幅は対応する部品で指定する
  • 採用値
    • シェルと列の配置はdocs/design/grid-system.mdを参照する
--shell-max全ページで共有する最大幅
本文の行長シェル内で読みやすい幅に制限する
Command Paletteシェルと独立した幅を指定する

2-7. 余白の階層

情報の関係が強いほど狭く、セクションやページの境界ほど広い余白を使います。

関係主な値実装例
同一要素内φ⁻³〜φ⁻¹ナビ間隔、タイトルと補足、カード行間
関連要素間φ⁰〜φ¹カードpadding、見出しと一覧
セクション間φ¹〜φ²Posts / Notes、記事header
ページ外周左右は--shell-pad、上下は用途別のspacing token一覧・記事詳細・ヒーロー

2-8. 見出しと強調の階層

ページタイトル → セクション見出し → カードタイトル → メタ情報の順に、サイズ・太さ・色を弱めます。

Page titleページタイトルは--text-page-title、記事タイトルは--text-article-title
Section heading罫線と余白で節の区切りを示す
Item title項目名を強調する。操作対象であることを下線や色で示す
Metadatasmall / muted foreground

10. レスポンシブ・アクセシビリティ

画面幅、入力方法、動きの設定が変わっても、同じ情報と操作へ到達できるようにします。配置、キーボード操作、ARIA、Motionの最低条件を定義します。

10-1. レスポンシブ規則

  • ナビゲーション
    • 48rem未満では、水平ナビゲーションをMobileMenuへ切り替える
  • 記事目次
    • 64rem未満では、記事ヘッダー直後の折りたたみ領域へ置く
  • 画像・コード・表
    • 画像は親の領域幅に収める
    • コードと表が親幅を超える場合は、その領域内で横スクロールできるようにする
  • リンクカード
    • 置き場所の幅28.5remを境に、OG画像の幅とaspect-ratioを切り替える
Compact縦積み · Mobile controls
Medium縦積み · stacked support
Widecontent + rail

10-2. キーボード・ARIA

  • フォーカス
    • Button / Input / Navigationは視認可能なfocus ringを表示する
  • Command Palette
    • HTMLのdialog要素を使う
    • 入力はcombobox、結果一覧はlistbox、各結果はoptionで表す
  • 開閉と現在地
    • Mobile MenuとTOCの開閉状態はaria-expandedで示す
    • 目次の現在地はaria-current="location"で示す
  • アイコン
    • icon-only buttonにはaria-labelを付ける
    • 装飾iconにはaria-hiddenを付ける

10-3. Motion / Loading

  • 役割
    • 動きで要素の関係と状態の変化を伝える
  • 依存させないもの
    • 情報の理解や操作の成立を、animationへ依存させない
  • Reduced motion
    • prefers-reduced-motion: reduceでは不要なanimationを停止する
  • 画像の読み込み
    • Cosense画像は表示領域へ近づいてから読み込み、opacity transitionで表示する
Page load400ms fade-in-up
Tag float4秒周期
Lazy imageIntersection Observer + opacity