世界14言語対応の天体・人工衛星百科事典を構築したi18n設計とグローバルSEO戦略

インターネット上のトラフィックの半分以上は非英語圏から生じており、とりわけ天文学・宇宙探査や防災といった地球規模のテーマは、世界中のあらゆる地域の人々にとって等しく関心の高い分野です。しかし、多くの個人開発Webアプリは英語と日本語の2言語対応で止まってしまうのが一般的です。

SatViewer3Dでは、地球規模の利用を想定し、初期リリース段階から日本語・英語・中国語（簡体/繁体）・スペイン語・フランス語・ドイツ語・ロシア語・ポルトガル語・イタリア語・韓国語・アラビア語・ヒンディー語・タイ語など世界14言語に完全対応する多言語化（i18n）アーキテクチャと、Googleをはじめとする世界各国の検索エンジンで上位表示を獲得するためのグローバルSEO戦略を実装しました。本記事ではその全貌を公開します。

1. 超軽量クライアントサイドi18nエンジンの自作とオンデマンド辞書配信

Reactなどの大規模フレームワークでは react-i18next や next-intl などの成熟したライブラリが存在しますが、Three.jsを中心としたシングルページ・高速描画アプリケーションにおいては、数万行に及ぶ重厚なバンドルを抱え込むことは初回表示速度（First Contentful Paint）を著しく損ないます。

そこでSatViewer3Dでは、わずか60行程度のバニラJavaScriptで動作するカスタムi18nエンジンを自作しました：

// 超軽量i18nローダーと動的DOM置換エンジン
class I18nEngine {
    constructor(defaultLang = 'en') {
        this.currentLang = defaultLang;
        this.translations = {};
    }

    async loadLanguage(lang) {
        if (this.translations[lang]) return;
        try {
            const res = await fetch(`/locales/${lang}.json`);
            this.translations[lang] = await res.json();
            this.currentLang = lang;
            this.applyToDOM();
        } catch (err) {
            console.error(`Failed to load dictionary for ${lang}`, err);
        }
    }

    t(path, params = {}) {
        const keys = path.split('.');
        let val = keys.reduce((obj, key) => obj?.[key], this.translations[this.currentLang]);
        if (!val) return path;
        
        // {{param}} プレースホルダーの高速置換
        return val.replace(/\{\{(\w+)\}\}/g, (_, k) => params[k] ?? '');
    }

    applyToDOM() {
        document.querySelectorAll('[data-i18n]').forEach(el => {
            const key = el.getAttribute('data-i18n');
            el.textContent = this.t(key);
        });
        document.documentElement.lang = this.currentLang;
        document.documentElement.dir = this.currentLang === 'ar' ? 'rtl' : 'ltr';
    }
}

14言語すべての翻訳テキストを1つの巨大なバンドルに詰め込むのではなく、ユーザーがブラウザで言語を選択した瞬間にその言語のJSONファイル（約15KB）だけを動的に非同期フェッチ（On-demand Fetch）することで、初期転送量を最小限に抑えています。

2. アラビア語（RTL: 右横書き）対応とCSS論理プロパティ

世界14言語をサポートする上で最大の障壁となったのが、アラビア語などのRTL（Right-To-Left: 右から左へ文字を書く）言語への対応でした。

従来のCSSで margin-left: 12px; や float: left; のような物理方向プロパティを多用していると、アラビア語表示時にHUDやモーダルダイアログのレイアウトが完全に崩壊します。この問題を解決するため、全CSSコードベースをCSS論理プロパティ（Logical Properties）に全面移行しました：

margin-left → margin-inline-start
margin-right → margin-inline-end
padding-left → padding-inline-start
border-left → border-inline-start

HTMLのルート要素に dir="rtl" を付与するだけで、CSS論理プロパティが自動的にレイアウトを左右反転させ、アラビア語圏のネイティブユーザーにとっても自然で美しいUIが保たれます。

3. Googlebotのための多言語静的ポータルと `hreflang` / `canonical` 完全網羅

クライアントサイドのJavaScriptで言語を切り替えるだけでは、Google検索などのクローラーはデフォルトの1言語しか認識できず、海外からの莫大なオーガニック検索流入を逃してしまいます。

検索エンジンに各国語のコンテンツを独立して正しく認識・インデックスさせるため、SatViewer3Dでは言語ごとに独立したサブディレクトリ（/en/, /es/, /zh/, /fr/, /de/, /ru/, /ar/ 等）を静的HTMLとして配置し、すべてのページの <head> 内に完全な相互参照 rel="alternate" hreflang="..." タグを配備しました：

x-default に国際共通語である英語版を指定することで、未対応地域のユーザーが検索した際にも最も適切なページへ自動案内されるよう設計しています。

4. 多言語XMLサイトマップと構造化データ（JSON-LD）

さらに、全55ページ以上の多言語URLを1行の漏れもなく記述した多言語拡張仕様の sitemap.xml を配備しました。サイトマップ内に <xhtml:link rel="alternate"> を含めることで、GoogleだけでなくロシアのYandexや中国のBaiduなどの各地域クローラーに対しても高精度なシグナルを提供しています。

また、Schema.org準拠の構造化データ（WebApplication および TechArticle）をJSON-LD形式で埋め込み、Google検索結果のリッチリザルト（評価星、機能概要、スクリーンショット）として表示される確率を大幅に引き上げました。

5. まとめとグローバル展開を目指す開発者への提言

多言語対応とグローバルSEOは、開発の初期段階でアーキテクチャを正しく設計しておけば、後から莫大な書き直しコストを支払う必要がなくなります。

「バニラJSによる軽量i18nローダー」「CSS論理プロパティによるRTLネイティブ対応」「完全なhreflangタグと静的ポータルの配備」という3本の柱を徹底することで、SatViewer3Dは世界100カ国以上からの自然検索アクセスを獲得することに成功しました。世界を舞台にするすべてのWeb開発者にこのアプローチを強く推奨します。