Magentoで言語スイッチャーをセットアップする方法

 Magentoの夏の終わりのセール、期間限定オファー
目次

Magentoに言語スイッチャーを設定することは必須です。この機能は、国際的なユーザーをターゲットとするウェブサイトにとって非常に重要です。現在の市場では、言語を簡単に切り替えられる機能が切実に求められています。

最初はプロセスが複雑に思えるかもしれませんが、このガイドでは、 Magento ウェブサイトに言語スイッチャーを効率的かつ効果的に設定するための手順を詳しく説明します。これらの手順に従うことで、この便利な機能をスムーズに実装し、多様で多言語のユーザー層へのサイト対応力を高めることができます。.

Magentoに言語スイッチャーを設定する必要があるのはなぜですか?

 Magento コマースプラットフォームツールのイラスト

Magentoに言語スイッチャーを設定すべき主な理由は 4 つあります。.

  1. ユーザーエクスペリエンスの向上:言語切り替え機能により、訪問者は好みの言語でコンテンツにアクセスできるため、ウェブサイトへの理解とエンゲージメントが向上します。例えば、スペイン語を話す顧客が英語ベースのMagentoストアを訪問した場合、簡単にスペイン語に切り替えることができるため、商品の閲覧、説明の閲覧、購入手続きがよりスムーズになります。
  2. 市場リーチの拡大:複数の言語を提供することで、世界中の顧客をターゲットにし、新規市場への参入が可能になり、顧客基盤と売上の拡大が期待できます。例えば、米国のオンライン衣料品ストアは、英語、フランス語、ドイツ語の言語切り替え機能を導入しています。これにより、個別のウェブサイトを作成することなく、カナダやその他のヨーロッパ諸国の顧客に効果的に商品を販売できます。
  3. SEOパフォーマンスの向上:適切に実装された言語スイッチャーは、多言語SEO対策を強化し、様々な言語や地域での検索結果におけるサイトの露出度を高めます。例えば、 Magentoベースの家電量販店では、英語と日本語の両方でコンテンツを提供しています。日本のユーザーが自分の言語で商品を検索すると、その店の日本語ページが検索結果に表示される可能性が高くなり、よりターゲットを絞ったトラフィックを獲得できます。
  4. コンバージョン率の向上:訪問者が商品の詳細、ポリシー、購入プロセスを母国語で理解できる場合、取引を完了し、顧客になる可能性が高まります。例えば、 Magento、イタリア語に切り替えるオプションを見つけます。これにより、商品の成分、使用方法、配送ポリシーを簡単に理解できるようになり、購入への信頼が高まります。

これらの機能を実装することで、 Magentoストアは世界中の多様なユーザーにとってよりアクセスしやすく使いやすくなり、 Web トラフィック、エンゲージメント、売上が増加する可能性があります。

Magentoで言語スイッチャーを設定するにはどうすればいいですか?

ウェブサイト翻訳サービスでは通常、この機能が提供されており、お客様の特定の要件に合わせてカスタマイズできます。.

ただし、すべての翻訳サービスが簡単にカスタマイズでき、ユーザーフレンドリーな言語スイッチャーを提供しているわけではないことに注意してください。そのため、様々なフレームワークと互換性があり、柔軟な言語スイッチャー機能を備えた自動翻訳サービスを選択することが重要です。.

これらの基準を満たすサービスとして際立っているのが Linguiseです。Linguiseは、簡単にカスタマイズでき、ユーザーフレンドリーな言語切り替え機能を提供し、 Magentoとシームレスに統合されています。.

LinguiseとMagento 活用することで多言語ウェブサイトに言語スイッチャーを簡単に組み込むことができますLinguiseにより Magentoでの言語スイッチャーの設定と管理がMagentoウェブサイトLinguiseをインストールし、言語スイッチャーを設定する手順を説明します

言語の壁を打ち破る
言葉の壁に別れを告げて、無限の成長を楽しみましょう! 今すぐ自動翻訳サービスをお試しください。

ステップ 1: 無料の Linguise アカウントに登録する

まず、 Linguiseアカウント無料で登録し

このトライアル期間中は、 Linguiseの優れた機能をご利用いただけます。トライアル期間が終了すると、 Linguise ダッシュボードに自動的にリダイレクトされます。.

ステップ2:ドメインウェブサイト Magentoを追加する

Linguiseの作成が完了すると、ダッシュボードにリダイレクトされます。そこで、ウェブサイトのドメイン情報を追加する 「ドメインを追加」を探してクリックしてください。すると、入力するいくつかのフィールドを含むフォームが表示されます。

  • アカウントの詳細
  • ウェブサイトのURL
  • プラットフォームの選択( Magento選択)
  • サイトの主要言語
  • 翻訳したい言語
  • URLを翻訳するオプション
  • 動的コンテンツ翻訳の設定

必要な情報をすべて入力したら、「次のステップ」ボタンをクリックします。.

かすかな文字や線が見える暗い画像。この画像は、Webページまたは文書のスクリーンショットのように見えます。.
薄い灰色の文字と線が入った暗い画像。この画像は低解像度のスクリーンショットのようです。

次の段階では、APIキーを入力する必要があります。このキーは提供され、セットアッププロセスに不可欠です。.

翻訳ツールを使った YouTube 動画のスクリーンショットの画像

ステップ 3: Linguise スクリプトをアップロードする

次のステップでは、 Linguise 翻訳スクリプトを Magento サーバーに追加します。

  1. Linguiseから PHP-JS 翻訳スクリプトを取得します。.
  2. ダウンロードしたファイルの内容を抽出します。.
  3. 抽出したファイルを Magento インストールのメイン ディレクトリに転送します。.

確認しておいて:

  • スクリプトは、 Magento ファイルと並んで、Web サイトの最上位ディレクトリに配置されます。.
  • フォルダは元の名前「linguise」を維持します。.
コンピュータのファイルシステムのスクリーンショット。.

次に、アップロードしたConfiguration.phpファイルに Linguise APIキーを組み込みます。このファイルを開いて編集し、「REPLACE_BY_YOUR_TOKEN」というプレースホルダーテキストを引用符で囲み、実際のAPIキーに置き換えてください。.

構文が強調表示されたコード スニペット。.

ステップ4: MagentoのURL書き換えを設定する

Magentoにアクセスし、サイドバーメニューから次のパスに従います:ストア > 設定 > 構成 > 一般 > Web > 検索エンジン最適化

そこに到達したら、「Web サーバーの書き換えを使用する」オプションを見つけて有効にします。.

Azure 構成設定ページ。Microsoft Azure の設定。.

次に、.htaccess ファイルに言語固有の URL を設定する必要があります。Magento 2 Magento デフォルトの .htaccess ファイルを開き、「RewriteEngine on」という行を見つけます。この行の直後に、特定のコードスニペットを挿入します。.

この構成により、 Magento サイトのさまざまな言語バージョンに対するリクエストを適切に処理およびルーティングできるようになり、多言語設定が強化されます。. 

.htaccess ファイルの変更は細部まで慎重に行う必要があります。誤った変更はサイトの機能に影響を与える可能性があります。ご自身で変更を行うことに不安がある場合は、 Magento 設定に精通した開発者に支援を依頼することを検討してください。.

				
					<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA,END]
</IfModule>

				
			

ステップ5:言語スイッチャーを有効化してカスタマイズする

言語スイッチャーは、ユーザーが希望する言語を選択できるフラグポップアップです。これを読み込むには、ウェブサイト設定の最後に記載されているコードをコピーし、HTMLページのヘッダーに挿入してください。フラグ言語スイッチャーが自動的に読み込まれます。.

Linguise「ドメイン > 設定 > タブ > スクリプト PHP」に移動すると、ウェブサイトのヘッダーにコピーして読み込むコードを見つけることができます

空白の白黒画像。背景テクスチャ。.

このコードはページのヘッダーに挿入する必要があります。Magento 2 Magento 、設定からページのヘッダーにコンテンツを追加できます。.

設計構成テーブルのスクリーンショット

管理パネルで「コンテンツ」>「設定」、デフォルトのストアテーマビューを編集します。次に、「HTML ヘッダー」セクションをクリックし、コピーしたスクリプトを「スクリプトとスタイルシート」入力フィールドに貼り付けます。最後に、設定を保存します。

黒い画面に白い文字と右側に灰色の円が表示されています。この文字はエラーメッセージのようです。.

言語スイッチャーは、ウェブサイトの右下にフローティング状態で表示されます。Linguiseダッシュボード > 設定 > 言語フラグ表示 から、外観と配置をカスタマイズできLinguise

ステップ6: メインディスプレイを設定する

言語スイッチャーは、デフォルトでウェブサイトの右下にフローティング表示されます。Linguiseダッシュボードの「設定」>「言語フラグ表示」から、表示位置を調整Linguiseます

言語フラグ表示の設定メニュー

ステップ7: 旗のデザインを設定する

メインの表示設定を調整した後、言語フラグのデザインをさらにカスタマイズできます。.

  • 言語名の表示: 「French」や「Français」など、国または言語自体に基づいて言語名を表示するように選択できます。
  • 英語の国旗タイプ:これは、米国英語やイギリス英語、スペイン語、台湾語、ドイツ語、ポルトガル語など、複数のバリエーションを持つ言語に役立ちます。
  • フラグ スタイル:フラグ アイコンの形状 (丸型または長方形) を選択します。
さまざまなフラグの種類と言語を示すスクリーンショット。.

ステップ 8: 色とサイズを設定する

旗のデザインを確定したら、次の設定で旗の色とサイズをカスタマイズできます。

  • 旗の境界線の半径:長方形の旗スタイルの境界線の半径をピクセル単位で調整します。
  • 言語名の色:言語名のデフォルトのテキスト色を選択します。
  • ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルテキストの色を設定します。
  • 旗のサイズ:旗アイコンのサイズを調整します。
  • 言語名のホバーカラー:ユーザーが言語名の上にマウスを移動したときに表示されるテキストの色を定義します。
  • ポップアップ言語のホバーカラー:ユーザーがポップアップまたはドロップダウン領域の言語タイトルにマウスを移動したときに表示されるテキストの色を指定します。
カスタマイズ可能なオプションが空の設定メニュー

ステップ9: フラグボックスの影を設定する

最後に、国旗ボックスの影の設定を調整できます。最初のオプションでは、ウェブサイトに表示される各国旗アイコンに影の効果を追加できます。2番目のオプションでは、ユーザーが言語の国旗にマウスオーバーした際の影の効果を制御できます。.

 

必要な調整をすべて完了したら、「保存」ボタンをクリックしてカスタマイズを適用します。その後、 Magentoウェブサイトにアクセスして、設定が正常に適用されていることを確認してください。これにより、言語スイッチャーがどのように表示されるかを確認できます。

カスタマイズ用の設定とボタンが表示された黒い画面。.

セットアップが完了すると、 Magento 多言語 Web サイトで言語スイッチャーが表示されます。.

白黒の製品画像4枚。さまざまな製品が表示されています。.

Magento ウェブサイトをスペイン語などの他の言語に自動的に翻訳します。.

人物とアートの白黒写真。様々な撮影スタイル。.

Magentoの言語スイッチャーを強化するための4つの戦略

Magentoで言語スイッチャーを設定したら言語セレクターを設計し、そのパフォーマンスを最適化してサイトとユーザー エクスペリエンスを強化するための最適な戦略を把握する必要があります

言語インジケーターを簡単に実装

大きなモニターを囲んで協力し合う人々。チームコラボレーションのコンセプト。.

言語スイッチャーでは、世界的に認知されている言語記号や国旗を使用することが不可欠です。これにより、訪問者は希望の言語を素早く見つけて選択できます。馴染みのある記号を使用することで直感的なユーザーエクスペリエンスが生まれ、訪問者は目的の言語バージョンに簡単に移動できます。誤解を防ぐために、世界的に認知されている指標を選択することが重要です。.

例えば、多言語対応のeコマースサイトの、言語切り替え機能では国旗と言語の略語を組み合わせて表示できます。

  • EN(英語)
  • ES(スペイン語)
  • FR(フランス語)
  • DE(ドイツ語)
  • JP(日本語)

このアプローチでは、視覚的な手がかり(旗)とテキスト(言語コード)を組み合わせることで、様々な背景を持つユーザーが自分の好みの言語を簡単に識別できるようにします。旗はすぐに認識でき、略語はさらに明確さを高めます。. 

例えば、スペイン語を話す訪問者は、スペイン国旗と「ES」の略語をすぐに見つけることができ、ワンクリックでサイトをスペイン語に切り替えることができます。このユーザーフレンドリーなデザインは、全体的なブラウジングエクスペリエンスを向上させ、サイトにおけるエンゲージメントとコンバージョンの向上につながる可能性があります。.

言語名とフラグを組み合わせる

ショッピングモールの詳細なフロアプラン

国旗は視覚的に魅力的ですが、言語の現地名と組み合わせると効果的です。特に、複数の国で異なる国旗を持つ言語が使用されている場合、この戦略は混乱を防ぐのに役立ちます。.

実際の言語名を使用することで曖昧さが排除され、訪問者は誤解なく希望の言語を正確に識別し、選択できるようになります。さらに、このアプローチは包括性を促進し、文化的多様性を尊重することを示しています。.

例えば、多様なオーディエンスに対応するグローバルニュースウェブサイトの場合、言語切り替え画面は次のようになります。.

言語オプションリスト

この場合:

  1. 旗を使用すると、すぐに視覚的な手がかりが得られます。.
  2. 言語名は、その言語を話す人にはすぐに認識できるネイティブ文字(日本語、フランス語など)で書かれています。.

このアプローチは、スペイン語や英語など複数の国で話されている言語に特に役立ちます。例えば、メキシコやアルゼンチンのユーザーは、複数のスペイン語圏の国旗の中から選ぶのではなく、「Español」という文字だけが表示されます。同様に、イギリス、アメリカ、オーストラリア、その他の英語圏のユーザーは、使用されている国旗に関わらず、「English」という文字で自分の国を認識できます。.

言語スイッチャーを戦略的に配置する

コンピュータ画面の図の白黒画像。コンピュータインターフェースの技術図。.

言語切り替えボタンは、ウェブサイト上で目立つ、アクセスしやすい場所に配置することが非常に重要です。一般的な効果的な配置としては、ヘッダー、フッター、メインナビゲーションメニューなどが挙げられます。これらの場所は、ほとんどのウェブユーザーにとって直感的で、言語オプションを探す際の期待に合致しています。.

すべてのページで一貫した配置を維持することで、訪問者はどのページにアクセスしたかに関わらず、言語切り替え機能に簡単にアクセスできます。この一貫性は、スムーズで予測可能なユーザーエクスペリエンスに貢献します。.

例えば、世界中のユーザーを対象とする国際的なホテル予約ウェブサイトの場合、言語切り替え戦略は次のように実装できます。.

  1. ヘッダーの配置:言語切り替えボタンは、ヘッダーの右上、ユーザーアカウントアイコンと通貨セレクターの横にあります。すべてのページで表示され、ユーザーは閲覧中または予約中にいつでも言語を切り替えることができます。
  2. 一貫したデザイン:言語切り替えボタンは、地球儀アイコンに現在の言語(例:「🌐 英語」)が続く形で表示されます。クリックすると、他の言語オプションを含むドロップダウンメニューが開きます。
  3. フッター バックアップ:フッターには、利用可能なすべての言語のテキストベースのリストが含まれており、代替アクセス ポイントを提供します。

この戦略的な配置により、ユーザーがホームページ、特定のホテルページ、予約確認ページのいずれにアクセスしたとしても、簡単に言語切り替え機能を見つけて使用できます。例えば、東京のホテル情報を閲覧しているフランス人ユーザーは、サイトをフランス語に素早く切り替えることで、部屋の説明や予約条件を理解しやすくなり、ユーザーエクスペリエンスが向上し、予約完了の可能性も高まります。.

すべてのページにわたる言語スイッチャーの一貫性を維持する

ファッションウェブサイトのレスポンシブデザイン

言語スイッチャーは、ウェブサイト全体で外観と機能が統一されていることが重要です。ユーザーは、現在表示しているページや閲覧中のコンテンツに関係なく、簡単に言語を切り替えられる必要があります。この一貫性は、シームレスなユーザーエクスペリエンスを提供し、言語オプションへのアクセス性を向上させ、多言語ウェブサイトへの信頼と安心感を高めます。.

例えば、電子機器を販売するグローバルなeコマースプラットフォームの場合、一貫性のある言語スイッチャー戦略をどのように実装するかをご紹介します。.

  1. 統一されたデザイン:言語スイッチャーは、製品リスト、個々の製品ページ、ショッピング カート、チェックアウト ページを含むすべてのページの右上隅に、現在の言語コード (例: 「🌐 EN」) とともに地球儀アイコンとして表示されます。
  2. 一貫した機能:言語スイッチャーをクリックすると、ページに関係なく、常にすべての利用可能な言語を含む同じドロップダウン メニューが開きます。
  3. コンテンツの保持:ユーザーが言語を切り替えても、同じページは表示されますが、コンテンツは新しく選択した言語で表示されます。例えば、ユーザーがノートパソコンの仕様を英語で表示していて、スペイン語に切り替えると、ノートパソコンの詳細情報はスペイン語で表示されます。.
  4. URL構造: 言語を切り替えると、URLの構造は常に変化します。例:

ケーススタディ:英語版サイトでノートパソコンを閲覧していた日本の顧客が、より理解を深めるために日本語に切り替えることにしました。ヘッダーの「🌐 EN」アイコンをクリックし、ドロップダウンから「日本語」を選択すると、ページが更新され、ノートパソコンの詳細情報が同じ日本語で表示されます。URLは「/products/…」から「/ja/製品/…」に変わります。

サイトのすべてのページと機能で一貫したエクスペリエンスを提供することで、ユーザーは自分の好みの言語で安心してサイトを操作し、買い物をすることができ、購入を完了して将来的にサイトに戻ってくる可能性が高まります。.

新しい市場を開拓する準備はできていますか? 1 か月間リスクなしのトライアルで、自動翻訳サービスを無料でお試しください。 クレジットカードは必要ありません!

Linguiseを使用して Magento に言語スイッチャーを設定します。

ここまで読んで、多言語対応の Magento ウェブサイトに言語スイッチャーを設定していることがお分かりいただけたかと思います。言語スイッチャーを実装することで多くのメリットが得られ、ガイドラインに沿ってカスタマイズできます。.

Magento全体のユーザーエクスペリエンスを大幅に向上させることができます。次のステップは Linguiseを作成し Magentoに統合し、言語スイッチャーの設定を微調整することです。これらのアクションにより、ユーザーエクスペリエンスが向上し、多言語対応のeコマースサイトのアクセシビリティとユーザーフレンドリー性が向上します。

Magento プラットフォームに適切に実装された言語スイッチャーは、異なる言語市場におけるエンゲージメントの向上、コンバージョン率の向上、そして顧客満足度の向上につながります。これは、真に多言語対応のウェブサイトを構築する上で不可欠な要素です。.

あなたも読むことに興味があるかもしれません

お見逃しなく!
ニュースレターを購読する

ウェブサイトの自動翻訳、国際SEOなどのニュースを受け取ります!

Invalid email address
ぜひお試しください。毎月1回配信され、いつでも購読を解除できます。.

メールを共有せずに終了しないでください。

宝くじに当たるという保証はできませんが、翻訳に関する興味深い情報ニュースや、時折割引を受けることはお約束できます。

お見逃しなく!
Invalid email address