外国人に選ばれるWebサイトの作り方——翻訳の先にある設計・技術・運用の全体像

「英語ページを追加したのに、海外からのアクセスが増えない」「Google翻訳で英語版を作ったが、問い合わせはゼロ」——これは日本企業のWeb担当者から最も多く聞く悩みです。

原因は言語ではありません。サイトの設計（情報アーキテクチャ）が日本語ユーザー前提のまま だからです。英語のテキストを載せても、ナビゲーション、ページ構成、ビジュアル、技術基盤が日本仕様のままでは、外国人ユーザーは「このサイトは自分向けではない」と数秒で離脱します。

この記事では、翻訳の先にある 設計・技術・運用 の3つの視点から、外国人に実際に選ばれるWebサイトの作り方を解説します。予算帯別のスコープ、技術要件チェックリスト、運用体制まで、制作会社への依頼前に把握すべき全体像をまとめました。

Who this is for: 外国人顧客・取引先・採用候補者にWebサイトで選ばれたい日本企業のWeb担当者、マーケティング責任者、経営者

Key Takeaways

• 英語ページの追加だけでは検索にも表示されず、UXも破綻する——問題は情報アーキテクチャにある
• 日本サイトと海外向けサイトではトップページ、ナビゲーション、サービスページの構成が根本的に異なる
• hreflang未設定は多言語SEO最大のミス——Googleに言語版の存在を正しく伝える技術的対応が必須
• 予算300万円〜でコアページの多言語化は可能、1,500万円+でサイト全体のリデザインが視野に入る
• GA4とGSCで国際トラフィックを言語・地域別に分離計測しなければ、改善の判断ができない
• 公開後の多言語コンテンツ運用（月額20〜50万円目安）を計画に含めないと、英語版は更新停止する

1. なぜ「英語ページを追加する」だけでは失敗するのか

日本語サイトに英語ページを「追加」するアプローチは、技術面とUX面の両方で問題を引き起こします。

検索エンジンに認識されない技術的な理由

英語ページを作っても、以下の技術的対応がなければGoogleは正しく処理できません。

• hreflangタグが未設定： Googleは日本語版と英語版の関係を理解できず、英語版を重複コンテンツとして扱う可能性がある
• URLに言語識別子がない：/about と /en/about の区別がなければ、どの言語圏のユーザーに表示すべきか判断できない
• サイトマップに英語版が含まれていない： インデックス登録が遅れるか、されない

UXが破綻する構造的な理由

日本語サイトの構造をそのまま英語にすると、外国人ユーザーは混乱します。

• 情報密度の違い： 日本のWebページは1画面に多くの情報を詰め込む傾向がある。海外ユーザーは「どこを見ればいいかわからない」と感じる
• ナビゲーションの前提が異なる： 日本で一般的なメガメニューや多階層ナビは、海外ユーザーにとって複雑すぎる場合が多い
• CTA（行動喚起）の設計思想が違う： 日本のサイトは「まずは情報を網羅してから判断してもらう」設計。海外のサイトは「最初にアクションを提示し、詳細は後で」の設計

翻訳・ローカライゼーション・トランスクリエーションの違いについては、外国人向けデジタル発信の落とし穴7選で詳しく解説しています。この記事では、その先の サイト設計と技術実装 にフォーカスします。

2. 日本サイトと海外向けサイトの情報設計（IA）はここが違う

情報アーキテクチャ（IA）とは、サイト内の情報をどう構造化し、ユーザーに提示するかの設計です。日本向けサイトと海外向けサイトでは、この設計思想が根本的に異なります。

トップページの設計思想

ナビゲーション

サービスページ

事例・ポートフォリオ

日本のサイトでは「実績一覧」としてクライアント名と概要をテキスト中心で並べることが多い。海外向けでは、ビジュアル主導のケーススタディ（課題→アプローチ→成果の数値）が標準です。

業種や用途によってIA設計の優先度は変わります。たとえば美術館・文化施設の場合は訪日外国人の導線設計が重要になります。詳細は訪日外国人に届くミュージアム体験をご覧ください。自治体・観光DMOの場合は、観光DX実践ガイドが参考になります。

3. 外国人に響くデザインパターン

IA（構造）の次はビジュアルデザインです。同じ情報でも、見せ方が違えば印象は大きく変わります。

ホワイトスペース（余白）

日本のWebデザインでは、画面上の空間を「もったいない」と感じ、情報で埋めようとする傾向があります。一方、欧米のデザインでは余白は 「高級感」「読みやすさ」「洗練さ」 のシグナルです。

• 日本の一般的なECサイト：1画面に30-50の要素
• 海外の一般的なECサイト：1画面に10-15の要素
• Apple.comのプロダクトページ：1画面に1-3の要素

外国人向けにデザインする場合、余白を1.5-2倍に増やす ことから始めるのが実践的です。

タイポグラフィ（文字組み）

日本語と欧文を同じページに配置する際のルール：

• 本文フォントサイズ： 日本語は14-16pxが一般的だが、欧文は16-18pxが読みやすい。言語切り替え時にフォントサイズも調整する
• 行間（line-height）： 日本語は1.7-2.0、欧文は1.4-1.6が適切。同じ値を使うとどちらかが読みにくくなる
• フォント選択： 日本語フォント（Noto Sans JP, ヒラギノ等）と欧文フォント（Inter, Helvetica等）をペアリングする。日本語フォントのデフォルト欧文は品質が低いことが多い

写真・イラスト

外国人ユーザーが日本企業のサイトで違和感を覚える写真の特徴：

• 全員が同じ民族、同じ年齢層のストック写真
• 過度にポーズを取った「ガッツポーズ」「指差し」系の写真
• テキスト入りの画像（翻訳できない）

改善策： 実際のチーム写真、オフィス写真、制作過程の写真を使う。ストック写真を使う場合は、多様性のある自然なシーンを選ぶ。

カラーの文化的意味

色の受け取り方は文化圏によって異なります。

4. 技術要件チェックリスト

デザインが決まったら、技術基盤を正しく整備する必要があります。ここを怠ると、見た目は良くても検索に出ない、表示が遅い、といった問題が発生します。

hreflang実装

hreflangタグは「このページには別の言語バージョンがあります」とGoogleに伝えるためのタグです。

よくあるミス3つ：

1. 自己参照の漏れ： 日本語ページのhreflangに日本語版自身を含めていない（全言語版を含める必要がある）
2. 双方向リンクの不備： 日本語ページから英語版にリンクしているが、英語版から日本語版へのリンクがない
3. 言語コードの誤り：ja と ja-JP の使い分けが統一されていない、または en-UK のような存在しないコードを使用

<!-- 日本語ページに設置するhreflangタグの例 -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/about" />
<link rel="alternate" hreflang="en" href="https://example.com/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />

URL設計

多言語サイトのURL構造には3つの選択肢があります。

推奨： ほとんどのケースでサブディレクトリ方式が最適です。

CDN設定と表示速度

日本のサーバーだけでサイトを運用している場合、海外からのアクセスは遅くなります。

PageSpeed Insightsで、海外（特にアメリカ）からのアクセス速度を確認できます。表示に3秒以上かかると、ユーザーの53%がページを離脱するというデータもあります。

主要CDNサービス：Cloudflare（無料プランあり）、AWS CloudFront、Vercel（デフォルトでグローバルCDN付き）

i18nルーティング

フレームワークごとの多言語ルーティング実装パターン：

OGP/構造化データの多言語対応

SNSでシェアされた際の表示（OGP）と、検索結果のリッチスニペット（構造化データ）も言語別に設定が必要です。

• og:locale を各言語ページで正しく設定（ja_JP, en_US 等）
• 構造化データ（JSON-LD）の inLanguage フィールドを言語に合わせる
• FAQ構造化データも言語別に用意する（同じ質問でも言語ごとに異なるページで管理）

Core Web Vitalsと多言語フォント

多言語サイトで見落としがちなパフォーマンス問題：

• フォントファイルサイズ： 日本語フォント（Noto Sans JP等）は1ウェイトで約5-8MB。サブセット化で500KB-1MB程度に削減可能
• フォント読み込み戦略：font-display: swap を使い、フォント読み込み完了前にテキストを表示する
• 言語別の読み込み： 日本語ページでは日本語フォントのみ、英語ページでは欧文フォントのみを読み込む設計にする

5. 予算帯別スコープガイド

「外国人向けサイトを作りたいが、いくらかかるのか」——最も多い質問です。予算帯別に、何が実現でき、何が含まれないかを整理しました。

費用対効果の考え方

投資対効果を判断するためのシンプルな計算：

• 現在の海外からの月間問い合わせ数 × 契約率 × 平均契約額 = 現在の海外売上
• サイト改善後の目標問い合わせ数 × 契約率 × 平均契約額 = 目標の海外売上
• 差額 × 12ヶ月 = 年間の増加見込み額

この増加見込み額がサイト制作費を上回るなら、投資は合理的です。多くの場合、1-2年で回収できます。

6. 国際トラフィックを正しく計測する方法

サイトを公開した後、「うまくいっているのか？」を判断するには、国際トラフィックを正しく計測する仕組みが必要です。

GA4での設定

• 言語別セグメント： 「ブラウザ言語」でセグメントを作成し、英語ユーザーと日本語ユーザーの行動を分離して分析する
• 地域別レポート： 「ユーザー属性 > 地域」で国別のセッション数、エンゲージメント率を確認
• コンバージョン分離： 英語版の問い合わせフォーム送信を日本語版とは別のコンバージョンイベントとして計測する

GSC（Google Search Console）での確認

• 検索パフォーマンス > 国フィルタ： 各国からの検索表示回数、クリック数、掲載順位を確認
• hreflang検証： 「インターナショナルターゲティング」レポートでhreflangタグのエラーを検出
• 言語別インデックス状況：site:example.com/en/ でインデックスされている英語ページ数を確認

追跡すべきKPI

7. 公開後の多言語コンテンツ運用

多言語サイトの最大の失敗パターンは「作ったきり更新しない」ことです。日本語版は毎月更新しているのに、英語版は1年前のまま——これは外国人ユーザーに「この会社は海外市場を本気で考えていない」と伝えているのと同じです。

更新フロー

多言語サイトの更新には2つのアプローチがあります。

推奨： 最初は日本語先行型で始め、海外売上比率が20%を超えたら同時更新型に移行する。

翻訳品質管理

• ネイティブレビュー： 翻訳後に必ず英語ネイティブが最終確認する。頻度は月1回以上
• 用語集（グロッサリー）： 社内用語、製品名、業界用語の訳語を統一するリストを作成・維持する
• 翻訳メモリ： 過去の翻訳を蓄積し、一貫性を保つ。DeepLや翻訳支援ツール（CATツール）を活用する

コンテンツカレンダー

言語によって需要のある情報が異なる場合があります。

• 日本向け：お盆、年末年始、新年度の情報 → 英語版では不要な場合も
• 英語向け：Black Friday、クリスマスシーズン、各国の祝日 → 海外顧客向けプロモーション
• 共通：製品アップデート、事例公開、業界レポート → 全言語で同時公開

運用コスト目安

8. よくある失敗パターンと回避策

9. プロジェクトの進め方ロードマップ

外国人向けWebサイトの構築は、以下の3フェーズで進めるのが効果的です。

フェーズ1：現状監査（2-4週間）

• 現在のサイトの国際トラフィック分析（GA4, GSC）
• 競合他社のグローバルサイト調査（同業種の海外企業3-5社）
• ターゲット市場・ターゲットペルソナの明確化
• 技術監査（hreflang、表示速度、モバイル対応）

フェーズ2：設計・構築（2-6ヶ月）

1. IA設計： 言語別のサイトマップ、ワイヤーフレーム作成
2. デザイン： 言語別のビジュアルデザイン、コンポーネント設計
3. コンテンツ： トランスクリエーション、コピーライティング
4. 実装： hreflang、i18nルーティング、CDN設定
5. テスト： 多言語表示確認、海外からの表示速度測定、フォーム動作確認

フェーズ3：運用・改善（継続）

• 月次のパフォーマンスレビュー（KPI確認）
• コンテンツ更新・翻訳の定期運用
• SEOの継続改善（キーワード追加、構造改善）
• ユーザーフィードバックの収集と反映

スタートアップや中小企業で、海外展開の全体戦略から検討したい場合は、日本発スタートアップのための海外展開戦略も合わせてお読みください。

10. Utsuboについて

Utsuboは大阪を拠点とする 外国人が設立したクリエイティブスタジオ です。フランス出身の代表が日本で創業し、日本語・英語・フランス語の3言語でサイトを運営しています。

私たちは自社サイトで多言語SEO、hreflang実装、国際トラフィック分析を日常的に実践しています。「外国人に選ばれるWebサイト」は、私たち自身が毎日取り組んでいるテーマです。

Three.js / WebGLを活用したクリエイティブWebサイト、インタラクティブインスタレーションの設計・制作と合わせて、日本企業のグローバルデジタルプレゼンス構築をお手伝いしています。

11. ご相談ください

海外市場に向けたWebサイトの設計・制作をご検討ですか？私たちは、日本企業のグローバルデジタルプレゼンス構築をパートナーとして支援しています。

プロジェクトについてお話ししましょう：

• 現在のサイトの課題と、海外市場で達成したい目標
• 予算と期間に合わせた最適なスコープの提案
• 私たちが適切なパートナーかどうかの確認

プロジェクトについて相談する

メールをご希望ですか？ contact@utsubo.co

多言語サイト構築チェックリスト

企画・戦略

• ターゲット市場（国・地域・言語）を明確にした
• 対象ペルソナ（外国人顧客像）を定義した
• 競合他社のグローバルサイトを3社以上調査した
• 多言語化の対象ページを優先順位付けした
• 予算と制作期間の概算を把握した

デザイン・IA

• 言語別の情報アーキテクチャを設計した（日本語版のコピーではない）
• ナビゲーションを5-7項目以内にシンプル化した
• CTAを明確に配置した
• 余白を十分に確保したデザインにした
• 多様性のあるビジュアルを使用した

技術

• hreflangタグを全ページで正しく設定した（自己参照含む）
• URL構造を決定した（サブディレクトリ推奨）
• CDNを導入し、海外からの表示速度を3秒以内にした
• OGPタグを言語別に設定した
• 日本語フォントをサブセット化した

コンテンツ

• コアページをトランスクリエーションで作成した（翻訳ではない）
• ネイティブスピーカーが最終チェックした
• 用語集（グロッサリー）を作成した
• 問い合わせフォームを国際対応した

運用

• 多言語コンテンツの更新フローを決めた
• 月次KPIレビューの体制を整えた
• GA4で言語別セグメントを設定した
• GSCで言語・国別のパフォーマンスを追跡する体制を整えた

FAQ

多言語サイトの制作期間はどのくらいですか？

コアページ5-10ページの英語化なら2-3ヶ月、サイト全体の多言語対応なら4-6ヶ月が目安です。完全リデザインを含む場合は6-12ヶ月を見込んでください。

英語だけで十分ですか？他の言語も必要ですか？

まずは英語から始めるのが効率的です。英語はグローバルビジネスの共通言語であり、Google検索で最大のリーチがあります。中国語、韓国語などの追加は、GA4のデータで各言語圏からのアクセス量を確認してから判断すれば、無駄な投資を避けられます。

既存サイトのリニューアルと新規構築、どちらがいいですか？

既存サイトのCMSやフレームワークが多言語対応可能であれば、リニューアル（既存サイトに多言語機能を追加）の方がコスト効率が良い場合が多いです。ただし、現行サイトが古いCMSや独自システムで拡張が困難な場合は、新規構築の方が長期的にコストが低くなります。

社内に英語ができる人がいない場合、どう運用しますか？

日常的な更新（新着情報、ブログ等）は翻訳サービスや翻訳支援ツール（DeepL + ネイティブレビュー）を活用します。重要なページ（サービス説明、事例、CTA）はバイリンガルのパートナー企業に依頼するのが確実です。月額20-50万円程度の運用予算を確保してください。

hreflangを設定しないとどうなりますか？

Googleは日本語版と英語版の関係を理解できず、最悪の場合、英語版が重複コンテンツとして検索結果から除外されます。また、日本語版が英語圏のユーザーに表示されたり、その逆が起きたりして、ユーザー体験が低下します。

費用対効果をどう測定しますか？

GA4で英語版からのコンバージョン（問い合わせ、資料請求等）を計測し、そこから発生した商談・受注額を追跡します。サイト制作費 ÷ 年間の海外売上増加額 = 投資回収期間です。多くの場合、適切に構築された多言語サイトは1-2年で投資を回収できます。