海外マーケティング

Shutto翻訳の導入方法を図解!JavaScriptタグ設置から公開までの全ステップ

読了時間: 約 18.18分

Leap 編集部
Leap 編集部
海外ビジネスのエキスパートチーム
Shutto翻訳の導入方法を図解!JavaScriptタグ設置から公開までの全ステップ

【1分で解説!】Shutto翻訳 導入の全体像と本記事の使い方

Webサイトを多言語化したい、でもゼロから翻訳ページを作るのはコストも時間もかかりすぎる——そうした課題を持つ担当者に支持されているのが「Shutto翻訳」です。e-365株式会社(旧イー・エージェンシー)が提供するこのSaaS型多言語化ツールは、headタグへのJavaScript1行の設置だけでサイト全体を最短3分で多言語対応できる仕組みになっています。 本記事では、エンジニアやWeb担当者が実際に導入作業を進める際に必要となる情報を、一箇所に集約した実装ガイドとして構成しています。具体的には、①アカウント登録からダッシュボードへのURL登録・導入タグ設置という基本3ステップ、②静的サイト・WordPress・Shopify・カラーミーショップ・futureshopといった環境別の設置手順、③Googleタグマネージャー経由での設置方法と注意点、④個人情報・機密情報を守るための翻訳除外設定、⑤本番公開前の動作確認ポイント——の5点を順に解説します。 「Shutto翻訳 導入」を検討中の方も、すでに契約済みでタグ設置に詰まっている方も、手順をそのままなぞるだけで公開まで到達できる構成にしていますので、ぜひ最後まで読み進めてください。

Shutto翻訳とは何か——導入前に押さえておきたい基礎知識

Shutto翻訳は、WebサイトのHTMLのheadタグにJavaScriptタグ(導入タグ)を1行挿入するだけで、サイト全体をAIによる自動翻訳で多言語化できるツールです。対応言語は100言語以上にのぼり、英語・中国語(簡体字・繁体字)・韓国語・タイ語・ベトナム語・インドネシア語など、東南アジア・東アジア・アメリカ向けに必要な言語をほぼ網羅しています。 仕組みのポイントは「タグ方式」にあります。既存サイトのソースコードに最小限の変更を加えるだけで動作するため、CMSの種類や静的・動的の別を問わず広く適用できます。ブログ、ECサイト、コーポレートサイト、会員向けサイト、フォームなど、HTMLが出力されるあらゆるページが翻訳対象になります。 自動翻訳に加えて、管理画面から翻訳文をセルフ編集する機能、固有名詞の誤訳を防ぐ辞書登録機能、言語切り替えバーのデザインカスタマイズ機能なども充実しています。さらに、海外検索エンジン対応機能を使えば、翻訳後のページを海外のGoogleなどにインデックスさせる静的ページの自動生成も可能です。 料金は2026年3月改定後のプラン体系で、エントリープランが8,800円(税込)/月(100ページ、50万文字/月)から。初期費用は不要で、30日間の無料トライアルが用意されています。

導入実績の一例:株式会社NTTデータ イントラマート

企業向けITプラットフォームを提供するNTTデータ イントラマートは、100万文字を超える大規模ページの多言語化をShutto翻訳で実現し、従来の翻訳コストを約10分の1に削減しています。同社が導入を決めたポイントとして、「翻訳精度の高さ」「直感的な管理画面」「ITリテラシーが低い担当者でもセルフ翻訳が可能な操作性」「コストパフォーマンスの良さ」を挙げており、大規模サイト運営における多言語化の現実的な解として評価されています。

導入の基本3ステップ——アカウント登録からタグ設置・公開まで

Shutto翻訳の導入フローは大きく3つのステップに整理されます。以下の順に進めることで、余計なやり直しを防ぐことができます。

STEP 1:アカウント登録とダッシュボードへのURL登録

まず、Shutto翻訳の公式サイト(https://www.submit.ne.jp/shutto-translation)から無料トライアル登録を行います。メールアドレスと基本情報を入力してアカウントを作成すると、ダッシュボードへのアクセスが可能になります。 ダッシュボードにログインしたら、翻訳対象としたいページのURLを登録します。URLはCSVで一括登録することも可能なため、ECサイトのように商品ページが多数ある場合でも効率的に設定できます。URLを登録すると自動でページが読み込まれ、翻訳対象テキストが抽出されます。この段階で翻訳言語の選択や、自動翻訳公開の有効・無効の設定も行います。

STEP 2:導入タグ(JavaScriptタグ)の取得とheadタグへの設置

ダッシュボード内の「サイト設定」メニューから「導入タグ」をコピーします。このタグは各アカウントに固有のコードで、以下のような形式になっています。 <script src="https://xxxxxxxx.shutto-translation.com/st.js"></script> このタグを、Webサイトの全ページのheadタグ内に挿入します。設置にあたっては以下の点に注意してください。

  • タグはtitleタグやcanonicalタグよりも後ろ(下部)に設置する
  • 複数アカウントを持っている場合でも、1サイトに対して使用する導入タグは必ず1つだけにする(複数タグの重複設置は予期せぬ不具合の原因になる)
  • headタグ内に設置できない場合は、bodyタグの開始直後(上部)に設置する
  • デバイスごとにURLやソースコードが異なるサイト(PC用・スマートフォン用でHTMLが分かれているなど)では、全デバイスのソースコードに設置する

担当者ご自身でサイトを管理していない場合は、制作会社や開発ベンダーに上記のコードと注意点を伝えて作業を依頼してください。

STEP 3:翻訳内容の公開と言語切り替えバーの確認

「自動翻訳公開:無効」の設定にしている場合は、ダッシュボードから公開操作を行う必要があります。ダッシュボードのページ一覧から対象ページを選択し、「翻訳を公開」をクリックすることで一括公開が可能です。 公開後は、言語切り替えバーの設定を確認します。「表示しない」になっている場合は「言語切り替えバーを表示する」にチェックを入れ、表示位置と表示言語を設定します。また、「初回表示言語」の設定も確認しておくことが重要です。サイト訪問者が初めてアクセスした際にどの言語で表示されるかを制御できます。 最後に実際のWebサイトにアクセスし、言語切り替えバーが正しく表示されること、翻訳後の表示が問題ないことを確認すれば公開完了です。

環境別の設置手順——WordPress・Shopify・カラーミーショップ・futureshop

利用しているCMSやECプラットフォームによって、導入タグの設置方法は異なります。それぞれの代表的な環境での設置手順を確認しておきましょう。

静的サイト・HTMLサイトの場合

HTMLを直接編集できる環境では、すべてのページの<head>タグ内に導入タグを追加します。共通ヘッダーファイルが存在する場合は、そのファイルを1か所編集するだけで全ページに反映させることができます。

WordPressサイトの場合

WordPressでは、テーマのheader.phpファイルを編集して</head>タグの直前に導入タグを挿入するのが標準的な方法です。テーマを直接編集する場合は、テーマ更新時に設定が消えるリスクがあるため、子テーマを利用することを推奨します。「Insert Headers and Footers」などのプラグインを使えば、コード編集なしにheadタグへのスクリプト追加が可能です。

カラーミーショップの場合

カラーミーショップでは、2026年2月よりアプリストアからShutto翻訳アプリを追加するだけで導入できるようになりました。アプリストアで「shutto翻訳」を検索し、アプリを追加するとShutto翻訳のアカウント登録に進みます。HTMLへの直接設置が不要になり、より簡単に多言語化を開始できます。30日間の無料トライアル後、本契約を希望する場合はShutto翻訳管理画面から手続きします。 カラーミーショップの管理画面でHTMLを直接編集する従来方式でも設置可能です。その場合は管理画面の「デザイン」→「テンプレート編集」から共通HTMLを開き、<head>タグ内に導入タグを挿入します。

futureshop(フューチャーショップ)の場合

futureshopはShutto翻訳との公式提携を結んでおり、専用の申込みフォームから申し込むと3営業日以内に無料トライアルアカウントが発行されます。futureshopの管理画面でHTMLテンプレートを編集し、headタグ内に導入タグを挿入します。「コマースクリエーター」を使用している場合と通常のfutureshopでは設置箇所が異なるため、公式マニュアルページ(https://www.submit.ne.jp/shutto-translation/hc/manual/futureshop)を確認することを推奨します。

Shopifyの場合

Shopifyでは、テーマエディタからtheme.liquidファイルを開き、</head>タグの直前に導入タグを追加します。Shopifyのテーマ構造上、theme.liquidは全ページの共通テンプレートになっているため、1か所の編集でサイト全体に適用されます。

Googleタグマネージャー(GTM)経由での設置と注意点

Googleタグマネージャーを使ってShutto翻訳の導入タグを管理することも可能です。GTMを利用している場合は、HTMLを直接編集せずにタグ管理ができるため、開発リソースをかけずに担当者が自律的に設定・変更できるメリットがあります。 GTMを使った設置手順は以下のとおりです。

  1. GTMのコンテナにアクセスし、「タグ」→「新規」を選択
  2. タグの種類として「カスタムHTML」を選び、Shutto翻訳の導入タグのコードを貼り付ける
  3. トリガーに「All Pages(すべてのページ)」を設定
  4. タグを保存し、プレビューモードで動作確認してから公開する

ただし、GTM経由での設置には重要な注意点があります。一部のユーザーが使用するAdblock(広告ブロッカー)はGTM自体をブロックすることがあります。GTM経由でのみタグを設置している場合、Adblockが有効なユーザーの環境ではShutto翻訳が機能しなくなります。Adblockによる影響を最小化したい場合は、GTM経由と直接headタグへの設置を併用するか、直接設置を優先することを検討してください。 また、GTMのトリガー設定を誤ると特定のページにのみタグが発火するケースがあります。全ページへの適用を意図している場合は、必ずトリガーが「All Pages」になっているかを確認してください。公式マニュアル(https://www.submit.ne.jp/shutto-translation/hc/manual/googletagmanager)でも詳細な設定方法が解説されています。

翻訳除外設定——個人情報・機密情報を守るために必ずやること

Shutto翻訳を導入する際に見落としがちで、かつ重要度が高い設定が「翻訳除外設定」です。サイト上で扱う情報の中には、翻訳ツールを通すべきでない情報が含まれていることがあります。 翻訳除外設定が必要となる代表的な箇所は以下のとおりです。

  • 氏名・住所・電話番号・メールアドレスなどの個人情報が表示されるページや部分
  • 会員登録フォーム・注文フォームなど、ユーザーが個人情報を入力するフォーム
  • 契約書・見積書・請求書などの機密性の高いビジネス文書
  • 商品の型番・価格・在庫数など、言語変換が誤訳リスクを生む数値情報

除外設定の方法は2通りあります。1つ目は、除外したい箇所のHTMLに専用の属性を付与する方法です。除外したいHTML要素にtranslate="no"属性またはShutto翻訳の専用クラス名を追加することで、その要素内のテキストは翻訳されなくなります。2つ目は、ダッシュボードから翻訳対象ページの設定を変更し、特定のページ自体を翻訳対象から除外する方法です。 Shutto翻訳の公式マニュアルでも、個人情報が含まれる箇所については「翻訳除外設定もしくは翻訳対象ページから外すことを推奨する」と明記されています。GDPRや各国個人情報保護法の観点からも、エンジニア・Web担当者として確認を怠らないようにしましょう。 詳細な設定方法は公式マニュアルページ(https://www.submit.ne.jp/shutto-translation/hc/manual/exclusion_setting)を参照してください。

本番公開前の動作確認チェックリスト

タグ設置と翻訳設定が完了したら、本番公開前に必ず以下の項目を確認してください。このチェックを省いたまま公開すると、ユーザーが翻訳後のページで誤った情報を見てしまうリスクがあります。

表示確認

  • 言語切り替えバーがすべてのページで正しく表示されているか
  • 目標とする全言語(英語・中国語・韓国語など)への切り替えが正常に動作するか
  • PC・タブレット・スマートフォンの各デバイスで翻訳表示が崩れていないか(デバイスプレビュー機能を活用する)

翻訳品質確認

  • 自動翻訳の結果が大きく誤っているテキストがないか(特に商品説明・CTAボタン・ナビゲーション)
  • 会社名・商品名・地名などの固有名詞が正しく表示されているか(辞書登録の適用確認)
  • 翻訳によってレイアウトが崩れているページはないか(コンテンツ編集機能でCSSを調整)

除外設定確認

  • 個人情報フォームが翻訳対象から除外されているか
  • 翻訳除外設定を施した箇所が実際に翻訳されていないか

機能確認

  • 自動翻訳公開設定の状態(有効・無効)が意図した通りになっているか
  • 初回表示言語の設定が意図した言語になっているか
  • Googleタグマネージャー経由で設置した場合、全ページでタグが発火しているか(GTMのプレビューモードで確認)

チェックリストを使って問題が見つかった場合は、ダッシュボードのセルフ翻訳機能でテキストを修正し、再公開します。機能の詳細確認は公式マニュアルトップ(https://www.submit.ne.jp/shutto-translation/hc/manual)からカテゴリ別に参照できます。

よくある質問(FAQ)

Q1. headタグに設置できるか分からない。bodyタグへの設置でも機能しますか? headタグ内への設置が推奨ですが、何らかの理由でheadタグ内に設置できない場合は、bodyタグの開始直後(最上部)に設置することで動作します。ページ読み込みのタイミングでタグが読み込まれることが条件なので、bodyタグの末尾への設置は避けてください。また、headタグ内に設置する場合はtitleタグやcanonicalタグよりも後ろに配置することが必要です。

Q2. WordPressで設置後、テーマを更新したらタグが消えてしまいました。どうすればよいですか? WordPressのテーマを直接編集していた場合、テーマのアップデートで上書きされて設定が消えることがあります。これを防ぐには、子テーマを作成してそちらにタグを設置するか、「Insert Headers and Footers」などのプラグインを利用してください。プラグイン経由での設置であればテーマ更新の影響を受けません。Googleタグマネージャーで一元管理する方法も有効ですが、Adblockの影響を考慮した上で選択してください。

Q3. ECサイトで商品ページが数千ページあります。すべてのページをダッシュボードに登録する必要がありますか? Shutto翻訳には「自動ページ登録機能」があります。導入タグをサイトに設置した状態で自動ページ登録をオンにすると、サイト訪問者がアクセスしたページが自動的にダッシュボードに登録されます。また、CSVによる一括登録機能も用意されており、商品ページのURLリストをCSV形式で用意すれば一度にまとめて登録可能です。数千ページのECサイトであっても、手動での個別登録は不要です。

まとめ——Shutto翻訳の導入で、海外への扉を確実に開く

Shutto翻訳の導入は、JavaScriptタグ1行の設置から始まります。アカウント登録・URL登録・タグ設置・公開という3ステップの基本フローを踏まえ、利用環境に合わせた設置方法を選択し、翻訳除外設定と本番確認を行えば、既存のWebサイトを最短で多言語対応サイトへと変えることができます。 NTTデータ イントラマートのように100万文字規模の多言語化も10分の1のコストで実現できるケースがある一方、群馬県みどり市役所のように自治体の観光サイトが翻訳業務を自動化して業務量を大幅削減したケースもあります。多言語化の恩恵は業種や規模を問いません。 一方で、グローバルな顧客にサイトを届けるだけで終わらせず、届けた先で「信頼される」コンテンツになっているかどうかが、次の段階の課題として浮かび上がります。ページが翻訳されていても、現地ユーザーの関心や価値観に合っていなければ、問い合わせや購買にはつながりません。 株式会社Leapでは、Shutto翻訳のような翻訳ツールの活用に加えて、現地市場に最適化した多言語ページの新規制作・ローカライズ支援を提供しています。「翻訳ではなく、現地向けに作り直す」というアプローチにご関心をお持ちの方は、ぜひLeapのブログや導入事例もあわせてご覧ください。

参考資料

海外展開を検討されている企業の担当者・経営者の方に向けて、Leapでは多言語Webマーケティングに関する情報を継続的に発信しています。各国の市場動向から多言語ECの運営ノウハウ、越境販売の実務まで、現場で使える情報をお届けしていますので、ぜひ他の記事もご覧ください。

この記事をシェアする

Leap website builder

チャットだけで、グローバル水準のサイトを。

AIがサイトを作って、最適化して、グローバルに届ける

ECサイト・ウェブサイト・LPの作成から多言語展開・AI自動最適化まで、すべてAIチャットだけで完結。あなたは話しかけるだけ。

リンクをコピーしました
Leap

Webサイト生成
AIエージェント

Leap アプリ画面
無料ではじめる →
Leap 無料ではじめる