CSS ラベルやテキスト調整でフォームの使いやすさを向上させる方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【CSS ラベルやテキスト調整でフォームの使いやすさを向上させる方法】です。お問い合わせフォームや資料請求フォーム等は成果に直結しますので、可能なかぎり最適化を行っていくのが望ましいかと思います。今後何回かに分けてフォーム関連の記事を書いていこうかと思いますのでおつきあい頂けますと幸いです。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

基本編

1. ラベルをつける

フォームとラベルを関連付けます。ラベルをクリックでラジオボタンを選択させたり入力フォームを選択させる事ができる等、簡単ですがあるとないでは大分使いやすさに差が生まれます。

ラベル無し ラベル有り
はい いいえ
ダミー入力欄です:

HTML – inputのID名とラベルのFORを共通のものに設定する方法


<input type="radio" name="Y" id="l1"><label for="l1"> はい</label>

HTML – ラベルでinputを囲む方法

<label><input type="radio" name="Y"> はい</label>

 

2. テキストを大きめに設定

単純ですが、フォーム内の文字サイズを大きめに設定します。事前にこの設定をしておくとスマートフォンでも入力・選択がしやすくなります。

通常サイズ 大きめサイズ

HTML


<input type="text" class="fm">

CSS

.fm{font-size:16px;}

 

3. 余白で入力欄を大きめに設定

フォントサイズを大きくするのと目的は同じですが、入力の対象や選択の対象を大きめに設定します。

通常サイズ 大きめサイズ

HTML


<input type="text" class="fm">

CSS

.fm{font-size:16px; padding:2px 5px;}

 

4. 必須項目は明示する

上とは少し異なりますが必須項目には必須と明示し赤文字等で記述してあげる事が望まれます。

未設定 設定済
テキスト[必須]: テキスト[必須]

HTML


テキスト<span class="attention">[必須]</span>:<input type="text" value="1234">

CSS

.fm{font-size:16px; padding:2px 5px;}
.attention{color:#f00;}

以上になります。デモでは今回の記事で書いたTIPを適応した場合、適応していない場合の比較と確認が可能です。