Kirby CMSに言語スイッチャーを設定することは、海外からの訪問者がサイトをよりスムーズに利用できるようにする上で重要な機能です。複数の言語を簡単に切り替えられる機能は、多くのオンラインプラットフォームにとって必須の要件となっています。
Kirby CMSに言語スイッチャーを設定することで、海外からの訪問者にとってのサイトのアクセシビリティを大幅に向上させ、検索エンジンのパフォーマンスを向上させ、ブランドに対する世界的な信頼を高めることができます。最初はプロセスが複雑に思えるかもしれませんが、このガイドでは、 Kirby CMSウェブサイト、スムーズでユーザーフレンドリーな多言語エクスペリエンスを実現します。
Kirby CMS で言語スイッチャーを設定することの重要性
Kirby CMSに言語スイッチャーを実装することは、単なる機能ではありません。ウェブサイトのパフォーマンスとリーチに大きな影響を与える戦略的な決定です。Kirby CMSウェブサイトに言語スイッチャーを設定する主な理由を探ってみましょう。.
- ユーザー エクスペリエンスの向上:言語切り替え機能により、訪問者は好みの言語でコンテンツにアクセスできるようになり、Web サイトの理解度とエンゲージメントが大幅に向上します。
- 直帰率の低下：自分の言語でコンテンツが見つからない訪問者は、すぐに離脱してしまう可能性があります。複数の言語オプションを提供することで、ユーザーはサイト内をもっと深く探索するようになります。
- コンバージョン率の向上:ユーザーが製品の詳細、ポリシー、購入プロセスを母国語で理解できる場合、購入したり希望するアクションを実行したりする可能性が高くなります。
- 多言語SEOの強化：検索エンジンはウェブサイトのランキング付けにおいてユーザーエクスペリエンスを考慮します。直感的な言語スイッチャーは、多言語SEOのパフォーマンスを向上させます。
Kirby CMSで言語スイッチャーを設定する方法
多言語対応のKirby CMSウェブサイトに言語スイッチャーを実装することの重要性について考察したところで、次は設定の実際的な側面について見ていきましょう。多くのウェブサイト翻訳サービスがこの機能を提供していますが、高度にカスタマイズ可能でユーザーフレンドリーな言語スイッチャーを提供するサービスを見つけるのは難しい場合があります。.
自動翻訳サービスを選ぶ際には、様々なフレームワークと連携するだけでなく、柔軟な言語切り替え機能も備えていることが重要です。これらの要件を満たす優れたサービスの一つが、 Linguise自動翻訳ウェブサイト。Linguiseの言語切り替え機能は、カスタマイズの容易さとユーザーフレンドリーなインターフェースで知られており、Kirby CMSとの統合に最適です。
Linguise Kirby CMSにシームレスに統合することで、多言語アプリケーションに言語スイッチャーを簡単に追加できます。Linguiseの高度な機能と直感的なインターフェースにより、Kirby CMSウェブサイトでの Linguiseスイッチャーのセットアップとメンテナンスが簡素化されます。.
多言語 Kirby CMS Web サイトにLinguiseをインストールし、言語スイッチャーを構成する手順を見てみましょう
ステップ1： Linguise アカウントを登録する
まず、Kirby CMSウェブサイトを翻訳用に準備します。Kirby CMS管理ダッシュボードへのアクセスが必要です。次に、無料の Linguise アカウントを作成し、ウェブサイトのドメインを追加します。サブスクリプションプランを選択する前に、30日間の無料トライアルをご利用いただけます。.
ステップ2: Kirby CMSウェブサイトのドメインを追加する
Linguiseアカウントの設定が完了したら 「ドメインを追加」、以下の情報を入力してください。
- アカウント
- URL
- プラットフォーム（Kirby CMS）
- デフォルト言語
- 翻訳言語
- URLを翻訳
- 動的コンテンツ翻訳
ステップ3: Linguise スクリプトをアップロードして接続する
Linguise 翻訳スクリプトをダウンロードし、Kirby CMS インストールのルート フォルダーにアップロードします。.
スクリプトを解凍し、「linguise」という名前のフォルダが Web サイトのルート レベルに残っていることを確認します。.
次に、 Linguise APIキーをサーバー上の`Configuration.php`ファイルにコピーします。ファイルを開き、`REPLACE_BY_YOUR_TOKEN`をAPIキーに置き換えて変更を保存します。.
ステップ4: Kirby CMSのURL書き換えを設定する
Kirby CMSでは、URL書き換えがデフォルトで有効になっています。有効になっていない場合は、ホスティングプロバイダーを通じて有効にすることができます。.
言語別に URL を構成するには、デフォルトの Kirby CMS `.htaccess` ファイルの `RewriteEngine on` 行の直後に次のコードを `.htaccess` ファイルに追加します。.
<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：言語スイッチャーを有効化してカスタマイズする
SEO の目的でフラグと代替 URL 付きの言語スイッチャーを表示するには、すべての Kirby CMS ページに Linguise JavaScript リンクを読み込む必要があります。.
Linguise ダッシュボードのドメイン設定からスクリプト リンクを取得してコピーします。.
このスクリプトをKirby CMSにロードする最も簡単な方法は、ウェブサイトのheader.phpに追加するか、<head>セクションを参照してください。手順は次のとおりです。
- ウェブサイトのルート フォルダーにアクセスします。.
- サイト > スニペット > header.phpに移動します
- header.php ファイルを編集して、ヘッダー セクションにスクリプト リンクを含めます。.
言語スイッチャーは、最初はデフォルトの形式で表示されます。Linguiseダッシュボードの「設定」>「言語フラグの表示」から言語スイッチャーをカスタマイズできますLinguiseこのセクションでは、メインの表示設定、言語名、デザイン要素など、さまざまなカスタマイズオプションを利用できます。
ステップ6: メインディスプレイを構成する
言語スイッチャーの設定を開始するには、 Linguise ダッシュボードの [設定] > [言語フラグの表示] に移動します。.
このセクションでは、さまざまな設定を調整できます。メインの表示設定では、次のような要素をカスタマイズできます。.
- フラグ アイコンのスタイル:並べて表示、ドロップダウン メニュー、またはポップアップから選択します。
- 位置：ウェブサイト上の言語スイッチャーの配置を決定します。訪問者がアクセスしやすい位置を選択してください。
ステップ7: 旗のデザインを設定する
メインの表示設定を行った後、表示されるフラグのデザインをカスタマイズします。.
- 言語名の表示: 「French」や「Français」など、国または言語自体に基づいて言語名を表示するように選択します。
- 英語の国旗タイプ:これは、米国英語やイギリス英語など、複数のバリエーションを持つ言語に役立ち、スペイン語、台湾語、ドイツ語、ポルトガル語にも適用できます。
- フラグのスタイル: フラグアイコンの形状をラウンドまたは長方形から選択します。
ステップ8: 色とサイズを設定する
旗のデザインを設定したら、旗の色とサイズをカスタマイズします。調整可能な設定は次のとおりです。.
- フラグの境界半径:長方形のフラグの境界半径をピクセル単位で調整します。
- 言語名の色:言語名を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルテキストの色を設定します。
- フラグのサイズ:フラグアイコンのサイズを調整します。
- 言語名ホバーカラー: 言語名にマウスオーバーしたときに表示されるテキストの色を指定します。
- ポップアップ言語のホバーカラー:ユーザーがポップアップまたはドロップダウン領域の言語タイトルにマウスを移動したときに表示されるテキストの色を定義します。
ステップ9: box-shadowを設定する
最後に、国旗ボックスの影の設定を調整します。最初のオプションでは、ウェブサイトに表示される各国旗アイコンに影の効果を追加できます。2番目のオプションでは、ユーザーが言語の国旗にマウスオーバーした際の影の効果を調整できます。.
必要な調整を行った後、「保存」ボタンをクリックして変更を適用します。その後、Kirby CMSのウェブサイトで設定が正しく反映されていることを確認してください。言語切り替え機能がどのように表示されるかを確認できます。.
セットアップ プロセスが完了すると、Kirby CMS の多言語 Web サイトで言語スイッチャーが動作しているのを確認できます。
その後、 Kirby CMS Web サイトをフランス語などの他の言語に自動的に翻訳します。
Kirby CMSの言語スイッチャーを最適化するための4つのヒント
ここでは、言語スイッチャーを改良し、世界中のユーザーにとってより効果的なものにするための 4 つの重要なヒントを紹介します。.
#1 明確に識別できる言語の旗アイコンを使用する
言語切り替え機能に、分かりやすい言語記号や国旗を取り入れることは、迅速な言語識別に不可欠です。これにより、ユーザーは希望の言語を素早く見つけて選択でき、直感的なユーザーエクスペリエンスを実現できます。重要なのは、誤解を避けるために、誰もが理解できる表示方法を選ぶことです。.
国旗アイコンを実装する際は、高品質で、小さいサイズでも容易に識別できることを確認してください。国旗と言語コードを組み合わせて使用することで、ユーザーに視覚的およびテキスト的な手がかりを提供することを検討してください。.
例:
カービーを拠点とする世界中の旅行先を紹介する旅行ブログを想像してみてください。サイトの言語切り替え機能には、地球儀アイコンに加え、小さな国旗アイコンと2文字の言語コードを使うとよいでしょう。.
🌎 🇺🇸 JP | 🇪🇸 ES | 🇫🇷フランス | 🇩🇪 DE | 🇯🇵 JP
この設定により、ユーザーは国旗や言語コードのどちらを認識しても自分の言語をすぐに識別できるため、全体的なユーザー エクスペリエンスが向上します。.
#2 国旗の横に言語名を表示する
国旗は視覚的に分かりやすいだけでなく、言語の現地名と組み合わせることで、より明確な情報が得られます。この戦略は、特に国旗が異なる複数の国で話されている言語の場合、混乱を防ぐのに役立ちます。.
実際の言語名を記載することで、曖昧さを排除し、訪問者が自分の好みの言語を正確に識別できるようにします。このアプローチは、文化的多様性を尊重し、インクルーシブな環境を促進することにもつながります。.
例:
Kirby を搭載した、複数の言語でコースを提供する教育プラットフォームを考えてみましょう。言語切り替え機能はこんな感じです。.
🇺🇸 英語 | 🇪🇸 スペイン語 | 🇫🇷 フランセ | 🇩🇪 ドイツ語 | 🇯🇵 日本語
このデザインにより、国旗と言語名の両方がネイティブの文字で表示されるため、その言語を話す人にとってはすぐに認識できます。これは、スペイン語や英語のように、国旗が異なる複数の国で話されている言語にとって特に役立ちます。.
#3 言語切り替えボタンの位置を慎重に考える
言語スイッチャーの配置は、その効果を左右する重要な要素です。ウェブサイト上で目立つ位置に、そしてアクセスしやすい場所に配置する必要があります。一般的な効果的な配置としては、ヘッダー、フッター、メインナビゲーションメニューなどが挙げられます。.
言語切り替えボタンがサイト内のどのページからでも見やすく、簡単にアクセスできるようにしてください。配置に一貫性を持たせることで、ユーザーはウェブサイト内のどこにいても、言語オプションを素早く見つけることができます。.
例:
例えば、多国籍建築会社のKirbyベースのポートフォリオウェブサイトでは、言語スイッチャーを次のように実装できます。.
- ヘッダーの配置:言語スイッチャーは、ヘッダーの右上隅の検索アイコンの隣にあります。
- スティッキーナビゲーション:ユーザーがスクロールしても、ヘッダーは上部に固定されたままになり、言語スイッチャーに常にアクセスできるようになります。
- モバイル最適化:モバイル デバイスでは、言語スイッチャーがハンバーガー メニューに組み込まれているため、小さな画面を乱雑にすることなく簡単にアクセスできます。
この戦略的な配置により、ユーザーは、プロジェクト ギャラリーの閲覧、会社の沿革の閲覧、連絡先情報の確認など、いつでも簡単に言語を切り替えることができます。.
#4 すべてのページで言語スイッチャーの一貫性を維持する
言語スイッチャーの外観と機能は、ウェブサイト全体で統一することが重要です。ユーザーが現在表示しているページや閲覧中のコンテンツに関係なく、簡単に言語を切り替えられるようにする必要があります。.
この一貫性により、シームレスなユーザー エクスペリエンスが提供され、言語オプションのアクセシビリティが強化され、多言語 Web サイトに対する信頼性と自信が構築されます。.
例:
Kirby を活用した、世界中で商品を販売する eコマースサイトを例に考えてみましょう。一貫性のある言語切り替え戦略をどのように実装するか、以下に示します。.
- 統一されたデザイン:言語切り替え機能は、製品リスト、個々の製品ページ、チェックアウト ページなど、すべてのページの右上隅に「言語」というラベルの付いたドロップダウン メニューとして表示されます。
- コンテンツの保持：ユーザーが言語を切り替えても、同じページに留まりますが、コンテンツは新しく選択された言語で表示されます。例えば、ユーザーが手作りの花瓶の説明を英語で閲覧し、フランス語に切り替えた場合、同じ商品詳細がフランス語で表示されます。
- URL 構造:言語を切り替えると、URL 構造は常に変化します。
英語: www.yourmarket.com/products/blue-ceramic-vase
フランス語: www.yourmarket.com/fr/produits/vase-ceramique-bleu
すべてのページで一貫したエクスペリエンスを提供することで、ユーザーは自分の好みの言語で安心してサイト内を移動し、買い物ができるようになり、購入を完了して将来的にサイトに戻ってくる可能性が高まります。.
Linguiseを使用して、Kirby Web サイトに言語スイッチャーを設定しましょう。
Kirby CMSに言語スイッチャーを設定することは、真にグローバルでユーザーフレンドリーなウェブサイトを構築するための重要なステップです。この機能を実装することで、多様な国際的なオーディエンスへのデジタル扉を開き、エンゲージメントの向上、直帰率の低下、そしてサイト全体のパフォーマンス向上につながる可能性があります。.
このプロセスを効率化し、最適な結果を確保するには、 Kirby CMSウェブサイトにLinguiseLinguiseLinguise戦略の実装と微調整を容易にします。Linguiseを作成し、 Kirby CMSウェブサイトに統合して、言語スイッチャーをカスタマイズすることで、ユーザーエクスペリエンスをさらに向上させましょう。
