メインコンテンツエリアの右側に配置する補助的なサイドカラム。関連リンク・目次（ToC）・タグ・著者情報・広告・おすすめコンテンツなどを収容する。Left Sidebar（ナビゲーション用）と異なり、Right Rail はコンテンツに関連する補助情報の提供を目的とする。ブログ・ニュースサイト・ドキュメントサイト・ECサイトのサイドバーで広く使われる。
この記事を読むと、Right Rail に置くべき情報の優先順位・スティッキー配置の設計・レスポンシブでの折り畳みと再配置・Left Sidebar との使い分けが自分でできるようになります。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
メインコンテンツエリアの右側に配置する補助的なサイドカラム（通常200〜320px幅）。メインコンテンツを補完する情報を収容し、ユーザーがスクロールしながらでも参照できる。
Left Sidebar vs Right Rail：
| Left Sidebar | Right Rail | |
|---|---|---|
| 用途 | ナビゲーション・サイト構造 | 補助情報・関連コンテンツ |
| 重要度 | 高（主要機能） | 低（補足） |
| コンテンツ例 | メニュー・フォルダツリー | 目次・タグ・関連記事・広告 |
| モバイル | ドロワーとして維持 | 折り畳みまたは下部移動 |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 記事・ブログページ：目次・タグ・著者情報・関連記事
- ECサイトの商品詳細：フィルター・絞り込み・広告
- ドキュメントサイト：ページ内目次・関連ドキュメント
- ダッシュボード：アクティビティフィード・通知・ショートカット
3.2 When NOT to use
- モバイルファーストの狭い画面：Right Rail はデスクトップ（1024px以上）向けに検討する
- フォーム・入力画面：補助情報が入力の邪魔になる
- シンプルなランディングページ：コンバージョンに集中すべき場面
4. 設計判断の核（Decision Principles）
Right Railの核は「補助であること」——メインコンテンツより目立ってはいけない。幅・色・フォントサイズすべてにおいてメインを引き立てる脇役として設計する。
判断の優先順位：① Right Railに置く情報の優先順位付け → ② スティッキー配置 → ③ 幅の制約 → ④ レスポンシブでの再配置
- Right Rail の幅はメインコンテンツの1/3以下にする：一般的な比率はメイン:レール = 2:1 または 3:1。Right Rail が広すぎるとメインコンテンツが狭くなり可読性が下がる
- スティッキー配置でユーザーの視線を補助する：
position: sticky; top: 20px;で目次やウィジェットを常に見えるようにする。ただし Right Rail の高さがビューポートより高い場合はoverflow-y: autoとmax-height: calc(100vh - 40px)を組み合わせる - 情報の優先順位を決める：Right Rail に何でも入れると散漫になる。目次・関連記事・タグを1〜2つに絞り、残りはコンテンツ末尾に移動する
- モバイルでは Right Rail をコンテンツ下部に移動する：
flex-col lg:flex-rowでデスクトップのみ横並びにし、モバイルではメインコンテンツの後に Right Rail を配置する。重要な情報はコンテンツ内に組み込む
5. 状態設計（States）
| 状態 | 表示 |
|---|---|
| デスクトップ（≥1024px） | 右側に固定配置、スティッキー |
| タブレット（768〜1023px） | 非表示またはコンパクト化 |
| モバイル（<768px） | コンテンツ下部に移動または非表示 |
| スクロール中（スティッキー時） | 画面上部に固定して常時表示 |
6. バリエーション設計（Variants）
| バリアント | コンテンツ | 使用場面 |
|---|---|---|
| 目次レール | ページ内アンカーリスト | 長文記事・ドキュメント |
| 関連コンテンツレール | 関連記事・おすすめ | ブログ・メディアサイト |
| アクティビティレール | 通知・最近の操作 | ダッシュボード・SaaS |
| フィルターレール | 絞り込み条件 | EC・検索結果 |
| 広告レール | バナー・スポンサー | メディアサイト |
7. パターン集（Good / Bad / How to fix）
7.1 Bad（典型3つ）
- Right Rail の幅が400pxあり、メインコンテンツが狭くなって読みにくい
- モバイルで Right Rail がメインコンテンツの前に表示され、ユーザーがスクロールしないと本文にたどり着けない
<div class="right-rail">でマークアップし、スクリーンリーダーが補助情報として認識できない
7.2 Good（対になる3つ）
grid-cols-[1fr_280px]でメインと Right Rail の比率を固定し、レスポンシブでgrid-cols-1に切り替えるflex-col lg:flex-rowでモバイルは縦積み、デスクトップのみ横並びにして Right Rail を右側に配置する<aside aria-label="関連情報">でセマンティックにマークアップし、スクリーンリーダーがmainから独立した補助領域として認識する
7.3 How to fix（手順）
- Right Rail の幅を
max-width: 320pxに制約する <aside aria-label="[補助情報の説明]">で実装するposition: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;でスティッキー配置を設定するflex flex-col lg:flex-rowでモバイルはコンテンツ下部に Right Rail が来るように順序を制御する
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Screen Reader
<div class="flex flex-col lg:flex-row">
<main class="flex-1" aria-label="メインコンテンツ">
<!-- 記事・本文 -->
</main>
<aside aria-label="補助情報" class="w-72 shrink-0">
<!-- 目次・関連記事・タグ -->
</aside>
</div>
<aside> は <main> とは独立した補助的なコンテンツ領域として認識される。aria-label で何の補助情報かを明示する。
Focus Order
Right Rail 内のリンクはキーボードのTab順序でメインコンテンツの後に来るように、DOMの順序はメイン→Right Railにする。CSSのFlexboxで見た目を制御しても、DOMの順序はアクセシブルな順序を維持する。
10. 実装メモ（Implementation Notes）
- TailwindCSS での実装例：
<div className="flex flex-col lg:flex-row gap-8">→<main className="flex-1 min-w-0">+<aside className="w-72 shrink-0 lg:sticky lg:top-8 lg:self-start"> lg:stickyとlg:self-startを組み合わせることで、デスクトップのみスティッキー配置になる（モバイルでは通常フローに従う）- Right Rail 内の目次（Table of Contents）の実装には、
IntersectionObserverでスクロール位置に応じてアクティブな見出しをハイライトする実装が一般的
11. 関連リンク
- 関連するUIデザイン原則: 情報密度 (Information Density), スキャンしやすさ (Scannability)
- 用語集（定義）: 情報アーキテクチャ, レスポンシブデザイン
- 関連するUIコンポーネント（横）: Sidebar（サイドバー）, Table of Contents（目次）, Scroll Area（スクロールエリア）, Responsive Patterns（レスポンシブパターン）, Density Patterns（密度パターン）
12. まとめ
Right Railの設計で最重要なのは「補助であること」の徹底です。幅・情報量・視覚的強度すべてにおいてメインコンテンツを引き立てる脇役として設計してください。<aside> + aria-label のセマンティックな実装と、モバイルでのコンテンツ下部への再配置は必須実装です。スティッキー配置は目次など参照頻度の高い情報に限定的に使用し、Right Rail 全体をスティッキーにするとコンテンツが隠れるケースがあるため max-height を必ず設定してください。
