このサイトについて
このサイトの作り方です。
更新
使っている技術
- Astroによる静的サイトです。すべてのページを事前にHTMLとして生成し、動きや操作のある部分だけに小さなスクリプトを使っています。
- ホスティングはVercelです。サーバーで動くコードは、日本語設定のブラウザーからの初回アクセスを日本語のページへ案内する小さな関数だけです。
- 記事の検索にはPagefindを使っています。検索用のインデックスは、サイトと一緒に生成されます。
- リンクのプレビュー画像は、サイトのビルド時にSatoriとresvgで生成しています。
- 新しい記事のメール配信にはButtondownを使っています。
- アクセス数はVercel Web Analyticsで集計しています。サードパーティのCookieを使わず、集計値だけを確認できます。ページの表示速度はVercel Speed Insightsで計測しています。
書体と色
- 英語の本文はGeist、見出しはFraunces、コードはGeist Mono、手書き風のメモはCaveatです。
- 日本語の本文はZen角ゴシック New、見出しはしっぽり明朝 B1、手書き風のメモはクレー Oneです。
- 7つとも、このサイトから配信しているオープンソースのフォント（SIL Open Font License）です。
- 配色の名前は「Ai & Sand」です。藍色と温かみのある砂色に、柿色と朱色をアクセントとして使っています。
作り方
AIコーディングエージェント（主にClaude Code）を使い、文書にまとめた仕様をもとに構築しました。仕様は私が自分で書き、AIと一緒に練り上げてから、実装に渡しました。マイルストーンごとに1件のプルリクエストとし、エージェントが構築したあと、自動チェック（2つのブラウザーでのテスト、アクセシビリティと表示速度の監査、リンク切れとシークレットの漏えいのスキャン）が実行され、私がレビューとテストをしてマージしました。お客様の案件でも、同じような進め方をしています。