LANG-005 公開  更新

翻訳がないページの案内型 言語切り替え

別の言語の版がないページで言語を切り替えたときに、エラーのページやトップページへいきなり移さず、「この記事は日本語のみです」と案内して、別の言語のトップページへ進むか、今のページに残るかを選べるようにする設計です。

ワイヤーフレーム(PC)

翻訳がないページの案内型 言語切り替え PC版ワイヤーフレーム

ワイヤーフレーム(SP)

翻訳がないページの案内型 言語切り替え SP版ワイヤーフレーム

SP版の特徴

  1. 「(英語版なし)」を省く:ヘッダーの幅が足りないため、押したときの案内で伝えています。
  2. 2つのリンクを縦に並べる:横に並べると、文言が折り返して押しにくくなるためです。

採用前の判断ポイント

向いているケース

  • 一部のページだけに、別の言語の版がある
  • ブログやお知らせは日本語のみで、サービスや会社概要だけ英語の版がある
  • 言語を切り替えたときに、存在しないページへ移る作りになっている

向かないケース

このワイヤーの特徴

ないページへ移らず、理由を伝える

別の言語の版がないページで言語を切り替えたときは、存在しないページへ移らず、ページの上に「This article is available only in Japanese.」と案内を出しています。

次に取れる行動を、2つ示す

「英語のトップページへ移る」と「日本語のページに戻る」の2つを並べ、読み手が選べるようにしています。

版がないことを、切り替える前にも示す

言語の切り替えに「(英語版なし)」と添え、押す前に版がないことが分かるようにしています。

案内は、切り替えた言語で書く

案内の文は、読み手が切り替えた言語(この例では英語)で書き、lang で示しています。
表示したら、案内にフォーカスを移して読み上げでも伝えます。

制作時のよくある失敗

存在しないページへ移り、エラーになる

URLの言語の部分だけを書き換えて移ると、別の言語の版がないページでは404になります。
版があるかを確かめ、ない場合は案内を出します。

何も言わずに、トップページへ移す

読んでいたページから別の言語のトップページへ黙って移ると、読み手はなぜ移ったのか分かりません。
版がないことを伝えてから、トップページへの入口を示します。

機械翻訳を、そのまま版として出す

確認していない機械翻訳を別の言語の版として出すと、内容の誤りや不自然な表現が残ることがあります。
出す場合は機械翻訳であることを明記し、重要なページは確認してから公開します。

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

日本語のページで「英語版はありません」と日本語で書いても、英語の読み手には伝わりません。
切り替えた言語で書きます。

よくある質問

版がないページでは、言語の切り替えを出さないほうがよいですか?

切り替えを消すと、別の言語の読み手が、ほかのページには版があることに気づけなくなります。
切り替えは残し、版がないことを添えて案内する形が扱いやすいと考えられます。

版がないページに、hreflang は書いたほうがよいですか?

hreflang は、同じ内容の別の言語のページがある場合に使います。
版がないページでは、ない言語のページを示さないようにします。

機械翻訳の版を用意するのは、どうですか?

読み手の助けになることもありますが、誤りが残る可能性があります。
機械翻訳であることを明記し、料金や契約などの大切な情報は、確認した翻訳か元の言語で確かめてもらう形にします。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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