---

name: content-optimizer description: 既存記事の見せ方を最適化するスキル。表形式への変換、構造の改善、視覚的リズムの調整を行う。「記事の見せ方改善」「テーブル化」「記事リライト」「フォーマット最適化」「既存記事の改善」などの作業に使う。

Content Optimizer

既存記事のUIレベルでの読みやすさを向上させる専門スキルです。特に長文記事において、視覚的なメリハリ、情報の階層化、スキャンしやすさを改善します。

🎯 適用場面

• 長文記事（5,000字以上）の読みやすさ改善
• 表組みや箇条書きの視覚的最適化
• 既存記事のリファクタリング
• 情報設計の改善

📝 5つの最適化手法

1. ビジュアル・ブロッキング（Visual Blocking）

問題: 長文が続き、読み手の視線が疲れる 解決法: 適切な間隔で視覚的な区切りを作る

• 重要語句を太字で強調
• 段落間に適切な空行
• セクション区切りに --- を使用

→ Before/After例: references/example-visual-blocking.md

2. スキャン最適化（Scannable Structure）

問題: 流し読みでポイントが掴めない 解決法: 視線の動線に沿って情報を配置

情報の3層構造:

1. ヘッドライン（2秒で理解できる見出し）
2. サマリー（要点の箇条書き）
3. 詳細（説明・根拠）

→ 実装例: references/example-scannable-structure.md

3. テーブル・レイアウト最適化（Table Enhancement）

問題: 表組みが見づらい、情報密度が高すぎる 解決法: 視覚的ヒエラルキーと余白を活用

📱 レスポンシブテーブル（2026-02-15 CSS実装済み）

AI Solo Craftでは、640px以下の画面でテーブルが自動的にカード形式に変換される。

モバイル表示の仕組み:

• ヘッダー行 → 非表示
• 各行 → 角丸カード（シャドウ付き）
• 先頭セル → カードタイトル（太字強調）
• その他セル → カード内に縦積み

→ 記事最適化時にモバイル専用の調整は不要。3列以下を守ればOK。

改善ポイント:

• 列数を3つに削減（認知負荷軽減 + モバイルカード最適化）
• 絵文字でステータス視覚化
• 重要度に応じた太字使用
• 先頭列は識別子（モバイルでカードタイトルになる）

→ Before/After例: references/example-table-enhancement.md

4. 情報階層の明確化（Information Hierarchy）

問題: 全て同じ重要度に見える 解決法: 重要度に応じた視覚的重み付け

重要度の5段階表現:

1. 🔥 超重要 - 太字 + 絵文字 + ボックス
2. ✨ 重要 - 太字 + 絵文字
3. 📝 通常 - 通常テキスト + 適切な見出し
4. 💭 補足 - 引用ブロック >
5. 🔗 参照 - リンクまたは脚注

→ 実装例: references/example-information-hierarchy.md

5. 認知負荷軽減（Cognitive Load Reduction）

問題: 一度に処理する情報が多すぎる 解決法: プログレッシブ・ディスクロージャー

→ 基本パターン例: references/example-cognitive-load-reduction.md

🔧 ワークフロー実行手順

Phase 1: 現状分析（5分）

1. 記事の構造確認

   • 見出し階層は適切か？
   • セクション長は適度か？（300-500語）
   • 表や箇条書きの使用状況

2. 読み手視点チェック

   • 5秒でざっと見て、何の記事かわかるか？
   • 重要ポイントが視覚的に強調されているか？
   • 途中で読むのを止めそうな箇所はないか？

Phase 2: 構造最適化（10分）

1. ビジュアル・ブロッキング適用

   • 長文段落（150語超）を分割
   • 重要語句に太字適用
   • セクション間に適切な余白

2. スキャン最適化

   • 各セクションに「得られること」を追加
   • 表組みの列数を3つ以下に削減
   • 箇条書きに絵文字や記号を追加

Phase 3: 階層化・軽量化（10分）

1. 情報階層の明確化

   • 重要度に応じた視覚的重み付け
   • 補足情報の引用ブロック化
   • 参照リンクの整理

2. 認知負荷軽減

   • 詳細情報のプログレッシブ・ディスクロージャー
   • チェックリストの追加
   • 段階的な学習パスの明示

Phase 4: 品質確認（5分）

1. 視覚的バランス確認

   • 空白と文字のバランス
   • 強調要素の適度な使用
   • 色々な文字装飾の使い分け

2. 実用性確認

   • 行動に移しやすい構造か？
   • 必要な情報にすぐアクセスできるか？
   • 読了後の次のアクションが明確か？

📋 品質チェックリスト

✅ ビジュアル・チェック

• 見出しから内容が推測できる
• 重要箇所が視覚的に強調されている
• 表組みが3列以下で見やすい
• 段落間に適切な余白がある
• 絵文字・記号が効果的に使われている

✅ 構造チェック

• 各セクションが300-500語以内
• 情報の重要度が視覚的に表現されている
• 補足情報が適切に分離されている
• 参照リンクが整理されている

✅ ユーザビリティチェック

• 5秒でざっと見て要点がわかる
• 途中で読むのを止めたくならない
• 行動に移しやすい構造になっている
• 次のステップが明確に示されている

🔗 参考リソース

• UI設計パターン: references/ui-patterns.md
• 認知科学の知見: references/cognitive-science.md
• 成功事例集: references/case-studies.md

---

使用時の注意:

• 最適化はコンテンツの価値を損なわない範囲で実施
• 読み手のリテラシーレベルに応じて調整
• 改善前後の比較を記録し、効果測定を行う

⚠️ よくある落とし穴

• 表の列数が多すぎてモバイルで崩れる: モバイルではテーブルがカード形式に変換されるが、4 列以上あると情報過多になる。3 列以下に削減し、先頭列を識別子にすること
• 太字・絵文字の多用で逆に読みにくくなる: 強調要素が多すぎると「全部重要 = 何も重要でない」状態になる。1 セクションに太字は 2〜3 箇所、絵文字は見出しのみに留める
• 元のコンテンツの意味を変えてしまう: 構造最適化に集中するあまり、ニュアンスの変更や情報の欠落が起きやすい。最適化後に元記事と内容の整合性を必ず確認する