を作成する際には、言語切り替え要素に注意を払うことが重要です。ユーザーは言語を切り替えたいときに、このセクションを頻繁に訪れます。
Squarespace 多言語サイトオーナーであるあなたにも同じことが言えます。そのため、 Squarespace では、使いやすく、アクセスしやすく、ユーザーフレンドリーな言語スイッチャーを作成することが重要です。.
この記事では、 Squarespaceの言語スイッチャーを設計する方法について、設計のヒントやそれを実行すべき理由とともに説明します。.
多言語ウェブサイト Squarespaceにとって言語ボタンが重要なのはなぜですか?
Squarespaceの言語ボタンのデザイン方法を説明する前に多言語のSquarespaceにとって言語ボタンがなぜ重要なのかを理解する必要があります。
- グローバルなオーディエンスへの対応：国境を越えてリーチを拡大したい企業にとって、多言語対応のウェブサイトは不可欠です。言語ボタンを使用すると、ターゲットオーディエンスが好む言語でコンテンツを表示できるため、ウェブサイトはグローバルな市場セグメントにとってアクセスしやすく、魅力的なものになります。
- ユーザーエクスペリエンスとエンゲージメントの向上：言語の壁はユーザーエクスペリエンスを著しく阻害し、混乱や直帰率の増加につながる可能性があります。適切に設計され、適切に実装された言語ボタンは、言語バージョンの切り替えを効率化し、スムーズでユーザーフレンドリーなエクスペリエンスを実現します。訪問者の好みの言語でコンテンツを提供することで、エンゲージメントを高め、サイト滞在時間を向上させることができます。
- アクセシビリティとインクルーシビティの向上：このシンプルながらも強力な機能は、ウェブサイトをより親しみやすく、インクルーシブなものにし、母国語に堪能でない訪問者の帰属意識を高めることができます。また、多言語コンテンツの提供を重視するアクセシビリティガイドラインや規制への準拠にも役立ちます。
- SEOとオンラインビジビリティの向上： ウェブサイトを複数の言語に翻訳することで、検索エンジンのランキングと、様々な地域や市場でのビジビリティを向上させることができます。言語ボタンは、検索エンジンがサイトの言語バリエーションを理解するのに役立ち、ユーザーの言語設定に基づいて関連性の高いコンテンツを提供できるようにします。
- ブランドアイデンティティの強化と信頼の構築：ブランドのビジュアルアイデンティティとトーンに調和した、適切にデザインされた言語ボタンは、ブランドイメージの強化に役立ちます。ユーザーの言語ニーズに応えることで、パーソナライズされ、文化に配慮した体験を提供するというコミットメントを示し、信頼とロイヤルティを築くことができます。こうした細部への配慮は、競合他社との差別化につながります。
- コンテンツ管理とローカリゼーションの促進： Squarespaceでは、言語ボタンを使用することで、異なる言語バージョン間でのコンテンツの管理と整理が簡素化されます。これにより、言語バージョン間の移動が容易になり、コンテンツ管理とローカリゼーションのプロセスが効率化されます。一元化されたプラットフォームから多言語コンテンツを効率的に管理・更新できるため、時間とリソースを節約できます。
Squarespace の Web サイトに賢く設計された言語ボタンを含めると、多言語のユーザーのニーズに応えるだけでなく、優れたユーザー エクスペリエンスを提供し、包括性を促進し、ブランドを業界における世界的な競争相手として位置付けるという取り組みを示すこともできます。.
Squarespace 言語ボタンはどこに配置すればよいですか?
Squarespace 言語ボタンの設計方法についてさらに詳しく説明する前に、ユーザーが簡単にアクセスできる言語ボタンの位置を理解することが重要です。.
以下に、言語ボタンの位置を使用するいくつかの推奨位置と関連 Web サイトの例を示します。.
ヘッダ
言語ボタンをヘッダー領域に配置するのが最も推奨されるオプションです。ヘッダーは、訪問者がウェブサイトを閲覧する際に最初に目にする要素です。.
このエリアに言語ボタンを配置することで、サイト内のどのページからも視認性とアクセシビリティが大幅に向上します。この配置は、ユーザーが言語選択など、サイト全体に関わる重要な機能がヘッダーに表示されることを期待する標準的なウェブデザインの慣習にも合致しています。.
ヘッダーの言語ボタンの例の 1 つは、Dell の公式 Web サイトからのものです。.
フッター
ヘッダーほど目立たないとはいえ、フッターは状況によっては言語ボタンの適切な代替位置となる場合があります。例えば、ヘッダー領域が既に他の重要な要素で混雑している場合、メインナビゲーションが乱雑にならないように、フッターを言語ボタンの配置場所として活用できます。.
さらに、コンテンツフローが直線的で、訪問者がページの下部までスクロールする傾向があるウェブサイトでは、言語ボタンをフッターに配置することで、コンテンツ全体を読んだ後もこのオプションが表示され、アクセスできるようになります。また、言語ボタンがヘッダーまたはナビゲーションメニューにあり、言語ボタンがセカンダリオプションまたは追加オプションである場合にも、フッターは適切な選択肢となります。.
Feel Unique のサイトでは、国旗アイコンと国名が付いた言語ボタンがフッターに配置されています。.
サイドバー
サイドバーレイアウトを採用したウェブサイトでは、その領域に言語ボタンを配置できます。サイドバーに配置することで、サイドバーは通常ページ上に常に表示されるため、ユーザーのブラウジング体験中に言語ボタンが常に表示されます。これにより、ユーザーは必要なときにいつでも簡単にアクセスできます。.
ヘッダーやナビゲーションメニューが既に他の重要な要素で埋め尽くされている場合、サイドバーへの配置も良い解決策となります。そのエリアに言語ボタンを追加すると、混乱を招くだけです。ウェブサイトの中央エリアに多くのコンテンツや機能を配置している場合は、サイドバーが言語ボタンの理想的な配置場所となります。ボタンは目立つ位置にありながらも、メインコンテンツエリアを邪魔することなく簡単にアクセスできます。.
以下は、右側のサイドバー メニューに言語ボタンがある Lulu Lemon サイトの例です。.
フローティングボタンまたは固定要素
最後の選択肢は、フローティングまたは固定の言語ボタンです。特にモバイルデバイスやミニマルなデザインのウェブサイトに適しています。モバイルデバイスのような小さな画面では、ヘッダーやフッターに配置すると隠れてしまったり、スクロールが必要になる場合があるため、フローティングボタンや固定ボタンの方が視認性とアクセス性に優れています。.
ただし、コンテンツの表示を妨げたり、ユーザーエクスペリエンスに不快感を与えたりしないよう、このアプローチは慎重に実装する必要があります。ボタンの配置、サイズ、スタイルは、ウェブサイト全体のデザインとのスムーズな統合を考慮して慎重に検討する必要があります。.
下記のように、パタゴニアのサイトには、固定要素を使った言語ボタンがあります。右下隅にボタンがあり、それをクリックすると、国と言語を選択するためのボックスが表示されます。.
Squarespace の言語ボタンをどのようにデザインしますか?
ここまでで、多言語対応の Squarespace ウェブサイトにとって言語ボタンがどれほど重要であるか、そして言語ボタンの位置に関する推奨事項についてご理解いただけたかと思います。そのため、言語ボタンを簡単にカスタマイズできるオプションを提供する翻訳サービスを見つけることが重要です。.
翻訳サービスでは一般的に言語切り替えボタンが提供されていますが、簡単にカスタマイズでき、様々な調整が可能な柔軟なオプションを提供しているサービスばかりではありません。しかし、 Linguise翻訳サービスは、ユーザーフレンドリーで簡単に調整できるSquarespace言語切り替えボタンを探している方にとって最適なソリューションです。
Linguise はそのような制限はありませんのでご安心ください。Linguiseは自動翻訳サービスであり、ユーザーが言語ボタンをカスタマイズできます。Squarespace Squarespace 言語ボタンを作成する際に Linguise 使用すると、他にも次のようなメリットがあります。
- Linguise Squarespace を含む 40 を超える CMS および Web ビルダー プラットフォームと統合されています。
- ウェブサイトの言語ボタンに追加すると、数秒以内にさまざまな言語への翻訳が自動的に行われます。.
- 言語ボタンに追加できる言語は 80 以上あります
- Linguise、翻訳対象言語に応じて固有のURLを自動的に作成します。hreflangコードも含まれており、例えばlinguise .com/fr/ となります。
- ページの言語バリエーションが多い場合、検索エンジンで重複コンテンツとして表示されるのを防ぐため、正規URLを自動的に生成します。これは多言語SEOの重要な要素の一つです。
- アイコンや色、言語名の表示に至るまで、Web サイトのニーズに合わせて言語ボタンをカスタマイズできます。.
- 言語ボタンに追加された言語ごとに、言語ごとのページ統計を表示できます。.
これ以上長々と説明せずに、 Linguise 使用していくつかの段階で Squarespace 言語ボタンをデザインする手順を以下に示します。.
ステップ1： Linguise アカウントを登録する
Linguiseを使用して Squarespace ウェブサイトの言語切り替えボタンをデザインするには、まず Linguise プラットフォームにアカウントを登録する必要があります。無料で登録でき、1ヶ月間の無料トライアルでこのサービスのさまざまな機能にアクセスできます。.
ステップ2: Squarespace ドメインサイトを追加する
次のステップは、ウェブサイトのドメインをLinguiseに Squarespace ）、母国語、翻訳対象言語、翻訳URLの設定いくつかのデータを入力する必要があります
ドメインを追加するための完全な手順については、 Squarespaceでの自動翻訳Linguise参照してください
ステップ3: Squarespaceに言語ボタンを統合する
次のステップは、次のようにダッシュボードに提供されているスクリプト コードを追加して、 Linguise Squarespace Web サイトに統合することです。.
その後、 Squarespaceダッシュボードにアクセスし、多言語化したい Web サイトを選択し、下に移動して「Web サイト ツール」を選択します。
次に、「Web サイト ツール」メニューで、「コード インジェクション」のオプションを選択します。
その後、 HEADERとFOOTERセクションがあります。言語ボタンをヘッダーに表示したい場合は、 HEADER列にコードを入力します。同様に、フッターに表示したい場合は、 FOOTER列にコードを入力します。
ステップ4:言語フラグの設定 Squarespace表示
Linguise と Squarespaceを連携させると、 Linguise Squarespace ウェブサイトに言語ボタンを自動的に作成します。ただし、外観はデフォルトのままです。.
したがって、数ステップで言語ボタンのデザインをカスタマイズできます。.
Linguiseにログインしていることを確認し、 「設定」>「言語フラグの表示」を選択します。その後、いくつかのセクションが表示されます。最初のセクションは次のとおりです。
このセクションには、いくつかの設定があります。
- リスト表示
- 位置
- 言語プレビュー
リストの表示オプションには、サイドバイサイド、ドロップダウン、ポップアップの3つのオプションがあります。以下は3つのオプションのプレビューです。.
次に、言語ボタン自体の位置については、 Linguise 選択可能な位置がいくつか用意されています。.
次は位置調整です。言語スイッチャーを配置する場所を選択します。様々な位置オプションから選択できます。訪問者がアクセスしやすい位置を選択してください。.
最後に、国旗 + 言語名、国旗 + 短縮名、または国旗のみの組み合わせを選択します。.
ステップ5: 言語ボタンに国旗のデザインを設定する
メインインターフェースの下には、旗のデザイン設定があります。下の画像には、いくつかの設定オプションが表示されています。.
- 言語名の表示: 「ドイツ」や「ドイツ語」など、国または言語に基づいて名前を表示するように選択できます。
- 英語の国旗の種類:このオプションは、「英語 (米国)」や「英語 (英国)」(スペイン語、台湾語、ドイツ語、ポルトガル語など) など、複数の種類がある言語に使用されます。
- フラグ スタイル:フラグ アイコンの形状 (円形または正方形 (長方形)) を決定するために使用されます。
ステップ6: フラグの色とサイズをカスタマイズする
旗のデザインを設定したら、次は色、サイズ、その他さまざまな要素を調整します。以下の画面には、カスタマイズ可能な設定がいくつか表示されています。
- フラグ border-radius:長方形を使用するときに、境界線の半径をピクセル単位で調整します。
- 言語名の色:言語名のデフォルトのテキスト色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルの色。
- 旗のサイズ:旗のサイズを調整します。
- 言語名の上にマウスを置いたときの色:言語名の上にマウスを置いたときのテキストの色。
- ホバーポップアップ言語の色:ポップアップまたはドロップダウンの言語タイトルの上にマウスを移動したときに表示されるテキスト。
ステップ7: フラグボックスの影ボタンを調整する
最後の段階では、国旗の影の設定を行えます。最初の設定では、ウェブサイト上の各国旗の影を指定し、次の設定では、言語の国旗にマウスオーバーした際の影を指定します。.
言語スイッチャーのカスタマイズを保存するために必ず「保存」
Linguiseでは、 Squarespace 言語切り替えボタンのデザイン機能をご利用いただけます。上記の設定は、ウェブサイトのニーズに合わせて調整できます。.
以下は、カスタマイズされたデザイン言語ボタンを使用した Squarespace Web サイトの例です。.
簡単ですよね？ Squarespace 適切な言語ボタンはどこにあるのか、ユーザーが簡単にアクセスできる場所がどこなのか疑問に思う方もいるかもしれません。この点については後ほど詳しく説明します。.
Squarespace 言語切り替えボタンをデザインするためのヒント
Squarespace 言語ボタンを作成する方法がわかったので、次は、次のヒントを実装してボタンを完成させます。
- 戦略的な配置 – Squarespace上の言語切り替えボタンの配置場所を決めましょう。ヘッダー、ナビゲーションメニュー、フッター、サイドバーなど、訪問者が見つけやすい場所にボタンを配置しましょう。サイト閲覧時の訪問者の行動を考慮し、ボタンがサイトのすべてのページで常に目につき、簡単にアクセスできるようにしてください。
- 適切なスタイルの選択 –設定画面の言語切り替えボタンのスタイルは、サイトの特徴や全体的なデザインに合わせて選択してください。言語オプションは、テキスト、国旗、グローバルアイコンなどを使って表示できます。ボタンのスタイルは、サイトのブランディングに合わせてカスタマイズすることで、一貫性と視覚的な訴求力を高めます。また、訪問者がボタンをすぐに認識して使用できるよう、認識しやすく普遍的なスタイルを選択してください。
- 明確な名称 –言語切り替えボタンに表示される言語名は、訪問者が分かりやすく理解しやすいものにしてください。ユーザーを混乱させる可能性のある略語やコードは使用しないでください。サイトの大多数のユーザーに共通する言語名を使用してください。さらに、各言語に関する追加情報を提供する代替テキストやツールチップを用意し、ユーザーの理解を深めることも検討してください。
- スムーズな言語遷移 –ページ全体を再読み込みすることなく、スムーズな言語遷移を実現します。AJAXやJavaScriptなどのテクノロジーを活用することで、ユーザーエクスペリエンスを損なうことなく、シームレスな言語遷移を実現できます。また、言語遷移プロセス中は、アニメーションや明確な通知メッセージなど、ユーザーに視覚的なヒントを提供するようにしてください。
- モバイル対応 – 言語切り替えボタンは、様々なモバイルデバイスに合わせてサイズと外観が調整できるよう、レスポンシブなデザインにしてください。コンパクトなデザインやレスポンシブアイコンの使用を検討し、小さな画面でもボタンへのアクセスと操作性を維持してください。様々なデバイスや画面サイズにおいて、ボタンが適切に表示され、適切に機能するようにしてください。
- ページ間の一貫性 –サイト全体で言語切り替えボタンのスタイル、配置、機能に一貫性を持たせましょう。これにより、サイトページ間の移動がよりスムーズで統一感のあるユーザーエクスペリエンスを実現できます。ユーザーの混乱を避けるため、言語切り替えボタンの外観と動作はサイト全体のページで統一してください。
- テストと改良 –言語切り替えボタンについて、様々なデバイス、ブラウザ、ユーザーシナリオを網羅した徹底的なテストを実施します。これには、言語切り替え機能、ボタンの応答性、言語名の分かりやすさのテストが含まれます。ユーザーテストからのフィードバックに基づき、ユーザーのニーズと好みに合わせてボタンのデザインと機能を調整・改良します。
