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


[Misoca+弥生 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/misoca-yayoi) の20日目の記事です:tada: 

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

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


# [Bootstrap4](https://getbootstrap.com/)
<a href="https://getbootstrap.com/">![スクリーンショット 2019-12-20 6.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/85626fdf-3b4f-af0a-92ff-82d0098a226d.png)</a>

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

<p class="codepen" data-height="630" data-theme-id="default" data-default-tab="result" data-user="kawamataryo" data-slug-hash="WNbRPMY" style="height: 630px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WNbRPMY">
  <span>See the Pen <a href="https://codepen.io/kawamataryo/pen/WNbRPMY">
  WNbRPMY</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

# [Foundation](https://foundation.zurb.com/)
<a href="https://foundation.zurb.com/">![スクリーンショット 2019-12-20 6.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/338d3768-ecf2-37af-0ba9-6e0462c8d9a0.png)</a>

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

<p data-height="600" data-theme-id="0" data-slug-hash="GBYbBy" data-default-tab="result" data-user="kawamataryo" data-pen-title="GBYbBy" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"class="codepen">See the Pen <a href="https://codepen.io/kawamataryo/pen/GBYbBy/">GBYbBy</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>) on <a href="https://codepen.io">CodePen</a>.</p>

# [Tailwind CSS](https://tailwindcss.com/)
<a href="https://tailwindcss.com/">![スクリーンショット 2019-12-20 6.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/6ad54135-49ab-4509-0889-1434eaafb3c2.png)</a>

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

<p class="codepen" data-height="630" data-theme-id="dark" data-default-tab="result" data-user="kawamataryo" data-slug-hash="PowWLMo" style="height: 630px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PowWLMo">
  <span>See the Pen <a href="https://codepen.io/kawamataryo/pen/PowWLMo">
  PowWLMo</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

# [Semantic UI](https://semantic-ui.com/)
<a href="https://semantic-ui.com/">![スクリーンショット 2019-12-20 6.57.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/d339610e-310d-7306-79fd-ff74bbb87cbb.png)</a>

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

<p data-height="600" data-theme-id="0" data-slug-hash="BPqyOy" data-default-tab="result" data-user="kawamataryo" data-pen-title="semantic ui Form" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" class="codepen">See the Pen <a href="https://codepen.io/kawamataryo/pen/BPqyOy/">semantic ui Form</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# [Bulma](https://bulma.io/)

<a href="https://bulma.io/">![スクリーンショット 2019-12-20 6.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/f907f28b-eeae-d812-15ee-4306280538ac.png)</a>

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

<p data-height="600" data-theme-id="0" data-slug-hash="jpeOdg" data-default-tab="result" data-user="kawamataryo" data-pen-title="Bulma form" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" class="codepen">See the Pen <a href="https://codepen.io/kawamataryo/pen/jpeOdg/">jpeOdg</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# [Materialize](https://materializecss.com/getting-started.html)
<a href="https://materializecss.com/getting-started.html">![スクリーンショット 2019-12-20 7.01.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/215610de-3379-8f95-f280-44b5aa10be2e.png)</a>



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

<p class="codepen" data-height="550" data-theme-id="dark" data-default-tab="result" data-user="kawamataryo" data-slug-hash="PBVbwX" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="material" class="codepen">
  <span>See the Pen <a href="https://codepen.io/kawamataryo/pen/PBVbwX">
  material</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>


# [UIKit](https://getuikit.com/)
<a href="https://getuikit.com/">![スクリーンショット 2019-12-20 6.58.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/fe8a0e15-8415-ce10-3bf7-8464dbb7d3a6.png)</a>

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

<p class="codepen" data-height="630" data-theme-id="dark" data-default-tab="result" data-user="kawamataryo" data-slug-hash="RwNKdYv" style="height: 630px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="UIKit form sample"　class="codepen">
  <span>See the Pen <a href="https://codepen.io/kawamataryo/pen/RwNKdYv">
  UIKit form sample</a> by ryo (<a href="https://codepen.io/kawamataryo">@kawamataryo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>



<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 最後に

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


明日21日の [Misoca+弥生 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/misoca-yayoi)は[shoko_yokoyama](https://qiita.com/shoko_yokoyama) さんです！