記事レイアウトシステム

記事レイアウトシステム は何をしますか？

目的

記事レイアウトシステムは、ブログ、ドキュメント、ホワイトペーパー、ケーススタディなどの長文コンテンツにおける「読書体験」—テキストとサポートメディアの具体的な配置—を設計するための方法論を提供します。section-composition-systemがページレベルのフローを処理するのに対し、このシステムは可読性、行長（メジャー）、垂直リズム、およびテキストとエディトリアル要素（画像、引用、コードブロック）の空間的関係に焦点を当てます。これにより、ユーザーが視覚的疲労を感じることなく大量の情報を消費できるようになります。

ユースケース

• ブログ記事テンプレートと記事ページの設計
• 技術ドキュメントとナレッジベースの構造化
• 長文エディトリアルコンテンツやデジタルマガジンの作成
• 「リーディングモード」やアクセシビリティ重視のテキストビューの開発
• 情報保持を目的とした教育コンテンツの整理

使用すべきでない場合

• 影響力の高いランディングページ： 目的がベネフィットのスキャンと迅速なCTAである場合。代わりにsection-composition-systemを使用します。
• ダッシュボード： データ密度と比較が線形読書よりも優先される場合。代わりにdata-table-ui-systemを使用します。
• フォームと入力主体のビュー： form-design-systemを使用します。
• シングルビューポートの「アプリ」ビュー： コンテンツが機能ツールよりも二次的である場合。

入力

1. コンテンツアーキタイプ： これは技術チュートリアル（コード多用）、ナラティブストーリー（画像多用）、それともフォーマルなホワイトペーパーですか？
2. タイポグラフィシステム： fluid-typography-systemで定義されたベースフォントサイズとスケール。
3. 読書環境： 主にモバイル（気を散らさない）それともデスクトップ（マルチカラムコンテキスト）で読まれますか？
4. 階層マップ： コンテンツの論理構造（H1、H2、H3、本文、キャプション）。

出力

1. 「ゴールデンコンテナ」仕様： 最適な行長を確保するためのテキストの最大幅を定義。
2. 垂直リズムマップ： 段落と見出しの間の予測可能な間隔を生み出すマージンとパディングのシステム。
3. エディトリアルコンポーネント設計図： プルクォート、サイドバー、メディアコールアウト、目次の視覚的ルール。
4. レスポンシブリーディングマップ： フォントサイズと行高が異なる画面幅でも読みやすさを維持するためにどのように調整されるか。

ワークフロー

1. 「ゴールデンコンテナ」（メジャー）を定義する

可読性において最も重要な要素は1行あたりの文字数です：

• 最適範囲： 45～75文字（スペースを含む）。
• デスクトップ実装： 通常は 600px から 800px の max-width、または単に max-width: 75ch に変換されます。ch 単位はフォントの実際の文字幅を追跡するため、タイプフェイスを変更しても正しく機能します。
• 流動的なサイジング： 見出しと本文には clamp() を使用します（例：font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)）。これにより、タイポグラフィがブレークポイントでジャンプするのではなく、ビューポートに応じてスケールします。
• 中央揃え： コンテナを中央に配置して、広い頭の動きによる目の疲れを軽減します。

2. リーディングと垂直リズムを確立する

行高（リーディング）とブロック間の間隔は「呼吸空間」を生み出します：

• 基本リーディング： 本文では1.5～1.6を目標にします。小さいフォントや複雑なフォントでは増やします。
• 「間隔比」： 見出しの前のギャップには一貫した間隔システム（例：基本マージンの2倍または3倍）を使用し、見出しの後にはより小さなギャップ（例：1倍）を使用します。
• 段落間隔： Webレイアウトではインデントではなく下部マージン（margin-bottom）を使用して段落を区切ります。

3. エディトリアル「ブレイク」を設計する

視覚的なバラエティを導入することで「テキストの壁」による疲労を防ぎます：

• プルクォート： 重要な洞察を強調する、大きなスタイルのテキスト。
• サイドバー/コールアウト： 二次情報のための、明確にスタイル設定されたボックス（多くの場合、明るい背景または枠線付き）。
• 画像/メディア： 「包含」（インライン）メディアと「ワイド」（コンテナ幅を超える）メディア、および「フルブリード」メディアのルールを定義します。
• 見出しラップ： 見出しとプルクォートには text-wrap: balance を適用し（サポートされていないブラウザではフォールバックを用意）、最終行の孤立した単語を防ぎます。

4. ナビゲーションと道案内を構築する

ユーザーが長いコンテンツを管理できるようにします：

• 目次（ToC）： 1,000語以上の記事には、デスクトップでは固定目次、モバイルでは折りたたみ可能な目次を提供します。
• 進行状況インジケーター： 残りコンテンツ量を示す控えめなバーまたはパーセンテージインジケーター。
• 読了時間： 上部に「X分で読めます」という推定時間を表示して、ユーザーの期待値を設定します。

5. レスポンシブタイポグラフィのシフトを計画する

画面が小さくなっても読みやすさを維持します：

• モバイルの快適さ： 小さな画面では水平パディングを減らしますが、行長は快適に保ちます。
• コントラストチェック： 背景色付きのコールアウトやダークモードスイッチがWCAG AAコントラストを維持していることを確認します。

決定ルール

• 文字ルール： 1行のテキストが80文字を超える場合は幅が広すぎます。40文字未満の場合は狭すぎます。コンテナを調整してください。
• 見出しの近接性： 見出しは常に、その前に続くコンテンツよりも、それが導入するコンテンツに近くあるべきです（近接性の原理）。
• メディア幅のロジック： 技術的な詳細には「包含」画像を、雰囲気やナラティブの転換には「ワイド」または「フルブリード」画像を使用します。
• リズムの「目を細める」テスト： ページを目を細めて見ると、一貫した明確な空白で区切られた、はっきりとしたテキストの「ブロック」が見えるはずです。

制約

• アクセシビリティ： テキストはWCAG AA（4.5:1）のコントラストを満たす必要があります。本文のフォントサイズは16px（1rem）より小さくしてはいけません。
• レスポンシブ性： コンテナは流動的である必要があります（固定の width ではなく max-width を使用）。記事内のコンポーネント（コールアウト、埋め込みメディア）で、ビューポートではなく自身のコンテナに適応する必要があるものには、コンテナクエリ（@container）を使用します。
• 階層： H1が最も目立つ必要がありますが、本文テキストが最も読みやすいものでなければなりません。

よくある失敗パターン

• 「デスクトップオーシャン」： テキストが24インチモニターの全幅にわたって広がり、目が次の行を見つけるのを不可能にします。
• 息詰まるテキスト： 行高が狭すぎる（例：1.1や1.2）、アセンダーとディセンダーが衝突します。
• 浮遊する見出し： 見出しの上下の間隔が等しく、どのセクションに属するかが不明確になります。
• 一貫性のないメディア： 中央揃え、左揃え、ワイド画像が明確な論理システムなしに混在しています。
• 「無限スクロール」： 5,000語の記事に道案内や進行状況インジケーターがなく、ユーザーが離脱します。

検証基準

• 行長（メジャー）がデスクトップで45～75文字の間である。
• 行高（リーディング）が本文で少なくとも1.5である。
• 垂直リズムが見出しとそれに続くコンテンツを明確にグループ化している。
• エディトリアル要素（引用、コールアウト）が本文テキストと視覚的に区別されている。
• 長文コンテンツに目次または道案内が存在する。
• 読書体験がモバイルビューポートでテストされ最適化されている。
• すべてのテキストのコントラスト比がWCAG AA基準を満たしている。