を作成する場合、言語切り替え要素に注意することが重要です。 ユーザーは言語を切り替えたいときにこのセクションに頻繁にアクセスします。
同じことが、 Squarespace多言語サイト所有者にも当てはまります。 したがって、フレンドリーで、簡単にアクセスでき、ユーザーフレンドリーなSquarespace用の言語スイッチャーを作成することが重要です。
この記事では、 Squarespace用の言語スイッチャーを設計する方法について説明し、設計のヒントとそうすべき理由を説明します。
Squarespaceをデザインする方法を説明する前に多言語のSquarespace にとって言語ボタンが重要である理由も理解する必要があります。
Squarespace Web サイトに賢明にデザインされた言語ボタンを含めることで、多言語を話す視聴者のニーズに応えるだけでなく、優れたユーザー エクスペリエンスを提供し、包括性を促進し、業界の世界的な競争相手としてブランドを位置づけるという取り組みを示すこともできます。
Squarespace言語ボタンのデザイン方法についてさらに説明する前に、ユーザーがアクセスしやすいように言語ボタンの位置を理解することが重要です。
以下に、言語ボタンの位置を使用するいくつかの推奨位置と関連 Web サイトの例を示します。
言語ボタンをヘッダー領域に配置することが最も推奨されるオプションです。 ヘッダーは、訪問者が Web サイトを閲覧するときに最初に目にする要素です。
この領域に言語ボタンを配置することで、サイト内のどのページからでも視認性とアクセシビリティのレベルが非常に高くなります。 この配置は、言語選択などのサイト全体の重要な機能がヘッダーにあることをユーザーが期待する標準的な Web デザインの慣行とも一致しています。
ヘッダーの言語ボタンの一例は、Dell の公式 Web サイトからのものです。
ヘッダーほど目立たないものの、特定の状況ではフッターが言語ボタンの適切な代替場所となることがあります。 ヘッダー領域がすでに他の重要な要素で混雑していると仮定します。 その場合、フッターを言語ボタンの場所として使用して、メイン ナビゲーションが乱雑になるのを避けることができます。
さらに、訪問者がページの一番下までスクロールする傾向にある主に直線的なコンテンツ フローを持つ Web サイトの場合、フッターに言語ボタンを配置すると、コンテンツ全体を読んだ後でもこのオプションが表示され、アクセスできるようになります。 メインボタンがヘッダーまたはナビゲーションメニューにあるときに、言語ボタンが二次または追加のオプションである場合、フッターも適切な選択肢となる可能性があります。
Feel Unique サイトでは、フッターに言語ボタンがあり、国旗のアイコンと国名が表示されます。
サイドバー レイアウトのある Web サイトでは、その領域を使用して言語ボタンを配置できます。 サイドバーは通常、ページ上に永続的に表示されたままになるため、サイドバーに配置すると、ユーザーのブラウジング エクスペリエンス中に言語ボタンが常に表示されます。 これにより、ユーザーはいつでも必要なときに簡単にアクセスできるようになります。
ヘッダーまたはナビゲーション メニューがすでに他の重要な要素で埋め尽くされているため、その領域に言語ボタンを追加しても乱雑になるだけである場合、サイドバーに配置することも良い解決策となります。 中央領域に多くのコンテンツや機能がある Web サイトの場合、サイドバーは言語ボタンの理想的な場所となり、メイン コンテンツ領域を邪魔することなくボタンを表示しながら簡単にアクセスできるようになります。
以下は、右側のサイドバー メニューに言語ボタンがあるルル レモン サイトの例です。
最後のオプションは、特にモバイル デバイスやミニマリスト デザインの Web サイトの場合、フローティングまたはスティッキー言語ボタンです。 モバイル デバイスなどの小さな画面では、ヘッダーやフッターに配置されるフローティング ボタンやスティッキー ボタンの方が、隠れたり追加のスクロールが必要になる場合よりも見やすく、アクセスしやすくなります。
ただし、このアプローチは、コンテンツの表示を中断したり、不快なユーザー エクスペリエンスを生み出したりしないように、慎重に実装する必要があります。 ボタンの配置、サイズ、スタイルは、Web サイト全体のデザインとスムーズに統合できるように考慮する必要があります。
以下のように、スティッキー要素を使用した言語ボタンを備えたパタゴニアのサイトがあります。 右下隅にボタンがあり、その後、次のようなボックス表示が表示され、国と言語を選択できます。
ここまでで、多言語のSquarespace Web サイトにとって言語ボタンがいかに重要であるか、および言語ボタンの位置に関する推奨事項をすでに理解しました。 したがって、言語ボタンの簡単なカスタマイズ オプションを提供する翻訳サービスを見つけることが重要です。
通常、翻訳サービスには言語スイッチャーが用意されていますが、すべての翻訳サービスがさまざまな調整が可能な、簡単にカスタマイズできる柔軟なオプションを提供しているわけではありません。 ただし、 Linguise翻訳サービスは、ユーザーフレンドリーで簡単に適応できるSquarespace言語ボタンを求めている人にとってのソリューションです。
Linguiseはそのような制限は課されていないため、心配する必要はありません。 言語ボタンをユーザーがカスタマイズできる自動翻訳サービスです。 Squarespace言語ボタンを作成する際にLinguiseを使用することで得られるその他の利点を次に示します。
さっそく、 Linguiseを使用してSquarespace言語ボタンをいくつかの段階でデザインする手順を説明します。
Linguiseを使用してSquarespace Web サイトの言語切り替えボタンをデザインするには、最初のステップはLinguiseプラットフォームにアカウントを登録することです。 無料でサインアップし、1 か月間無料トライアルを使用すると、このサービスで利用できるさまざまな機能にアクセスできるようになります。
次のステップでは、 Web サイトのドメインをLinguiseに。 Squarespace )、母国語、翻訳する言語、翻訳 URL 設定など、一部のデータを入力する必要があります
ドメインを追加するための完全な手順については、 Squarespaceで自動翻訳Linguiseご覧ください
次のステップでは、このように提供されたスクリプト コードをダッシュボードに追加して、 LinguiseSquarespace Web サイトに統合します。
その後、 Squarespaceダッシュボードにアクセスし、多言語化したい Web サイトを選択し、下に移動してWeb サイト ツールを選択します。
次に、[Web サイト ツール] メニュー内で、[コード インジェクション] のオプションを選択します。
そして、その後にHEADER セクションとFOOTERセクションがあります。 ヘッダーに言語ボタンが必要な場合は、コードをHEADER列に入力します。 同様にフッターに配置する場合はFOOTER欄にコードを入力します。
LinguiseとSquarespaceを統合すると、 LinguiseSquarespace Web サイトに言語ボタンを自動的に作成します。 ただし、外観はデフォルトのままです。
したがって、いくつかの手順で言語ボタンのデザインをカスタマイズできます。
Linguiseにログインしていることを確認し、[設定] > [言語フラグの表示] を選択します。 その後、いくつかのセクションが表示されます。最初のセクションは次のとおりです。
このセクションには、いくつかの設定があります。
リストの表示オプションには、サイドバイサイド、ドロップダウン、ポップアップの 3 つのオプションがあります。 以下は 3 つのオプションのプレビューです。
次に、言語ボタン自体の位置について、 Linguise選択できる位置がいくつか提供されています。
次は位置調整で、言語スイッチャーを配置する場所を選択できます。 さまざまな位置オプションから選択できます。 訪問者がアクセスしやすい位置を選択してください。
最後に、フラグ + 言語名の組み合わせ、フラグ + 短縮名、またはフラグのみを選択します。
メインインターフェイスの下には、フラグのデザイン設定があります。 以下の画像には、いくつかの設定オプションが表示されます。
旗のデザインを設定したら、次は色やサイズなどのさまざまな要素を調整します。 次の表示には、次のようないくつかのカスタマイズ可能な設定があります。
最終段階では、フラグの影の設定を構成できます。 最初の設定では、Web サイト上の各フラグの影を指定できます。次の設定では、カーソルを置いたときの言語フラグの影が指定されます。
問題がなければ、忘れずに[保存]、言語スイッチャーのカスタマイズを保存してください。
これらのSquarespace言語切り替えボタンのデザイン機能は、 Linguiseで使用できます。 Web サイトのニーズに合わせて上記の設定を調整できます。
以下は、カスタマイズされたデザイン言語ボタンを使用したSquarespace Web サイトの例です。
とても簡単ですよね？ ユーザーが簡単にアクセスできるように、 Squarespace適切な言語ボタンがどこにあるのか疑問に思う人もいるかもしれません。 これについてはさらに詳しく説明します。
Squarespace言語ボタンの作成方法がわかったので、次は次のヒントを実行してボタンを完成させます。
これで、多言語のSquarespace Web サイトにとって言語ボタンが重要な理由、 Squarespace言語ボタンのデザイン方法、および作成のヒントが理解できました。
言語切り替えボタンを正しく設計することで、 Squarespace Web サイトのユーザー エクスペリエンスを大幅に向上させることができます。 これは、先ほど説明したようにさまざまな影響を及ぼします。
それで、なぜこれ以上待つ必要があるのでしょうか？ Linguiseにサインアップし、 Squarespace を登録し、言語切り替えボタンの構成をカスタマイズして、より良いユーザー エクスペリエンスを提供します。
ウェブサイトの自動翻訳、国際SEOなどのニュースを受け取る！
メールを共有せずに終了しないでください。
宝くじに当たるという保証はできませんが、翻訳に関する興味深い情報ニュースや、時折割引を受けることはお約束できます。
