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

B051d2bcb69590fd33f86f356c645920?s=47 Uni Ishizaki
September 25, 2019

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

B051d2bcb69590fd33f86f356c645920?s=128

Uni Ishizaki

September 25, 2019
Tweet

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つ= style1個
  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 • 石崎うに(うにさんと呼ばれてます) • 埼玉県でワンコと暮らしています • デザイナーです

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