概要：translate属性とは何か
ウェブ開発において、多言語対応はグローバルなリーチを目指すサイトにとって不可欠な要素です。一般的にブラウザの翻訳機能（Google翻訳やMicrosoft Translatorなど）は、ページの言語を自動検出し、ユーザーの母国語へ即座に変換します。しかし、ブランド名、固有名詞、あるいは特定のコード表記など、「翻訳されては困る」要素がページ内に存在することは珍しくありません。
HTMLのグローバル属性である「translate属性」は、ブラウザの自動翻訳エンジンに対して、特定の要素の内容を翻訳すべきか否かを明示的に指示するための強力なツールです。本記事では、この属性の技術的な仕様から、実務で遭遇するエッジケース、そしてアクセシビリティを損なわないためのベストプラクティスまで、シニアデザイナーの視点で深く掘り下げます。
詳細解説：translate属性の仕様と挙動
translate属性は、HTML5から導入されたグローバル属性の一つです。この属性には “yes” または “no” のいずれかの値を指定します。
・translate=”yes”：要素内のコンテンツが翻訳可能であることを示します。これはデフォルトの挙動であり、明示的に指定しない場合でも、ブラウザは通常この設定として扱います。
・translate=”no”：要素内のコンテンツを翻訳対象から除外するようブラウザに指示します。
ブラウザの翻訳エンジンは、この属性が設定された要素に遭遇すると、その子要素を含めて翻訳処理をスキップします。注意すべき点は、この属性が「継承」されるという性質です。親要素にtranslate=”no”を設定すると、その中のすべての子要素も翻訳対象外となります。
ここで重要なのが、ブラウザ実装の差異です。主要なブラウザ（Chrome, Edge, Safari）は概ねこの属性を尊重しますが、古いバージョンのブラウザや特定の拡張機能では、この属性を無視したり、予期せぬ挙動を示したりすることがあります。そのため、技術的には「翻訳を防ぐための強力な手段」ではあるものの、100%の保証はできないという前提で設計を行うのがプロフェッショナルの姿勢です。
サンプルコード：翻訳除外の具体例
実務で頻繁に発生する「翻訳してはいけない箇所」の代表例をコードで示します。
<!-- ブランド名や技術用語を翻訳から守る例 -->
<section>
<h2>Product Features</h2>
<p>当社のメインプラットフォームは <span translate="no">CloudSync Pro</span> です。</p>
<!-- コードブロックは翻訳されると致命的なので確実に除外 -->
<pre translate="no">
function initApp() {
console.log("Initializing CloudSync Pro");
}
</pre>
</section>
<!-- 著作権表記などの定型文も除外対象 -->
<footer translate="no">
© 2023 TechFlow Solutions Inc.
</footer>
上記のコードでは、CloudSync Proという製品名が意図せず「クラウド同期プロ」のように翻訳されるのを防いでいます。また、コードブロックは翻訳されると構文が崩れ、ユーザーにとって有害な情報に変わってしまう可能性があるため、translate=”no”は必須の対応です。
実務アドバイス：設計における注意点
シニアデザイナーとして、translate属性を運用する上で留意すべきポイントがいくつかあります。
1. 使いすぎの回避
すべての固有名詞に対してtranslate=”no”を付与するのは管理コストが高く、マークアップを汚染します。本当に翻訳が致命的になる箇所（コード、製品名、固有の専門用語、住所など）に限定して使用すべきです。
2. アクセシビリティとの関係
translate=”no”は、スクリーンリーダーの読み上げには影響しません。スクリーンリーダーは言語属性（lang属性）に基づいて読み上げを行うため、もし要素内の言語がページ全体と異なる場合は、併せてlang属性を適切に指定することが推奨されます。
例：<span translate=”no” lang=”en”>CloudSync Pro</span>
3. CSSとの使い分け
たまに、翻訳を防ぐために「CSSのcontentプロパティでテキストを表示する」というハックが見受けられます。しかし、これはSEOやアクセシビリティの観点から推奨されません。HTMLのセマンティクスを正しく保ちつつ、translate属性で制御するのが最もクリーンな解決策です。
4. フォーム入力への対応
プレースホルダーやボタンのラベルなど、翻訳が予期せぬ結果を生む場合にもtranslate属性は有効です。特にログインフォームや設定画面において、ボタンのラベルが翻訳されて意味が通じなくなる事態を避けるために活用してください。
まとめ：グローバルなUXのための責任ある実装
translate属性は、一見するとシンプルな機能ですが、その影響範囲は広く、ユーザーがウェブサイトとどのようにインタラクションするかを左右します。多言語対応のWebサイトにおいて、翻訳エンジンに委ねるべき部分と、開発者が制御すべき部分の境界線を明確にすることは、UX品質の向上に直結します。
特にグローバル展開を意識するプロジェクトでは、初期のコンポーネント設計段階からこの属性の扱いをルール化しておくことが肝要です。例えば、デザインシステムの中に「翻訳除外対象のコンポーネント」を定義し、該当するコンポーネントにはデフォルトでtranslate=”no”が付与されるような設計にすれば、運用負荷を大幅に削減できます。
最後に、技術は常に進化しています。ブラウザの翻訳アルゴリズムが高度化する一方で、私たちがコードを通じて「意図」を伝える重要性は変わりません。translate属性を正しく理解し、コントロールすることで、多言語環境下においても一貫したブランド体験をユーザーに提供し続けましょう。この記事が、あなたの次のプロジェクトにおける品質向上の一助となれば幸いです。
コメント