2023年に、ブログを作り直そうと書いたメモがあります。そのときはまず「どんな画面が必要か」「どのライブラリを使うか」から書き出していました。Home、Series、Tags、Books、Links、About — 画面のリストを先に並べて、ニュースレターやコメント機能をどう作るかを悩んでいました。
3年が経って改めて見ると、あのときは 機能を先に描いて、情報は後から埋めようとしていたんだな と気づきます。本当は順番が逆ですよね。どんな情報をどう見せるかを先に決めれば、画面は自然とついてきます。
そこで今回は「何が必要か」を5つの層に分けて整理してみます。
1. 記事1本に入る情報#
ブログの最小単位は記事です。記事1本がちゃんと作られれば、残りはその上に積み上げるだけです。
記事そのものに必ず入れたいのは次のくらいです。
- タイトルと本文 — 当たり前ですが、一番手をかけるべき部分
- 公開日と更新日 — 技術記事は時間に敏感で「いつ書いた記事か」が信頼度を左右します
- タグ1〜3個 — つけすぎると意味が薄れます
- 読了時間 — 読者が心の準備をできるようにしてくれます
- 目次 — ある程度の長さの記事では必須です
そこに表現のための要素が続きます。
- コードブロック — 言語別のシンタックスハイライト、行番号、コピーボタン
- 画像 — 本文の画像と、OG（Open Graph）のメイン画像
- 引用、表、コールアウトボックス — 強調や比較に必要です
OG画像は意外と重要です。リンクがSNSやメッセンジャーで共有されるときの第一印象を決めるからです。自分で描かなくても タイトルと日付を自動で描画してくれるOG生成ツール を入れておけば、記事がどこへ行っても一貫した見た目になります。
2. 記事を見つけてもらうための情報#
いい記事があっても、読者がたどり着けなければ意味がありません。ブログは 記事までの道 も一緒に提供する必要があります。
到達経路は大きく4つです。
- ホーム（最新記事一覧） — 一番よく入ってくる入り口
- タグページ — 同じテーマの記事を集めて見せる場所
- シリーズ — 複数編にわたる深い記事の束
- 検索 — キーワードで直接探したいとき
ここでよく忘れられがちなのが RSS です。RSSはもう終わったとよく言われますが、技術ブログの読者の中にはいまだにフィードリーダーで読んでいる人がたくさんいます。静的サイトでRSSのXMLを1つ作っておくコストはほぼゼロですが、その効果はかなり大きいです。
シリーズは「複数編で書くつもりがある記事」が3本以上たまってから作りましょう。最初からシリーズを設計すると重くなって、書けなくなります。
3. もう一度戻ってきてもらうための情報#
ブログは一度見て終わりではありません。気に入った読者が もう一度戻ってこられる仕掛け があってこそ、書き続けられます。
一番強いのは ニュースレター です。RSSが「読者が取りに来る方式」なら、ニュースレターは「こちらから送る方式」です。自分で作らなくても、ButtondownやConvertKitに無料枠があります。2023年は「どう実装しよう」が悩みでしたが、今は つなぐだけで済みます。
もう少し軽い仕掛けもあります。
- 関連記事のおすすめ — 記事下に同じタグやシリーズの次の記事を出す
- 前の記事 / 次の記事 — シリーズ内の移動を自然にする
- ブックマークしやすい短いURL —
/posts/[slug]の形は検索エンジンにも優しいです
コメントは意外と優先度が低いです。GitHub IssuesやGiscusをつなぐのは簡単ですが、コメントなしのブログでも十分に回ります。コメントがつかないと、空欄のほうがかえって寂しく見えるんですよね。
4. 書き手を見せる情報#
技術ブログでも結局は 人を見せる場所 です。同じ内容でも、誰が書いたかで重みが変わります。
Aboutページにはこのくらいで十分です。
- 1〜2文の自己紹介
- 今やっていることと関心事
- 連絡先（メール、GitHub、LinkedInくらいで十分）
- 外部チャンネル — YouTube、ニュースレター、SNSのリンク
自己紹介を長く書かなくても大丈夫です。記事が積み上がれば、記事そのものが紹介になります。 Aboutは「今この人が何をしているか」だけ見せれば十分です。
ここに脇のページを足せます。
- Books — 読んだ本のリストと印象に残った一節。一冊まるごとまとめるのが重ければ、22ページの一文 だけ残しても大丈夫です
- Links — 普段よく見るブログ、同僚の記事、インスピレーションをもらうサイト
- Now — nownownow.com のような「最近何をしているか」の1ページ
こういう脇のページは 検索流入よりも、人のためのページ です。よく来てくれる読者ひとりにとっては、大きなシグナルになります。
5. 作らなくてもいいもの#
3年前のメモを見ると、マインドマップ画面を作るとも書いていました。タグ同士を点と線でつないで、勉強の流れを見せる画面です。
今思うと それはブログではなく、別プロジェクト です。記事が50本くらいたまる前は可視化する材料もなく、作ったところで検索から来た読者は見ません。作るのに1ヶ月かかったと思いますが、その時間で記事を5本書いたほうがいいです。
同じように優先度を下げていいものたちです。
- 重い検索エンジン — 静的サイトの検索はクライアント側のfuse.jsくらいで十分です
- ダークモードのカスタマイズ — システム設定に従うだけでも大丈夫です
- コメントシステム — 上で書いた理由と同じです
- 訪問者統計ウィジェット — Google AnalyticsやPlausibleを1行入れれば十分です
ブログをダメにするのは 記事がないこと であって、機能が足りないこと ではありません。
では、何が必要なのでしょうか#
5つの層を1行ずつにまとめるとこうなります。
- 記事1本がきれいに見える構造
- 記事を見つけてもらう道（一覧、タグ、シリーズ、検索、RSS）
- もう一度戻ってきてもらう仕掛け（ニュースレター、関連記事）
- 書き手を見せるページ（About、Books、Links）
- 上の4つを脅かさない範囲の機能
2023年のメモに抜けていたのは優先順位でした。何を先に作って、何を後回しにするか を決めないと、画面のリストばかりが増えていきます。
もう一度作るなら、記事1本から始めて外側へ広げていくと思います。記事がまずあってこそ、タグもシリーズもニュースレターも意味を持つからです。
He who fears being conquered is sure of defeat.
— Napoleon Bonaparte
