Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSSフレームワーク選びのポイント/yuruhachi-dot-it-20190925-css-framework
Uni Ishizaki
September 25, 2019
Design
3
610
CSSフレームワーク選びのポイント/yuruhachi-dot-it-20190925-css-framework
Uni Ishizaki
September 25, 2019
Tweet
Share
More Decks by Uni Ishizaki
See All by Uni Ishizaki
フリーランスデザイナーが 成長し続けるための独学のコツ / 20210130-westtokyowebstudy
uniq
0
120
夫婦で作るAngularを使ったプロトタイピング / 20201223-yuruhachi-prototype
uniq
0
270
iPadを使ったほげほげオンラインノウハウ/20200527-yuruhachi-20
uniq
0
77
デザイナーの黒歴史/20200430-yuruhachi-19
uniq
0
360
ここを抑えるといい感じ♪ Webデザイン/20191030-yuruhachi-15
uniq
1
440
組織やチームによって変わるデザイナーの現場 / yuruhachi.it-20190529
uniq
2
250
HTML/CSSを意識して Webアプリをデザインしてみる(仮)/ yuruhachi.it-20190130
uniq
4
190
yuruhachi.it_201808_Data Visualization
uniq
0
140
yuruhachi.it_201808_PWA
uniq
0
150
Other Decks in Design
See All in Design
Storyboard: Midnight Cookie
luchiianita
0
220
Sponge Bob Exercise Sequence
diablicos_
0
210
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
akiramotomura
0
430
Oh my teeth | BrandBook Creative for Partners
mkt
PRO
0
140
Design System ガイドライン策定のススメ
tadaking
4
1.2k
開発現場でのサービスデザインとモデリング
tyshgc
PRO
6
1.7k
"Friendship" - Personal Story Sequence
innsamity
1
320
Interest + Curiosity Booklet
juliaso
0
130
プロダクト開発に活きるUXリサーチ - 基礎編 -
shippio
3
2.3k
アクセシビリティに興味のあるデザイナーに向けて
cybozuinsideout
PRO
1
10k
Cat Beast
hbosnian
1
420
Overflow - IdentityDeck
overflowinc
0
3.9k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
180k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
A better future with KSS
kneath
225
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
KATA
mclloyd
7
8.7k
A Philosophy of Restraint
colly
192
15k
Teambox: Starting and Learning
jrom
123
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Transcript
CSSフレームワーク選びの ポイント 20190925 / uniq
The State of CSS 2019(2019年のCSS使用状況) https://2019.stateofcss.com/ 知っている 興味ある 満足している
知っている • 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
ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI
デザイン仕上がってるね デザインあっさり
ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI
デザイン仕上がってるね デザインあっさり buttonの見た目を作りたい ↓ class=“button” buttonの見た目を作りたい ↓ class=“p-3 border border-blue bg-blue text-white”
ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI
デザイン仕上がってるね デザインあっさり CSS詳しくなくても、 なんとなく作れる CSSの知識が必要!!!
UIパーツ系 & デザイン仕上がってる Bootstrap Bulma Bootstrap Bulma すでに、primary,info,success…といったフォーマットが決まっている (変更することは可能だけど、面倒くさそう〜)
Bootstrap Bulma UIパーツ系 & デザイン仕上がってる • デザインを考えるのが面倒な時 • デザイナーがいない/デザイン仕様がないんだけど、いい感じに作らないといけない時。 •
管理画面みたいなのを作る時 • デザインパターンが少ない。遊びココロなし。 • 工数がない! • 急ぎで作らないといけない!
• 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”
UIパーツ系 & デザインあっさり 色がない! 灰色塗りつぶしと黒ラインだけ! Pure CSS Semantic UI Pure
CSS Semantic UI 自分で色設定したり、 色の意味を持たせた変数を作れる。 色の設定がないので、色の設定を考えないといけない…! その色の意味も考えないといけない…!
UIパーツ系 & デザインあっさり Pure CSS Semantic UI • デザイン仕様がある時 •
デザイナーがいる/デザイン仕様があり、それにあわせてデザインをあてないといけない。 • 管理画面ではない、あれこれなサービスを作る時 • そのまま使うとだいぶシンプル/文字が小さいので、お年寄りには厳しいUIになりそう。
• githubでたくさんスターをもらってるらし い • いちいちclass名に「ui」ってつける • UI パターンが多い • bootstrapまでこってり設定されてなくてもいいか
ら、最低限のUIが色指定しやすい形で用意されてて欲 しい人向け。 • Yahoo で作られたらしい • いちいちclass名に「pure-」ってつける • UIがほんとうにシンプルなものしかない • cssをゼロから書くのが好きな人向け。 Semantic UI Pure CSS
ユーティリティ系 Tailwind Tachyons 他フレームワーク/フレームワーク未使用に比べると… • classの効果について調べなくてもいい。 • htmlを見るだけで、 どんなstyleが当たってるのか分かる。 •
Class名を考えなくてもいい。 • レスポンシブが楽〜。 • CSSを普通に書いたら良いのでは? • htmlが長くなって読みにくい。 class名 1つ= style1個
ユーティリティ系 Tailwind Tachyons • デザイン仕様がある時 • デザイナーがいる/デザイン仕様があり、それにあわせてデザインをあてないといけない。 • 素のCSS普通に書ける。 •
css苦手なメンバーがいると難易度高めかも。
• Style豊富 • @applyなどでCSS内からclassを呼び出せる • 色変数・サイズ変数を用意しやすい • 色変数やサイズ変数をたくさん設定してし まうと、すべて書き出されて、CSSファイ ルがでかくなる
• (使われてないものは書き出さないようにする策は別 途用意されているが、これを使うと開発しにくさが あったりもする) • Styleが少ないかも • 軽量! Tailwind Tachyons
ユーティリティ系 UIパーツ系 Tailwind Bootstrap Bulma Tachyons Pure CSS Semantic UI
デザイン仕上がってるね デザインあっさり
CSSフレームワーク選びのポイント まとめ • 正解はひとつじゃない〜。 • どんなプロジェクトか?・どんなメンバーか?・工数はどのくらい?を 見ながら決めるといいと思う。
そういえば自己紹介 • ID: uniq • 石崎うに(うにさんと呼ばれてます) • 埼玉県でワンコと暮らしています • デザイナーです
• デザイナー友達を募集中!