Colophon
何で、どう作られているか。
このページは、サイトの技術構成と測定条件を公開するための記録です。値は確認できたものだけを掲載します。
Current stack
- Framework
- Astro 7.2.2
- Language
- TypeScript
- Rendering
- SSG baseline
- Runtime
- Node.js 22.23.2 / pnpm 11.19.0
- Client JavaScript
- None by default
- Typography
- Noto Sans JP（可変、self-host）/ monospaceはsystem font
- Theme
- prefers-color-schemeによるlight / dark
- Content
- Zenn / noteのRSSをbuild時に取得（Content Collection）
- CMS
- Not connected
Design tokens
色や装飾より先に、本文幅、文字サイズ、行間、余白を決めています。読む速度を落とさないことを、見た目の個性より優先します。
- Measure
- 38rem（本文）/ 46rem（ページ幅）
- Body size
- 1rem
- Line height
- 1.9（本文）/ 1.35（見出し）
- Space scale
- 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4.5 / 7 rem
- Accent
- 1色のみ。状態とlinkの手がかりに限定して使う
- Link
- 本文中は文字色を変えず、下線で示す。下線は背景に対し3:1以上
Baseline policy
最初はAstro componentと静的HTMLだけで構築し、HTML、CSS、JavaScript、build timeを測定します。CMSやruntime機能は、Baselineを残した後に一つずつ追加します。
themeはCSSの prefers-color-scheme だけで切り替えています。手動の切替UIはclient-side JavaScriptを必要とするため、Baselineを記録したあとに導入の可否を判断します。