Webエンジニアのざきやまです！
ボタンCSS特集もそろそろネタがつきてまいりましたので..笑
本日はCSSのコピペだけで実装できるフォームのUI改善について紹介したいと思います！
Webサイトのコンバージョンとなることが多いフォームですが、見た目や配置、補助機能ひとつで入力完了率が大きく変わるところなので是非取り入れてみてくださいね(^^)/
各フォームのUIを変える
デフォルトのフォームパーツはブラウザによってデザインが変わってしまう為、デザインの統一感が失われたり使いづらかったりしてしまいます。
こちらのサンプルコードを使用するとグッとデザインが洗練されたものになり、ブラウザ間での見た目も統一されますよ！
◉ テキストボックス
こちらは特に変わったことはしていませんが、::placeholder を使って、プレイスホルダーの色を変更することが可能です！
デフォルトではフォーカス時に青い枠線が出てしまうので、outline: noneで消しています。
◉ ラジオボタン
デフォルトだとチェック時の色は青色で、サイトによっては合わないこともあるでしょう。
こちらは枠線の色や大きさ、チェック時の色を自由に変更することができます。
◉ チェックボックス
こちらもラジオボタンと同様、枠線やチェック時の色を変更することができます。
大きさや::before、::afterをカスタマイズすればデザイン性の高いものも実現可能です♪
◉ セレクトボックス
ブラウザによってデザインが大きく変わってしまうセレクトボックス ！
矢印はもちろんブラウザによっては立体的な表示になってしまう為、デザイン性を大きく損ねてしまいます。矢印の部分は画像になっているので自由なデザインに変更可能です。
入力段階の可視化
◉ 入力ステップナビ
自分が入力しているフォームがどこまで続くのか分からない状態はユーザーに大きなストレスを与えてしまいます。「入力ステップナビ」を設けて、自分が今どの段階にいるかを可視化して安心感の向上をはかりましょう。
さいごに
最後まで見ていただき、ありがとうございました！
フォームのデザイン変更はブラウザ対応などなかなか厄介ですが、是非こちらを使って洗練されたフォームを作成してみてください！それでは！
Udemyを実際に体験した方の感想記事もぜひご覧ください♪
- 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
- 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
- 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
- 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
- 【体験談】UdemyでWeb開発を学びました【コスパ最強】
