ページレイアウトと閲覧体験
読者に快適で効率的な閲覧体験を提供するため、EpoCanvas Docs では定番で分かりやすい 3 カラムのページレイアウトを採用しています。長い記事を読み進める際も、「サイト全体のどこにいるのか」「本文のどのセクションを読んでいるのか」を常に把握できます。
画面全体の領域分割
どのドキュメントを開いても、ページは 4 つの主要な機能領域に分かれています。
図：「レンダリングルールの詳細」ページを例にした 3 カラムレイアウトの注釈図。① トップのグローバルナビゲーションバー、② 左側のカテゴリーサイドバー、③ 中央の本文閲覧エリア、④ 右側の「目次」。4 つの領域は枠線と番号で示しています。
図：3 カラムレイアウトの構造を示す模式図。各領域の名称と役割を注記しています。
1. グローバルナビゲーションバー (Header)
ページ最上部に固定表示され、下へスクロールしても常に見える状態で、高さは 3.5rem です。バーには左から右へ以下の要素が並んでいます（下の注釈図を参照）。
図：トップバー要素の注釈拡大図。① ロゴとサイト名、② グローバル検索ボックス、③ メインナビゲーションボタン群、④ バージョンバッジ、⑤ 言語切り替え、⑥ ライト/ダークテーマ切り替え、⑦ GitHub リポジトリへのリンク、⑧ Telegram コミュニティへのリンク。
- サイトのロゴとタイトル（①）：左側に EpoCanvas のアイコンとプロジェクト名を表示し、クリックするとドキュメントサイトのホームへ素早く戻れます。
- グローバル検索ボックス（②）：ボックスにキーワードを入力すると、そのまま現在のページの内容を検索できます。
Ctrl+K/Cmd+Kを押すとサイト全体の検索ダイアログが開きます。詳細は 全文検索とショートカットキーの使い方 を参照してください。 - メインナビゲーションボタン（③）：「ホーム」「製品概要」「クイックスタート」など、よく使うページへのジャンプリンクを提供し、現在いるセクションは自動的にハイライトされます。
- バージョンバッジ（④）：現在のドキュメントに対応するリリースバージョン番号（例：
v1.2.0）を表示し、クリックすると GitHub 上の詳細な更新履歴を確認できます。 - 多言語切り替え（⑤）：言語ボタンをクリックすると 10 種類の言語が展開され、選択すると同じ記事の対象言語版へ移動します。ナビゲーション、サイドバー、本文がまとめて切り替わります。
- ライト/ダークテーマ切り替え（⑥）：太陽/月のアイコンで、ライトモードとダークモードを切り替えられます。
- GitHub と Telegram（⑦⑧）：右側のアイコンから、それぞれオープンソースのリポジトリと技術コミュニティへ移動できます。
2. 左側のカテゴリーサイドバー (Sidebar)
ページ左側にあり（幅 16.5rem、約 264 ピクセル）、ドキュメントのすべての章を論理的な階層で表示します。
- グループの折りたたみ：ドキュメントは「製品概要とスタートガイド」「主要機能と使い方ガイド」などのグループに整理されており、グループ名をクリックすると展開・折りたたみできます。
- 現在のページのハイライト：現在読んでいる記事は、左側メニューでテーマカラーのカプセル状の背景によりハイライトされます。
- スクロール位置の記憶：ある記事から別の記事へ移動しても、左側サイドバーのスクロール位置は保持され、先頭に戻ることはありません。
3. 中央の本文閲覧エリア (Main Content)
画面中央にあり、技術ドキュメントの内容を載せる中核となる領域です。
- ページタイトルと更新日時：本文の先頭には記事タイトル（Frontmatter の
titleフィールドから取得）と「最終更新日」が表示され、内容の新しさを判断しやすくなっています。 - 適切な閲覧幅：本文エリアの最大幅は
60remに制限されており、モニターが広すぎて 1 行が長くなり行を読み違えるのを防ぎます。 - ページ送りリンク：各ドキュメントの末尾には「前のページ」「次のページ」リンクが自動生成され、サイドバーの順序どおりに連続して読み進められます。
- コードブロックのコピーボタン：各コードブロックの右上にはコピーボタンがあり、ワンクリックでコードをそのままコピーできます。
4. 右側の記事アウトライン (Table of Contents)
本文の右側にあります。
- 見出しの自動取得：システムはページのレンダリング時に、現在のドキュメント内のレベル 2 見出し（
##）とレベル 3 見出し（###）を自動的に解析し、「目次」を生成します。 - 追従ハイライト：読み進めるうちにページを下へスクロールすると、アウトラインは現在読んでいるセクションを自動的にハイライトします。
- クリックでスムーズに移動：アウトライン内の任意の小見出しをクリックすると、対応する段落へスムーズにスクロールし、アドレスバーのアンカー（例：
#画面全体の領域分割）も更新されるため、コピーして共有しやすくなっています。
ライトモードとダークモード
EpoCanvas Docs ではライトとダークの 2 種類のテーマを提供しており、両方の配色はすべて src/styles/custom.css 内の CSS 変数で定義しています。
- システム設定に追従：初めてページを開いたとき、サイトは OS のライト/ダーク設定を検出し、対応するテーマを表示します。
- 手動切り替えと記憶：トップバーのテーマ切り替えボタンで手動切り替えができ、選択結果はブラウザーの LocalStorage に保存され、次回開いたときも有効です。
図：同じサイトをライトモードで表示した様子（クイックスタートページの例）。
スマートフォンとタブレットのレスポンシブ対応
スマートフォンやタブレットなど画面サイズの異なる端末では、画面の大きさに合わせてレイアウトが自動的に調整されます。
| 端末タイプ | 画面幅 | レイアウトの挙動 |
|---|---|---|
| ワイド画面のデスクトップ / ノート PC | >= 1152px | 標準的な 3 カラムレイアウト（左メニュー + 中央の本文 + 右のアウトライン）をすべて表示。 |
| タブレット / 狭いウィンドウ | 800px ~ 1152px | 右のアウトラインは非表示になり、左のナビゲーションと本文の 2 カラムレイアウトを維持。 |
| スマートフォン | < 800px | 左右のサイドバーはすべて折りたたまれ、本文が全幅で表示。トップバーのメニューボタンをクリックするとサイドバーのドロワーがスライド表示されます。 |
超ワイドのモニターを使っている場合でも、スマートフォンで手軽に参照する場合でも、自然で快適な閲覧体験が得られます。