コンテンツにスキップ
IGNITE Webflow更新マニュアル

Locale翻訳の全体像

Locale翻訳の全体像

Webflowの Localization は、1つのWebflowサイトの中で複数言語・複数地域向けのページを管理する機能です。IGNITEで多言語サイトを制作している場合、英語ページや日本語ページは、この Locale 機能を使って翻訳・修正していることがあります。

このセクションでは、「Localeはどう追加するのか」「翻訳はどこから入れるのか」「CMS記事はどう翻訳するのか」「公開サイトへどう反映するのか」「SEOや言語切り替えは何を確認するのか」を順番に説明します。 実画面例: Booostのような多言語サイトでは、表示中の言語や公開状態を確認しながら翻訳を扱います。

注意: Locale設定、公開設定、URL構造、SEOに関わる作業は影響範囲が大きいです。既存サイトで新しい言語を追加したい場合や、公開中の言語URLを変えたい場合は、自己判断で進めずIGNITEへ相談してください。

Localeとは

Localeは、サイトの言語や地域を表す設定です。例えば、日本語をPrimary locale、英語をSecondary localeとして管理できます。

項目意味
Language日本語、英語などの言語
Country日本、米国、英国などの地域。必要な場合だけ設定
Display name言語切り替えに表示する名前
Subdirectory/en や /ja など、URLに使う言語パス
Display image言語切り替えに使う旗やアイコン
Publishing statusSecondary localeを公開するかどうか

Primary localeはサイトの基準になる言語です。最初に作成したLocaleがPrimary localeになり、あとからSecondary localeをPrimary localeへ変更することはできません。

翻訳できる主な場所

対象例確認ポイント
静的ページトップページ、会社概要、サービスページの見出しや本文文章、ボタン、リンク、画像、altテキスト
CMSブログ、お知らせ、導入事例タイトル、本文、概要、カテゴリー、画像alt
SEOページタイトル、meta description、OGP、Slug検索結果・SNS共有で自然に見えるか
Componentsヘッダー、フッター、CTAなど共通パーツ全ページに影響するため慎重に確認

読む順番

  1. Locale翻訳の基本手順
  2. 新しいLocaleを追加する時の流れ
  3. 静的ページをLocaleごとに翻訳する
  4. CMS記事をLocaleごとに翻訳する
  5. LocaleごとのSEO・OGP確認
  6. Locale翻訳を公開サイトに反映する方法
  7. Locale公開前チェックリスト

基本方針

  • 機械翻訳は下書きとして使い、公開前に人の目で確認する
  • 固有名詞、サービス名、会社名、問い合わせ導線は勝手に訳されていないか確認する
  • ボタンや見出しは、翻訳後に長くなりやすいため表示崩れを確認する
  • CMS記事は一覧ページと詳細ページの両方を確認する
  • SEO項目とOGPもLocaleごとに確認する

キャプチャー方針

Locale機能は画面を見た方が理解しやすいため、この章ではBOOSTサイトを使ってキャプチャーを多めに入れる前提で構成します。後から撮影する時は、以下の指示に沿って画面を用意してください。

同じIDのキャプチャーは、複数ページで使い回して問題ありません。例えばE-21とE-22は「公開反映ページ」と「公開前チェックリスト」の両方に同じ画像を配置する想定です。

キャプチャー指示: 個人情報、未公開記事、顧客名、社内コメント、分析数値、問い合わせ内容が映る場合は、撮影前に別画面へ切り替えるか、公開してよいテストデータに差し替えてください。

ID入れる場所撮影する画面撮影指示
E-01Locale翻訳の全体像Designer上部のLocale selectorBOOSTサイトをDesignerで開き、上部バーにLocale selectorが見える状態で撮影
E-02Locale翻訳の全体像Settings panel > Localization左側パネルからLocalization設定を開き、Primary localeとSecondary localeの関係が分かる状態で撮影
E-03新しいLocaleを追加する時の流れLocale一覧既存Localeの一覧、Display name、Subdirectory、Publishing statusが分かる状態で撮影
E-04新しいLocaleを追加する時の流れAdd localeの入口新しいLocaleを追加するボタンまたは入力エリアが見える状態で撮影
E-05新しいLocaleを追加する時の流れLanguage / Country入力LanguageとCountryを選ぶ画面を撮影。実運用では変更確定前の状態で止める
E-06新しいLocaleを追加する時の流れSubdirectory入力/en などURLに関わる項目が見える状態で撮影。既存URLと衝突しない注意書きとセットで使う
E-07新しいLocaleを追加する時の流れPublishing statusEnable publishing to the subdirectoryのオン・オフが分かる状態で撮影
E-08Locale翻訳の基本手順Locale selectorを開いた状態編集対象Localeを選ぶ直前の画面を撮影
E-09Locale翻訳の基本手順Secondary localeのキャンバス英語などSecondary localeを選択した後、ページが表示されている状態で撮影
E-10静的ページ翻訳テキスト要素を選択見出しや本文を選択し、翻訳対象のテキストが分かる状態で撮影
E-11静的ページ翻訳機械翻訳の操作Translateまたは翻訳候補を使う画面を撮影
E-12静的ページ翻訳翻訳後の表示確認翻訳後にボタンや見出しがはみ出していない状態を撮影
E-13CMS記事翻訳CMS Collection一覧対象Collectionと記事一覧が分かる状態で撮影
E-14CMS記事翻訳CMS itemのLocale切り替えCMS item内で対象Localeを選んでいる状態を撮影
E-15CMS記事翻訳Translate all fieldsCMS itemの複数フィールド翻訳操作が分かる状態で撮影
E-16CMS記事翻訳Rich Text本文見出し、本文、リンク、画像が入った本文編集画面を撮影
E-17SEO・OGP確認Page settingsのSEO欄対象LocaleのPage titleとMeta descriptionが見える状態で撮影
E-18SEO・OGP確認OGP設定OGP title、description、imageが見える状態で撮影
E-19公開反映Publish modal公開対象のドメイン・Localeを確認している状態で撮影
E-20公開反映公開後のLocale URL/en など実際の公開URLをブラウザで開き、言語が切り替わっている状態で撮影
E-21公開前チェックLocale switcher公開サイト上の言語切り替えUIを開いた状態で撮影

参考リンク