name: asb-content-design description: AI Solo Craft専用のコンテンツデザインスキル。noteデザイン分析・認知科学に基づく「読者体験設計」と、記事フォーマットの最適化を統合。Digest・個別ニュース・プロダクト記事のいずれにも適用。「記事改善」「読みやすさ向上」「UI最適化」「コンテンツチェック」などの作業に使う。

ASB Content Design — AI Solo Craft 読者体験設計スキル

コンセプト: 「情報よりも体験を設計する」

noteのデザイン分析・認知科学の知見に基づき、AI Solo Craft記事の読者体験を最大化する。

🎯 適用対象

Digest（デイリー）: 全体像を掴ませる
個別ニュース: 意思決定に必要な解像度を出す
プロダクト辞書: 前提知識を蓄積する

📐 5つのデザイン原則

1. 呼吸感のある余白設計

noteの知見: 行間1.8-2.0、十分な段落間スペース

Markdown実装:

<!-- ❌ NG: 詰まった印象 -->
OpenAIがモデルを廃止。80万ユーザーに影響。即座に移行が必要。

<!-- ✅ OK: 呼吸感がある -->
OpenAIがモデルを廃止する。

**80万ユーザー**に影響があり、即座に移行が必要になる。

チェック:

150語を超える段落は分割する
重要語句には**太字**で視覚アンカーを作る
セクション間には十分な空行を入れる

2. 3層構造の情報階層

読者の「流し読み」を前提に設計する。

層	役割	要素	読了時間
L1: ヘッドライン	何の話か	見出し・順位表	2秒
L2: サマリー	要点	太字・箇条書き	10秒
L3: 詳細	根拠・具体	本文・リンク	1分+

Digest実装例:

## 🔥 Top 3 ピックアップ       <!-- L1: 2秒で「重要ニュース」とわかる -->

### 1. OpenAI、レガシーモデル廃止

**本日10時（PT）**より5モデル廃止。 <!-- L2: 要点 -->
**80万ユーザー**に影響。

個人開発者への影響:            <!-- L3: 詳細 -->
- APIでこれらのモデルを使っている場合は本日中に移行が必須

3. テーブルの3列ルール + モバイル自動カード変換

noteの知見: 情報密度を下げ、視覚的余裕を確保

ルール:

表は3列以下に抑える
最も重要な情報を左列に配置（モバイルでカードタイトルになる）
ステータスは絵文字で視覚化

📱 モバイル対応（2026-02-16 更新）:

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

ヘッダー行 → 非表示
各行 → 角丸カード（グリッドレイアウト）
先頭セル（順位）→ 左側にカラフルなバッジ（Top3は金銀銅）
2番目セル（タイトル）→ 右上に大きく表示
3番目以降（NVA/Tier）→ 右下にコンパクトなバッジ
各セルにラベル表示（data-label属性で動的生成）

→ 記事作成時にモバイル対応を意識する必要なし。CSSが自動処理。

📺 PC対応（2026-02-16 追加）:

記事コンテンツ全体: 最大幅680px（noteライク）
テーブル: table-layout: auto（コンテンツに応じた自然な幅）
短い列（順位/NVA/Tier）: width: 1% + nowrapで最小幅
長い列（ニュース）: 残りスペースを使用

→ ワイドスクリーンでも読みやすいレイアウトを維持。

変換例:

<!-- ❌ NG: 4列以上で認知負荷大 -->
| 順位 | ニュース | NVA | Tier |

<!-- ✅ OK: 3列に凝縮、Tierを絵文字化 -->
| 順位 | ニュース | Tier |
|:----:|----------|:----:|
| 1 | OpenAI GPT-4o廃止 | 🔥 S |
| 2 | WebMCP早期プレビュー | 🔥 S |
| 3 | ChatGPT広告導入 | ⭐ A |

Tier絵文字パターン:

🔥 S — 緊急/重大（即座に対応が必要）
⭐ A — 重要（近日中に確認推奨）
📝 B — 参考（余裕があれば確認）

先頭列のベストプラクティス:

順位番号、プロダクト名、日付など「識別子」を配置
モバイルでカードタイトルになるため、その行が何かわかる内容に

4. スキャン最適化（F字パターン）

読者の視線はF字を描く。重要情報は左上に集中させる。

実装パターン:

## 🏁 重要ニュースランキング（NVA）    <!-- 見出しで「何がわかるか」を明示 -->

| 順位 | ニュース | NVA | Tier |         <!-- 順位を左端に -->
|------|----------|-----|------|
| 1 | OpenAI... | 25 | S |             <!-- 最重要を最上部に -->

チェック:

各セクションの冒頭10語で内容が伝わるか？
視線が自然に下に流れるか？

5. アクション指向の構造

読了後に「何をすべきか」を明確に示す。

パターン:

**🎯 個人開発者への影響:**
- APIでこれらのモデルを使っている場合は**本日中に移行が必須**
- プロンプトチューニング済みの場合は**新モデルでの動作検証**が必要
- AIコンパニオン系アプリの「同調性」設計を**再考する機会**

ポイント:

見出しに🎯を付けて視覚的に目立たせる
各項目のアクション部分を太字にする
動詞（「移行する」「検証する」「再考する」）を含める

📝 コンテンツタイプ別ガイド

Digest（デイリー）

構成テンプレートとチェックリスト → references/template-digest.md

個別ニュース

構成テンプレート → references/template-individual-news.md

プロダクト辞書

構成テンプレート → references/template-product-dictionary.md

🔄 ワークフロー組み込み

記事作成時の適用タイミング

Phase 3: digest-writer（記事作成）
    ↓
Phase 3.5: asb-content-design（読者体験最適化）← このスキル
    ↓
Phase 4: publish-gate（品質チェック・公開）

実行手順

構造チェック（2分）
- 見出し階層は適切か？
- テーブルは3列以下か？
- 段落は150語以下か？
呼吸感チェック（2分）
- 重要語句に太字があるか？
- セクション間に十分な余白があるか？
アクション指向チェック（1分）
- 「個人開発者への影響」が具体的か？
- 読者が次に何をすべきか明確か？

📋 品質チェックリスト

必須項目

テーブルが3列以下
150語を超える段落がない
重要語句に太字がある
各セクションに見出しがある
「個人開発者への影響」が具体的

推奨項目

セクション間に---区切りがある
絵文字で視覚アンカーが作られている
リンクが適切に配置されている
締めの文で次のアクションが示唆されている

📊 期待効果（認知科学に基づく）

項目	改善幅	根拠
読了時間	35-50%短縮	適切な行間・余白による視認性向上
理解度	35%向上	情報階層の明確化
実行率	191%向上	認知負荷軽減による行動促進
満足度	39%向上	読み体験の向上

📚 参照

ui-design-principles — CSS/サイトレベルのUI設計方針
content-optimizer — 詳細な最適化手法
/Users/satokeita/Dev/ai-solo-craft/docs/CHECKLIST.md — 公開前チェックリスト

「読者がゆったりとコンテンツを楽しめる体験を。情報の伝達ではなく、理解と実行を促すデザインを。」

最終更新: 2026-02-16（noteライクレイアウト・モバイルカード改善）

⚠️ よくある落とし穴

テーブルを4列以上にしてしまう: 3列ルールを守らないとモバイルでのカード変換時に認知負荷が高くなる。4列以上ある場合はTier絵文字化やNVA列の統合で3列に凝縮する
150語超の段落を放置する: 長い段落は読者の離脱を招く。150語を超える段落は必ず分割し、重要語句に太字で視覚アンカーを作る
「個人開発者への影響」の抽象的な記述: 「影響がある」だけでは不十分。「本日中に移行が必須」「新モデルでの動作検証が必要」のように具体的なアクションを動詞付きで示す
モバイル対応を手動で行おうとする: テーブルのモバイルカード変換はCSSが自動処理するため、記事作成時にモバイル用のレイアウト調整は不要。ただし先頭列にはその行の識別子（順位、プロダクト名等）を配置すること（カードタイトルになるため）
publish:gate前のasb-content-design適用忘れ: ワークフロー上、Phase 3（記事作成）とPhase 4（publish-gate）の間にこのスキルのチェックを入れる。構造・呼吸感・アクション指向の3点を5分以内で確認する