Cursorで多言語サイトを自作｜翻訳とコード反映を自動化する手順

「海外の問い合わせが来るようになったから、サイトを多言語化したい。でも翻訳会社に頼むと数十万円、制作会社に頼むとさらに時間がかかる」。こんな見積もりを前に止まっている方は多いはずです。

この記事では、AIのコーディングエージェント「Cursor」を使って、翻訳・コード反映・SEO設定までを自分たちの手で進める具体的な手順を解説します。どこまでAIに任せられて、どこは自分で判断すべきかの線引きも、正直にお伝えします。読み終わるころには、最初の一歩が具体的に見えているはずです。

Contents / 目次

1. 結論。Cursorで多言語サイトは「指示・確認・公開」の3ステップに圧縮できる
2. 具体的なやり方。Cursorで多言語化を進める5ステップ
3. どんな成果が出るのか。時間とコストの変化
4. よくある失敗と回避法。現場で本当に起きること
5. 使う側の落とし穴。AIに任せきれない現実の妥協点
6. よくある質問
7. まずは1ページから、一緒に始めてみませんか

結論。Cursorで多言語サイトは「指示・確認・公開」の3ステップに圧縮できる

結論から言うと、Cursorを使えば、従来「翻訳→デザイン調整→コーディング→テスト→公開」と工程ごとに進めていた多言語化を、「指示→確認→公開」の3ステップに圧縮できます。AIが翻訳テキストの埋め込み、言語切り替えUI、SEO用のタグ生成までまとめて面倒を見てくれるからです。

Cursorとは、AIに指示してコードを書いたり修正したりできるツールで、公式サイトでは「コーディングエージェント」と説明しています。かんたんに言うと、「日本語で指示すると、その通りにコードを書いて修正してくれる相棒」です。コードが読めなくても、やりたいことを言葉で伝えれば形になります。

大事なのは、AIに丸投げできる部分と、人が必ず確認すべき部分を最初に分けておくことです。ここを曖昧にすると、後で「翻訳が不自然」「海外から検索されない」といったやり直しが発生します。まずは全体像を表で押さえましょう。

工程	Cursor（AI）に任せられる範囲	自分で判断すべき範囲
翻訳の下訳	全ページの初稿翻訳を一気に生成	固有名詞・専門用語・ニュアンスの最終確認
コード反映	翻訳テキストをHTMLに埋め込み	意図通り反映されたかの表示チェック
言語切り替えUI	切り替えボタンやメニューの実装	国旗ではなく言語名表示にする判断
多言語SEO	hreflangタグ・サイトマップの生成	URL設計の方針決め・公開後の検証
レイアウト調整	文字量に応じた伸縮CSSの提案	各言語での見た目の最終判断

表のとおり、AIは「作業」を担い、人は「判断」を担います。この役割分担さえ守れば、品質を落とさずにスピードだけを劇的に上げられます。なお、Cursorでの基本的なサイト修正の流れはCursorでWordPressを修正する手順でも詳しく解説していますので、Cursorの操作に不安がある方は先に目を通しておくと安心です。

具体的なやり方。Cursorで多言語化を進める5ステップ

多言語サイトをCursorで作る手順は、大きく5つのステップに分けられます。ここでは、コードが書けない方でも再現できるよう、何をどの順番でやるかを具体的に説明します。

ステップ1。多言語化の方式とURL構造を先に決める

最初に決めるべきは「どんなURLで各言語ページを持つか」です。ここを決めずにコードを書き始めると、後からSEOの作り直しになります。多言語サイトのURLには、大きく3つの方式があります。

• サブディレクトリ型：example.com/en/ のように言語をフォルダで分ける。中小企業はこれが一番おすすめ。設定しやすく、同じサーバーで管理できる
• サブドメイン型：en.example.com のように言語をサブドメインで分ける。サーバー構成によっては有効だが管理がやや煩雑
• 別ドメイン型：example.de のように国別ドメインを使う。大規模なグローバル展開向けで、中小企業には過剰

まずは英語1言語、サブディレクトリ型から始めるのが現実的です。いきなり5言語に手を広げると、更新のたびに5倍の手間がかかり、運用が破綻します。1言語で運用の型を作ってから増やすのが鉄則です。

ステップ2。Cursorに翻訳とコード反映をまとめて指示する

方式が決まったら、Cursorに具体的な指示を出します。ここで大事なのは「翻訳して」だけの曖昧な指示にしないことです。役割・前提・制約・出力形式まで盛り込むと、結果が安定します。そのままコピペして使えるプロンプトの例がこちらです。

あなたは多言語Webサイト構築の専門家です。
以下の前提とルールに従って、日本語のHTMLページを英語版に変換してください。

【前提】
- 対象ファイル：［ここに対象のHTMLファイル名を入力 例 index.html］
- 出力先：/en/ ディレクトリに同名ファイルとして保存
- 業種・サービス：［ここに自社の業種・サービス内容を入力］

【翻訳ルール】
- 直訳ではなく、英語圏のビジネス読者に自然な表現にする
- 次の固有名詞は翻訳せずそのまま残す：［社名・商品名・ブランド名を入力］
- 専門用語は一般読者にも伝わる平易な英語にする
- トーンは信頼感のあるフォーマルなビジネス英語

【コード側のルール】
- 本文テキストのみ翻訳し、HTMLタグ構造は変更しない
- <html lang="ja"> は <html lang="en"> に変更する
- 文字量が増えてレイアウトが崩れそうな箇所はコメントで指摘する

【出力】
- 変換後のHTML全文を出力
- 翻訳に迷った箇所は末尾に「確認してほしい点」として箇条書きで列挙

このプロンプトのポイントは、最後に「確認してほしい点」を出させているところです。AIが自信のない箇所を自己申告してくれるので、自分でチェックすべき場所が一目で分かります。うまくいかないときは、翻訳ルールの具体例を1つ追加する（「この単語はこう訳す」というお手本を入れる）と精度が上がります。

ステップ3。言語切り替えUIを実装する

次に、訪問者が言語を切り替えられるボタンを設置します。Cursorに「ヘッダー右上に、日本語と英語を切り替えるリンクを設置して。国旗アイコンは使わず、JapaneseとEnglishという言語名で表示して」と指示すれば実装できます。

言語切り替えに国旗アイコンを使うのは避けましょう。たとえば英語はアメリカ・イギリス・オーストラリアなど多くの国で使われるため、国旗で表すと「自分の国向けではない」と誤解されます。必ず「English」「日本語」のように言語名で表示してください。

ステップ4。多言語SEOのタグを設定する

多言語SEOで最も重要なのが、hreflangタグの設定です。hreflangタグとは、「このページの日本語版はこちら、英語版はこちら」と検索エンジンに教える目印のことです。Googleのヘルプ「ページのローカライズ版について Google に知らせる」は、設定が無くても別言語版を検出することはあるものの、言語や地域ごとのページを明示してあるほうが正確だと説明しています。Cursorに各言語ページのhreflangを生成させると、たとえば次のようなコードが各ページの<head>内に入ります。

<!-- 各ページの <head> 内に設置する。自サイトのURLに置き換える -->
<link rel="alternate" hreflang="ja" href="https://example.com/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<!-- どの言語にも当てはまらない人向けの既定ページを指定する -->
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

あわせて、検索エンジンにページ一覧を伝えるサイトマップにも各言語ページを含めるよう指示します。「英語ページもサイトマップに追加して」と頼めば対応してくれます。

ステップ5。公開前にチェックして反映する

最後に公開前チェックです。AIが作ったものをそのまま出すのは禁物です。次の初動チェックリストで確認してから公開しましょう。

• 翻訳の自然さ：可能ならネイティブか英語が得意な人に1度通し読みしてもらう
• レイアウト崩れ：文字量が増える英語でボタンやメニューがはみ出していないか
• リンク切れ：言語切り替えボタンが正しいURLに飛ぶか
• hreflang：日本語版・英語版が相互に正しく指定されているか
• 画像内の文字：画像に埋め込まれた日本語が翻訳漏れになっていないか

お問い合わせフォームも多言語化する場合は、Cursorでお問い合わせフォームを自作する手順とあわせて進めると、海外からの問い合わせ窓口まで一気に用意できます。

どんな成果が出るのか。時間とコストの変化

Cursorで多言語化に取り組むと、最も大きく変わるのは「展開スピード」です。翻訳の発注と制作会社とのやり取りを待つ時間が減り、公開までの期間を短くできます（どれだけ短くなるかはページ数と確認の体制で変わります）。理由は、翻訳・コーディング・SEO設定という別々だった作業を、Cursorが対話の中で一気通貫で処理するからです。

進め方としては、いきなり完璧を狙わず「英語1言語・主要ページだけ」から小さく始めるのがおすすめです。トップページ・サービス紹介・会社概要・問い合わせの4ページだけ先に英語化し、海外からの反応を見てから言語やページを広げます。この進め方なら、最初の公開までの心理的なハードルも、やり直しのリスクも小さく抑えられます。

コスト面では、外注の翻訳費やコーディング費を圧縮できるのが利点です。一方で、品質を担保するためのネイティブチェックには一定の費用や工数が残ります。「AIで初稿を一気に作り、人は仕上げの確認に集中する」という形にすると、品質を落とさずに全体コストを下げられます。これは機械翻訳の訳文を翻訳者が編集して仕上げるMTPE（機械翻訳の事後編集）という進め方で、翻訳会社もサービスとして提供しています。

規模が大きい場合や継続的な運用が前提なら、サイト更新を検知して自動翻訳する専用サービスを併用する選択肢もあります。たとえばWOVN.io（ウェブサイトを多言語化）は、既存のサイトに後付けで導入でき、元の言語の更新や追加を自動で検知して翻訳できるので、運用負荷を下げたい企業に向いています。ただし、HTMLに1行のスクリプトを追加する導入方式（スクリプト方式）では、翻訳したページも元のページと同じURLになり、WOVNのヘルプは「翻訳言語で検索サイトに掲載されない」と説明しています。検索で見つけてもらいたい場合は、ヘルプの「スクリプト方式における動作概要」が案内しているプロキシ方式を確かめてください。 Cursorで内製するか、こうしたサービスを使うかは、更新頻度と社内体制で判断するとよいでしょう。AI翻訳の誤訳を減らす手順はDeepLとChatGPTで中国語の誤訳を減らす仕組み化の手順もあわせて参考にしてください。

よくある失敗と回避法。現場で本当に起きること

ここでは多言語化で起こりやすい失敗を3つ、「どんな状況で起きるか→どうなるか→どう防ぐか」のセットで紹介します。

失敗1。機械翻訳をそのまま公開してしまう

「AIの翻訳がきれいだったから」と、チェックなしで全ページを公開するケースです。これをやると、文脈に合わない誤訳や不自然な表現が残り、海外の読者に「信頼できない会社」という印象を与えます。さらに、Googleのスパムに関するポリシーは、ユーザーの役に立たないまま、検索順位の操作を主な目的として大量のページを作ることを「大量生成されたコンテンツの不正使用」として禁じています。翻訳した自社サイトでも、読者の役に立つ内容かを確認してから公開しましょう。

回避法。必ず人のチェックを通すこと。全文を直す必要はありません。固有名詞・専門用語・お金や契約に関わる重要文だけは、ネイティブか英語に強い人に確認してもらいましょう。専門用語は事前に「この単語はこう訳す」という辞書をプロンプトに渡しておくと、揺れを防げます。

失敗2。文字量の違いでレイアウトが崩れる

日本語を英語にすると、同じ内容でもテキストの長さは言語によって大きく変わります。英語やドイツ語のように、日本語より文字数が増える言語もあります。固定幅で作ったボタンや見出しは、文字が増えた瞬間にはみ出したり改行が崩れたりします。デザイン段階で多言語を想定していないと、公開後に「英語版だけ表示が壊れている」という事態になります。

防ぐには、最初から伸び縮みするレイアウトで作ることです。Cursorに「ボタンやメニューは固定幅にせず、CSSのflexboxで文字量に応じて伸縮するようにして」と指示しておけば、多言語でも崩れにくい構造になります。 アラビア語など右から左に読む言語に対応する予定があるなら、その旨も最初に伝えておきましょう。

失敗3。ブラウザ表示だけの翻訳でSEOに乗らない

これは最も見落とされがちな失敗です。ブラウザ上で表示テキストを差し替えるだけの簡易な翻訳方式（クライアントサイド翻訳）だと、各言語ページが独立したURLを持ちません。Googleは「多地域、多言語のサイトの管理」で、ユーザーの言語設定に応じて内容を動的に変える方法では、コンテンツのすべてのパターンを見つけてクロールするとは限らないと説明しています。そのため、せっかく英語化しても「海外から検索しても出てこない」状態になることがあります。多言語化したのにアクセスが増えない場合は、これが原因のことがあります。

回避法。各言語ページが /en/ のように個別のURLを持つ形で作ること。そのうえでhreflangタグを正しく設定すれば、Google検索が利用者の言語や地域に合うページを表示しやすくなります。Cursorで実装する場合は、この記事のステップ1とステップ4を必ず踏んでください。

使う側の落とし穴。AIに任せきれない現実の妥協点

ここまで「Cursorで自動化できる」と書いてきましたが、正直にお伝えすると、AIに任せきれない領域は確実に残ります。ここを理解しておくと、導入後の「思っていたのと違う」を防げます。

まず、翻訳の最終品質はAIだけでは保証できません。AIの訳は文法的には正しくても、業界のニュアンスや、その国の商習慣に合った言い回しまでは拾いきれないことがあります。BtoBで信頼が命の商材ほど、ここの差は大きく出ます。「AIで初稿を作り、仕上げは自社で確認する」という前提を持っておくのが現実的です。

次に、運用の継続が想像以上に重いという点です。多言語サイトは「作って終わり」ではありません。日本語サイトを更新するたびに、英語版も更新しないと情報がズレていきます。1言語増えるごとに更新の手間が増え、気づけば英語版だけ半年前の情報のまま、という事態になりがちです。Cursorで内製する場合も、「更新が発生したら英語版もセットで直す」という運用ルールを決めておかないと、結局は形骸化します。

セキュリティの観点も見落とせません。無料の翻訳ツールやサービスの中には、入力した内容が外部の学習データに使われる可能性があるものもあります。社外秘の情報や未公開のサービス内容を翻訳にかける場合は、データの二次利用がないことを確認できるツールを選ぶべきです。これは料金以前の、信頼に関わる判断です。

では、内製と外注のどちらがよいのか。ひとつの目安として、更新が月数回程度でページ数も限られるなら、Cursorでの内製が向いています。逆に、更新が頻繁で言語数も多く、専任の担当を置けないなら、自動翻訳サービスや専門家の伴走を検討したほうが、長い目で見て安く確実です。多言語自動翻訳サービスを提供するクロスランゲージのような専門ベンダーの存在を知っておくと、自社でやる範囲と任せる範囲を冷静に切り分けられます。 「全部自分でやる」か「全部任せる」かの二択で考えないことが、失敗しないコツです。

よくある質問

まずは1ページから、一緒に始めてみませんか

多言語のページも含めて、サイトのリニューアルを検討している方は、コレットラボのホームページ制作・LP制作をご覧ください。最初の打ち合わせで目的と必要なページを確認し、制作内容・日程・費用をご提案します。多言語対応をご希望の場合は初回のご相談で伺います。