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

Transcript

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

   View Slide

2. The State of CSS 2019（2019年のCSS使用状況）

   https://2019.stateofcss.com/
   知っている 興味ある 満足している
   

   View Slide

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
   

   View Slide

4. ユーティリティ系 UIパーツ系
   Tailwind Bootstrap
   Bulma
   Tachyons
   Pure CSS
   Semantic UI
   デザイン仕上がってるね
   デザインあっさり
   

   View Slide

5. ユーティリティ系 UIパーツ系
   Tailwind Bootstrap
   Bulma
   Tachyons
   Pure CSS
   Semantic UI
   デザイン仕上がってるね
   デザインあっさり
   buttonの見た目を作りたい
   ↓
   class=“button”
   buttonの見た目を作りたい
   ↓
   class=“p-3 border border-blue bg-blue text-white”
   

   View Slide

6. ユーティリティ系 UIパーツ系
   Tailwind Bootstrap
   Bulma
   Tachyons
   Pure CSS
   Semantic UI
   デザイン仕上がってるね
   デザインあっさり
   CSS詳しくなくても、
   なんとなく作れる
   CSSの知識が必要!!!
   

   View Slide

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

   View Slide

8. Bootstrap Bulma
   UIパーツ系 & デザイン仕上がってる
   • デザインを考えるのが面倒な時
   • デザイナーがいない／デザイン仕様がないんだけど、いい感じに作らないといけない時。
   • 管理画面みたいなのを作る時
   • デザインパターンが少ない。遊びココロなし。
   • 工数がない！
   • 急ぎで作らないといけない！
   

   View Slide

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”
   

   View Slide

10. UIパーツ系 & デザインあっさり
    色がない！
    灰色塗りつぶしと黒ラインだけ！
    Pure CSS
    Semantic UI
    Pure CSS
    Semantic UI
    自分で色設定したり、
    色の意味を持たせた変数を作れる。
    色の設定がないので、色の設定を考えないといけない…！
    その色の意味も考えないといけない…！
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

14. ユーティリティ系
    Tailwind Tachyons
    • デザイン仕様がある時
    • デザイナーがいる／デザイン仕様があり、それにあわせてデザインをあてないといけない。
    • 素のCSS普通に書ける。
    • css苦手なメンバーがいると難易度高めかも。
    

    View Slide

15. • Style豊富
    • @applyなどでCSS内からclassを呼び出せる
    • 色変数・サイズ変数を用意しやすい
    • 色変数やサイズ変数をたくさん設定してし
    まうと、すべて書き出されて、CSSファイ
    ルがでかくなる
    • （使われてないものは書き出さないようにする策は別
    途用意されているが、これを使うと開発しにくさが
    あったりもする）
    • Styleが少ないかも
    • 軽量！
    Tailwind Tachyons
    

    View Slide

16. ユーティリティ系 UIパーツ系
    Tailwind Bootstrap
    Bulma
    Tachyons
    Pure CSS
    Semantic UI
    デザイン仕上がってるね
    デザインあっさり
    

    View Slide

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

    View Slide

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

    View Slide