CSSフレームワーク選びのポイント/yuruhachi-dot-it-20190925-css-framework

Transcript

1. CSSフレームワーク選びの ポイント 20190925 / uniq

2. The State of CSS 2019（2019年のCSS使用状況）
 https://2019.stateofcss.com/ 知っている 興味ある 満足している

3. 知っている • 1位：Bootstrap • 2位：foundation • 3位：Materialize css • 4位：Semantic

   UI • 5位：Bulma 興味ある • 1位：Tailwind • 2位：Semantic UI • 3位：Pure CSS • 4位：Bulma • 5位：Ant Design 満足している • 1位：Tailwind • 2位：Bulma • 3位：Pure CSS • 4位：Tachyons • 5位：Semantic UI

4. ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI

   デザイン仕上がってるね デザインあっさり

5. ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI

   デザイン仕上がってるね デザインあっさり buttonの見た目を作りたい ↓ class=“button” buttonの見た目を作りたい ↓ class=“p-3 border border-blue bg-blue text-white”

6. ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI

   デザイン仕上がってるね デザインあっさり CSS詳しくなくても、 なんとなく作れる CSSの知識が必要!!!

7. UIパーツ系 & デザイン仕上がってる Bootstrap Bulma Bootstrap Bulma すでに、primary,info,success…といったフォーマットが決まっている （変更することは可能だけど、面倒くさそう〜）

8. Bootstrap Bulma UIパーツ系 & デザイン仕上がってる • デザインを考えるのが面倒な時 • デザイナーがいない／デザイン仕様がないんだけど、いい感じに作らないといけない時。 •

   管理画面みたいなのを作る時 • デザインパターンが少ない。遊びココロなし。 • 工数がない！ • 急ぎで作らないといけない！

9. • jQuery 使ってる • JS知らなくてもかっちょいいメニューとか作れる • 認知度が高いのでノウハウ情報が豊富 • UI がたくさんある

   • ルールが多い。 • 大小については基本スタイルがある。
 色については基本スタイルはないので必ずclass指定し ないといけない。 • 例）class=“btn”→ただの文字。ボタンっぽくない見た目。 • 例）class=“btn btn-primary” • 例）class=“btn btn-primary btn-lg” Bootstrap Bulma • JavaScript 使ってない • Vue.jsとセットでも安心して使えそうだが、そのままだとBSよ りもできることが少ない • Font Awesome（font icon）対応 • ルールが少ない。 • 基本styleがあって、そこに「has-」「is-」 class を付けて切り替える • 例）class=“button”→ボタンの見た目になってくれる。 • 例）class=“button is-primary” • 例）class=“button is-large”

10. UIパーツ系 & デザインあっさり 色がない！ 灰色塗りつぶしと黒ラインだけ！ Pure CSS Semantic UI Pure

    CSS Semantic UI 自分で色設定したり、 色の意味を持たせた変数を作れる。 色の設定がないので、色の設定を考えないといけない…！ その色の意味も考えないといけない…！

11. UIパーツ系 & デザインあっさり Pure CSS Semantic UI • デザイン仕様がある時 •

    デザイナーがいる／デザイン仕様があり、それにあわせてデザインをあてないといけない。 • 管理画面ではない、あれこれなサービスを作る時 • そのまま使うとだいぶシンプル／文字が小さいので、お年寄りには厳しいUIになりそう。

12. • githubでたくさんスターをもらってるらし い • いちいちclass名に「ui」ってつける • UI パターンが多い • bootstrapまでこってり設定されてなくてもいいか

    ら、最低限のUIが色指定しやすい形で用意されてて欲 しい人向け。 • Yahoo で作られたらしい • いちいちclass名に「pure-」ってつける • UIがほんとうにシンプルなものしかない • cssをゼロから書くのが好きな人向け。 Semantic UI Pure CSS

13. ユーティリティ系 Tailwind Tachyons 他フレームワーク/フレームワーク未使用に比べると… • classの効果について調べなくてもいい。 • htmlを見るだけで、
 どんなstyleが当たってるのか分かる。 •

    Class名を考えなくてもいい。 • レスポンシブが楽〜。 • CSSを普通に書いたら良いのでは？ • htmlが長くなって読みにくい。 class名 1つ= style１個

14. ユーティリティ系 Tailwind Tachyons • デザイン仕様がある時 • デザイナーがいる／デザイン仕様があり、それにあわせてデザインをあてないといけない。 • 素のCSS普通に書ける。 •

    css苦手なメンバーがいると難易度高めかも。

15. • Style豊富 • @applyなどでCSS内からclassを呼び出せる • 色変数・サイズ変数を用意しやすい • 色変数やサイズ変数をたくさん設定してし まうと、すべて書き出されて、CSSファイ ルがでかくなる

    • （使われてないものは書き出さないようにする策は別 途用意されているが、これを使うと開発しにくさが あったりもする） • Styleが少ないかも • 軽量！ Tailwind Tachyons

16. ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI

    デザイン仕上がってるね デザインあっさり

17. CSSフレームワーク選びのポイント まとめ • 正解はひとつじゃない〜。 • どんなプロジェクトか？・どんなメンバーか？・工数はどのくらい？を 見ながら決めるといいと思う。

18. そういえば自己紹介 • ID: uniq • 石崎うに（うにさんと呼ばれてます） • 埼玉県でワンコと暮らしています • デザイナーです

    • デザイナー友達を募集中！