0. システム構成と言語別 URL の設計

emotiongraphics.jp は，同一オリジン上に構築方式の異なる三つのサイトを配置しています。フォトギャラリー，旅行記や製作物を提供する親サイト（本稿執筆時点ではHomeとAboutのみを想定），技術文書を公開する Significant Bit，AI に関する記事を公開する Real Terms です。サイト横断ナビゲーションを実装するには，各サイトの役割，言語別 URL，ページ遷移方式の違いを前提として整理する必要があります。

三つのサイト

各サイトの構成と公開基点は次のとおりです。英語を既定言語とし，英語の公開 URL には言語コードを含めません。

サイト	構築方式	主な役割	英語	日本語	サイト内のページ遷移
eMotionGraphics	Blocs 6 for Mac	発行元の情報と一般ページ	/	/ja/	通常 URL
Significant Bit	VitePress	技術文書	/docs/	/docs/ja/	パスベース
Real Terms	Docsify	AI に関する記事	/ai/	/ai/ja/	ハッシュルーティング

日本語を示す ja の位置は，親サイトと二つのサブサイトで異なります。親サイトでは言語コードがページパスに先行するため，About の URL は英語が /about/，日本語が /ja/about/ です。Significant Bit と Real Terms では，先にサイトのマウントパスを置き，その後に言語コードを続けます。このため，日本語版の基点はそれぞれ /docs/ja/ と /ai/ja/ になります。

この相違があるため，現在の URL へ一律に ja を追加する方法では，サイト横断リンクを生成できません。サイトナビゲーションは，現在の言語と移動先のサイトに応じて，対応する URL を明示的に選択します。

Real Terms の公開基点とコンテンツ基点

Real Terms の英語版では，ブラウザーに表示する公開基点と，Docsify が Markdown を取得するコンテンツ基点が異なります。日本語版では，両者が同じです。

言語	HTML シェル	公開基点 publicBase	コンテンツ基点 contentBase	記事 URL の例
英語	site/index.html	/ai/	/ai/en/	/ai/#/2026/weekly/CW36.md
日本語	site/ja/index.html	/ai/ja/	/ai/ja/	/ai/ja/#/2026/weekly/CW36.md

英語の記事ファイルは site/en/ にありますが，公開 URL には /en/ を含めません。site/en/index.html は，ハッシュを維持したまま /ai/ へ転送します。RT.publicBase は利用者に提示する URL とサイト間リンクに使用し，RT.contentBase は Docsify の basePath として記事の取得先を指定します。

言語切替の成立条件

Real Terms は英語と日本語に対応し，両言語の記事で同じファイル名と相対パスを使用します。たとえば，英語記事の /ai/#/2026/weekly/CW36.md に対応する日本語記事は /ai/ja/#/2026/weekly/CW36.md です。この対応関係により，言語切替ではベースパスだけを変更し，現在の記事を表すハッシュをそのまま引き継げます。

一方，サイト横断リンクでは Docsify のハッシュを引き継ぎません。英語ページからは親サイトの / と Significant Bit の /docs/ を参照し，日本語ページからは /ja/ と /docs/ja/ を参照します。About も同様に，英語では /about/，日本語では /ja/about/ を選択します。記事の言語切替とサイト間の移動は異なる規則で処理します。

統一するユーザー体験

三つのサイトは構築方式が異なりますが，同じ発行元が提供する一連のサイトとして操作できることを目標とします。サイト横断ナビゲーションでは，次の要素を共通化します。

• 発行元の識別
  eMotionGraphics のロゴを表示し，親サイトのホームへ接続します。
• サイト間の移動
  Home，Real Terms，Significant Bit，About を共通の順序と表記で配置し，現在表示しているサイトを示します。
• 外観と言語の切替
  ライトモードとダークモードの切替，および英語と日本語の切替を，同じ位置と操作体系で提供します。
• 画面幅への対応
  デスクトップ表示と狭い画面で共通するレイアウト規則を使用し，狭い画面ではハンバーガーメニューへ切り替えます。
• スクロール時の挙動
  本文の表示領域を確保するため，下方向のスクロール時にナビゲーションを非表示にし，上方向のスクロール時に再表示します。

共通化の対象は，サイトの外観とサイト間を移動する操作です。記事本文のレンダリング，サイト内ルーティング，サイドバー，検索などは，各構築方式の機能を使用します。サイト横断ナビゲーションとサイト内ナビゲーションを分離することで，統一された操作性を保ちながら，各システムの特性を維持できます。

構築方式による差異

親サイトは Blocs 6 for Mac，Significant Bit は VitePress，Real Terms は Docsify で構築しています。生成される HTML の構造，初期化の時点，ルーティング方式が異なるため，同じユーザー体験を実現する場合でも，ナビゲーションの組み込み方法はシステムごとに調整する必要があります。

とくに Docsify は，ブラウザー上で Markdown を読み込み，ルート遷移のたびに記事のレンダリング領域を更新します。そのため，サイト横断ナビゲーションを Docsify の公式 Navbar として扱うか，Docsify のレンダリング領域から独立させるかを決めなければなりません。次章では，ここで整理した要件に基づき，公式 Navbar を採用しない理由を説明します。