フォーム改善でCV率アップ！ユーザビリティを損なう、日本のHTMLフォームに潜む落とし穴とは？

2025.07.10　2025.07.10　

Webサイトにおけるフォームは、資料請求やお問い合わせ、購入、会員登録など、コンバージョンに直結する極めて重要な要素です。にもかかわらず、日本の多くのWebフォームには、アクセシビリティやユーザビリティの観点から見たときに、見落とされがちな課題が数多く存在します。

本記事では、HTMLフォームの基本に立ち返りながら、日本のサイトで特に見られる実装上の問題点と、それによって生じるユーザー体験の損失、そしてコンバージョン機会の逸失について解説します。HTMLの機能だけでも解決できるケースが多いため、ぜひ今すぐ見直してみてください。

HTML フォームとは？
なぜ重要なのか？
日本の HTML フォームはどうなっているのか？
ユーザーエクスペリエンスを最大化するための HTML フォームチェックリスト
HTML フォームの最適化に役立つツール
SEO との関連性

HTML フォームとは？

form要素とその仕組みをご存知の方は、この先へお進みください

ここ数十年、インターネットを利用していれば、ほぼ間違いなくHTMLのform要素を使ったことがあるでしょう。フォームは、ユーザーがウェブサイトと対話したり、企業に連絡したり、ログインしたり、製品を購入したり、レビューを残したりすることを可能にします。これらは、アンカータグに次いで基本的なインタラクティブ要素の一つとして位置づけられます。

HTML フォームは、はるか昔の 1995 年にリリースされたHTML 2.0から存在しています。そこから、さまざまな入力要素は信じられないほどの機能を追加してきました。

なぜ重要なのか？

form要素の最大の強みは、JavaScript なしで動作することです。ユーザーがウェブサイトと対話するために、ブラウザがメガバイト単位の JavaScript を読み込み、解析し、最適化するのを待つ必要はありません。JavaScript は遅く、過度に使用されています。もし JavaScript を使わずに実装できる場合は、そうする方が望ましいケースがほとんどです。

JavaScript を使わずに、商品を絞り込む方法はあるのでしょうか？例えば、ユーザーがサマードレスを絞り込んで「ノースリーブ」を見つけたい場合、次のようなフォームが有効です。

<!-- 1. -->
<form method="GET">
  <!-- 2. -->
  <label for="q">キーワード</label>
  <!-- 3. -->
  <input id="q" name="q" type="text" placeholder="ノースリーブ" />
  ...
  <!-- 4. -->
  <button type="submit">検索する</button>
</form>

これは何をするのでしょうか？

このフォームは、action属性が指定されていないため、現在のページのURLにデータを送信します。各input要素の値は、それぞれ対応するname属性に関連づけられ、送信時には「name=value」の形式でURLのクエリ文字列に追加されます。
label要素は、ユーザビリティやアクセシビリティ、そして視認性を高めるために使われます。
input要素は、ユーザーがデータを入力するためのものです。type=”text” は省略しても機能しますが、分かりやすくするために明示しています。入力タイプには他にもさまざまな種類がありますので、時間のあるときに確認してみてください。
button要素は、ユーザーが操作してデータを送信するために使われます。一部のサイトでは今でも<input type="button">が使われていますが、本来は、より実装がシンプルで、デフォルトでアクセシビリティにも優れたbutton要素に置き換えるのが理想的です。

JavaScript を使わず、HTML だけでデザイン性と使いやすさを両立した形が実現できます。そして、これは、できることのほんの一部にすぎません。 JavaScript を使わずに、HTML や CSS の標準機能を活用すればするほど、サイトはより高速で使いやすくなり、結果として SEO の改善にもつながります。

この記事では HTML フォームのすべてを紹介しているわけではありません。フォームでどんなことができるのか、もっと詳しく知りたい方には、MDNの記事でをぜひ読んでみてください。

日本の HTML フォームはどうなっているのか？

私はこれまで、多くの日本のウェブサイトで、HTML フォームに関する様々な問題を目にしてきました。いくつかの例をもとに、どのように改善できるかを見ていきましょう。

`label`要素がない、ラベル付き入力欄

この HTML は、私が植物を購入している園芸サイトのアカウント作成ページから抜き出したものです。

<div class="input_block">
  <div class="title required">お名前</div>
  <input
    type="text"
    name="kanji_name"
    id="kanji_name"
    class="w-50 "
    placeholder="園芸　太郎"
    required
  />
</div>

「お名前」の表示が、label ではなく div に入っているのはよくあるパターンです。こうした間違いはよく見かけますが、修正はとても簡単です。入力欄には、それぞれきちんと label 要素でラベルを付けましょう。

視覚障害のあるユーザーは、スクリーンリーダーを使ってフォームを操作することが多く、その際には分かりやすいラベルが欠かせません。label 要素を正しく使えば、誤解を防ぎ、誰にとっても使いやすいフォームを作ることができます。

上記のコードを修正するのは、divをlabelに交換し、関連する CSS を更新するだけです。

<div class="input_block">
  <!-- <div class="title required">お名前</div> -->
  <label class="title required" for="kanji_name">お名前</label>
  <input
    type="text"
    name="kanji_name"
    id="kanji_name"
    class="w-50 "
    placeholder="園芸　太郎"
    required
  />
</div>

入力は必須、でも`required`ではない

この HTML は、私たち自身のサイトのフォームからのものです（これを作成した方には申し訳ないのですが、少し細かく見ていきましょう）。

<dl ...>
  <dt>
    <span ...>必須</span>
    <span>会社・組織名</span>
  </dt>
  <dd>
    <input type="text" name="company_name" ... />
    <p ...></p>
    <p ...></p>
  </dd>
</dl>

ここにはいくつかの問題があります。

入力欄のラベル付けにdl（説明リスト）要素を使用するのは適切ではありません。dlは、用語集や辞書で用語と定義を説明する場合に使う要素であり、今回のようなフォームには向いていません。
さらに、何かを「必須」とラベル付けした場合、関連するinput要素にrequired属性が含まれていることを確認することが重要です。

ユーザーが必須項目を入力しないままフォームを送信すると、エラーの確認に時間がかかります。たとえば、未入力のまま送信すると、サーバーから「この項目を入力してください」と返されるまで待たなければなりません。通信環境が悪い地下鉄や地方では、数十秒〜数分かかることもあり、ユーザーにとっては大きなストレスです。こうした遅延を防ぐには、ブラウザ側で即座に入力漏れを知らせるのが効果的です。そのために使えるのが required 属性です。これをつけておけば、未入力のまま送信しようとしたときに、すぐにエラーを表示できます。

解決策は簡単で、必須の入力欄にrequired属性を追加するだけです。

<dl>
  <dt>
    <span>必須</span>
    <span>会社・組織名</span>
  </dt>
  <dd>
    <input type="text" name="company_name" required />
    <p class="〇〇"></p>
    <p class="〇〇"></p>
  </dd>
</dl>

理想的には、dl要素全体をより意味的に正確なものに置き換える必要があります。

<div>
  <label for="company_name">
    <span>必須</span>
    <span>会社・組織名</span>
  </label>
  <input id="company_name" type="text" name="company_name" required />
  <p class="〇〇"></p>
  <p class="〇〇"></p>
</div>

これで良くなりました。これにより、ページは誰もが使いやすく、すべてのユーザーにとって理解しやすくなります。

送信されたフォーム、でも無効

ここのフォームでよく見られるもう一つの厄介な問題は、厳しすぎるうえに曖昧な入力ルールです。日本特有の事情として 4 つの異なる文字体系（漢字・ひらがな・カタカナ・アルファベット）が存在することも、こうした問題を複雑にしています。

たとえば、名前の入力欄では 2 つから 6 つの項目に分かれていることがあります。（ミドルネームを持つ人にはさらに入力が面倒になることも･･･）。

よくあるパターンとしは、以下のような組み合わせです。

氏名：半角ラテン文字が使える場合もあれば、全角指定の場合もある
氏名、ふりがな：ひらがなかカタカナか、全角か半角かはサイトによってまちまち
氏名、ラテン文字：これも全角・半角の指定がある場合もある

あるいは、次のような組み合わせで、

姓／名（氏名）：半角のラテン文字が使える場合もあれば、全角文字が必須の場合もある
姓／名（ふりがな）：カタカナまたはひらがな指定があり、全角か半角かのルールもサービスによって異なる
姓／名（ラテン文字）：外貨送金や海外利用など特別な用途で求められることがあるが、一般的なフォームでは使われないことが多い

特定の書式ルールに合わせて正規表現を作るのは、少し難しく感じるかもしれませんが、決して不可能ではありません。実際によく使われているパターンの例を、いくつかご紹介します。

<!-- 漢字のみを許可 -->
<input ... pattern="[\u4e00-\u9fff]+" />
<input ... pattern="[一-鿿]+" />
<!-- ひらがなのみを許可 -->
<input ... pattern="[\u3040-\u309f]+" />
<input ... pattern="[ぁ-ゖ]+" />
<!-- (モダンブラウザ) すべてのひらがなを許可 -->
<input ... pattern="\p{Script=Hira}+" />
<input ... pattern="\p{sc=Hira}+" />
<!-- (モダンブラウザ) すべてのひらがなと一般的な記号を許可 -->
<input ... pattern="\p{Script_Extensions=Hira}+" />
<input ... pattern="\p{scx=Hira}+" />
<!-- 全角カタカナのみを許可 -->
<input ... pattern="[\u30a0-\u30ff]+" />
<input ... pattern="[ァ-ー]+" />
<!-- 半角カタカナのみを許可 -->
<input ... pattern="[\uff65-\uff9f]+" />
<input ... pattern="[･-ﾟ]+" />
<!-- (モダンブラウザ) すべてのカタカナを許可 -->
<input ... pattern="\p{Script=Kana}+" />
<input ... pattern="\p{sc=Kana}+" />
<!-- (モダンブラウザ) すべてのカタカナと一般的な記号を許可 -->
<input ... pattern="\p{Script_Extensions=Kana}+" />
<input ... pattern="\p{scx=Kana}+" />
<!-- 全角のラテン文字/ローマ字のみを許可 -->
<input ... pattern="[\uff21-\uff3a\uff41-\uff5a]+" />
<input ... pattern="[ａ-ｚＡ-Ｚ]+" />
<!-- 半角のラテン文字/ローマ字のみを許可 -->
<input ... pattern="[\u41-\u5a\u61-\u7a]+" />
<input ... pattern="[A-Za-z]+" />
<!-- 全角・半角のラテン文字/ローマ字を許可 -->
<input ... pattern="[\u41-\u5a\u61-\u7a\uff21-\uff3a\uff41-\uff5a]+" />
<input ... pattern="[A-Za-zａ-ｚＡ-Ｚ]+" />
<!-- 全角のアラビア数字のみを許可 -->
<input ... pattern="[\uff10-\uff19]+" />
<input ... pattern="[０-９]+" />
<!-- 半角のアラビア数字のみを許可 -->
<input ... pattern="[\u30-\u39]+" />
<input ... pattern="[0-9]+" />
<input ... pattern="\d+" />

…などなど。正規表現の書き方にはさまざまな方法がありますが、ここで紹介したパターンは自由に組み合わせて使うことができます。たとえば、全角のひらがな・カタカナ・漢字・ラテン文字・アラビア数字・スペースをすべて許可したい場合は、それぞれの文字種を角括弧 [] の中に並べて記述します。以下のような書き方が使えるでしょう。

<!-- 全角のひらがな、カタカナ、漢字、ラテン文字、アラビア数字、スペースのみを許可 -->
<input
  ...
  pattern="[\u3040-\u30ff\u4e00-\u9fff\uff21-\uff3a\uff41-\uff5a\uff10-\uff19　]+"
/>
<input ... pattern="[ぁ-ー一-鿿ａ-ｚＡ-Ｚ０-９　]+" />

入力ルールの設定に使える正規表現のパターンを、よく使われる形でまとめました。 HTMLフォームにそのまま使えるので、必要に応じて自由に活用してください。もし独自のパターンを作りたい場合は、文字コードはUnicode Character Code Chartsを、pattern属性に関するドキュメントはMDN のドキュメントを参考にするとよいでしょう。

`pattern`を使用する際の注意点

入力欄の前やlabel要素の中には、ユーザーにどんな形式で入力してほしいのかをきちんと伝える説明文を入れましょう。具体的な例を添えておくと、より親切です。また、メールアドレスや電話番号など、特定の入力形式に対応したtype属性がある場合は、独自のpatternを使うよりも、それらのtype属性を活用するのが効果的です。

`type`が指定されていない入力欄

多くのオンラインフォームでは、実際のところ type 属性が設定されておらず、すべての入力欄がデフォルトの type="text" のままになっていることがよくあります。

しかし、フォームに入力する内容に合わせて適切な type 属性を設定することで、ユーザーはよりスムーズに、正確に情報を入力できるようになります。たとえば、ブラウザが自動で最適な入力方法を表示してくれたり、入力ミスをその場でチェックしてくれたりと、使いやすさが大きく向上します。

各 type 属性が実際にどう表示されるのか、どれだけ便利になるのか、ぜひ一度試してみてください。

コード	実行例
`<input type="color">`
`<input type="date">`
`<input type="datetime-local">`
`<input type="email">`
`<input type="month">`
`<input type="number">`
`<input type="range">`
`<input type="search">`
`<input type="tel">`
`<input type="time">`
`<input type="url">`

画面上では違いが見えにくいかもしれませんが、モバイルデバイスでは type 属性を適切に指定することで、入力に最適化された仮想キーボードが自動で表示されるようになります。たとえば、type="email" を設定すると「@」などが入力しやすいキーボードが表示され、type="tel" を指定すれば数字入力に特化したダイヤルパッドが表示されます。

モバイル端末以外でこのページをご覧の方には実感しづらいかもしれませんが、こうした配慮が、フォームの使いやすさを大きく左右します。

繰り返しになりますが、これらの機能は JavaScript を使わずに実現できる という点が大きなメリットです。ユーザーにとって入力しやすく、使い勝手の良いフォームになります。

フォームを設計する際は、可能な限り具体的な type 属性を使用するようにしましょう。利用できる入力タイプの一覧は、MDN のドキュメントで確認できます。

`autocomplete`が指定されていない入力欄

この問題は他にもよく見られ、これまで紹介してきたものと同様に、ユーザビリティを大きく左右する要素の一つです。たとえば、入力欄に autocomplete を指定することで、ユーザーのブラウザが入力内容を自動で補完してくれるようになります。

ユーザーがフォームを素早く入力できるようになれば、その途中で離脱する可能性は低くなり、結果としてコンバージョン率の向上にもつながります。

ユーザー体験を向上させることは、それだけでビジネスに大きな影響を与える、とても大切なポイントです。フォーム入力のような手間のかかる作業を自動化できれば、ユーザーのストレスは減り、満足度も高まります。そのため、一部のブラウザが autocomplete="off" を無視するのも納得できます。自動補完を無効にすることは、ユーザーにとって親切とは言えないからです。

日本語には複数の文字体系があるため、フォーム入力では同じ情報を何度も入力しなければいけないケースがあります。こうした問題が特に目立つのが、日本の有名企業のサイトです。ここでは、よくある例を紹介します。

<form>
  <label>氏名</label>
  <span class="required"></span>
  <label>［姓］</label>
  <input
    type="text"
    name="s_name"
    maxlength="10"
    size="20"
    onblur="..."
    title="(例)...	"
    placeholder="(例)...	"
    class="efo-required"
  />
  <label>［名］</label>
  <input
    type="text"
    name="s_name2"
    maxlength="10"
    size="20"
    onblur="..."
    title="(例)太郎	"
    placeholder="(例)太郎	"
    class="efo-required"
  />

  <label>カナ</label>
  <span class="required"></span>
  <label>［セイ］</label>
  <input
    type="text"
    name="s_kana"
    maxlength="20"
    size="20"
    onblur="..."
    title="(例)...	"
    placeholder="(例)...	"
    class="efo-required"
  />
  <label>［メイ］</label>
  <input
    type="text"
    name="s_kana2"
    maxlength="20"
    size="20"
    onblur="..."
    title="(例)タロウ	"
    placeholder="(例)タロウ	"
    class="efo-required"
  />

  <label>電話番号</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_tel"
    maxlength="13"
    size="20"
    onblur="ecUtil.strConvert(this, false);"
    title="(例)03xxxxxxxx	"
    placeholder="(例)03xxxxxxxx	"
    class="efo-required"
  />

  <label>メールアドレス</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_mail"
    maxlength="100"
    size="40"
    id="mail"
    onblur="ecUtil.strConvert(this, false);"
    title="(例)xxxxx@xxxxx.xxxxx	"
    placeholder="(例)xxxxx@xxxxx.xxxxx	"
    class="efo-required"
  />

  <label>メールアドレス（確認）</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_cmail"
    maxlength="100"
    size="40"
    id="cmail"
    onpaste="window.alert('確認のためもう一度入力してください'); return false;"
    onblur="ecUtil.strConvert(this, false);"
    title="(例)xxxxx@xxxxx.xxxxx	"
    placeholder="(例)xxxxx@xxxxx.xxxxx	"
    class="efo-required"
  />

  <label>郵便番号</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_zip"
    id="s_zip"
    maxlength="8"
    size="15"
    autocomplete="off"
    onfocus="eclib.ui.zipcodeSuggest('s_zip','s_pref','s_addr','s_addr2','',0,0);"
    onblur="ecUtil.strConvert(this, false);"
    title="(例)1234567	"
    placeholder="(例)1234567	"
    class="efo-required"
  />

  <label>都道府県</label>
  <span class="required"></span>
  <select name="s_pref" id="s_pref" class="efo-required">
    <option value="" selected=""></option>
    <option value="北海道">北海道</option>
    ...
    <option value="沖縄県">沖縄県</option>
  </select>

  <label>住所（郡市区）</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_addr"
    id="s_addr"
    maxlength="40"
    size="40"
    onblur="..."
    title="(例)xxxxx区	"
    placeholder="(例)xxxxx区	"
    class="efo-required"
  />

  <label>住所２（それ以降）</label>
  <span class="required"></span>
  <input
    type="text"
    name="s_addr2"
    id="s_addr2"
    maxlength="40"
    size="40"
    onblur="..."
    title="(例)xxxxxx1‐23‐4	"
    placeholder="(例)xxxxxx1‐23‐4	"
    class="efo-required"
  />

  <label>住所３（マンション名等）</label>
  <input
    type="text"
    name="s_addr3"
    maxlength="40"
    size="40"
    onblur="..."
    title="(例)xxxxxマンション567号室	"
    placeholder="(例)xxxxxマンション567号室	"
  />

  <input type="submit" name="guest" value="ご注文手続きへ" />
</form>

label 要素が for 属性で対応する input 要素と正しく結びついていない点に加え、メールアドレスを貼り付けようとするとアラートが表示されるという、ユーザーにとって不親切な onpaste の制限にも注意が必要です（幸い、多くのブラウザは自動入力時にこの制限を無視してくれます）。

もう一つの問題は、これらの入力欄のほとんどが必須であるにもかかわらず、そのことが CSS の見た目でしか示されていない点です。つまり、スクリーンリーダーなど支援技術ではそれを認識できません。こうした点から見ても、このフォームのアクセシビリティは非常に低いと言えます。

すみません、少し話がそれてしまいました。このフォームには、必要以上に手が加えられたことで、かえってアクセシビリティが損なわれ、使いづらいものになってしまっている点があります。では、autocompleteのおすすめの使い方について見ていきましょう。

氏名

ユーザーが名前を入力しやすくするために、まずは以下の設定をおすすめします。

ケース	推奨される属性
フルネーム	`<input ... autocomplete="name">`
名	`<input ... autocomplete="given-name">`
姓	`<input ... autocomplete="family-name">`
フルネーム（ひらがな）	`<input ... autocomplete="section-hira name" pattern="\p{scx=Hira}+">`
名（ひらがな）	`<input ... autocomplete="section-hira given-name" pattern="\p{scx=Hira}+">`
姓（ひらがな）	`<input ... autocomplete="section-hira family-name" pattern="\p{scx=Hira}+">`
フルネーム（カタカナ）	`<input ... autocomplete="section-kana name" pattern="\p{scx=Kana}+">`
名（カタカナ）	`<input ... autocomplete="section-kana given-name" pattern="\p{scx=Kana}+">`
姓（カタカナ）	`<input ... autocomplete="section-kana family-name" pattern="\p{scx=Kana}+">`

現時点では、ふりがな入力にカスタムの名前付きセクションsection-〇〇を使用するのが現実的です。特定の書記体系への入力を制限する方法を公式にサポートすることについての議論がありましたが、今のところは実装されておらず、将来的にも対応されない可能性があります。

理想を言えば、ふりがな入力欄では「全角ひらがな」または「全角カタカナ」のどちらでも受け付けるのが望ましいです。というのも、この2つの文字種は相互に変換が非常に簡単で、古いデータベースを使っている場合でも十分対応できるからです。

一方で、半角カタカナの使用は避けるべきです。また、「ひらがなのみ」や「全角カタカナのみ」といった厳密な制限をフロント側で強制するのではなく、必要に応じてサーバー側で変換・検証を行うようにしましょう（どのみちバックエンドでのチェックは必須です）。

大切なのは、ユーザーに余計な負担をかけず、面倒な部分はシステム側で自動処理してあげることです。

住所

住所に関する、私のおすすめの設定は以下の通りです。

ケース	推奨される属性
配送先住所	`<input ... autocomplete="shipping 〇〇">`
自宅の配送先住所	`<input ... autocomplete="home shipping 〇〇">`
勤務先の配送先住所	`<input ... autocomplete="work shipping 〇〇">`
請求先住所	`<input ... autocomplete="billing 〇〇">`
自宅の請求先住所	`<input ... autocomplete="home billing 〇〇">`
勤務先の請求先住所	`<input ... autocomplete="work billing 〇〇">`

ここで、〇〇には以下のいずれかが入ります。

ケース	autocomplete コード
郵便番号	`postal-code`
国名（例：日本）	`country-name`
国コード（例：JP）	`country`
第一行政レベル（例：東京都）	`address-level1`
第二行政レベル（例：渋谷区）	`address-level2`
第三行政レベル（必要な場合）	`address-level3`
第四行政レベル（必要な場合）	`address-level4`
番地以降の住所（例：渋谷 3-19-1 オミビル 8F）	`street-address`
番地以降の住所、1 行目（例：渋谷 3-19-1）	`address-line1`
番地以降の住所、2 行目（例：オミビル 8F）	`address-line2`
番地以降の住所、3 行目（必要な場合）	`address-line3`

クレジットカード情報

ケース	推奨される属性
カード名義人	`<input ... autocomplete="cc-name">`
カード番号	`<input ... autocomplete="cc-number" inputmode="numeric">`
カードの有効期限	`<input ... autocomplete="cc-exp" inputmode="numeric">`
カードの有効期限（月のみ）	`<input ... autocomplete="cc-exp-month" inputmode="numeric">`
カードの有効期限（年のみ）	`<input ... autocomplete="cc-exp-year" inputmode="numeric">`
カードの 3 桁のセキュリティコード	`<input ... autocomplete="cc-csc" inputmode="numeric">`
カードの種類（JCB、Master Card、Visa など）	`<input ... autocomplete="cc-type">`

パスワード

ケース	推奨される属性
パスワード	`<input ... type="password" autocomplete="password">`
ワンタイムパスワード（2 段階認証など）	`<input ... type="password" autocomplete="one-time-code">`

その他のユーザー情報

ケース	推奨される属性
メールアドレス（連絡用、ユーザー名は下記参照）	`<input ... type="email" autocomplete="email">`
自宅のメールアドレス	`<input ... type="email" autocomplete="home email">`
職場のメールアドレス	`<input ... type="email" autocomplete="work email">`
ユーザー名	`<input ... autocomplete="username">`
ユーザー名（メールアドレスの場合）	`<input ... type="email" autocomplete="username">`
生年月日	`<input ... type="date" autocomplete="bday">`
組織名	`<input ... autocomplete="organization">`
役職	`<input ... autocomplete="organization-title">`
電話番号（国コード付き）	`<input ... type="tel" autocomplete="tel">`
電話番号（国コードなし）	`<input ... type="tel" autocomplete="tel-national">`
自宅の電話番号（国コードなし）	`<input ... type="tel" autocomplete="home tel-national">`
携帯電話番号（国コードなし）	`<input ... type="tel" autocomplete="mobile tel-national">`
職場の電話番号（国コードなし）	`<input ... type="tel" autocomplete="work tel-national">`
FAX 番号（国コードなし）	`<input ... type="tel" autocomplete="fax tel-national">`

すべてをまとめる

autocompleteには多くの組み合わせが考えられます。先ほど示したフォームに、学んだことを適用してみましょう。

<form>
  <label>氏名</label>
  <span class="required"></span>
  <label>［姓］</label>
  <!-- `required`と`autocomplete`属性を追加 -->
  <input ... required autocomplete="family-name" />
  <label>［名］</label>
  <!-- `required`と`autocomplete`属性を追加 -->
  <input ... required autocomplete="given-name" />

  <label>カナ</label>
  <span class="required"></span>
  <label>［セイ］</label>
  <!-- 特定のふりがな入力のために`required`、`autocomplete`、`pattern`属性を追加 -->
  <input
    ...
    required
    autocomplete="section-kana family-name"
    pattern="\p{scx=Kana}+"
  />
  <label>［メイ］</label>
  <!-- 特定のふりがな入力のために`required`、`autocomplete`、`pattern`属性を追加 -->
  <input
    ...
    required
    autocomplete="section-kana given-name"
    pattern="\p{scx=Kana}+"
  />

  <label>電話番号</label>
  <span class="required"></span>
  <!-- `required`、`type`、`autocomplete`属性を追加 -->
  <input ... required type="tel" autocomplete="tel-national" />

  <label>メールアドレス</label>
  <span class="required"></span>
  <!-- `required`、`type`、`autocomplete`属性を追加 -->
  <input ... required type="email" autocomplete="email" />

  <label>メールアドレス（確認）</label>
  <span class="required"></span>
  <!-- `required`、`type`、`autocomplete`属性を追加 -->
  <input ... required type="email" autocomplete="email" />

  <label>郵便番号</label>
  <span class="required"></span>
  <!-- `required`、`autocomplete`、`inputmode`属性を追加 -->
  <input ... required autocomplete="postal-code" inputmode="numeric" />

  <label>都道府県</label>
  <span class="required"></span>
  <!-- `required`と`autocomplete`属性を追加 -->
  <select ... required autocomplete="address-level1">
    ...
  </select>

  <label>住所（郡市区）</label>
  <span class="required"></span>
  <!-- `required`と`autocomplete`属性を追加 -->
  <input ... required autocomplete="address-level2" />

  <label>住所２（それ以降）</label>
  <span class="required"></span>
  <!-- `required`と`autocomplete`属性を追加 -->
  <input ... required autocomplete="address-line1" />

  <label>住所３（マンション名等）</label>
  <!-- `autocomplete`属性を追加 -->
  <input ... autocomplete="address-line2" />

  <!-- アクセシビリティ向上のため、inputの代わりにbuttonでフォームを送信する -->
  <!-- <input type="submit" name="guest" value="ご注文手続きへ" /> -->
  <button type="submit" name="guest" value="ご注文手続きへ">
    ご注文手続きへ
  </button>
</form>

これで良くなりました。ブラウザは入力可能な情報を自動的に補完し、新しく入力されたデータも、他のウェブサイトで再利用できるよう保存されます。

ユーザーエクスペリエンスを最大化するための HTML フォームチェックリスト

多くの「エントリーフォーム最適化ツール」は、あまり役に立たないこともあります。でも実際のところ、フォーム作成はそれほど難しいものではありません。ここでは、フォームを作るうえで覚えておきたいポイントをいくつかご紹介します。

表示されているすべてのinput、textarea、select要素が、最大のアクセシビリティのためにfor属性が指定された関連label要素を持っていることを確認する
すべての必須input、textarea、select要素が、実際にrequired属性を使用していることを確認する
すべてのinput要素が、可能な限り最も具体的なtype属性を使用していることを確認する
すべてのinput、select、textarea要素が、可能な限りautocomplete属性を使用していることを確認する
特定のinputやtextareaに特定の文字体系が要求される場合
1. pattern属性を使用する
2. input要素の前に期待されるフォーマットを常に説明し、
3. placeholderを含める

HTML フォームの最適化に役立つツール

ブルースクレイ・ジャパンでは、HTML フォームに見られる問題を含め、テクニカル SEO に関する一般的な課題を可視化するのに役立つChromium ベースのブラウザ用の無料のブラウザ拡張機能を提供しています。ご自身のサイトにあるフォーム全体をチェックする際に、ぜひご活用ください。

SEO との関連性

シンプルで使いやすいフォームは、複雑で扱いづらいものよりも、ユーザーにとっては使いやすいものになります。しかし、実際には、日本の多くのウェブサイトでは使いにくいフォームが目立ちます。ユーザーの使いやすさを重視するなら、入力や操作はできるだけシンプルでスムーズにしたいところです。JavaScript を使って複雑にするよりも、シンプルで今の標準に合った HTML を使うだけで、必要な機能は十分に実現でき、管理もしやすくなります。

SEO とは、ユーザーが人間であれ索エンジンであれ、「使いやすく、価値のあるサイトをつくること」です。私たちが優先すべきは、検索エンジンではなく、その先にいる“人”です。もし検索エンジン向けの最適化とユーザーの体験がぶつかるような場面があったとしても、迷わずユーザー体験を優先しましょう。その方が、最終的にユーザーからも信頼されるサイトになります。