皆さん、フォーム作ってますか？

Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方がautocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。

一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系)

今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。

忙しい方のために最初に書いておくと、この記事に書いてあることの多くはautocomplete の仕様を意識した実装をしましょう の一言に集約されます。

多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも快適なインターネットにするためにこの記事を執筆している次第です。

今回例にするフォームは以下の要素を含むものを想定しています

• 名前
• 郵便番号
• 住所
• 日付
• 電話番号

名前入力

名前を入力させるとき、通常は以下のように書くと思います。

<inputtype="text"name="name"autocomplete="name"/>

autocomplete="name" の指定により、ブラウザは名前を自動入力してくれますが、ここで日本語話者限定で使いにくくなりがちなポイントがあります。それがふりがな入力欄です。

名前を入力する際にふりがなも入力させるフォームは、特に銀行等のかっちりしたところに多いですが、このふりがな欄にもautocomplete="name" が指定されている場合が多いです。ブラウザの自動補完はブラウザごとに実装が違いますが、どのブラウザでも基本的にはふりがなは補完してくれません（日本語限定ですからね）。

フォームにふりがな入力欄を設ける場合、autocomplete 属性を省略するか、autocomplete="off" を指定しましょう。

<inputtype="text"name="name_furigana"autocomplete="off"/>

郵便番号

よく見る郵便番号入力の問題として、以下があります。

1. 属性がnumber になっている
2. ハイフンの前後で入力欄が分かれている
3. ハイフンの有無どちらかしか受け付けない

属性がnumber になっている

「そんなのある？」と思われるかもしれませんが、（具体的なサービス名は控えますが）かなり利用者が多いであろうサービスでもいくらかあります。郵便番号のautocomplete 要素であるpostal-code はtext 型の入力欄であるため、自動補完を適切に働かせるためにもtype="text" を指定しましょう。

モバイル端末での入力時に数字キーボードを表示させたい場合はtype="number" ではなくinputmode="numeric" を指定するようにしましょう。

<inputtype="text"name="postal_code"autocomplete="postal-code"inputmode="numeric"/>

ハイフンの前後で入力欄が分かれている

郵便番号をハイフンの前後で別々の入力欄に分けているフォームも見受けられます（すごいものだと、それぞれか片方にautocomplete="postal-code" が指定されているものもありました）。自動補完が適切に働かないため入力の手間が増えますし、コピペなども使えなくなります。入力欄は前後で分けず、1つにまとめるようにしましょう。

ハイフンの有無どちらかしか受け付けない

郵便番号を入力する際、ハイフンを入れる人と入れない人がいます。どちらか一方しか受け付けないフォームは、ユーザーにエラーを強いることになり、ストレスの原因となります。先述した通り、postal-code はtext 型であることもあり、ハイフンの入力は許容されるべきです。

ハイフンの有無にかかわらず受け付けるようにし、必要に応じて入力値を正規化しましょう。例えば、サーバーサイドでハイフンを除去したり、自動的にフォーマットを統一することで、ユーザーの負担を軽減できます。

住所の自動検索

前の項目とも被りますが、郵便番号を入力した際にシステム側で郵便番号から自動で住所を検索して補完してくれるサービスも多く見受けられます。住所入力の手間を省けるため大変便利ですが、ここでも体験を損なう要素があります。

それは郵便番号を入力した瞬間やEnterを押した瞬間に自動補完してしまうものです。こういった実装の場合、ブラウザの自動補完をシステム側の補完が上書きしてしまう場合があります。こういった挙動はユーザー視点でかなりストレスが溜まるので、ボタンを用意しておいて、押下した場合だけ補完をかけるような挙動のほうが良いかと思います。

住所入力

よく見る住所入力の問題として、以下があります。

1. 都道府県の選択
2. 住所フィールドの問題

都道府県の選択

都道府県を入力する際に、プルダウン式を採用しているページが多く見られます。しかし都道府県は47個もありますので、プルダウンで探すのは大変ですし、自動補完も効かなくなってしまいます。通常のinput タグにしてautocomplete="address-level1" を指定するようにしましょう。

<inputtype="text"name="prefecture"autocomplete="address-level1"/>

住所フィールドの問題

こちらは何が良い悪いではないですが、開発者が把握しておくべき仕様として以下のようなものがあります。それは住所のautocomplete 属性はブラウザによって（特にSafariとChromeで）異なるということです。

具体的には以下の差があります。

細かい仕様については他にもいくらかありますが、大事なことは開発者がこれらの違いの存在を把握しておくことです。これらの仕様を把握して、Safariに寄せるのかChromeに寄せるのか、User-Agent を見てフォームを出し分けるのか、間を取るのか、特殊な制御を入れるのかなど、意図を持って体験を設計しましょう。

日付入力

よく見る日付入力の問題として、以下があります。

1. 年月日の入力欄が分かれている

年月日の入力欄が分かれている

年月日を別々の入力欄にすることで、ユーザーの入力ミスを減らそうとしているケースがありますが、かえって入力の手間を増やしています。1つの入力欄にまとめ、適切なプレースホルダーや入力補助を提供しましょう。また、type="date" を使用することで、デバイスに応じたカレンダー入力が可能になります。

2024/10/2 追記
type="date" で日付を入力する場合、年を選択するUIが各ブラウザで全く統一されていません。
そのため、現在から近い日付の場合は問題ないのですが、例えば生年月日など遠い日付になると却ってユーザーの体験を悪化させる可能性があるため注意が必要です。

参考

• https://zenn.dev/heguro/articles/2796c389eaa281
• https://gigazine.net/news/20221228-safari-date-picker-customer-support-issues/

電話番号

電話番号の入力でも、郵便番号と同様の問題が発生しがちです。

1. 属性がnumber になっている
2. 入力欄が分割されている
3. ハイフンの有無でエラーになる

属性がnumber になっている

電話番号の入力欄にtype="number" を使用すると、先頭のゼロが削除される、ハイフンが入力できないなどの問題があります。また、電話番号は数値計算を行うわけではないので、type="number" は適切ではありません。type="tel" を使用しましょう。これにより、モバイル端末では電話番号入力に適したキーボードが表示され、ユーザーの入力が容易になります。

<inputtype="tel"name="telephone"autocomplete="tel"/>

入力欄が分割されている

市外局番、局番、加入者番号で入力欄を分けるフォームがありますが、これもユーザーにとっては入力の手間が増えます。特にコピーペーストができず、不便です。電話番号も1つの入力欄にまとめましょう。ハイフンの有無にかかわらず受け付け、システム側で適切に処理することで、ユーザーの負担を減らせます。

ハイフンの有無でエラーになる

電話番号の入力で、ハイフンを入れる人と入れない人がいます。どちらか一方しか受け付けないと、エラーが発生し、ユーザーにストレスを与えます。ハイフンの有無を許容し、入力値を正規化するようにしましょう。ユーザーが入力した値からハイフンを除去または追加することで、データの一貫性を保ちながらユーザー体験を向上させることができます。

総括

本記事で言及した以外にも、世の中のフォームには細かいところで使いにくいものが多く存在します。フォーム入力の体験が悪いと最悪の場合ユーザーの離脱にもつながるので、日頃から意識してフォームの実装をしましょう。