style guide活用のススメ
DESCRIPTION
CSS Nite in OSAKA, Vol. 36(2013/9/10)、CSS Nite in Ginza, Vol.71(2013/9/19)にて開催された「次世代のWebデザインへの2つのヒント」のスライド。両セッションのスライドをマージしてまとめています。 スライドの末尾で紹介していますが、2013/11/7に拙著『マルチデバイス時代のWebデザインガイドブック』が発売となりました。興味ある方は書店にて手に取ってみてください。 サポートサイト : http://2843.jp/books/nabebon/ Facebookページ : http://facebook.com/nabebon/ Amazon : http://www.amazon.co.jp/dp/4883378942/TRANSCRIPT
![Page 1: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/1.jpg)
Utilize a “Style Guide”
Style Guide活用のススメ
© 2843 all rights reserved.
ニイハチヨンサン大月 茂樹
![Page 2: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/2.jpg)
AGENDA
• マルチデバイス時代の到来
• Webのマルチデバイス対応
• Style Guide活用のススメ
Utilize a “Style Guide”
![Page 3: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/3.jpg)
Utilize a “Style Guide”
質問・フィードバック
ohtsuki2843
![Page 4: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/4.jpg)
Marketing, Consulting,Design, Markup,Frontend, Backend,Smartphone Apps,Lecture, Writing
Shigeki Ohtsuki
Utilize a “Style Guide”
![Page 5: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/5.jpg)
Utilize a “Style Guide”
マルチデバイス時代の到来
![Page 6: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/6.jpg)
Utilize a “Style Guide”
How Apple Has Changed The World In Just 7 Yearshttp://www.cultofmac.com/219813/how-apple-has-changed-the-world-in-just-7-years-picture-1000-words/
![Page 7: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/7.jpg)
100%
0%スマートフォン ノートPC
75%
7%
http://www.yomiuri.co.jp/national/news/20130903-OYT1T00978.htm
Utilize a “Style Guide”
高1生がネット接続に良く使うデバイス
![Page 8: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/8.jpg)
Webをパソコンで見るのは我々Web制作者だけになるかもしれない
Utilize a “Style Guide”
![Page 9: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/9.jpg)
OUR MOBILE PLANEThttp://www.thinkwithgoogle.com/mobileplanet/ja/
Utilize a “Style Guide”
![Page 10: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/10.jpg)
Utilize a “Style Guide”
![Page 11: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/11.jpg)
利用スタイルの多様化
Utilize a “Style Guide”
![Page 12: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/12.jpg)
Android Fragmentation Visualized (July 2013)http://opensignal.com/reports/fragmentation-2013/
Utilize a “Style Guide”
![Page 13: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/13.jpg)
3,997Distinct Android devices seen last year
Utilize a “Style Guide”
![Page 14: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/14.jpg)
Utilize a “Style Guide”
![Page 15: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/15.jpg)
11,868Distinct Android devices seen this year
Utilize a “Style Guide”
![Page 16: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/16.jpg)
Utilize a “Style Guide”
![Page 17: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/17.jpg)
8Android versions still in use
Utilize a “Style Guide”
![Page 18: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/18.jpg)
Utilize a “Style Guide”
![Page 19: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/19.jpg)
Utilize a “Style Guide”
Android KitKathttp://www.android.com/kitkat/
![Page 20: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/20.jpg)
Utilize a “Style Guide”
This is What Android Fragmentation Looks Likehttp://www.gottabemobile.com/2012/05/16/this-is-what-android-fragmentation-looks-like/
![Page 21: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/21.jpg)
デバイスの断片化
Utilize a “Style Guide”
![Page 22: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/22.jpg)
http://blog.evernote.com/blog/2013/01/23/beyond-the-evernote-fridge/
http://www.google.com/glass/start/
Utilize a “Style Guide”
![Page 23: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/23.jpg)
Utilize a “Style Guide”
This is the web.http://bradfrostweb.com/blog/post/this-is-the-web/
![Page 24: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/24.jpg)
Webのマルチデバイス対応
Utilize a “Style Guide”
![Page 25: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/25.jpg)
Webのマルチデバイス対応
専用デザイン
タッチデバイスファーストデザイン
レスポンシブデザイン
Utilize a “Style Guide”
![Page 26: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/26.jpg)
昨今のWebサイトは、とにかく複雑
• クリック(タップ)するとメニューが表示される、スライドするとか…
• ポップアップやレイヤーを重ねるとか…
• ページ遷移のアニメーションとか、パララックスとか…
Utilize a “Style Guide”
いちいち静的なデザインカンプなんて作れない(作れるけど、大変)…
![Page 27: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/27.jpg)
制作・開発設計 検証 公開デザイン
デザイナー エンジニア
静的なデザインカンプとウォーターフォール型のワークフローのままだと…
静的なデザインカンプウォーターフォール型
Utilize a “Style Guide”
![Page 28: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/28.jpg)
イメージがわかない、実際に操作してみないとわからない
クライアントのWeb担当者
Utilize a “Style Guide”
認識の違い 手戻り
![Page 29: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/29.jpg)
ココとココのあいだの動きは?
デザイナー 制作チームメンバー
Utilize a “Style Guide”
認識の違い 手戻り
![Page 30: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/30.jpg)
Utilize a “Style Guide”
![Page 31: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/31.jpg)
制作・開発設計 検証 公開デザイン
このデバイスで動作しない!
表示が遅い!動作が重い!
手戻り
Utilize a “Style Guide”
![Page 32: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/32.jpg)
スマートフォンブラウザ不具合特集
若松 浩昭(株式会社ジークス)
若松 浩昭(株式会社ジークス)
スマートフォン対応、 気をつけたいトラブル
http://www.slideshare.net/HiroakiWakamatsu/ss-14011485
http://www.slideshare.net/HiroakiWakamatsu/ss-12718639
Android対応が大変
Utilize a “Style Guide”
![Page 33: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/33.jpg)
クライアントは、確認・承認したデザインカンプの通りに仕上がると思っている
エンジニアが火消しに奔走
Utilize a “Style Guide”
![Page 34: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/34.jpg)
トラブルや手戻りを防ぐ方法は?
Utilize a “Style Guide”
![Page 35: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/35.jpg)
そこで、HTMLプロトタイピング
デザイン
検証 制作・開発
Utilize a “Style Guide”
デザイナー エンジニア
アジャイル型or
スパイラル型
![Page 36: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/36.jpg)
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
![Page 37: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/37.jpg)
ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
ページの作り込みよりもプロトタイピングを先に!
![Page 38: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/38.jpg)
プロトタイプ = 試作品
Utilize a “Style Guide”
![Page 39: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/39.jpg)
Utilize a “Style Guide”
![Page 40: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/40.jpg)
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装
コレ、無理かも…
trouble
![Page 41: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/41.jpg)
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装
動くものを見せる
プロトタイプやモックアップ
![Page 42: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/42.jpg)
good
Utilize a “Style Guide”
• トラブルの芽を早期に摘める
• 理解しやすい、イメージが湧きやすい
• そのまま作り込んでいける
![Page 43: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/43.jpg)
設計 ラフデザイン デザイン
検証 制作・開発Utilize a “Style Guide”
ビジュアルデザインはStyle Tilesで
![Page 44: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/44.jpg)
Utilize a “Style Guide”
Style Tilesとは?
Style Tileshttp://styletil.es/
![Page 45: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/45.jpg)
Utilize a “Style Guide”
![Page 46: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/46.jpg)
Utilize a “Style Guide”
![Page 47: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/47.jpg)
Utilize a “Style Guide”
![Page 48: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/48.jpg)
ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
プロトタイピングの成果物がStyle Guide
![Page 49: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/49.jpg)
Style Guide活用のススメ
Utilize a “Style Guide”
![Page 50: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/50.jpg)
Style Guideとは?
Utilize a “Style Guide”
Google HTML/CSS Style Guidehttp://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
![Page 51: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/51.jpg)
Utilize a “Style Guide”
![Page 52: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/52.jpg)
• 制作チーム内で実装方法を統一するためのドキュメント
• 公開後もWebサイトの品質を保つためのメモ書き、さらには納品物
Utilize a “Style Guide”
これまでは…
![Page 53: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/53.jpg)
Utilize a “Style Guide”
• デザインやレイアウトの統一
• 制作・運用・管理の効率化
• コード品質低下の抑制good
![Page 54: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/54.jpg)
これからは、さらに…
• さまざまなデバイスやブラウザでの表示・動作も検証・担保された、生きたドキュメント
• HTMLとCSSだけでなく、JavaScriptで実装する機能も含めたもの
• ページの構成要素(モジュール、 コンポーネント)を集めたもの
Utilize a “Style Guide”
![Page 55: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/55.jpg)
Utilize a “Style Guide”
![Page 56: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/56.jpg)
Utilize a “Style Guide”
![Page 57: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/57.jpg)
Utilize a “Style Guide”
![Page 58: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/58.jpg)
Utilize a “Style Guide”
![Page 59: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/59.jpg)
Utilize a “Style Guide”
![Page 60: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/60.jpg)
Utilize a “Style Guide”
![Page 61: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/61.jpg)
Utilize a “Style Guide”
![Page 62: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/62.jpg)
Utilize a “Style Guide”
![Page 63: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/63.jpg)
Style Guideの例
Utilize a “Style Guide”
Bootstrap CSS/Compornents/JavaScripthttp://getbootstrap.com/
![Page 64: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/64.jpg)
Utilize a “Style Guide”
![Page 65: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/65.jpg)
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
CSS
Utilize a “Style Guide”
![Page 66: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/66.jpg)
.btn-default { color: #333333; background-color: #ffffff; border-color: #cccccc;}
.btn-primary { color: #ffffff; background-color: #428bca; border-color: #357ebd;}
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px;}
CSS
Utilize a “Style Guide”
差分のみ記述
![Page 67: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/67.jpg)
カートに入れる
Utilize a “Style Guide”
購入手続きへ
決済方法の選択へ
確認画面へ
購入する
![Page 68: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/68.jpg)
カートに入れる
Utilize a “Style Guide”
購入手続きへ
決済方法の選択へ
確認画面へ
購入する
![Page 69: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/69.jpg)
Utilize a “Style Guide”
カートに入れる
ソフトタッチTシャツソフトタッチ素材のTシャツ。ふわふわとした肌触りがとても心地よくベーシックな無地なので、いろいろな着こなしに合わせられます。
¥2,800
商品ページへ
新商品発売のお知らせこのたび、当店では新商品「ソフトタッチTシャツ」を販売することにいたしました。詳しくは、商品ページをご覧ください。
![Page 70: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/70.jpg)
Utilize a “Style Guide”
カートに入れる
ソフトタッチTシャツソフトタッチ素材のTシャツ。ふわふわとした肌触りがとても心地よくベーシックな無地なので、いろいろな着こなしに合わせられます。
¥2,800
商品ページへ
新商品発売のお知らせこのたび、当店では新商品「ソフトタッチTシャツ」を販売することにいたしました。詳しくは、商品ページをご覧ください。
![Page 71: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/71.jpg)
Utilize a “Style Guide”
効率的なCSSの記述
Object-Oriented CSShttp://oocss.org/
Scalable and Modular Architecutre for CSShttp://smacss.com/
![Page 72: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/72.jpg)
good+ • 実装・検証の効率化
• 効率的なコード
Utilize a “Style Guide”
![Page 73: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/73.jpg)
Utilize a “Style Guide”
Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/
![Page 74: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/74.jpg)
Style Guide作成ツール
Utilize a “Style Guide”
StyleDoccohttp://jacobrask.github.io/styledocco/
Kalei -Style Guidehttp://kaleistyleguide.com/
![Page 75: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/75.jpg)
$ npm install -fg styledocco
require
Command Line
Utilize a “Style Guide”
![Page 76: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/76.jpg)
/*# サムネイルサンプルページのPDFダウンロードの箇所で表示するサムネイルなどに枠をつけます。```<img src="http://placehold.it/182x257" alt="" class="img-thumbnail">
```*Bootstrapのimg-thumbnailクラスのプロパティをオーバーライドしています。*/
.img-thumbnail { display: block; margin: 0 auto .5em; padding: .5em;}
CSS
Markdown
Utilize a “Style Guide”
![Page 77: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/77.jpg)
$ styledocco -n “My Web Project” css
Command Line
Utilize a “Style Guide”
![Page 78: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/78.jpg)
$ styledocco -n “My Web Project” css
Command Line
-n プロジェクト名
Utilize a “Style Guide”
![Page 79: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/79.jpg)
$ styledocco -n “My Web Project” css
Command Line
対象のCSSファイルがあるフォルダ名
Utilize a “Style Guide”
![Page 80: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/80.jpg)
$ styledocco -n “My Web Project” css/style.css
Command Line
対象のCSSファイル
Utilize a “Style Guide”
![Page 81: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/81.jpg)
Utilize a “Style Guide”
![Page 82: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/82.jpg)
good
Utilize a “Style Guide”
CSSプリプロセッサーへ対応
![Page 83: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/83.jpg)
$ git clone git://github.com/thomasdavis/kaleistyleguide.git
https://github.com/thomasdavis/kaleistyleguide
or
Command Line
Download
Utilize a “Style Guide”
![Page 84: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/84.jpg)
good
Utilize a “Style Guide”
ローカルにWebサーバーが走っているだけで良い
![Page 85: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/85.jpg)
Utilize a “Style Guide”
![Page 86: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/86.jpg)
- 制作対象のサイトをベースにStyle Guideを作成
- ヘッダーやナビゲーション、フッターなど込みの状態で作る
- CSSとJavaScriptは1ファイルで作る
Utilize a “Style Guide”
実経験にもとづく、活用のポイント
![Page 87: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/87.jpg)
Utilize a “Style Guide”
![Page 88: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/88.jpg)
•CSSやJavaScriptの結合時にトラブルが生じにくい
•テスト効率をupできるgood
Utilize a “Style Guide”
![Page 89: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/89.jpg)
• モジュール・コンポーネントをできるだけ出し切る
• とは言え、出し切れないので管理を徹底
- 実装担当者が独自実装しないよう管理者が一括管理する
- チームで最もスキルが高い人を管理者とする
- 1ページでしか使わないものでも、できるだけ組み込む
Utilize a “Style Guide”
![Page 90: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/90.jpg)
• 実際のコンテンツを入れて検証する
- 実際のテキストが入ったときにレイアウト崩れが起きないように
- アタリ画像は実際のサイズ、縦横比で
PLACEHOLD.IThttp://placehold.it/
Utilize a “Style Guide”
![Page 91: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/91.jpg)
• 特にスマホでの検証へ重点を置く
- Adobe Edge InspectやGhostlabなどのツールを活用
- Androidは実機検証に越したことはない
- Remote Testkitのようなサービスを活用
Ghostlabhttp://vanamco.com/ghostlab/
Adobe Edge Inspecthttp://html.adobe.com/jp/edge/inspect/
Utilize a “Style Guide”
![Page 92: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/92.jpg)
Remote Testkithttp://appkitbox.com/testkit
Utilize a “Style Guide”
![Page 93: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/93.jpg)
Utilize a “Style Guide”
![Page 94: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/94.jpg)
• 静的なデザインカンプの扱い
- 全く不要になるわけではない
- クライアントとのコミュニケーションツールとして有用
- あくまでも「イメージを共有するためのツール」
Utilize a “Style Guide”
![Page 95: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/95.jpg)
• デザイナーとエンジニアのコミュニケーション
- 役割やスキルセット以外のタスクも柔軟に、積極的に
- 「できる・できない」「簡単・難しい」の共有
デザイン マークアッププログラミング
デザイナー エンジニア
Utilize a “Style Guide”
![Page 96: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/96.jpg)
Utilize a “Style Guide”
今日のまとめ
•HTMLプロトタイピングやStyle Guideを導入し、トラブルを未然に防ぐ、芽を摘む
•Style Guideを生きたドキュメントとして活かす
![Page 97: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/97.jpg)
Utilize a “Style Guide”
http://www.amazon.co.jp/gp/product/4883378942
![Page 98: Style Guide活用のススメ](https://reader033.vdocuments.site/reader033/viewer/2022051816/5462bd30af7959652f8b76ff/html5/thumbnails/98.jpg)
Utilize a “Style Guide”
Thank you for your attention.
質問・フィードバック
ohtsuki2843