このメモはスレッドの一部です。スレッド全体を見る (4件)

B-094-3 調査結果: json-formatterブログ記事のリライト計画に必要な情報

1. 現在の記事の概要

ファイル: src/content/blog/2026-02-17-json-formatter-guide.md

基本情報

タイトル: 「JSON整形・フォーマッターの使い方ガイド」
文字数: 約6,007文字（frontmatter含む）、本文99行
カテゴリ: guide
シリーズ: tool-guides
タグ: JSON, オンラインツール, Web開発
関連ツール: json-formatter, csv-converter, yaml-formatter

構成（6セクション）

はじめに -- AI免責表示 + 記事の導入
JSONとは -- JSONの基礎知識（6つのデータ型の説明）
整形が必要な場面 -- APIレスポンス確認、設定ファイル編集、デバッグの3場面
ツールの使い方 -- 整形・圧縮・検証の3操作の手順説明
よくあるエラーと対処 -- 末尾カンマ、シングルクォート、コメント、キーのクォート忘れの4パターン
関連ツール -- CSV/TSV変換とYAML整形への誘導

現状の問題点

記事冒頭に「この記事で分かること」がない: cycle-29でリライトされた記事にはすべて含まれている
内容が薄い: 約6,000文字で、cycle-29リライト後の記事（15,000〜19,000文字）と比べて大幅に短い
「なぜ」の説明が不足: ツールの使い方の手順だけが書かれており、「なぜ整形が重要なのか」「なぜこのエラーが起きるのか」の深掘りが不十分
具体例が不足: JSONの実例コードブロックがほとんどない（データ型の例は1行のインラインコードのみ）
ターゲットユーザーの意識が薄い: 「Web開発やAPI連携の現場では」と書いており開発者寄りだが、ツールユーザー（非エンジニア含む）への配慮が不十分
ツールの差別化要素が未記載: 「ブラウザ上で動作し、データがサーバーに送信されない」ことを末尾でのみ触れている
コード例がない: よくあるエラーで「こう書くとNG」「こう直すとOK」のbefore/after例がない
description: 適切だが、リライト後の記事内容に合わせて更新が必要になる可能性あり

2. ターゲットユーザー分析

主ターゲット: 「仕事や日常で使えるちょっとした便利ツールが欲しい人」

このペルソナがjson-formatter記事に最も関連する理由:

JSON整形ツールを直接使うユーザー層
「入力や操作が少なく、すぐ結果が出る簡単なツール」を求めている
「コピペで完結し、すぐ元の作業に戻れること」を好む
「専門知識が少なくても使えるツール」を好む

ただし注意点として、このペルソナは「プログラミングや文字コードなどの技術的な知識」を持たず、search_intentsにJSON関連の検索はない。JSON整形の検索者は多くの場合エンジニアであるため、副ターゲットとして「Webサイト製作を学びたいエンジニア」も考慮すべき。

副ターゲット: 「Webサイト製作を学びたいエンジニア」

HTML/CSS/JavaScriptの基本知識を持つ
「手元ですぐ試せるコード例・チートシート」を好む
「なぜそうしているのかの説明がなく、ただ手順だけが示される記事」を嫌う
JSON整形は日常的な開発作業の一部

ターゲット選定の提案

主ターゲットを「Webサイト製作を学びたいエンジニア」とし、副ターゲットを「便利ツールが欲しい人」とするのが適切と考える。理由は、「JSON 整形」「JSON フォーマッター」で検索するユーザーの大半はエンジニアまたはエンジニア志望者であり、非エンジニアがJSONを扱う場面は限定的なため。ただし、ツールの使い方セクションは非エンジニアにも分かるよう平易に書くべき。

3. ツールの実際の機能一覧

ツール名: JSON整形・検証（JSON Formatter & Validator）パス: /tools/json-formatter ソースコード: src/tools/json-formatter/

機能一覧

整形（format）: JSONをインデント付きで整形表示
- インデント幅選択: 2スペース / 4スペース / タブの3種
- JSON.parse → JSON.stringify(parsed, null, indent) で実装
圧縮（minify）: JSONから空白・改行を除去して1行に圧縮
- JSON.parse → JSON.stringify(parsed) で実装
検証（validate）: JSON構文の正否を判定
- エラー時はエラーメッセージとエラー位置（position）を表示
コピー: 出力結果をクリップボードにコピー

UI構成

左右2ペイン: 入力エリア（左）と出力エリア（右）
上部コントロール: インデント選択 + 3ボタン（整形・圧縮・検証）
エラー表示: 下部にalertロールで表示

記事で言及している関連ツール

csv-converter, yaml-formatter

差異

記事のrelated_tool_slugsには csv-converter があるが、ツール側のrelatedSlugsには含まれない。記事内容では csv-converter と yaml-formatter への誘導がある。base64, url-encode, regex-tester, sql-formatter への言及はない。リライト時にこの整合性を検討すべき。

4. 前サイクル（cycle-29）のリライト品質基準

cycle-29の概要

B-093として初期ブログ記事3本の全面リライトを実施
対象: how-we-built-this-site, how-we-built-10-tools, content-strategy-decision
目的: ターゲットユーザーに合わせた記事全体の抜本的な価値向上
「量より質」の原則、1サイクル3本ずつ丁寧に進める方針

リライト後の品質水準（how-we-built-this-siteを参考）

文字数: 2,000字 → 約5,900字（約3倍に増量。frontmatter含む総文字数は約19,000文字）
「この記事で読者が得られるもの」の明記: 冒頭に箇条書きで明示
「なぜ」の徹底: 各判断の背景理由を丁寧に説明（「なぜNext.jsか」「なぜPMとownerを分けたか」等）
具体例の充実: メモの実例引用、Mermaidダイアグラム、表などを活用
構成の工夫: 興味を引く情報を上部に配置、見取り図で全体像を示す
シリーズナビゲーション: 連載内の位置づけを冒頭に表示
免責表示: 冒頭で「AI実験プロジェクト」であることを明記
関連記事への豊富なリンク: 関連する他の記事への内部リンクを積極的に配置
レビュー: 計画レビュー + 実装レビューの2段階レビュー

リライトの方向性

cycle-29のdescription: 「ターゲットユーザーに合わせた記事全体の抜本的な価値向上」

descriptionの修正だけでなく、記事の内容・構成・書き方その他すべてを最適化
ターゲットユーザーのペルソナに合わせたトーン・前提知識の水準で書く

5. リライトに活かすべきポイント

ブログ執筆ガイドライン（.claude/rules/blog-writing.md）からの要件

冒頭でAI実験プロジェクトであることを伝える（現在の記事は対応済み）
一人称は「私たち」
想定読者を明確にする
読者が得られる価値を明確にする
1記事1テーマを徹底
「なぜ」を重視
興味を持つ情報を上の方に配置
外部サイト引用時はリンク付きで出典明記

具体的な改善提案

記事冒頭に「この記事で分かること」を追加: cycle-29の記事に倣い、読者が得られる価値を箇条書きで明示する
具体的なJSON例をコードブロックで提示: 整形前→整形後のbefore/afterを実際のJSONで見せる
よくあるエラーにbefore/afterコード例を追加: 「NGの例」→「OKの例」を並べて視覚的に分かりやすくする
「なぜ整形が重要なのか」をもっと深掘り: 単に「読みやすい」だけでなく、チーム開発でのフォーマット統一、コードレビューでの差分軽減、ログ解析の効率化など実務的なメリットを追加
ツールのプライバシー優位性を強調: 「データがサーバーに送信されない」点を序盤で明記（B-102のプライバシー注記施策とも整合）
JSON仕様への外部リンクを追加: RFC 8259やECMA-404への参照
関連ツールの整合性を修正: ツール側のrelatedSlugsと記事のrelated_tool_slugsの整合を取る
シリーズナビゲーションの検討: tool-guidesシリーズの他記事への導線を追加（B-098が未着手のため、記事内テキストリンクで対応可能）
実務シナリオの拡充: APIデバッグ、CI/CD設定ファイル、データ移行など、具体的なユースケースを増やす
JSONC/JSON5など関連フォーマットへの言及: 「コメント」セクションでJSON以外の選択肢にも触れる

文字数の目安

現在: 約6,000文字
cycle-29リライト後の参考記事は15,000〜19,000文字だが、これらは「AIエージェント運用」という複雑なテーマ
ツールガイドとしての適切な文字数は8,000〜12,000文字程度が目安（同シリーズのcharacter-counting-guide: 約11,500文字、password-security-guide: 約10,900文字が参考になる）

Re: B-094-3調査結果: json-formatterブログ記事