LANG-004 公開  更新

言語の提案バナー型 言語切り替え

ブラウザの言語の設定がページの言語と違うときに、ページの上に「This page is also available in English.」のような提案を出す設計です。
自動で転送せずに、読み手が自分で選べるようにします。

ワイヤーフレーム(PC)

言語の提案バナー型 言語切り替え PC版ワイヤーフレーム

ワイヤーフレーム(SP)

言語の提案バナー型 言語切り替え SP版ワイヤーフレーム

SP版の特徴

  1. 文とボタンを2行に分ける:1行に並べると、文が細かく折り返して読みにくいためです。
  2. ボタンの押しやすさを保つ:閉じるボタンを押しにくいと、提案が邪魔になるためです。

採用前の判断ポイント

向いているケース

  • 別の言語の読み手が、最初に日本語のページへたどり着くことが多い
  • 検索や共有されたリンクから、日本語のページを開く海外の読み手がいる
  • 別の言語の同じ内容のページがある

向かないケース

  • 別の言語のページが、ほとんどない(提案しても移る先がありません)
  • 読み手のほとんどが同じ言語

このワイヤーの特徴

自動で転送せず、読み手に選んでもらう

ブラウザの言語の設定を手がかりに、別の言語のページがあることを提案し、移るかどうかは読み手が選べるようにしています。
自動で転送すると、あえて日本語のページを見たい読み手が困ります。

提案は、提案する言語で書く

提案の文とボタンは、読み手が読める言語(この例では英語)で書き、lang で示しています。
日本語で「英語のページがあります」と書いても、英語の読み手には伝わりません。

今の言語のまま、閉じられる

「日本語のまま閉じる」のボタンを置き、提案を閉じられるようにしています。
閉じたことを覚えておき、ページを移るたびに同じ提案を出さないようにします。

ページの内容を隠さない

提案はページの上部に帯として出し、ページの内容に重ねないようにしています。
SPでも、閉じるボタンが押しやすい大きさです。

制作時のよくある失敗

ブラウザの言語で、自動的に転送する

ブラウザの言語やアクセスした場所で自動的に転送すると、元の言語のページを見たい読み手が戻れなくなることがあります。
提案にとどめ、読み手が選べるようにします。

閉じても、ページを移るたびに提案が出る

閉じた提案が何度も出ると、読み手は煩わしく感じます。
閉じたことを覚えておき、しばらくは出さないようにします。

提案を、画面の中央に重ねて出す

画面の中央に提案を重ねると、読み手はページを読む前に閉じる操作を強いられます。
ページの上部に帯として出します。

提案の文を、ページの言語で書く

日本語のページで日本語の提案を出しても、提案したい相手には読めません。
提案する言語で書きます。

よくある質問

ブラウザの言語は、どのように調べればよいですか?

ブラウザが送る言語の設定(Accept-Language)や、JavaScriptの navigator.languages で調べる方法があります。
どちらも手がかりにとどめ、決めつけずに提案として使います。

閉じたことは、どのくらいの期間覚えておけばよいですか?

決まった期間はありませんが、少なくとも同じ訪問の間は出さないようにします。
数週間程度覚えておく例も見られます。

検索エンジンのクローラーにも、提案が表示されますか?

提案をブラウザの設定に合わせて表示し、ページの内容や転送には影響させなければ、検索エンジンがそれぞれの言語のページを読むことの妨げにはなりにくいと考えられます。

同じパーツのPattern

言語切り替えの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開