TECHNOLOGY 2013.12.24

少しの配慮で大きな効果を生む!フォームが使いやすくなる9つのTIPS

  • HTML5/CSS3
  • javascript
  • Markup
  • Tips

マークアップ・エンジニアの鳥居です。

フォーム関係のコーディングを行う際、たとえお客さまの要件にない場合でも、できるだけ効果の上がるものになるよう、ちょっとした機能をプラスオンすることを心がけています。
今回はそういった、私がいつも使用している JavaScript や CSS をまとめてみました。
どれも基本的な事かもしれませんが、簡単にできる事も多いですので、ぜひ一度試してみてください。

<label>と<input>を関連付ける 【HTML】

ラジオボタンの横のテキストを押しても反応しなくてイラっとしたことはありませんか?
それは<label>タグを忘れているためです…。
ラジボタン、チェックボックスの場合は忘れずに設定した方が良いですね!
さらに、CSSで<label>タグのcursorをpointer(リンクカーソル)にすると、クリックされやすくなると思います。

<input type="radio" value="男性" id="man"> <label for="man">男性</label>

<select>で<optgroup>を使う 【HTML】

<optgroup>はあまり使わないタグですが、選択肢をグループ化するためのタグです。
選択肢が多い時は設定したほうがいいと思います。
例えば、都道府県を選択する時に47個並べるより、地方毎にグループ化するとグッと操作しやすくなります。
また、都道府県の並び方がバラバラになっていると戸惑ってしまいます…。
私は必ず都道府県コード順に並べるようにしています。

<input>にフォーカスした時、背景や枠線の色を変更 【CSS / JS】

ユーザーがフォーカスした時に<input>や<textarea>の背景(background)や枠線(border)の色をかえるようにしています。
コレをするだけで、入力時の印象がかなり変わると思います。
サンプルは目立つように赤系にしていますが、警告と思われるかもしれないので、黄色がおすすめです!

参考:[mA] jQuery でフォームフォーカスの背景色変更(改訂版)

Chromeでフォーカスした時にでる黄色の枠を消す 【CSS】

Chromeでは、フォーカスした時にデフォルトで黄色の枠が出ることはご存知でしょうか?
一つ前の例のように、背景も枠線も好きな色に変えてしまっているので、この黄色の枠が残っていると、とても気持ち悪いので…
私は毎回必ず非表示にしています。

input:focus{
outline:none;
}

エンターを押してもsubmitせずに、次の入力エリアに移動するjqKey.js 【JS】

リテラシーの低いユーザーの場合、入力中に間違ってエンターを押してしまい、今まで入力した項目が真っ白!ということが起きる可能性があります。
そんなユーザーのうっかり操作を防ぐためのプラグインがjqKey.jsです。
私は必ず設定するようにしています。

参考:Enter/Tab項目移動とFunctionKey制御をplugin化 - せかにゃ~

日本語を自動変換するvalueconvertor.js

電話番号は「半角数字」、メールアドレスは「半角英数字」、フリガナは「カタカナ」など、注意書きをしていても、見逃されることもありますよね…
valueconvertor.jsは入力後にJavaScriptでチェックをして、間違っている時は自動変換してくれる便利なプラグインです。

参考:入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネット

郵便番号から住所を補完するzip2addr.js 【JS】

郵便番号から住所が入力されないとガッカリしてしまいます…
zip2addr.jsは簡単に実装できるので、おすすめです!
都道府県が別フィールドの時、select要素の時など、いろんなデザインに対応できるので、重宝しています。

参考:kotarok/jQuery.zip2addr · GitHub

入力例などを薄い色で表示 【HTML / CSS / JS】

入力エリアに入力例やヒントが灰色で表示されていて、入力すると消えるテキスト。
コレはHTML5では<input>や<textarea>にplaceholder属性で実現できるようになりました。
HTML5非対応のブラウザの時にはJSを使って対応できます。
しかし、placeholderについてはJSをいれてまで再現する必要があるのか?という意見も多いです。
ヒントがないと何を入力していいのか分からないようなフォームは、インターフェースに問題があると思うので、見なおした方が良いかなぁと思います。

参考:HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ

チェックボックス、ラジオボタン、セレクトフォームを見やすく装飾 【HTML / JS】

最近のデザイントレンドは文字サイズが大きめなので、チェックボックスやラジオボタン等も文字の大きさにあわせて、オリジナルのデザインである事が増えたなぁと思います。
CSS3で実現する場合は、セレクトフォームの矢印のみ背景画像にしてしまい、下記のようなCSSでデザインに合わせて再現することが可能です。

input[type="radio"],
input[type="checkbox"]{
position: relative;
width: 24px;
height: 24px;
margin:0 5px 0 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-appearance:none;
vertical-align: middle;
}
input[type="radio"]{
border-radius: 12px;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked{
background-color:#F4F8FB;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before{
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -5px 0 0 -5px;
content: "";
width: 10px;
height: 10px;
background-color:#778EA2;
}
input[type="radio"]:checked:before{
border-radius: 5px;
}
select{
width:230px;
height:40px;
padding:0 45px 0 10px;
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
text-overflow:clip;
background:url(images/ico_arrow.png) no-repeat 100% 50%;
background-size:42px 38px;
border-radius:2px;
-moz-border-radius:2px;

クロスブラウザ対応の場合、少し手間になりますがJSを使うことで対応可能です。
CSS3が使えればどれだけ楽なのか…と思ってしまいます…。
z-indexやpositionの指定が稀に他のJSとバッティングしてバグったりするので、
動作確認は念入りに行ったほうがよいと思います。

チェックボックスやラジオボックスの装飾例
CSS3とjQueryでフォームを美しく装飾する方法 | Webクリエイターボックス

上記ページの「3. チェックボックス、ラジオボタンの装飾」の箇所です。

セレクトフォームの装飾例
jQuery Custom Select Box Plugin - jQuery.customSelect()

長々となりましたが、以上になります。
お客様(クライアント)だけでなく、私たち制作サイドも、フォームに対して「こういう項目が必要」「この項目は無駄だ」ということに気を取られがちですが、それ以上の配慮まで行き届かないことが多々あります。
そんな時、最も細部に目が行き届くのが最終的なアウトプットを行うマークアップエンジニア。
仕様に沿ってきっちりタスクを消化するのも大切なことですが、そんな私たちだからこそ、もっとユーザ目線に立って実装すべきだと思いますし、ちょっとした機能改善であれば積極的に取り入れるべきだと思います。
そういった配慮がクライアントの満足度だけでなく、ユーザの満足度にも繋がり、結果的にはコンバージョンアップに繋がるのではないでしょうか。

弊社では、そういった配慮の詰まったフォームツール「LACNE FORM+」もリリースしていますので、ぜひご覧ください。
http://lacne.jp/formplus/