このサイトについて

個人サイト(このサイト)を Astro で作ったので、技術構成と デザインの方針をメモしておきます。

なぜ Astro

ブログと作品紹介が中心の、ほぼ静的なサイト。だったら出力も限りなく静的に寄せたい—— ということで Astro を選びました。ビルド時に HTML を生成する静的サイトなので表示が速く、 クライアントに送る JavaScript も最小限です。

記事と作品は Content Collections で管理しています。src/content/blog/ や src/content/works/ に Markdown を置くだけで、frontmatter のスキーマを zod で検証 しつつ、一覧やページが自動で生成されます。

デザイン:Neo-Brutalism

無難なミニマルではなく、思いきって Neo-Brutalist に振りました。

• 生成り色の背景にドットの地模様
• 極太の黒い枠線とハードシャドウ(影をぼかさず黒でずらす)
• 黄・青・赤の差し色
• 角丸なし、大胆な大文字タイポグラフィ

配色は CSS 変数(--blue / --red / --yellow)に集約してあるので、トーンを変えたく なったらそこだけ触れば全体に反映されます。

こだわったところ

• アクセシビリティ — スキップリンク、prefers-reduced-motion への対応、フォーカス 表示。スクロール連動のフェードインは JavaScript が有効なときだけ効かせ、無効でも コンテンツがちゃんと読めるようにしています
• 軽さ — フェードインは IntersectionObserver で実装。重いライブラリは入れていません
• SEO / OGP — canonical・OGP・Twitter カードのメタを共通レイアウトでまとめて管理

デプロイ

GitHub に push すると Vercel が自動でビルド・デプロイする構成です。リポジトリのルート ではなく site/ 以下をプロジェクトルートにしています。

---

シンプルだけど、ちょっと尖った個人サイト。気が向いたらここに開発メモを足していきます。