多様な言語的背景を持つ視聴者に対応する企業や組織にとって、多言語 Web サイトの作成が Laravel、広く使用されている PHP Web アプリケーション フレームワークであり、多言語 Web サイトの開発と保守を容易にする堅牢なツールと機能を提供します。
多言語 Web サイトの重要なコンポーネントの 1 つは言語スイッチャーです。これにより、ユーザーは利用可能な言語をシームレスに切り替えることができます。 Laravelで言語スイッチャーを設定する方法について段階的なガイドを提供します。
Laravel 多言語 Web サイトで言語スイッチャーが重要なのはなぜですか?
Laravel 多言語 Web サイトで言語スイッチャーを設定する方法について説明する前に、なぜそうする必要があるのかを理解することが重要です。
- ユーザー エクスペリエンス:適切に設計された言語スイッチャーにより、訪問者が好みの言語でコンテンツに簡単にアクセスできるようになり、ユーザー エクスペリエンスが向上します。 このように母国語または好みの言語にシームレスに移行することで、Web サイトのコンテンツをよりよく理解し、エンゲージメントを高めることができます。 ユーザーが使いやすい言語で情報を利用できると、Web サイトに長く滞在し、より多くのページを閲覧し、潜在的に顧客に転換したり、望ましいアクションを実行したりする可能性が高くなります。 スムーズな言語切り替えエクスペリエンスによりフラストレーションや障壁が排除され、満足度が向上し、全体的にポジティブなユーザー エクスペリエンスが実現します。
- 検索エンジン最適化 (SEO):検索エンジンは、世界中の視聴者にサービスを提供するという取り組みを示すため、複数の言語でコンテンツを提供する Web サイトを優先します。 言語スイッチャーを使用すると、Web サイトの可視性と検索結果でのランキングを向上させることができます。 コンテンツを複数の言語で提供すると、その言語での検索結果で Web サイトが上位に表示される可能性が高まり、オンラインでのリーチが拡大し、よりターゲットを絞ったトラフィックを引き付けることができます。
- 直帰率の削減:ユーザーフレンドリーな言語スイッチャーにより、直帰率の削減に役立ちます。 訪問者が好みの言語をすばやく見つけて選択できると、サイトに留まり、コンテンツを探索し、コンバージョンに至る可能性が高くなります。 なじみのない言語のコンテンツに遭遇したユーザーはすぐに Web サイトから離れる可能性があり、直帰率が高くなります。 ただし、言語スイッチャーを使用すると、希望する言語バージョンに簡単に移動できるため、コンテンツに留まってコンテンツに取り組むことが促進され、最終的に直帰率が減少します。
- 販売コンバージョンの増加:訪問者が理解できる言語でコンテンツを提供することで、製品購入やサービス登録などのコンバージョンの可能性を高めることができます。 訪問者が製品の詳細、ポリシー、チェックアウトプロセスを自分の言語で簡単に理解できれば、購入決定の障壁が軽減されます。 言語スイッチャーを通じて多言語コンテンツを提供すると、全体的な購入エクスペリエンスが向上し、コンバージョン率の向上につながる可能性があります。
Laravel 多言語 Web サイトで言語スイッチャーをセットアップするにはどうすればよいですか?
多言語 Laravel Web サイトにおける言語スイッチャーの重要性を理解した後、それを実装する方法について説明します。 通常、Web サイト翻訳サービスはこの機能を提供しており、ユーザーのニーズに応じてカスタマイズできます。
ただし、すべての翻訳サービスが、簡単にカスタマイズ可能でユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。 さまざまなフレームワークと互換性があり、柔軟な言語切り替え機能を提供する自動翻訳サービスを選択することが重要です
これらの基準を満たす自動翻訳サービスの 1 つが Linguiseです。 Linguise 自動翻訳は、 Laravelなどの人気のあるフレームワークと統合された、高度にカスタマイズ可能でユーザーフレンドリーな言語スイッチャー機能を提供します。
Linguise Laravel フレームワークとのシームレスな統合を提供するため、開発者は言語スイッチャーを多言語アプリケーションに簡単に組み込むことができます。 Linguiseの高度な機能とユーザーフレンドリーなインターフェイスを活用することで、 Laravel Web サイトでの言語スイッチャーのセットアップと保守のプロセスを合理化できます。
ステップ 1: 無料の Linguise アカウントに登録する
ステップ 2: Laravel Web サイトのドメインを追加する
Linguiseに接続したら、新しい Web サイトを追加し、その設定を保存して API キーを取得する必要があります。 まず、Web サイトを追加するには、次のようないくつかの列を追加する必要があります。
- アカウント
- URL
- プラットフォーム/CMS
- 言語
- 翻訳言語
- URLを翻訳する
その後、API キーを取得します。この API キーは、Web サイトで翻訳を有効にするために有効化されます。 基本的に、API キーは特定のドメインでどの言語が有効になっているかを確認し、自動翻訳されたページの作成を許可します。 API キーをコピーしてクリップボードに保存します。
次に、 「Script PHP」タブをクリックしてインストール手順を取得します。ここで詳しく説明します。
ステップ 3: Linguise 翻訳スクリプトをアップロードして接続する
Linguise 翻訳スクリプトをサーバーにアップロードし、 Laravel がインストールされているフォルダーに配置する必要があります。 ここからダウンロードできます。
スクリプトをダウンロードしたら、解凍して Laravel がインストールされているルートフォルダーにアップロードします。
スクリプトが Laravel インストールのルートレベル(通常はCMSファイルがある場所)にあることを確認してください。 フォルダーの名前が「linguise」（解凍後のデフォルト名）であることを確認してください。
ステップ 4: 言語 URL をセットアップする
次に、言語 URL を設定する必要があります。 言語ベースの URL は .htaccess ファイルで構成する必要があります。 ファイルに「RewriteBase/」がある場合は、その後の次のコードをすべてコピーするだけです。
<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]
</IfModule>
ステップ5: Laravelで言語スイッチャーを有効にする
次のステップでは、 Linguise ダッシュボードから取得したスクリプトを貼り付けて、言語スイッチャーをアクティブ化します。 この言語スイッチャー スクリプトの貼り付けは、 Laravelで使用されているテーマによって異なる場合があります。
この場合、スクリプトは、 resources/views/layouts/にあるfront.blade.php。 以下は、貼り付けたスクリプトのプレビューです。
ステップ 6: メインディスプレイのセットアップ
言語スイッチャーのセットアップを開始するには Linguiseの[設定] > [言語フラグの表示]に移動します。
このページでは、いくつかのオプションを構成できます。 1 つ目はメインのディスプレイ設定で、次のようなさまざまな側面を調整できます。
- 旗アイコンのスタイル: 3 つのオプションから選択できます。 並べて表示、ドロップダウン メニュー、またはポップアップ。
- 位置:この設定により、言語スイッチャーがサイト上のどこに配置されるかが決まります。 さまざまな位置オプションが利用可能です。 訪問者がアクセスしやすい位置を選択してください。
フラグと言語名、フラグと言語の略語、または言語名のみの表示を組み合わせることができます。 ユーザーが認識しやすいように、フラグと言語名を使用することをお勧めします。
ステップ 7: 旗のデザインを設定する
メイン表示を設定した後、表示されるフラグのデザインをさらにカスタマイズできます。
- 言語名の表示:国名または言語名自体に基づいて言語名を表示するように選択できます。 たとえば、「French」または「Français」と表示できます。
- 英語の国旗タイプ:このオプションは、米国英語やイギリス英語など、複数のバリエーションがある言語に役立ちます (スペイン語、台湾語、ドイツ語、ポルトガル語にも適用されます)。
- 旗のスタイル:この設定では、旗のアイコンの形状 (円形または長方形) を選択できます。
ステップ 8: 色とサイズを設定する
フラグのデザイン構成が完了したら、フラグの色とサイズをカスタマイズできます。 調整できる設定をいくつか示します。
- Flag border-radius:長方形の旗スタイルの境界線の半径をピクセル単位でカスタマイズします。
- 言語名の色:言語名を表示するデフォルトのテキストの色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトル テキストの色を設定します。
- 旗のサイズ:旗のアイコンのサイズを調整します。
- 言語名のホバー色:ユーザーが言語名の上にマウスを置いたときに表示されるテキストの色を設定します。
- ポップアップ言語のホバー色:ユーザーがポップアップまたはドロップダウン領域の言語タイトルの上にマウスを移動したときに表示されるテキストの色を設定します。
ステップ 9: フラグ box-shadow を設定する
最後に、フラグ ボックスのシャドウ設定を構成できます。 最初のオプションでは、Web サイトに表示される各旗アイコンにシャドウ効果を適用できます。 次のオプションは、ユーザーが言語フラグの上にマウスを置いたときの影の効果を制御します。
必要な調整をすべて行ったら、 「保存」ボタンをクリックしてカスタマイズの変更を適用します。 Laravel に移動して、設定が正常に適用されたことを確認します。 これは言語スイッチャーのおおよその表示方法です。
セットアップが完了すると、 Laravel 多言語 Web サイトで言語スイッチャーがどのように機能するかを確認できるようになります。
その後、ウェブサイトを他の言語 (フランス語など) に翻訳してみます。
Laravel 多言語 Web サイトで言語スイッチャーを最適化するためのベストプラクティス
Laravel 多言語 Web サイトで言語スイッチャーを正常にセットアップしたら、Web サイトと Web 訪問者の両方のために言語スイッチャーを最適化するためのヒントも知る必要があります。
簡単に認識できる言語アイコンまたはフラグを使用する
普遍的に認識されている記号や旗は、訪問者が好みの言語オプションをすばやく識別して選択するために非常に重要です。 混乱や曖昧さを避けるために、使用するアイコンや旗が視覚的に目立つこと、色のコントラストが良好であること、文化を超えて広く理解されることを確認してください。 使い慣れた記号やアイコンは、直感的でユーザーフレンドリーなエクスペリエンスを生み出すのに役立ち、訪問者が希望する言語バージョンに簡単に移動できるようになります。 潜在的な誤解や混乱を避けるために、誰もが認識できるアイコンや旗を選択することが重要です。
言語切り替えボタンの戦略的な配置
言語切り替えボタンを Web サイトの目立つ、アクセスしやすい領域に配置します。 標準の配置には、ヘッダー、フッター、またはメイン ナビゲーション メニューが含まれます。 これらの場所は、ほとんどのインターネット ユーザーにとって直感的であり、言語オプションを探すときの期待と一致します。 すべてのページにわたって一貫した配置により、訪問者は、エントリ ポイントや訪問している特定のページに関係なく、言語スイッチャーに簡単にアクセスできます。 この一貫した配置は、シームレスで予測可能なユーザー エクスペリエンスを生み出すのに役立ちます。
すべてのページで一貫性を維持する
言語スイッチャーが Web サイト全体で一貫した外観と動作を維持するようにしてください。 ユーザーは、閲覧しているページや表示しているコンテンツに関係なく、言語をシームレスに切り替えることができる必要があります。 一貫性は、一貫したユーザー エクスペリエンスを提供するだけでなく、言語オプションのアクセシビリティと可用性を強化し、多言語 Web サイトに対する信頼と信頼を促進します。 言語スイッチャーに矛盾があると、ユーザーに混乱や不満を与え、Web サイトから離れてしまう可能性があります。
言語名と国旗の使用を検討する
単にフラグを使用するのではなく、フラグと言語名をそのままの形で使用することを検討することをお勧めします。 一部の言語は国旗が異なる国で話されているため、このアプローチは混乱を避けるのに役立ちます。 言語名を直接使用すると曖昧さがなくなり、訪問者が誤解を招くことなく目的の言語を明確に識別して選択できるようになります。 さらに、言語名の使用により、より包括的で文化的多様性を尊重することができます。
ユーザーフレンドリーな言語切り替えプロセス
デフォルトの言語が好みに合わない場合に、ユーザーが別の言語に切り替えるプロセスを簡素化します。 ドロップダウン メニュー、フラグ/アイコン リスト、またはトグル ボタンなどの要素を使用して言語を選択することもできます。 ただし、各ボタンがスムーズにクリックできること、および利用可能な言語オプションが明確に表示されていることを確認してください。 このユーザーフレンドリーなアプローチにより、摩擦が最小限に抑えられ、言語のスムーズな移行が確保され、全体的なユーザー エクスペリエンスが向上します。 シームレスで簡単な言語切り替えプロセスにより、ユーザーの満足度が向上し、訪問者が多言語コンテンツを探索するようになります。
