name: content-optimizer
description: 既存記事の見せ方を最適化するスキル。表形式への変換、構造の改善、視覚的リズムの調整を行う。「記事の見せ方改善」「テーブル化」「記事リライト」「フォーマット最適化」「既存記事の改善」などの作業に使う。
Content Optimizer
既存記事のUIレベルでの読みやすさを向上させる専門スキルです。特に長文記事において、視覚的なメリハリ、情報の階層化、スキャンしやすさを改善します。
🎯 適用場面
- 長文記事(5,000字以上)の読みやすさ改善
- 表組みや箇条書きの視覚的最適化
- 既存記事のリファクタリング
- 情報設計の改善
📝 5つの最適化手法
1. ビジュアル・ブロッキング(Visual Blocking)
問題: 長文が続き、読み手の視線が疲れる
解決法: 適切な間隔で視覚的な区切りを作る
- 重要語句を太字で強調
- 段落間に適切な空行
- セクション区切りに
--- を使用
→ Before/After例: references/example-visual-blocking.md
2. スキャン最適化(Scannable Structure)
問題: 流し読みでポイントが掴めない
解決法: 視線の動線に沿って情報を配置
情報の3層構造:
- ヘッドライン(2秒で理解できる見出し)
- サマリー(要点の箇条書き)
- 詳細(説明・根拠)
→ 実装例: 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段階表現:
- 🔥 超重要 - 太字 + 絵文字 + ボックス
- ✨ 重要 - 太字 + 絵文字
- 📝 通常 - 通常テキスト + 適切な見出し
- 💭 補足 - 引用ブロック
>
- 🔗 参照 - リンクまたは脚注
→ 実装例: references/example-information-hierarchy.md
5. 認知負荷軽減(Cognitive Load Reduction)
問題: 一度に処理する情報が多すぎる
解決法: プログレッシブ・ディスクロージャー
→ 基本パターン例: references/example-cognitive-load-reduction.md
🔧 ワークフロー実行手順
Phase 1: 現状分析(5分)
-
記事の構造確認
- 見出し階層は適切か?
- セクション長は適度か?(300-500語)
- 表や箇条書きの使用状況
-
読み手視点チェック
- 5秒でざっと見て、何の記事かわかるか?
- 重要ポイントが視覚的に強調されているか?
- 途中で読むのを止めそうな箇所はないか?
Phase 2: 構造最適化(10分)
-
ビジュアル・ブロッキング適用
- 長文段落(150語超)を分割
- 重要語句に太字適用
- セクション間に適切な余白
-
スキャン最適化
- 各セクションに「得られること」を追加
- 表組みの列数を3つ以下に削減
- 箇条書きに絵文字や記号を追加
Phase 3: 階層化・軽量化(10分)
-
情報階層の明確化
- 重要度に応じた視覚的重み付け
- 補足情報の引用ブロック化
- 参照リンクの整理
-
認知負荷軽減
- 詳細情報のプログレッシブ・ディスクロージャー
- チェックリストの追加
- 段階的な学習パスの明示
Phase 4: 品質確認(5分)
-
視覚的バランス確認
- 空白と文字のバランス
- 強調要素の適度な使用
- 色々な文字装飾の使い分け
-
実用性確認
- 行動に移しやすい構造か?
- 必要な情報にすぐアクセスできるか?
- 読了後の次のアクションが明確か?
📋 品質チェックリスト
✅ ビジュアル・チェック
✅ 構造チェック
✅ ユーザビリティチェック
🔗 参考リソース
使用時の注意:
- 最適化はコンテンツの価値を損なわない範囲で実施
- 読み手のリテラシーレベルに応じて調整
- 改善前後の比較を記録し、効果測定を行う
⚠️ よくある落とし穴
- 表の列数が多すぎてモバイルで崩れる: モバイルではテーブルがカード形式に変換されるが、4 列以上あると情報過多になる。3 列以下に削減し、先頭列を識別子にすること
- 太字・絵文字の多用で逆に読みにくくなる: 強調要素が多すぎると「全部重要 = 何も重要でない」状態になる。1 セクションに太字は 2〜3 箇所、絵文字は見出しのみに留める
- 元のコンテンツの意味を変えてしまう: 構造最適化に集中するあまり、ニュアンスの変更や情報の欠落が起きやすい。最適化後に元記事と内容の整合性を必ず確認する