SlideShare a Scribd company logo
1 of 22
Download to read offline
Agenda
less/
├── .csscomb.json
├── .csslintrc
├── alerts.less
├── badges.less
├── bootstrap.less
├── breadcrumbs.less
├── button-groups.less
├── buttons.less
├── carousel.less
├── close.less
├── code.less
├── component-animations.less
├── dropdowns.less
├── forms.less
├── glyphicons.less
├── grid.less
├── input-groups.less
├── labels.less
├── list-group.less
├── media.less
├── mixins/
├── mixins.less
├── modals.less
├── navbar.less
├── navs.less
├── normalize.less
├── pager.less
├── pagination.less
├── panels.less
├── popovers.less
├── print.less
├── progress-bars.less
├── responsive-embed.less
├── responsive-utilities.less
├── scaffolding.less
├── tables.less
├── theme.less
├── thumbnails.less
├── tooltip.less
├── type.less
├── utilities.less
├── variables.less
└── wells.less
まとめ
フレームワークがもたらしてくれるもの
設計 ルール
Components
「中間成果物」にもフレームワークを活用
Sketch
Wireframe Mockup
Review
Visual
Prototype
Develop
Concept
フレームワーク + コンポーネント
で
Webサイトはより"健康"になれる
これからのWebサイト設計の新しい教科書
CSSフレームワークでつくるマルチデバイス対応
サイトの考え方と実装
好評発売中3/23 RELEASE

More Related Content

Viewers also liked

デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作masaaki komori
 
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインyoshikawa_t
 
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to AndroidQuick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to AndroidHervé Mischler
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszmasaaki komori
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-techmasaaki komori
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成masaaki komori
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来masaaki komori
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)Hiroyuki Ogawa
 
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2Julien Sicot
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎masaaki komori
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎Hiroyuki Ogawa
 
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom WebinarUserZoom
 
Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012BELVEZE Damien
 
ReValTIC 2.0
ReValTIC 2.0ReValTIC 2.0
ReValTIC 2.0ReValTIC
 
Día especial de alex
Día especial de alexDía especial de alex
Día especial de alexmanmenpino
 
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.Sherbrooke Innopole
 
Frantext mode d'emploi rapide
Frantext mode d'emploi rapideFrantext mode d'emploi rapide
Frantext mode d'emploi rapideBELVEZE Damien
 
10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomieMatchFWD
 

Viewers also liked (20)

デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
 
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザインDreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
 
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to AndroidQuick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
 
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmszSketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
 
Webデザインと開発の未来
Webデザインと開発の未来Webデザインと開発の未来
Webデザインと開発の未来
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2[concept] Maquette site web de la bibliothèque universitaire Rennes 2
[concept] Maquette site web de la bibliothèque universitaire Rennes 2
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
 
Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012Ouverture des bibliothèques de section 2011 2012
Ouverture des bibliothèques de section 2011 2012
 
ReValTIC 2.0
ReValTIC 2.0ReValTIC 2.0
ReValTIC 2.0
 
Día especial de alex
Día especial de alexDía especial de alex
Día especial de alex
 
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
Déjeuner du GATE - Mai 2011 - Présentation E.M.S.
 
Frantext mode d'emploi rapide
Frantext mode d'emploi rapideFrantext mode d'emploi rapide
Frantext mode d'emploi rapide
 
Presentation abourjeily-fsedu-original
Presentation   abourjeily-fsedu-originalPresentation   abourjeily-fsedu-original
Presentation abourjeily-fsedu-original
 
10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie10 trucs pour les newbies de l’ergonomie
10 trucs pour les newbies de l’ergonomie
 

More from masaaki komori

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3masaaki komori
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみたmasaaki komori
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futuremasaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1masaaki komori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2masaaki komori
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2masaaki komori
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflowmasaaki komori
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginnersmasaaki komori
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53masaaki komori
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化masaaki komori
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザインmasaaki komori
 
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2masaaki komori
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6masaaki komori
 

More from masaaki komori (18)

コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
 
InstaVR使ってみた
InstaVR使ってみたInstaVR使ってみた
InstaVR使ってみた
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
Sublime Text 2 Basics
Sublime Text 2 BasicsSublime Text 2 Basics
Sublime Text 2 Basics
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 
Mastering Sublime Text 2
Mastering Sublime Text 2Mastering Sublime Text 2
Mastering Sublime Text 2
 
Getting Started with Sublime Text 2
Getting Started with Sublime Text 2Getting Started with Sublime Text 2
Getting Started with Sublime Text 2
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
 
Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53Amazon S3 and CloudFront, Route 53
Amazon S3 and CloudFront, Route 53
 
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
 
HTML5時代のWebデザイン
HTML5時代のWebデザインHTML5時代のWebデザイン
HTML5時代のWebデザイン
 
これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2これからはじめるCoda2とSublime Text 2
これからはじめるCoda2とSublime Text 2
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
 

Bootstrapではじめる、
Webサイト設計のモダンアプローチ