---

name: ui-design-principles description: noteデザイン分析に基づくUI作成方針。読者体験を重視したデザイン原則、CSS実装ガイド、認知科学ベースの改善手法を提供。「UI改善」「読みやすさ向上」「デザイン方針」「読者体験設計」「noteライクなデザイン」などの作業に使う。

UI Design Principles — 読者体験を重視したデザイン設計

前回のnoteデザイン徹底分析結果に基づく、AI Solo Craft向けUI改善方針スキル。

🎯 基本コンセプト

「情報よりも体験を設計する」 — noteから学んだ核心原則

読者が「情報を消費する」のではなく「体験を楽しむ」デザインを目指す。

📊 5つの核心的差異と改善方針

前回分析で特定されたnoteとAI Solo Craftの差異：

1. 行間・余白の最適化

現状問題: AI Solo Craft は1.4-1.5、情報密度が高すぎる note基準: 1.8-2.0の余裕ある設計

改善方針: → CSS実装は references/css-spacing.css を参照

2. フォント階層の明確化

現状問題: ヒエラルキーが不明瞭 note基準: 明確な3段階構造

改善方針: → CSS実装は references/css-font-hierarchy.css を参照

3. 情報密度の調整

現状問題: 高密度で認知負荷大 note基準: 低密度で呼吸感重視

改善方針:

• 1スクリーンあたりの情報量を30%削減
• ホワイトスペースを戦略的に配置
• スクロール体験を重視（一度に消化する情報を限定）

4. 視覚的余裕の確保

現状問題: コンテンツ幅が広すぎて目の移動が大変 note基準: 最適な読み幅（680px前後）

改善方針: → CSS実装は references/css-content-width.css を参照

5. 色使いの洗練

現状問題: 機能的で温かみに欠ける note基準: 控えめで洗練された配色

改善方針: → CSS実装は references/css-color-palette.css を参照

🧠 認知科学に基づく効果予測

前回分析での科学的根拠：

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

🚀 Phase別実装ロードマップ

Phase 1: 即効改善（今すぐ実装可能）

実装時間: 1-2時間 効果: 読み体験の基本向上

• 行間1.8、フォント17px
• コンテンツ幅680px
• 基本余白の調整

CSS実装例: → references/css-phase1-quickfix.css を参照

Phase 2: 構造改善（1-2日）

実装内容:

• フォント階層の完全見直し
• セクション間余白の戦略的配置
• カラーパレットの刷新

Phase 3: 体験設計（1週間）

実装内容:

• レスポンシブ最適化
• アニメーション・マイクロインタラクション
• アクセシビリティ向上

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

実装場所: src/app/globals.css

テーブルは640px以下で自動的にカード形式に変換される。

デスクトップ（641px以上）

• 横スクロール対応（overflow-x: auto）
• 従来のテーブル表示を維持
• word-wrap: break-word で長いテキストも折り返し

モバイル（640px以下）

• ヘッダー行は非表示
• 各行がカード形式（border-radius: 12px, box-shadow）
• 先頭セルがカードタイトルとして強調表示
• セル間に視覚的区切り線
• ホバー時の微細なアニメーション

CSS実装: → references/css-responsive-table.css を参照

記事作成時の注意

• 3列以下推奨: カード形式でも情報が整理される
• 先頭列は識別子: 行を特定する名前や番号を配置
• ヘッダーは補助的: モバイルでは非表示になるため、セル内容だけで意味が通じるように

---

📋 品質チェックリスト

UI改善実装時に必須確認：

• 行間が1.8以上
• コンテンツ幅が680px以下
• 見出し階層が明確（3段階）
• セクション間に十分な余白
• フォントサイズが17px以上
• カラーコントラストが適切（WCAG AA準拠）
• モバイルで読みやすい（テーブルがカード形式に変換される）
• ページ表示速度に影響なし

🎨 実装時のベストプラクティス

✅ 推奨パターン

1. プログレッシブ向上: 基本機能 → 体験向上の順番
2. ユーザーテスト重視: データでなく体感で判断
3. 段階的ロールアウト: 一部ページで検証してから全体適用

❌ 避けるべきパターン

1. 一度に全変更: リスク大、改善効果の特定困難
2. トレンド追従: 読者体験より流行を優先
3. 情報密度重視: 「たくさん伝える」より「しっかり伝わる」

🔗 参考資料

詳細実装ガイド・事例は以下を参照：

• references/note-analysis-detailed.md - noteデザイン詳細分析
• references/css-implementation-guide.md - CSS実装の具体的手順
• references/cognitive-science-basis.md - 認知科学の理論背景
• references/before-after-cases.md - 改善前後の比較事例

CSS実装リファレンス：

• references/css-spacing.css - 行間・余白の最適化
• references/css-font-hierarchy.css - フォント階層の明確化
• references/css-content-width.css - コンテンツ幅の最適化
• references/css-color-palette.css - カラーパレット定義
• references/css-phase1-quickfix.css - Phase 1 即効改善パッチ
• references/css-responsive-table.css - レスポンシブテーブル

---

⚠️ よくある落とし穴

• 一度に全変更を適用: 行間・フォント・余白・カラーを同時に変更するとリスクが大きく、どの変更が効果的だったか特定できない。Phase 1 → 2 → 3 の段階的ロールアウトを守る
• コンテンツ幅の広げすぎ: 680pxを超えると1行あたりの文字数が多くなり、目の移動が大変になる。max-width: 680px を維持すること
• モバイルでのテーブル表示確認忘れ: デスクトップで問題なくてもモバイル（640px以下）ではカード形式に変換される。先頭列が識別子になっていないと、カード形式で意味が通じなくなる。3列以下を推奨
• 行間を1.8未満に設定: 情報密度が高くなりすぎて認知負荷が増大する。本文の line-height は1.8以上を維持する
• カラーコントラスト不足: #333 より薄い本文色を使うとWCAG AA準拠を満たせなくなる。特にサブテキスト（#666）やリンク色の変更時はコントラスト比を確認する

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