Shopifyの日本語テーマ完全ガイド｜翻訳・フォント・日本商習慣への対応

管理画面で言語を日本語に設定したのに、ストアを開くとボタンやラベルが英語のまま並んでいる。海外製のテーマを入れた直後によく見かける状態です。

Shopifyのテーマストアに、日本語テーマという区分はありません。あるのは、日本語のロケールファイルを持つテーマと持たないテーマの差だけです。本記事では前者を日本語テーマと呼びます。

日本語化の作業は、テーマに言語ファイルがあるかどうかを起点に、翻訳・フォント・日本向けの表記という3方向へ分かれます。どこから手を付けるかで、後から出る手戻りの量が変わります。まずは判定の手順から見ていきます。

1.日本語化の出発点はテーマに言語ファイルがあるかどうか

日本語化でつまずく原因の多くは、どの文言がどこに保存されているかが見えないまま、管理画面をあちこち触ってしまうことにあります。

1-1. テーマ単位で持たれる言語ファイルの構造

オンラインストアに並ぶ文言は、テーマのフォルダに置かれた言語ファイルから読み込まれています。テーマを入れ替えれば、この言語ファイルも丸ごと入れ替わります。日本語で動いていたストアが、テーマ変更の直後に英語へ戻る理由はここにあります。

テーマのコードを開くと、locales（言語ファイルを格納するフォルダ） という名前のフォルダがあります。中にはja.jsonやen.default.jsonといったファイルが、言語ごとに並びます。ファイル名にdefaultが付いたものが、そのテーマの既定言語です。

言語ファイルは2種類です。ja.jsonは、買い物客が見る画面の文言を持ちます。カートのボタン、在庫切れの表示、検索結果が0件だったときのメッセージ。

もう一方のja.schema.jsonは、テーマエディタに出てくる設定項目の名前を持ちます。編集する側だけが目にするラベルです。

この2つを混同すると、確認の方向がずれます。ストアの表側は日本語なのに、テーマエディタの設定名だけ英語というケース。逆に、編集画面は日本語で表示されるのに、公開ページのボタンが英語のままというケース。どちらも言語ファイルが片方しか用意されていない状態です。

テーマの日本語対応を確認するときは、どちらのファイルがあるのかまで見ておきます。表側だけを見て日本語対応と判断すると、テーマエディタを開いた段階で英語の設定名が並びます。なお、管理画面そのものの表示言語は、テーマとは無関係にアカウント側の設定で決まります。

1-2. 自分のテーマの日本語対応の確認手順

確認の方法は3つあります。設定を触らずに済む順に並べると、テーマストアの掲載ページ、コードエディタ、文言編集画面です。

導入前であれば、テーマストアの掲載ページに対応言語の一覧が載っています。すでに入れてしまった後なら、コードエディタからlocalesフォルダを開き、jaで始まるファイルがあるかを直接見ます。ここまでは表示にも設定にも影響しません。

確実なのは文言編集画面で中身まで見ることです。ファイルがあっても、翻訳されているのは一部のキーだけという状態があります。

一覧を開いて、日本語で埋まっている項目と英語のまま残っている項目の比率を見ます。全項目が英語であれば日本語ファイルはありません。ところどころ英語が混じるなら、翻訳が途中で止まっているテーマです。

この画面を日本語で見るには、日本語を既定言語にします。切り替えの前に、ひとつ確認しておく点があります。

日本語をすでに追加言語として登録し、翻訳を入れていた場合、日本語を既定言語に変えるとその翻訳は削除されます。該当するストアでは、変更前に「設定」＞「言語」から翻訳をエクスポートします。

日本語を追加したことがないストアであれば、この操作で消えるものはありません。新規構築のストアはこちらに当てはまります。

1-3. 言語ファイルがない場合は自力翻訳かテーマ変更かを決める

日本語ファイルがなくても、ストアは公開できます。ここで分かれるのは、翻訳を自分で抱えるか、テーマごと替えるかという二択です。翻訳アプリという選択肢もありますが、これは追加した言語に翻訳を当てるための道具です。日本語を既定言語として入力し直す用途には向きません。

自力翻訳は、文言編集画面から1項目ずつ日本語に置き換える作業です。項目数はテーマによって幅があります。買い物客が触れる画面をひととおり日本語にするだけでも、まとまった時間がかかります。公開ページを見ながら、どのタブのどの項目がこの英語に対応しているかを探す作業も発生します。

日本語ファイルを持つテーマへ乗り換えれば、翻訳作業そのものが消えます。代わりに、セクション構成とデザイン設定を組み直す時間が必要です。配置やフォント、色の指定を、新しいテーマの設定項目に合わせて入れ直すことになります。

分かれ目になるのは、次の3点です。

・公開予定日までに、翻訳と確認に充てられる日数があるか
・そのテーマでなければ実現できないデザインや機能があるか
・社内にテーマのコードを触れる人がいるか

公開までの日数が限られているのであれば、日本語ファイルを持つテーマへ移るほうが早く終わります。テーマの見た目を決め手に選んでいるなら、翻訳の手間を織り込んだうえで進める判断になります。

2.英語のまま残る文言は保存された場所ごとに直し方が変わる

日本語ファイルを持つテーマに切り替えても、英語が残る箇所は出てきます。原因は翻訳漏れではなく、その文言が別の場所に保存されているためです。この章では、英語を見つけたときに開く画面を3つに切り分けます。最後に、直した内容をテーマ移行で失わないための控え方を扱います。

2-1. Shopify側が用意する文言は言語設定だけで日本語になる

チェックアウトや通知メールの定型文は、テーマの言語ファイルとは別にShopify側が持っています。ストアの既定言語を日本語にしておけば、この部分は自動で日本語になります。テーマの翻訳作業の対象外です。

チェックアウト、Cookieバナー、プライバシーポリシーなどには、プロによる翻訳が33言語ぶん用意されています。日本語もこの中に含まれます。テーマを英語のまま使っていても、チェックアウトだけ日本語で表示されるのはこのためです。

ただしShop Payのチェックアウトでは事情が変わります。商標の扱いに関する規定があるため、書き換えても反映されないフィールドが存在します。

決済プロバイダの画面に遷移した先の表記は、Shopifyの管理下から外れます。コンビニ決済や後払いを導入している場合、その画面の言語は提供元の仕様に従います。

注文確認メールなどのテンプレートに自社で追記した文面は、追記した本人が日本語で書きます。編集先は「設定」＞「通知」です。

英語を見つけたら、まずその画面がShopifyの管理範囲にあるかを切り分けます。決済プロバイダ側であれば、テーマを何時間触っても変わりません。

2-2. テーマの既定文言は管理画面から書き換える

「カートに追加」「売り切れ」のようなテーマ由来の文言は、コードを開かずに書き換えられます。管理画面の「オンラインストア」から「テーマ」へ進みます。対象テーマの横のメニューで「デフォルトのテーマコンテンツを編集する」を選ぶと、文言の一覧が並びます。

一覧は「商品」「セクション」「ブログ」「お客様アカウント」といったカテゴリーのタブに分かれています。右端のメニューをクリックすると、隠れたタブも開きます。

タブの数が多いため、項目を絞り込む検索バーに、いま画面に出ている語句をそのまま入れるほうが早く着きます。編集しただけでは反映されません。保存を押して確定させます。

ここで加えた変更は、同じテーマの更新版に引き継がれます。Shopifyの公式ヘルプは、更新版へコピーされるカスタマイズを列挙しています。テーマ設定、ページレイアウト、セクション設定の変更と並んで、テーマコンテンツエディタによる文言変更が含まれます。

ここでいう変更は、テーマコンテンツエディタから書き換えた文言に限られます。この作業を理由にテーマ更新を避ける判断は不要です。コードエディタでファイルを直接書き換えた箇所は、同じ扱いにはなりません。

保存した内容はロケールファイルに書き込まれます。1つのロケールファイルに保存できる翻訳は最大3,400件です。この上限は言語ごとに個別で、全言語の合計ではありません。

超えると「Too many translation keys」というエラーが出て、その保存は反映されません。使わなくなった翻訳も削除するまで残るため、コードエディタから不要な項目を消して空きを作ります。

同じキーが複数のテンプレートで使われていることもあります。1か所直したら、公開ページ側で他の出現箇所も見ておくと、表記の揺れを残さずに済みます。

2-3. セクション設定に入力された英語はテーマエディタで直す

文言編集画面で検索しても見つからない英語があります。検索バーに打ち込んでも、該当なしと表示される。この場合、その英語は言語ファイルではなくセクションの設定値として保存されています。

テーマを入れた直後のストアには、デモ用の文章が入っています。トップページの見出し、ボタンのラベル、バナーの説明文、フッターの案内文。これらはテーマエディタで入力された値であり、翻訳の対象ではありません。入力欄の中身なので、入力し直す以外に方法はありません。

ほかに3種類あります。画像に文字が焼き込まれている場合は、画像そのものの差し替えが必要です。商品名や商品説明に入った英語は、商品データ側で直します。メタフィールド やメタオブジェクトに入れた値も、文言編集画面からは追えない場所にあります。

テーマエディタのプレビュー上で該当箇所をクリックすると、そのセクションの設定パネルが開きます。左側のツリービューから探すより、画面を直接クリックするほうが確実です。ヘッダーとフッターは全ページ共通、それ以外はテンプレート単位での確認になります。

英語が編集可能な入力欄の中にあるか、それ以外か。この線引きは、検索バーに打ち込んで該当なしと出た時点で付きます。見つからなかったこと自体が、保存場所を示す手がかりです。

2-4. 別のテーマへ乗り換える前に編集済み文言を控えておく

テーマの乗り換えを決めたら、公開作業に入る前にもう一段階あります。文言の編集内容はテーマに紐づいて保存されます。同じテーマの更新版であれば引き継がれますが、別のテーマへ切り替えると、積み上げた修正は一緒に移りません。

控え方はコードエディタからの書き出しです。localesフォルダを開き、日本語のファイルの中身をコピーしてテキストとして保管します。新しいテーマで同じ文言を入れ直すときの参照元になります。

新旧のテーマで項目のキーが完全に一致することはありません。同じ文言でも別の名前で管理されていたり、片方にしか存在しない項目があったりします。移行は自動的な流し込みにはなりません。新しいテーマの一覧を開きながら、英語が残っている項目を潰していく作業になります。

この作業はテーマを変えるたびに発生します。文言を誰が管理しているかを決めておくと、担当者が替わっても引き継ぎで止まりません。

3.日本語表示の崩れを防ぐには書体と組版設定の両方を見直す

文言がすべて日本語になっても、画面が読みづらいままというケースがあります。原因は翻訳ではなく、テーマが持つ書体の指定と数値設定にあります。書体を替えれば直るものと、数値を動かさないと直らないものが混ざっています。

3-1. テーマの書体指定が日本語の字形を左右する

テーマのフォント設定が欧文書体のままだと、日本語はその書体に含まれていません。閲覧者の端末側で代替の書体に置き換えられて表示されます。同じページをWindowsとMacで開くと、日本語部分の見え方が変わるのはこのためです。

置き換わった書体は、テーマが想定した太さや字面と一致しません。見出しに設定した細身の印象が失われ、欧文と和文で線の太さがそろわなくなります。英字だけデザインどおりで、日本語だけ素っ気なく見えるという差も生まれます。

フォントの扱いは2つの層に分かれます。テーマ設定にフォントの選択項目があるかどうかは、テーマ側の作りで決まります。その項目で選べる書体の中身は、Shopifyのフォントライブラリで決まります。

ライブラリのうち、日本語に使われるCJK(中国語・日本語・韓国語) のUnicode範囲を収録した書体は限られた数だけです。ライセンス上の理由でShopifyが収録できない書体もあります。

より広い文字範囲が必要な場合は、システムフォントを使うか、Noto Sans JPなどのウェブフォントをコードから読み込みます。

日本語のウェブフォントは、収録する文字数が多いぶんファイルが大きくなります。読み込むウェイトの数がそのまま表示速度に跳ね返るため、実際に使う太さだけに絞ります。

選べるウェイトが少ない書体では、見出しと本文の差を太さで付けられません。この場合は文字サイズと余白で差を作ります。

書体は、日本語の収録、必要なウェイトの有無、読み込み後の表示速度という3つの条件を満たすものを選びます。デザインの好みだけで決めると、公開後に差し替える事態を招きます。

3-2. 行間・字間・折り返しが欧文前提のまま残る

日本語は1文字あたりの画数が多く、同じ文字サイズでも面の密度が上がります。行の高さと文字間隔の初期値は、欧文の字形を想定して組まれています。そのままでは行と行が近づいて見えます。

書体を日本語対応に変えても、この詰まった印象は残ります。とくに長文の説明ページや商品説明で読みづらさが出ます。

もう一つの崩れは改行位置です。英数字が混ざった行では、単語が途中で切れます。逆に長い英字が1語として扱われ、不自然な空白が生まれる場合もあります。見出しでは、句読点や閉じ括弧が行頭に落ちる状態も起きます。文字数が少ない見出しほど、崩れが目立ちます。

行の高さや文字間隔の項目があるかは、テーマごとに変わります。テーマ設定に並ぶ項目は、そのテーマが持つ設定ファイルで定義されているためです。Shopify側で決まった一覧はありません。

設定に見当たらない場合でも、コードファイルを開く必要はありません。テーマエディタにはShopifyが用意したカスタムCSSの欄があり、テーマ単位とセクション単位でCSSを追記できます。折り返しの制御や英数字混在時の挙動は、こちらで調整します。

確認は実機で行います。パソコンの横幅では問題なく見えても、スマートフォンの幅では見出しの改行位置が変わります。日本語で最も文字数が多くなるページを1枚決めて、そこを基準に数値を決めます。

3-3. 大文字変換は日本語の文字に作用しない

CSSの大文字変換の指定は、大文字と小文字の区別を持つ文字にしか作用しません。日本語の仮名や漢字には大文字という概念がないため、指定しても変化しません。

海外製テーマでは、ボタン、ナビゲーション、セクション見出しに大文字変換が既定で入っています。この状態で日本語を入れると、日本語部分はそのまま、混在する英字だけが大文字になります。

「カートに追加」と「SALE」が並ぶ。「送料無料」と「NEW ARRIVAL」が同じ行に出る。文字の大きさがそろわない不統一が生まれます。

管理画面に入力した文字と、公開ページに出る文字が一致しません。「New arrival」と入力したのに「NEW ARRIVAL」と表示されます。そのため、文言編集画面を検索しても該当箇所が見つからないという回り道が起きます。

テーマ設定に文字の変換を切り替えるトグルがあれば解除できます。用意されていない場合は、該当する箇所のCSSで変換の指定を無効にします。全体で解除するか、日本語が入る箇所だけ解除するかは、英字の見せ方をどうしたいかで決まります。

確認箇所は絞り込めます。ボタン、グローバルナビゲーション、セクション見出し、商品ラベル。この4か所を英字混在の状態で見れば、大文字変換が入っているかどうかは判別できます。

4.日本のECに必要な表記は翻訳とは別の場所で用意する

ここまでは、テーマの中にある文言と設定の話です。国内で販売するうえで必要になる表記のうち、いくつかはテーマの外側に置かれています。翻訳を終えても埋まらない領域が残る理由はここにあります。

4-1. 住所欄と価格表示は設定で日本向けに直す

住所欄の並びや価格の見せ方は、翻訳ではなく設定と仕様で決まります。文言をすべて日本語にしても、この2つは初期値のまま残ります。

入力項目の扱いは「設定」＞「チェックアウト」の「お客様情報」で決めます。氏名は姓のみ必須にするか、姓名の両方を必須にするかを選べます。会社名、住所2行目、配送先の電話番号は、含めない・任意・必須から指定します。

国や地域によっては、区にあたる項目が追加で必須になります。この追加項目は配送先の国に応じて自動で表示され、変更はできません。

国ごとに入力項目を変えるには、チェックアウトの情報・配送・決済の各ページをカスタマイズするアプリが必要です。これは項目そのものに手を入れる範囲にあたり、Shopify Plusのストアに限られます。用意された項目の要否を切り替えるところまでは、プランを問わず設定画面で完結します。

フリガナの欄は、この設定で選べる項目に含まれていません。電話での連絡や配送伝票でフリガナが要る運用であれば、アプリか別の手段で取得します。

桁区切りと通貨記号の出し方は、「設定」＞「ストアの詳細」の通貨フォーマットで決まります。この設定が反映されるのはストアの基本通貨だけです。日本円は小数点以下を表示しない形式が既定で選ばれています。

国内では、消費者向けの価格表示は税込の総額で示すことが求められます。設定先は「設定」＞「税金と関税」で、「商品価格と配送料に売上税を含める」を選択します。あわせて商品ページ側で「この商品に課税する」を選択したままにします。

商品ページだけ税込で、カート内が税別という食い違いも起きます。設定後は実際の画面で両方を見比べます。

この領域は、テスト注文を1件通すと一度に見えます。商品ページからチェックアウトの完了まで進めば、並び順も価格の表示も画面に出ます。

公開後に気づいた場合、すでに注文が入っていれば、表示と実際の請求額の差をお客様ごとに説明することになります。設定の見直しは公開前の作業に組み込んでおきます。

4-2. 特定商取引法に沿って販売者情報とポリシーを掲載する

事業者名、所在地、連絡先といった情報は、テーマの機能ではありません。置き場所は「設定」＞「ポリシー」です。テーマを日本語化する作業とは接点がないため、抜けが起きやすい領域です。

返金、配送、プライバシー、利用規約といったポリシーも、同じ画面に入力欄が並びます。保存した内容は専用のURLを持つページとして公開され、チェックアウトのフッターには自動でリンクが表示されます。

ポリシー設定には「特定商取引法に基づく表記」の欄があります。日本でShopifyペイメントを利用する場合、この情報はページとしてではなく、このセクションに入力するよう公式ヘルプが案内しています。固定ページを作るのは、対応するポリシー欄がない法的情報を載せる場合です。

通信販売の広告で表示が求められる事項は、特定商取引法の第11条に定められています。ECストアで埋めることになるのは次の項目です。

・販売価格と送料（消費税を徴収する場合は税込の価格）
・販売価格と送料のほかに負担してもらう金銭があるときは、その内容と金額
・代金の支払時期と支払方法
・商品の引渡時期
・申込みの撤回や解除に関する事項（返品特約があるときはその内容）
・事業者の氏名または名称、住所、電話番号
・法人がウェブサイトで広告する場合は、代表者または通信販売業務の責任者の氏名

金額は具体的に書きます。送料を「送料実費」とだけ記した表示は認められません。梱包料や代金引換手数料が発生するなら、それも金額で示します。

名称は登記上のものを使います。通称や屋号、サイト名は認められません。住所は番地まで、電話番号は確実に連絡が取れるものを書きます。

申込期間を設ける場合や、ソフトウェアを扱う場合は、表示事項が追加されます。取り扱う商材ごとに自社の条件と照らし合わせます。

事業者名や住所、電話番号は、広告の冒頭部分から容易にたどり着ける形での表示が求められます。「特定商取引法に基づく表記」のように中身が判断できる表現でリンクを置けば、この条件を満たすと消費者庁は説明しています。

自動でリンクが付くのはチェックアウトのフッターだけです。オンラインストア側はフッターメニューに項目を追加し、公開ページから開けるところまで確認します。

この作業はテーマに依存しません。テーマを変更しても作り直しは発生しないため、着手する時期を選びません。テーマ選定と並行して進められる数少ない領域です。

4-3. 最終確認画面の表示義務はチェックアウト設定で対応する

注文を確定する前に、購入内容と申込の条件を確認できる画面を用意することが国内では求められます。この対応先はテーマではなくチェックアウト側です。テーマエディタからは触れない領域である点が、ほかの作業と異なります。

最終確認の画面で示す内容は、商品と数量、支払金額と送料、支払時期と方法、引渡時期、返品や解約の条件に関する案内です。

定期購入を扱う場合は、次回以降の請求の周期と金額、解約の方法についての表示が別途要ります。

サブスクリプションの開示に関する文言も、テーマコンテンツエディタの「チェックアウトとシステム」に置かれています。ただしShopify Plus以外のプランでは、定期購入を含む注文のチェックアウトに出る一部のテキストを編集・削除できません。

確定ボタンの文言や確認画面の表記は、テーマの文言編集画面にある「チェックアウトとシステム」のカテゴリーから変更できます。項目の追加や同意チェックの設置になると、チェックアウトの拡張機能やアプリを使う範囲に入ります。

標準のチェックアウトのカスタマイズは、Basicプラン以上であれば全ページで使えます。高度なカスタマイズはShopify Plusのプランに限られます。どの機能が高度に分類されるかは公式の一覧で確認します。

チェックアウトは編集の自由度が最も低い領域です。公開日を決める段階で、必要な表記が現在のプランで出せるかを先に確かめます。出せない項目があれば、プラン変更かアプリ導入の判断がそこで発生します。

5.まとめ

日本語化は4つの作業に分かれます。着手順は、テーマの言語ファイルの判定、文言の修正、書体と組版の調整、日本固有の表記の用意です。

判定を最初に置くのは、その結果でテーマを使い続けるかどうかが決まるためです。判定を飛ばして文言を直し始めると、後からテーマを変更したときに作業が無駄になります。

書体と組版の調整は、文言がすべて日本語になった状態で行います。日本固有の表記だけはテーマの外側にあるため、どの段階からでも着手できます。公開日が近い案件では、ここから先に手を付ける判断もあります。