Chrome の自動入力で日本語のふりがな名のサポートを改善

Yu Tsuno

Karol Sygiet

公開日: 2026 年 4 月 15 日

Chrome では、グローバルな視点から地域のニーズを把握しています。Google は、ローカライズの改善と、さまざまな地域における文化的ニュアンスのサポートに常に取り組んでいます。Chrome の自動入力における日本語の命名規則の最新の更新は、ウェブをより包括的で、世界中のユーザーにとってより有用なものにするための継続的な取り組みの一環です。

このアップデートでは、名前の読み方のバリエーションのサポートが拡大され、漢字とふりがな（カタカナまたはひらがなの読み方）の両方の名前フィールドを自動的に入力できるようになります。日本では、名前には視覚的な表現と特定の読み方の両方があり、ウェブフォームで別々のフィールドが必要になることがよくあります。これらの発音のバリエーションのサポートを有効にすることで、Chrome はオンライン フォームの入力（医療登録から e コマースのチェックアウトまで）の煩わしさを軽減し、ユーザーの時間と労力を節約します。

日本語の名前に専用のサポートが必要な理由

同じ漢字でも複数の読み方があるため、オンライン フォームでは通常、漢字とふりがなを別々に入力するよう求められます。これにより、ユーザーに正しく対応（電話など）でき、データを正確に並べ替えて管理できます。

デベロッパーにとっての大きな課題は、HTML 標準にふりがなの標準値がないことです。そのため、ブラウザは複数のシグナルの組み合わせに基づいて、フィールドがふりがなを求めているかどうかを判断します。

Chrome で名前のフリガナ欄を検出する方法

Chrome の自動入力では、3 つの主なシグナルに基づくヒューリスティックを使用して、ふりがなフィールドを識別します。

• autocomplete 属性
• 項目のラベル
• フィールド name 属性

autocomplete 属性

autocomplete 属性は最も強いシグナルであり、優先されます。ただし、標準以外の値を使用すると、Chrome はヒューリスティックにフォールバックしません。これにより自動入力が正しく機能しなくなるため、標準以外の自動入力属性は避けてください。

HTML 仕様には専用の読み仮名値がないため、デベロッパーはこの属性を欠落させるか、通常の名前の対応する値に設定する必要があります。

• よみがな（氏名）: autocomplete="name"
• よみがな（姓）: autocomplete="family-name"
• 名（フリガナ）: autocomplete="given-name"

ラベルと名前の属性

標準の autocomplete 値は通常の名前と読み方の両方に適用されるため、Chrome はフィールドの name テキストと <label> テキストを使用して両者を区別します。

次の表に、Chrome のパーサーが音声フィールドの識別に使用する有効な文字列と文字を示します。

ベスト プラクティスの例

優れたユーザー エクスペリエンスを提供するため、わかりやすいラベルと説明的なフォールバック名を使用してフォームを構成します。

<form>
  <!-- Full phonetic name -->
  <label for="phonetic-full">セイメイ</label>
  <input id="phonetic-full" name="full-name-phonetic" type="text"/>

  <!-- Family phonetic name -->
  <label for="phonetic-family">セイ</label>
  <input id="phonetic-family" name="family-name-phonetic" type="text"/>

  <!-- Given phonetic name -->
  <label for="phonetic-given">メイ</label>
  <input id="phonetic-given" name="given-name-phonetic" type="text"/>
</form>

Chrome でカタカナとひらがなを判別する方法

Chrome の自動入力では、フォームのニーズに応じて、カタカナまたはひらがなを自動的に音訳して入力できます。

Chrome は、フィールドの名前ではなくラベルを調べて、使用するスクリプトを決定します。

• ラベルにカタカナが 1 文字以上含まれている場合、Chrome はフィールドにカタカナを入力します。
• それ以外の場合、Chrome はデフォルトでひらがなを使用します。

ふりがな自動入力のデバッグ

CodePen のデモサイトで、Chrome の自動入力が日本語のふりがなをどのように処理するかをテストできます。CodePen でデモを表示

Chrome DevTools を使用して、Chrome がフィールドを正しく識別しているかどうかを確認できます。

1. ページを開き、DevTools パネルを開きます。
2. [自動入力] ツール（[その他のツール] メニューにあります）に移動します。
3. フォーム入力のトリガー。
4. このツールは、音声フィールドを [Alternative full name]（正式名称の別表記）、[Alternative family name]（姓の別表記）、[Alternative given name]（名の別表記）として分類する必要があります。

Chrome でふりがなを設定する方法

この記事は主にデベロッパーを対象としていますが、ユーザーが発音プロファイルを設定する方法を理解しておくと、フォームのテストに役立ちます。

1. chrome://settings/addresses（一部のバージョンでは chrome://settings/contactInfo）に移動して、Chrome の設定を開きます。
2. 連絡先または住所の横にあるその他メニューを選択し、[編集] をクリックします。
3. 指定されたフィールドにふりがなを入力します。

Chrome はこれらの音声プロファイルを保存し、ユーザーは再入力せずにフォームを自動入力できます。ユーザーがふりがなを保存している場合、Chrome は適切なフィールド（標準属性やヒューリスティックなどを使用）を検出するたびに、そのふりがなを適用しようとします。

Chrome で名前を正しく分割できるようにする

Chrome は日本語のフルネームを姓と名に自動的に分割しますが、このプロセスは必ずしも簡単ではありません。Chrome には、これらの分割を学習して改善するメカニズムが組み込まれていますが、ユーザーは Chrome の自動入力設定（chrome://settings/addresses）の [名前] または [ふりがな] フィールドに区切り文字を入力することで、手動で精度を高めることができます。Chrome では、次の文字が区切り文字として認識されます。

• -（ハイフン）
• ・（カタカナ中黒）
• ·（中点）
• 　（全角スペース）
• 標準スペース

どちらの文字で入力しても、Chrome では設定 UI でひらがなで表示されます（標準の Google コンタクトの動作に準拠）。

デベロッパーにとって、手動の区切り文字は Chrome が単一フィールドの入力を解析するのに役立ちますが、Chrome が名前を正しく処理することを保証する最も信頼性の高い方法は、あいまいさを排除することです。可能な限り、姓と名に別々の入力欄を設けたフォームを設計してください（family-name と given-name の自動補完属性を使用）。

自動入力の操作性を改善

自動入力により、フォームの入力が迅速かつ正確に行われるため、ユーザーの操作がスムーズになり、フォームの離脱率を下げることができます。ベスト プラクティスと、フォームを完全に自動入力に対応させる方法について詳しくは、包括的なリソースをご覧ください。