「このブログ、結局なんのためにあるんだっけ？」と、久しぶりに自分のサイトを開いて思いました。
2023年から細々と更新してきた katatemablog.com は、資格の話・読書メモ・ツール紹介が雑多に並び、カテゴリも10個以上。自分でさえどこに何を書くか迷う状態で、読者に回遊してもらうのは無理があります。
この連載では、そのサイトを4カテゴリ構成のブロックテーマに作り直していく過程を、つまずきも含めて記録していきます。今回は第1回、設計編です。
かたてまポイント — まずここだけ読んで
今回のゴール
| プロジェクト | katatemablog v2（WordPress ブロックテーマ全面刷新） |
| 連載回 | 第1回 ／ 全◯回予定 |
| 今回の目標 | サイトコンセプトを言語化し、4カテゴリ設計の根拠を固める |
| 所要時間 | 約6時間（2日に分散） |
| 使用ツール | Figma・Claude Code・Notion・NotebookLM |
この連載について
この連載は、運営者1人が「かたてま」で自分のブログをゼロから作り直す記録です。完成品ではなく、途中のつまずき・意思決定・没案までをそのまま残します。同じように個人ブログを育てている方の参考になれば、というのが動機です。
かたてまひとこと: 第1回にして「コードはほぼ書いていない」回です。でも、設計フェーズで2日使うのが結果的に一番速い、というのが今回の学びでした。
なぜ作り直すのか
v1サイトの不満は大きく3つありました。
- カテゴリが増えすぎて、どこに何を書くか自分でも迷う — 書くハードルが上がる
- ブロックテーマに一応乗り換えたが、
theme.jsonを使いこなせていない — デザインが古い - 読者に「次の記事」を提案する導線がない — 回遊率が極端に低い
全部、小手先で直そうとして何度も挫折してきた問題です。今回はテーマをゼロから書き直すことで、これらをまとめて解決します。
期待する学び：
- ブロックテーマ開発の実務感覚（
theme.json・パターン・テンプレートパーツ） - Figma → WordPress のデザイン同期ワークフロー
- AI（Claude Code）を前提にしたリポジトリの育て方
やったこと
1. サイトコンセプトを1行に圧縮する
まず、「かたてまブログとは何か」を1行で書けるかを試しました。結果、こうなりました。
レベルアップの「かたてま」に寄り添うブログ。
「かたてま」は「片手間（かたてま）」で、全力ではないけれど継続する余白、という意味です。メインの勉強や仕事の合間に、ふっと息抜きで立ち寄れる場所——というコンセプトに据え直しました。
この1行を決めるのに2時間かかりました。でも、これが決まったおかげで以降の判断が速くなります。
2. カテゴリを4つに絞る
コンセプトに対して読者がブログに期待する行動を分解すると、学ぶ・読む・試す・作るの4つに集約できました。
| カテゴリ | 役割 | 記事イメージ |
|---|---|---|
| 学ぶ (learn) | 資格試験・勉強法 | インテリアコーディネーター合格体験記 |
| 読む (read) | 書評 | ビジネス書レビュー、note同時投稿あり |
| 試す (try) | ツールレビュー | AIツールを触ってみた |
| 作る (make) | 制作ログ | この記事のような開発日記 |
旧サイトにあった「日記」「雑記」は、どれにも属さないなら書かないと決めました。カテゴリに入らない話題はnoteで書けばいい、という割り切りです。
3. ブロックテーマの骨格を作る
カテゴリが決まったところで、WordPressのブロックテーマとして骨格を組みました。
katatemablog/
├── theme.json ← デザイントークン（色・タイポ・スペーシング）
├── templates/ ← index, single, archive など
├── parts/ ← header, footer, sidebar, toc-sidebar
├── patterns/ ← カテゴリ別記事パターン（今回追加）
└── docs/ ← 設計ドキュメントtheme.json は Figma Variables からトークンを流し込み、カラーパレットに cat-learn, cat-read, cat-try, cat-make を追加。カテゴリページごとに見出しの装飾色が切り替わる仕組みにしました。
4. AI協働ルールを CLAUDE.md に書く
Claude Code をエディタとして使うため、プロジェクト直下に CLAUDE.md を置いて以下を定義しました。
- 記事執筆時の画像プレースホルダの alt 形式（
【要差し替え】...） - 「読む」カテゴリでは note 用ドラフトも同時生成する
- WP管理画面での手動操作が必要な場合は逐次指示を出す
AIに毎回同じ説明をする手間を減らす「ルールのメモ書き」です。
つまずきと解決
つまずき：画像プレースホルダが保存時に消える
ドラフトに <img src=""> で空のプレースホルダを置いていたら、WordPress REST API 経由で保存した瞬間に <figure class="wp-block-image"> ごとまるごと消えました。KSES（HTMLサニタイザ）が空srcのimgを無効とみなすためです。
解決: テーマ内に assets/img/placeholder.svg を用意し、alt が 【要差し替え】 で始まる画像はそのSVGを参照するようにしました。これで画像が消えず、差し替え忘れのチェックも alt で grep できます。
# 差し替え忘れの検出
grep -r "要差し替え" published/学び・気づき
- 設計フェーズにコード量はゼロでいい。1行コンセプト→カテゴリ分割まで紙とNotionで済ませた方が、後の作業が驚くほど速い
- 制約は武器になる。4カテゴリに絞ったことで、「書くか書かないか」の判断が秒で付くようになった
- AIとの協働は「ルールの明文化」が9割。CLAUDE.md を整備すると、生成されるドラフトの品質が目に見えて上がる
次回やること
- 4記事目（この記事）を公開して、パターンの過不足を検証する
docs/03-components.mdを書いて Figma ↔ ブロック/パターン の対応表を作る- 3分テスト機能（
plugins/katatema-quiz/）のプロトタイプに着手
まとめ
| できたこと | サイトコンセプトの1行化／4カテゴリ設計／ブロックテーマ骨格 |
| できなかったこと | 3分テスト機能の設計（次回以降） |
| 次回の焦点 | Figma ↔ ブロック の対応表づくり |
| かたてま的学び | 設計を紙で2日やる方が、結果的に一番速い |
最終更新: 2026年4月 ／ 連載: かたてまブログを作り直すシリーズ 第1回