このページは、tshikimi blog がどうやって作られているかの覚え書きです。使っているツールの具体的なリストは Uses にまとめてあるので、こちらは「なぜこの構成を選んだか」の思想に寄せて書いています。サイトを眺めていて「これはどうやってるの？」と気になったときに読んでもらえたら嬉しいです。
このサイトのコンセプト
tshikimi blog は、姉妹サイトである tshikimi.com から枝分かれした、もうひとつの場所として設計しています。tshikimi.com は作品と活動の「ブランドハブ」ですが、こちらは制作の過程や思考のスナップショットを残すための長文の場所です。だから、見せたいのは作品そのものより、「作品が生まれるまでの時間」のほうだと考えました。
この方針が、技術選定とデザインの両方を貫いています。派手な演出や重いアセットで視線を奪うのではなく、静かに長く読める環境を優先する。それが Colophon の基本姿勢です。
技術スタック
「薄く・長く・小さく」を合言葉に、以下の構成で組み上げています。
- フレームワーク: Astro（SSR モード）。コンテンツ中心のサイトには Islands Architecture の考え方がぴったりで、必要な場所にだけ JavaScript を配置できます
- ホスティング: Cloudflare Workers。エッジで動くことで応答速度が速く、無料枠でも個人運用には十分なキャパシティがあります
- CMS: EmDash。Cloudflare 上で完結するオープンソースのサーバーレス CMS で、D1（SQLite）をバックエンドに Portable Text で記事を保持します
- データベース: Cloudflare D1。SQLite ベースなので、ローカル開発と本番環境の差異が少ないのも魅力です
- 検索: D1 の FTS5 仮想テーブル。EmDash が内部で管理しており、ページ単位で全文検索ができます
- 画像配信: Cloudflare Images と Unsplash。メディア管理は EmDash の Media ライブラリに委ねています
選んだ理由はどれもシンプルで、「読み込みが軽く、書き手にとっての手触りが気持ちよく、無料〜低コストで個人が長く維持できる」の三拍子を満たしていたからです。
執筆ワークフロー
記事の執筆から公開までは、以下のような小さなループで回しています。
- ローカルで Markdown を書く（VS Code + Claude Code の対話ベース）
- 自作の
md-to-post.mjs/md-to-page.mjsで Markdown → Portable Text に変換し、EmDash の REST API 経由で投稿 - 投稿後は本番環境をブラウザで確認。必要があれば同じスクリプトで
--update <id>を叩いて上書き
このスクリプトは、執筆と投稿のあいだにある「儀式」を最小にするために作りました。CMS の管理画面を開かなくても、CLI だけで完結できるのが気に入っています。Markdown の書き味と、CMS が持つ構造化の恩恵を両取りしたかったのです。
Posts と Pages の役割分担
EmDash のコンテンツ型は大きく二つあり、それぞれ役割を分けています。
- Posts（記事）: タイトル・抜粋・アイキャッチ画像・カテゴリ・タグ・著者・コメントを持つ、時系列コンテンツ。TOC が自動生成され、関連記事も表示されます
- Pages（静的ページ）: タイトルと本文だけの、時系列から独立したページ。About / Uses / Colophon / Contact のように、時間が経っても内容が大きく変わらないものをここに置いています
この切り分けのおかげで、ブログのトップや一覧は「時間の流れ」を、ナビゲーションやフッターは「常設の情報」を、それぞれ自然に担当できるようになりました。
デザインシステム
ビジュアル面ではいくつかのこだわりがあります。
- カラー: 紫系アクセント（
#8539a3）をブランドカラーに据えています。ポートフォリオサイト tshikimi.com と同じ色を使うことで、サイトを行き来しても「同じ世界観」を維持できるようにしました - タイポグラフィ: 見出しは Epilogue、本文は Manrope、装飾的なワンポイントに Cormorant Garamond。可読性と品のバランスが取りやすい組み合わせです
- 背景: Vanta.js の TRUNK エフェクト + p5.js。ページ全体に、ゆっくりと有機的に変化するラインを敷いています。読者の意識を邪魔しないよう、動きは控えめに調整しています
- グラスモルフィズム: パネルやカードはガラスの質感で表現しています。背景の Vanta が透けて見えることで、紙ではなく空間の上に情報が置かれている感覚を狙いました
- ダーク/ライト: システム設定を尊重しつつ、手動切り替えも可能。どちらのテーマでも「読みやすさ」を最優先にチューニングしています
パフォーマンスと運用の方針
個人運用の前提なので、派手な最適化よりも「壊れにくさ」を重視しています。
- 画像は必要なサイズだけを取り寄せるようにし、Layout Shift を起こさない枠を事前に確保
- JavaScript は Islands として局所化し、不要なページには読み込まない
- デプロイは Wrangler 経由で Cloudflare Workers に直接プッシュ。CI の複雑さは今のところ持ち込んでいません
- バックアップは EmDash の
seed.jsonを定期的にエクスポート + Git 管理
凝った CI/CD パイプラインを組むより、「いつでも壊せて、いつでも戻せる」状態を維持するほうが、個人ブログには合っていると考えています。
クレジット
このサイトの構築にあたっては、多くのオープンソースプロジェクトに助けられました。特に Astro、EmDash、Vanta.js、p5.js、Google Fonts のチームには大きな感謝を捧げます。また、設計からデザイン、実装までの全工程で、AI エージェント（Claude Code / Codex CLI）との対話が日常のリズムになっています。ひとりで作ったものですが、ひとりでは絶対に作れなかった、というのが正直なところです。
もし技術的な内部構造についてもっと深く知りたい場合は、今後 Posts 側で制作ログを少しずつ書いていく予定です。気長に覗きに来てもらえると嬉しいです。