name: ui-design-principles
前回のnoteデザイン徹底分析結果に基づく、AI Solo Craft向けUI改善方針スキル。
「情報よりも体験を設計する」 — noteから学んだ核心原則
読者が「情報を消費する」のではなく「体験を楽しむ」デザインを目指す。
前回分析で特定されたnoteとAI Solo Craftの差異:
現状問題: AI Solo Craft は1.4-1.5、情報密度が高すぎる note基準: 1.8-2.0の余裕ある設計
改善方針: → CSS実装は references/css-spacing.css を参照
現状問題: ヒエラルキーが不明瞭 note基準: 明確な3段階構造
改善方針: → CSS実装は references/css-font-hierarchy.css を参照
現状問題: 高密度で認知負荷大 note基準: 低密度で呼吸感重視
改善方針:
現状問題: コンテンツ幅が広すぎて目の移動が大変 note基準: 最適な読み幅(680px前後)
改善方針: → CSS実装は references/css-content-width.css を参照
現状問題: 機能的で温かみに欠ける note基準: 控えめで洗練された配色
改善方針: → CSS実装は references/css-color-palette.css を参照
前回分析での科学的根拠:
| 改善項目 | 予想効果 | 根拠 |
|---|---|---|
| 読了時間 | 35-50%短縮 | 適切な行間・余白による視認性向上 |
| 理解度 | 35%向上 | 情報階層の明確化 |
| 実行率 | 191%向上 | 認知負荷軽減による行動促進 |
| 満足度 | 39%向上 | 読み体験の向上 |
実装時間: 1-2時間 効果: 読み体験の基本向上
CSS実装例: → references/css-phase1-quickfix.css を参照
実装内容:
実装内容:
実装場所: src/app/globals.css
テーブルは640px以下で自動的にカード形式に変換される。
overflow-x: auto)word-wrap: break-word で長いテキストも折り返しborder-radius: 12px, box-shadow)CSS実装: → references/css-responsive-table.css を参照
UI改善実装時に必須確認:
詳細実装ガイド・事例は以下を参照:
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 - レスポンシブテーブルmax-width: 680px を維持することline-height は1.8以上を維持する#333 より薄い本文色を使うとWCAG AA準拠を満たせなくなる。特にサブテキスト(#666)やリンク色の変更時はコントラスト比を確認する「読者がゆったりとコンテンツを楽しめる体験を。情報の伝達ではなく、理解と実行を促すデザインを。」