colophon

このサイトについて

keroway.com のデザイン・技術的な背景をまとめています。差別化というより、 作り手としての判断の記録です。

あなたの御朱印帳

主要ページを訪れると、ブラウザ内に小さな朱印が保存されます。

  • 日本橋
  • 品川
  • 川崎
  • 神奈川
  • 保土ヶ谷
  • 戸塚
design notes
01

配色

「神奈川デザインシステム」。北斎「神奈川沖浪裏」の藍・砂・朱を基調にした tokens.css のカラープリミティブ。

02

モチーフ

松並木・富士の遠景・道筋 (東海道) など、拡張モチーフを CSS 変数として段階的に追加 (ADR 0007 / 0011 / 0012)。

03

タイポグラフィ

見出しに Shippori Mincho、本文に BIZ UDPGothic、コードに JetBrains Mono。Astro Fonts API + Fontsource で自己ホスト (ADR 0013)。

stack
フレームワーク
Astro 6 (static output) + UnoCSS
コンテンツ
Markdown / Markdoc, Astro Content Collections
CMS
Sveltia CMS (CDN 配信の静的 SPA, ADR 0016)
検索
Pagefind (ビルド後に静的インデックスを生成)
ホスティング
Vercel
静的解析 / Lint
Biome
tokaido volume

これまでの公開記事の総文字数を、歩く速度の読了時間に換算して、 東海道全行程 (約123里 / 約492km) のどこまで進んだかになぞらえています。

58,626

≈ 2.5 里踏破 (2%)

a11y menu

ヘッダーの a11y メニューから、以下を切り替えられます。設定はlocalStorage に保存され、次回訪問時も維持されます。

  • 文字サイズ (標準 / 大 / 特大) の切り替え
  • テキスト間隔の拡張
  • リンクの下線常時表示
  • モーション低減 (OS 設定と手動設定の両方に対応)