技術ブログを書くための場所を、自分で作ることにしました。外部サービスも便利ですが、文字組みや配色、スクロールしたときの手触りまで自分で決められるのは、書く側にとっても読む側にとっても大きな価値があります。
目指したのは「長く読んでも疲れない」こと
技術記事は、コードと文章を行き来しながらじっくり読まれることが多いものです。そこで、次の 3 つを最優先にしました。
- 紙のような背景色: 真っ白ではなく、少し温かみのあるアイボリーにして目の負担を減らす
- ゆったりした行間: 日本語の本文は行間を 1.95 程度まで広げ、1 行の長さも 40 文字前後に抑える
- 見出しはセリフ体: 本文はゴシック、見出しは明朝・セリフ体にして、文章の構造がひと目で分かるようにする
良いデザインは、読者に「読みやすい」と意識させないデザインだ。
技術スタック
| 用途 | 採用したもの |
|---|---|
| フレームワーク | Astro |
| 記事 | Markdown / MDX（Content Collections） |
| コードハイライト | Shiki |
| フォント | Source Serif 4, Noto Serif JP, DM Sans, Noto Sans JP |
Astro は静的な HTML を出力し、必要な場所にだけ JavaScript を足せるので、ブログのような「読むためのサイト」にはぴったりです。
図はサイトの役割を整理した概念図です。文字組みや演出の設定はビルド時に用意され、ブラウザで表示されます。
スクロールに合わせた演出
アイキャッチや見出しは、画面に入るとふわっと表示されます。仕組みはシンプルで、IntersectionObserver で要素が見えたらクラスを付けるだけです。
const io = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
entry.target.classList.add('is-visible');
io.unobserve(entry.target);
}
});
document.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el));表示の変化は opacity と transform を CSS の transition で動かしています。
動きが苦手な人への配慮
OS の設定で「視差効果を減らす」を有効にしている人には、prefers-reduced-motion を見てアニメーションをすべて止めています。演出はあくまで「あると嬉しい」ものであって、内容を読む妨げになってはいけません。
これから
まずは週に 1 本を目標に、開発の中で学んだことを書いていきます。読んでくださった方の役に立てば嬉しいです。
