Cursorで多言語サイトを自作｜翻訳とコード反映を自動化する手順
この記事の要点
- 多言語化は『指示→確認→公開』の3ステップに圧縮、数時間〜数日に短縮
- AIが下訳・コード反映・UI実装等を担い、人は固有名詞や表示を最終判断
- 英語1言語・サブディレクトリ型・主要4ページから小さく始め品質担保
「海外の問い合わせが来るようになったから、サイトを多言語化したい。でも翻訳会社に頼むと数十万円、制作会社に頼むとさらに時間がかかる」。こんな見積もりを前に止まっている方は多いはずです。
この記事では、AI搭載のコードエディタ「Cursor」を使って、翻訳・コード反映・SEO設定までを自分たちの手で進める具体的な手順を解説します。どこまでAIに任せられて、どこは人がやるべきかの線引きも、現場で支援してきた目線で正直にお伝えします。読み終わるころには、最初の一歩が具体的に見えているはずです。
Contents / 目次
結論。Cursorで多言語サイトは「指示・確認・公開」の3ステップに圧縮できる
結論から言うと、Cursorを使えば、従来「翻訳→デザイン調整→コーディング→テスト→公開」と数週間かかっていた多言語化を、「指示→確認→公開」の3ステップに圧縮できます。AIが翻訳テキストの埋め込み、言語切り替えUI、SEO用のタグ生成までまとめて面倒を見てくれるからです。
Cursorとは、AIとの対話でコードを書いたり直したりできるエディタのことです。かんたんに言うと、「日本語で指示すると、その通りにコードを書いて修正してくれる相棒」です。コードが読めなくても、やりたいことを言葉で伝えれば形になります。
大事なのは、AIに丸投げできる部分と、人が必ず確認すべき部分を最初に分けておくことです。ここを曖昧にすると、後で「翻訳が不自然」「海外から検索されない」といったやり直しが発生します。まずは全体像を表で押さえましょう。
| 工程 | Cursor（AI）に任せられる範囲 | 人がやるべき範囲 |
|---|---|---|
| 翻訳の下訳 | 全ページの初稿翻訳を一気に生成 | 固有名詞・専門用語・ニュアンスの最終確認 |
| コード反映 | 翻訳テキストをHTMLに埋め込み | 意図通り反映されたかの表示チェック |
| 言語切り替えUI | 切り替えボタンやメニューの実装 | 国旗ではなく言語名表示にする判断 |
| 多言語SEO | hreflangタグ・サイトマップの生成 | URL設計の方針決め・公開後の検証 |
| レイアウト調整 | 文字量に応じた伸縮CSSの提案 | 各言語での見た目の最終判断 |
表のとおり、AIは「作業」を担い、人は「判断」を担います。この役割分担さえ守れば、品質を落とさずにスピードだけを劇的に上げられます。なお、Cursorでの基本的なサイト修正の流れはCursorを「最強のWeb更新アシスタント」にする手順でも詳しく解説していますので、エディタ操作に不安がある方は先に目を通しておくと安心です。
具体的なやり方。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が各言語ページを正しく出し分けられません。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で初稿を一気に作り、人は仕上げの確認に集中する」という形にすると、品質を落とさずに全体コストを下げられます。これはAI翻訳と人力校正を組み合わせるMTPE（機械翻訳の事後編集）という考え方で、コストと品質のバランスに優れた現実解として広く使われています。
規模が大きい場合や継続的な運用が前提なら、サイト更新を検知して自動翻訳する専用サービスを併用する選択肢もあります。たとえばJavaScriptを1行挿入して既存サイトを多言語化するWOVN.io（ウェブサイトを多言語化）のようなソリューションは、運用負荷を下げたい企業に向いています。 Cursorで内製するか、こうしたサービスを使うかは、更新頻度と社内体制で判断するとよいでしょう。翻訳ワークフロー全体の設計は多言語広報のAI翻訳活用術もあわせて参考にしてください。
よくある失敗と回避法。現場で本当に起きること
多言語化でつまずくポイントは、ほぼ決まっています。ここでは現場で実際によく見かける失敗を3つ、「どんな状況で起きるか→どうなるか→どう防ぐか」のセットで紹介します。
失敗1。機械翻訳をそのまま公開してしまう
「AIの翻訳がきれいだったから」と、チェックなしで全ページを公開するケースです。これをやると、文脈に合わない誤訳や不自然な表現が残り、海外の読者に「信頼できない会社」という印象を与えます。さらに、人の手が一切入っていない大量の機械翻訳は、Googleのスパムに関するポリシーに抵触し、検索評価を得られないリスクもあります。
回避法。必ず人のチェックを通すこと。全文を直す必要はありません。固有名詞・専門用語・お金や契約に関わる重要文だけは、ネイティブか英語に強い人に確認してもらいましょう。専門用語は事前に「この単語はこう訳す」という辞書をプロンプトに渡しておくと、揺れを防げます。
失敗2。文字量の違いでレイアウトが崩れる
日本語を英語にすると、同じ内容でもテキストの長さは言語によって大きく変わります。英語やドイツ語のように、日本語より文字数が増える言語もあります。固定幅で作ったボタンや見出しは、文字が増えた瞬間にはみ出したり改行が崩れたりします。デザイン段階で多言語を想定していないと、公開後に「英語版だけ表示が壊れている」という事態になります。
防ぐには、最初から伸び縮みするレイアウトで作ることです。Cursorに「ボタンやメニューは固定幅にせず、CSSのflexboxで文字量に応じて伸縮するようにして」と指示しておけば、多言語でも崩れにくい構造になります。 アラビア語など右から左に読む言語に対応する予定があるなら、その旨も最初に伝えておきましょう。
失敗3。ブラウザ表示だけの翻訳でSEOに乗らない
これは最も見落とされがちな失敗です。ブラウザ上で表示テキストを差し替えるだけの簡易な翻訳方式（クライアントサイド翻訳）だと、各言語ページが独立したURLを持ちません。すると検索エンジンがそのページを認識できず、せっかく英語化しても「海外から検索しても出てこない」状態になります。多言語化したのにアクセスが増えない、という相談の多くはこれが原因です。
回避法。各言語ページが /en/ のように個別のURLを持つ形で作ること。そのうえでhreflangタグを正しく設定すれば、検索エンジンが言語別に正しく出し分けてくれます。Cursorで実装する場合は、この記事のステップ1とステップ4を必ず踏んでください。
使う側の落とし穴。AIに任せきれない現実の妥協点
ここまで「Cursorで自動化できる」と書いてきましたが、現場目線で正直にお伝えすると、AIに任せきれない領域は確実に残ります。ここを理解しておくと、導入後の「思っていたのと違う」を防げます。
まず、翻訳の最終品質はAIだけでは保証できません。AIの訳は文法的には正しくても、業界のニュアンスや、その国の商習慣に合った言い回しまでは拾いきれないことがあります。BtoBで信頼が命の商材ほど、ここの差は大きく出ます。「AIで8割、人で2割を仕上げる」という前提を持っておくのが現実的です。
次に、運用の継続が想像以上に重いという点です。多言語サイトは「作って終わり」ではありません。日本語サイトを更新するたびに、英語版も更新しないと情報がズレていきます。1言語増えるごとに更新の手間が増え、気づけば英語版だけ半年前の情報のまま、という事態になりがちです。Cursorで内製する場合も、「更新が発生したら英語版もセットで直す」という運用ルールを決めておかないと、結局は形骸化します。
セキュリティの観点も見落とせません。無料の翻訳ツールやサービスの中には、入力した内容が外部の学習データに使われる可能性があるものもあります。社外秘の情報や未公開のサービス内容を翻訳にかける場合は、データの二次利用がないことを確認できるツールを選ぶべきです。これは料金以前の、信頼に関わる判断です。
では、内製と外注のどちらがよいのか。ひとつの目安として、更新が月数回程度でページ数も限られるなら、Cursorでの内製が向いています。逆に、更新が頻繁で言語数も多く、専任の担当を置けないなら、自動翻訳サービスや専門家の伴走を検討したほうが、長い目で見て安く確実です。多言語自動翻訳サービスを提供するクロスランゲージのような専門ベンダーの存在を知っておくと、自社でやる範囲と任せる範囲を冷静に切り分けられます。 「全部自分でやる」か「全部任せる」かの二択で考えないことが、失敗しないコツです。
よくある質問
コードが全く読めなくてもCursorで多言語化できますか
主要ページの英語化であれば、コードが読めなくても進められます。やりたいことを日本語で指示すれば、Cursorがコードを書いてくれるからです。 ただし、公開前の表示確認や翻訳の最終チェックは人がやる必要があります。まずは1ページから試すのがおすすめです。
AI翻訳だけで公開してはいけないのはなぜですか
誤訳や不自然な表現が信頼を損なううえ、人の手が入っていない大量の機械翻訳は検索エンジンの評価を得にくいためです。全文でなくてよいので、固有名詞や重要な文だけはネイティブに確認してもらいましょう。AIで初稿、人で仕上げが基本です。
何言語から始めるのが現実的ですか
まずは英語1言語、主要4ページ程度から始めるのが現実的です。いきなり多言語に広げると更新の手間が言語数だけ増え、運用が回らなくなります。1言語で運用の型を作ってから、反応を見て広げるのが失敗しない進め方です。
多言語化したのにアクセスが増えないのはなぜですか
各言語ページが独立したURLを持っていないか、hreflangタグの設定が漏れている可能性が高いです。ブラウザ表示を差し替えるだけの翻訳方式だと検索エンジンに認識されません。/en/のような個別URLとhreflang設定をセットで見直してください。
まずは1ページから、一緒に始めてみませんか
ここまで読んで、自社でやり切れるか不安に感じた方もいるはずです。コレットラボのAI業務システム化支援では、AIで作る・プロに任せるのどちらにも合わせて、多言語サイトの内製化を伴走します。「まず英語1ページだけ試したい」「自社に合うやり方を整理したい」だけでも大丈夫です。AI業務システム化の詳細はこちらから、お気軽にご相談ください。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
