こんにちは。にゃんこ師匠です。

モバイルフレンドリーといえばSEOの新しいアルゴリズムとセットで語られる事が多いですが、検索結果に直接影響しない入力フォームに関してもGoogleの提案があります。

【参考】Create Amazing Forms | Google Developers

表示サイズを適切に

これはフォームでチェックしたいユーザビリティ重要項目で書いているので、詳細は割愛するとして、文字サイズやタップサイズは十分な大きさを保つべきですね。

【参考】Design efficient forms | Google Developers

input typeでキーボードを適切に

HTML5からは、inputのtype属性が拡張され、それに合わせてtype属性にマッチしたソフトウェアキーボードが出せるようになっています。

type=”url”
/(スラッシュ)や.(ドット)等がキーボードの押しやすい位置に配置されます。
IMG_4698

type=”email”
@マークがキーボードの押しやすい位置に配置されます。
IMG_4699

type=”tel”
ダイアル専用10キーになります。
IMG_4697

type=”date”
日付選択ダイアルに自動で切り替わります。
IMG_4696

type=”time”
時間選択ダイアルに自動で切り替わります。
IMG_4700

そのほかnumber(数字キーボード)、color等があります。

出来るだけ適切なソフトウェアキーボードを表示すべきですが、実際の所、PC/タブレット/スマートフォンの3つのデバイスを考えると”url”と”email”,”tel”意外は、実用に向かない場合も多々あります。

キーボード切り替えがコンバージョンの障害になっているか否かで修正を加えましょう。

【参考】Choose the best input type | Google Developers

ラベル(label)とプレースホルダを活用する

labelはフォームにおけるブラウザの挙動を決めるため重要な指定となっています。特にcheckboxやradioではテキスト要素全体を選択エリアに出来る為、是非、きちんと付けたい所ですね。

またプレースホルダはこのブログでも何回か取りあげていますが、スマホ・フォームの省スペースと見た目の分かりやすさ向上のためにも取り入れて行った方が良い施策の一つですね。

【参考】フォームに使うプレースホルダの利点と欠点
【参考】【スマホEFO検証編3】入力例をプレースホルダにする
【参考】Label and name inputs properly | Google Developers

real time validation

これはその場でフォーム入力値のリアルタイム入力チェック機能の事。このブログ(efoナビ)はフォームアシストの利用を前提としているので「当たり前」の対策です。

ここに書かれている正規表現(Regular expression)は、それや、その応用パターンがフォームアシストのバックグラウンドで設定されていたりもします。

なのでこれから実装するぞ!という方は覚えておいて損は無いかと思います。ただし、英語圏での正規表現なので、日本語の場合には一部修正が必要です。ご注意を。

最後に

Googleが上記にあげたフォームの実例を公開しています。

Creating Amazing Forms: Sample order form

Creating-Amazing-Forms--Sample-order-form

ソースを眺めると勉強になる点も多いので、ぜひチェックしてみて下さい。

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Kārlis Dambrāns