📝 入力欄の幅を文字数に合わせるべき理由
フォームをデザインする際、すべての入力欄を同じ幅に統一すると見た目はきれいですが、ユーザーを混乱させることがあります。郵便番号のように5文字しか入力しない欄が氏名欄と同じ幅だと「もっと入力するのか?」と迷わせてしまいます。反対に住所のように長い値を入力する欄が狭すぎると、テキストが見えず入力ミスを確認しづらくなります。
このツールは予想入力文字数とフォントサイズを基準に適正な幅(px)を計算します。1文字あたりの平均幅をフォントサイズの約55%とし、左右のパディングと余白を加えて実際に入力欄が必要とする幅を算出します。計算結果が640pxを超える場合は、1行入力欄よりも複数行入力できるtextareaの使用をお勧めします。
結果の下にあるプレビュー入力欄で、実際の幅の感覚をすぐに確認できます。フォーム全体の幅バランスを整えたい場合は、短い欄は短く、長い欄は長く構成し、ユーザーが入力すべき量を視覚的に予測できるようにするのがUXの観点で有利です。
よくある質問
文字数が正確にわからない場合はどうすればいいですか?
メールや氏名のように形式が決まっている項目は、実際のサービスでよく使われる最大長を基準にすればいいです。メールは30〜40文字、氏名は15〜20文字を基準にすると十分です。
幅を広めに設定しても問題ないですか?
幅が広すぎるとどこまで入力すればいいか予測しづらくなり、入力ミスが増えます。計算値より20〜30%以上広げないことをお勧めします。
モバイル画面でもそのまま適用していいですか?
モバイル画面の幅が計算値より狭い場合は、CSSでmax-widthを指定して幅100%に自動調整されるようにするのが安全です。