最高のFormを探せ!! 🔎 CSSフレームワークのFormコンポーネントを比較してみる

Misoca+弥生 Advent Calendar 2019 の20日目の記事です

EFO（フォーム最適化）という領域もあるとおりwebデザインにおいてFormはコンバージョンに直結する重要な要素です。そのフォームを手軽にデザインする上欠かせないのがCSSフレームワークだと思います。

今回は主要cssフレームワーク7選をフォームの視点で比べてみました! 💪

Bootstrap4

たぶん誰しも一度は触ったことあるCSSフレームワークの王様。
これぞBootstrapというフォーム。めっちゃ見たことある感じです。

See the Pen WNbRPMY by ryo (@kawamataryo) on CodePen.

Foundation

bootstrapと双璧をなす人気のフレームワーク。EmailのCSSフレームワークもあります。
スタイルの指定はbootstrapよりわかりやすく、タグも深くならず快適だなとは思いました。
デザイン的にもノーマルですね。

See the Pen GBYbBy by ryo (@kawamataryo) on CodePen.

Tailwind CSS

良い!!
他とは全く違うUtility Firstの思想で作られたCSSフレームワーク。
Utilクラスを組み合わせて書くのでどうしてもクラス指定は大量になりますが、とても自由にデザイン出来て最高です。
Formの見た目もこれが一番好きですね。

See the Pen PowWLMo by ryo (@kawamataryo) on CodePen.

Semantic UI

セマンティックなマークアップでページを作成できるCSSフレームワーク。
クラス指定が意味合いなので、直感的に指定できます。ただネストが深くなりがちな気もしました。
デザインはとてもバランス良いなと思いました。

See the Pen semantic ui Form by ryo (@kawamataryo) on CodePen.

Bulma

Flexboxが秀逸なフレームワークです。
こちらもclass名がコンポーネント単位で直感的に指定できて書き味はすごく好きです。

See the Pen jpeOdg by ryo (@kawamataryo) on CodePen.

Materialize

マテリアルデザインのCSSフレームワーク。
他と比べるとかなり異色ですね。若干構成複雑で、余白も微妙なところあるのですが、ちゃんと作ればGoogleぽい良い感じのFormが出来そうです。

See the Pen material by ryo (@kawamataryo) on CodePen.

UIKit

かなり機能豊富なCSSフレームワーク。
こちら今回始めて使ったのですが、Documentも充実していて分かりやすいですし、デザインぱりっと決まるので良いですね。

See the Pen UIKit form sample by ryo (@kawamataryo) on CodePen.

最後に

以上「最高のFormを探せ！cssフレームワークのFormコンポーネントを比較してみる」でした。
記事を書く前はもっと各フォームの見た目違いがあると思ったのですが、割と同じようなデザインでしたね。
ただ細かい点やマークアップの書き味は大分違うので、好み分かれそうです。
CSSフレームワーク選定の一助になれば幸いです!

明日21日の Misoca+弥生 Advent Calendar 2019はshoko_yokoyama さんです！