Webサイト / 海外向け
創業100年の撮影所を、海外プロデューサーが最初に読むサイトに
東映京都撮影所の英語サイトは、英語が90語しかない2010年代のパンフレットでした。それを toeistudios.co として作り直しました。1ページに京都と東京の両撮影所、18の全ステージを実寸で、そしてプロデューサーが最初に質問するAIアシスタントにも読める形で。
- 12.8秒 → 0.5秒スマートフォンでの読み込み完了計測値
- 66 → 16初回表示のリクエスト数計測値
- 90 → 約1,000語トップページの英語の語数計測値
- 0 → 2 + llms.txt構造化データJSON-LD
出発点
改修前の英語サイトは、2010年代前半のつくりのまま止まっていました。見た目の古さより問題だったのは、海外の読み手にも、検索エンジンにも、AIにもほとんど何も伝えていなかったことです。
- 英語ページなのに言語宣言は日本語（lang="ja"）。唯一の h1 は「東映京都撮影所」の日本語でした。
- viewport の指定がなく、スマートフォンでは980px幅のPCレイアウトがそのまま縮小表示されていました。
- ナビゲーションは画像でした。「About us」「Stages」「Art Services」はJPGとGIFのボタンで、画像の中の文字は翻訳も検索も読み上げもできません。
- トップページの英語は90語。お知らせ欄は英語ページでも日本語のみでした。
- 2016年の jQuery 1.12 とスライドショー用プラグイン。読み込み完了までPCで8.4秒、スマートフォンで12.8秒、リクエストは66件。
- 計測タグは Universal Analytics（UA-9558041-7）。Googleは2023年7月にUAを停止しているので、3年以上なにも計測されていませんでした。
- 構造化データ、hreflang、Open Graph、サイトマップへの参照、いずれもなし。機械にとってはほぼ空白のページでした。
このサイトは誰のためのものか
読み手はひとりに絞りました。ロサンゼルスかロンドンにいるラインプロデューサーで、次の作品を日本で撮るかどうかを決めようとしている人です。
その人が知りたいことは決まっています。ステージはどれくらいの大きさか。LEDボリュームで何ができるか。誰がここで撮ったか。制作インセンティブはあるか。誰にメールすればいいか。この5つに順番に答えるのが、ページの構成そのものです。
京都（1926年創業）と東京（1935年創業）の両撮影所を1つのサイトにまとめました。海外の制作会社はまず「日本で撮る」を決め、撮影所はその後に選ぶからです。言語は英語のみ。日本の読み手には既存のサイトがあります。
作ったもの
1ページ構成です。東映が持つ映像素材から19秒、4MBのヒーロー映像を8カットで編集し、その下に両撮影所、18ステージ、職人の仕事、フィルモグラフィー、100年の歩み、日本での撮影支援、問い合わせフォームの順に並べました。
中心は「18のステージを実寸で」のセクションです。公開されている縦、横、キャットウォークまでの高さをそのまま three.js のワイヤーフレームにして、1.7mの人物を横に置きました。メートルとフィートを併記し、京都のステージのように高さが未公開のものは「9mと仮定」と明記しています。プロデューサーが最初に見るのは写真ではなく寸法だからです。
職人のセクションは9部門を短いループ映像で。刀鍛冶からフェイシャルキャプチャまで、すべて構内にあることを一目で伝えます。フィルモグラフィーはタイトルにカーソルを合わせるとポスターが追いかけてきます。
人にも、機械にも読めるように
次のプロデューサーの最初の質問は、検索窓ではなくAIアシスタントに向かいます。「日本で常設のLEDボリュームがある撮影所は」。このページはその問いに、アシスタントがそのまま引用できる文章と出典URLで答えます。そのために設計段階で決めたことが4つあります。
- 18ステージの寸法はすべて静的HTMLの行として書き出しています。JavaScriptで描画していないので、スクリプトを実行しないクローラーやエージェントにも表がそのまま渡ります。
- JSON-LD で Organization（京都と東京を department として）と WebSite を宣言。
- /llms.txt に、全ステージの寸法、代表作、インセンティブ、連絡先をプレーンテキストでまとめ、head から rel="alternate" でリンク。
- クローラーを歓迎する robots.txt、sitemap.xml、canonical、Open Graph。当たり前のものを全部。
意図して軽く
ページ全体の映像素材は約12MBありますが、最初の訪問で読み込むのはスマートフォンで1.8MB、PCでヒーロー映像を含めて4.6MBです。映像と three.js はアイドル時に読み込み、ポスターは遅延読み込み、画面外のキャンバスはすべて停止します。
アセットは1年間 immutable、HTMLは no-cache。Cloudflare Pages で配信し、存在しないURLにはトップページではなく404を返します。prefers-reduced-motion では映像もモーフもすべて止まります。
キーボードでも一通り操作できます。ステージの切り替えは aria-pressed 付きのボタンで矢印キーが効き、メニューはフォーカスを閉じ込めて Escape で閉じ、フォームは名前とメールを別々に検証します。
初日から計測する
3年間なにも計測していなかったサイトの後継です。Google Analytics 4 と Search Console（ドメインプロパティとして認証済み）を最初から入れ、サイトマップを送信しています。「海外からのアクセスが増えたか」に、来月には数字で答えられます。
作り方
最初のコミットから公開まで2日です。設計と実装は Claude Code と一緒に進めました。私たちは Anthropic 認定の Claude Partner で、これは自分たちの仕事で毎日使っている道具です。速さの理由は道具だけではありません。読み手をひとりに絞り、答える質問を5つに絞ったので、迷う時間がなかったのです。
改修前と改修後
| 項目 | 改修前 | 改修後 |
|---|---|---|
| 言語宣言 | 日本語（英語ページなのに） | 英語 |
| スマートフォン | PCレイアウトを縮小表示 | レスポンシブ |
| ナビゲーション | 画像ボタン | テキスト、キーボード対応 |
| トップページの英語 | 90語 | 約1,000語 |
| 読み込み完了（スマートフォン） | 12.8秒 | 0.5秒 |
| リクエスト数 | 66 | 16 |
| 計測 | Universal Analytics（2023年に停止） | GA4 + Search Console |
| 構造化データ | なし | Organization + WebSite |
| AI向けの要約 | なし | /llms.txt、全ステージ寸法入り |
| 配信 | Apache、単一サーバー | Cloudflare Pages、エッジ配信 |
計測は2026年9月9日、東京からヘッドレスChromeで各1回。スマートフォンは390×844、PCは1440×900。平均値ではなく、その日の実測値です。
日本企業が持ち帰れること
- 中身は最初からありました。問題は器でした。18ステージの寸法も代表作も旧サイトのどこかに存在していて、読める形になっていなかっただけです。
- 「海外対応」はメニューの翻訳ではありません。相手が最初にする5つの質問に、相手の順番で答えることです。
- AIに読める設計は後付けの施策ではなく、実装時の判断です。かかるのは1日、効くのはこれからの数年です。