Embed Size (px)
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/
Citation preview
Utilize a “Style Guide”
Style Guide活用のススメ
© 2843 all rights reserved.
ニイハチヨンサン大月 茂樹
AGENDA
• マルチデバイス時代の到来
• Webのマルチデバイス対応
• Style Guide活用のススメ
Utilize a “Style Guide”
Utilize a “Style Guide”
質問・フィードバック
ohtsuki2843
Marketing, Consulting,Design, Markup,Frontend, Backend,Smartphone Apps,Lecture, Writing
Shigeki Ohtsuki
Utilize a “Style Guide”
Utilize a “Style Guide”
マルチデバイス時代の到来
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/
100%
0%スマートフォン ノートPC
75%
7%
http://www.yomiuri.co.jp/national/news/20130903-OYT1T00978.htm
Utilize a “Style Guide”
高1生がネット接続に良く使うデバイス
Webをパソコンで見るのは我々Web制作者だけになるかもしれない
Utilize a “Style Guide”
OUR MOBILE PLANEThttp://www.thinkwithgoogle.com/mobileplanet/ja/
Utilize a “Style Guide”
Utilize a “Style Guide”
利用スタイルの多様化
Utilize a “Style Guide”
Android Fragmentation Visualized (July 2013)http://opensignal.com/reports/fragmentation-2013/
Utilize a “Style Guide”
3,997Distinct Android devices seen last year
Utilize a “Style Guide”
Utilize a “Style Guide”
11,868Distinct Android devices seen this year
Utilize a “Style Guide”
Utilize a “Style Guide”
8Android versions still in use
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Android KitKathttp://www.android.com/kitkat/
Utilize a “Style Guide”
This is What Android Fragmentation Looks Likehttp://www.gottabemobile.com/2012/05/16/this-is-what-android-fragmentation-looks-like/
デバイスの断片化
Utilize a “Style Guide”
http://blog.evernote.com/blog/2013/01/23/beyond-the-evernote-fridge/
http://www.google.com/glass/start/
Utilize a “Style Guide”
Utilize a “Style Guide”
This is the web.http://bradfrostweb.com/blog/post/this-is-the-web/
Webのマルチデバイス対応
Utilize a “Style Guide”
Webのマルチデバイス対応
専用デザイン
タッチデバイスファーストデザイン
レスポンシブデザイン
Utilize a “Style Guide”
昨今のWebサイトは、とにかく複雑
• クリック（タップ）するとメニューが表示される、スライドするとか…
• ポップアップやレイヤーを重ねるとか…
• ページ遷移のアニメーションとか、パララックスとか…
Utilize a “Style Guide”
いちいち静的なデザインカンプなんて作れない（作れるけど、大変）…
制作・開発設計 検証 公開デザイン
デザイナー エンジニア
静的なデザインカンプとウォーターフォール型のワークフローのままだと…
静的なデザインカンプウォーターフォール型
Utilize a “Style Guide”
イメージがわかない、実際に操作してみないとわからない
クライアントのWeb担当者
Utilize a “Style Guide”
認識の違い 手戻り
ココとココのあいだの動きは？
デザイナー 制作チームメンバー
Utilize a “Style Guide”
認識の違い 手戻り
Utilize a “Style Guide”
制作・開発設計 検証 公開デザイン
このデバイスで動作しない！
表示が遅い！動作が重い！
手戻り
Utilize a “Style Guide”
スマートフォンブラウザ不具合特集
若松 浩昭（株式会社ジークス）
若松 浩昭（株式会社ジークス）
スマートフォン対応、 気をつけたいトラブル
http://www.slideshare.net/HiroakiWakamatsu/ss-14011485
http://www.slideshare.net/HiroakiWakamatsu/ss-12718639
Android対応が大変
Utilize a “Style Guide”
クライアントは、確認・承認したデザインカンプの通りに仕上がると思っている
エンジニアが火消しに奔走
Utilize a “Style Guide”
トラブルや手戻りを防ぐ方法は？
Utilize a “Style Guide”
そこで、HTMLプロトタイピング
デザイン
検証 制作・開発
Utilize a “Style Guide”
デザイナー エンジニア
アジャイル型or
スパイラル型
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
ページの作り込みよりもプロトタイピングを先に！
プロトタイプ = 試作品
Utilize a “Style Guide”
Utilize a “Style Guide”
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装
コレ、無理かも…
trouble
設計 ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装
動くものを見せる
プロトタイプやモックアップ
good
Utilize a “Style Guide”
• トラブルの芽を早期に摘める
• 理解しやすい、イメージが湧きやすい
• そのまま作り込んでいける
設計 ラフデザイン デザイン
検証 制作・開発Utilize a “Style Guide”
ビジュアルデザインはStyle Tilesで
Utilize a “Style Guide”
Style Tilesとは？
Style Tileshttp://styletil.es/
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
ラフデザイン デザイン
検証 制作・開発
Utilize a “Style Guide”
実装 公開
プロトタイピングの成果物がStyle Guide
Style Guide活用のススメ
Utilize a “Style Guide”
Style Guideとは？
Utilize a “Style Guide”
Google HTML/CSS Style Guidehttp://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Utilize a “Style Guide”
• 制作チーム内で実装方法を統一するためのドキュメント
• 公開後もWebサイトの品質を保つためのメモ書き、さらには納品物
Utilize a “Style Guide”
これまでは…
Utilize a “Style Guide”
• デザインやレイアウトの統一
• 制作・運用・管理の効率化
• コード品質低下の抑制good
これからは、さらに…
• さまざまなデバイスやブラウザでの表示・動作も検証・担保された、生きたドキュメント
• HTMLとCSSだけでなく、JavaScriptで実装する機能も含めたもの
• ページの構成要素（モジュール、 コンポーネント）を集めたもの
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Utilize a “Style Guide”
Style Guideの例
Utilize a “Style Guide”
Bootstrap CSS/Compornents/JavaScripthttp://getbootstrap.com/
Utilize a “Style Guide”
.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”
.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”
差分のみ記述
カートに入れる
Utilize a “Style Guide”
購入手続きへ
決済方法の選択へ
確認画面へ
購入する
カートに入れる
Utilize a “Style Guide”
購入手続きへ
決済方法の選択へ
確認画面へ
購入する
Utilize a “Style Guide”
カートに入れる
ソフトタッチTシャツソフトタッチ素材のTシャツ。ふわふわとした肌触りがとても心地よくベーシックな無地なので、いろいろな着こなしに合わせられます。
¥2,800
商品ページへ
新商品発売のお知らせこのたび、当店では新商品「ソフトタッチTシャツ」を販売することにいたしました。詳しくは、商品ページをご覧ください。
Utilize a “Style Guide”
カートに入れる
ソフトタッチTシャツソフトタッチ素材のTシャツ。ふわふわとした肌触りがとても心地よくベーシックな無地なので、いろいろな着こなしに合わせられます。
¥2,800
商品ページへ
新商品発売のお知らせこのたび、当店では新商品「ソフトタッチTシャツ」を販売することにいたしました。詳しくは、商品ページをご覧ください。
Utilize a “Style Guide”
効率的なCSSの記述
Object-Oriented CSShttp://oocss.org/
Scalable and Modular Architecutre for CSShttp://smacss.com/
good+ • 実装・検証の効率化
• 効率的なコード
Utilize a “Style Guide”
Utilize a “Style Guide”
Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/
Style Guide作成ツール
Utilize a “Style Guide”
StyleDoccohttp://jacobrask.github.io/styledocco/
Kalei -Style Guidehttp://kaleistyleguide.com/
$ npm install -fg styledocco
require
Command Line
Utilize a “Style Guide”
/*# サムネイルサンプルページの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”
$ styledocco -n “My Web Project” css
Command Line
Utilize a “Style Guide”
$ styledocco -n “My Web Project” css
Command Line
-n プロジェクト名
Utilize a “Style Guide”
$ styledocco -n “My Web Project” css
Command Line
対象のCSSファイルがあるフォルダ名
Utilize a “Style Guide”
$ styledocco -n “My Web Project” css/style.css
Command Line
対象のCSSファイル
Utilize a “Style Guide”
Utilize a “Style Guide”
good
Utilize a “Style Guide”
CSSプリプロセッサーへ対応
$ git clone git://github.com/thomasdavis/kaleistyleguide.git
https://github.com/thomasdavis/kaleistyleguide
or
Command Line
Download
Utilize a “Style Guide”
good
Utilize a “Style Guide”
ローカルにWebサーバーが走っているだけで良い
Utilize a “Style Guide”
- 制作対象のサイトをベースにStyle Guideを作成
- ヘッダーやナビゲーション、フッターなど込みの状態で作る
- CSSとJavaScriptは1ファイルで作る
Utilize a “Style Guide”
実経験にもとづく、活用のポイント
Utilize a “Style Guide”
•CSSやJavaScriptの結合時にトラブルが生じにくい
•テスト効率をupできるgood
Utilize a “Style Guide”
• モジュール・コンポーネントをできるだけ出し切る
• とは言え、出し切れないので管理を徹底
- 実装担当者が独自実装しないよう管理者が一括管理する
- チームで最もスキルが高い人を管理者とする
- 1ページでしか使わないものでも、できるだけ組み込む
Utilize a “Style Guide”
• 実際のコンテンツを入れて検証する
- 実際のテキストが入ったときにレイアウト崩れが起きないように
- アタリ画像は実際のサイズ、縦横比で
PLACEHOLD.IThttp://placehold.it/
Utilize a “Style Guide”
• 特にスマホでの検証へ重点を置く
- Adobe Edge InspectやGhostlabなどのツールを活用
- Androidは実機検証に越したことはない
- Remote Testkitのようなサービスを活用
Ghostlabhttp://vanamco.com/ghostlab/
Adobe Edge Inspecthttp://html.adobe.com/jp/edge/inspect/
Utilize a “Style Guide”
Remote Testkithttp://appkitbox.com/testkit
Utilize a “Style Guide”
Utilize a “Style Guide”
• 静的なデザインカンプの扱い
- 全く不要になるわけではない
- クライアントとのコミュニケーションツールとして有用
- あくまでも「イメージを共有するためのツール」
Utilize a “Style Guide”
• デザイナーとエンジニアのコミュニケーション
- 役割やスキルセット以外のタスクも柔軟に、積極的に
- 「できる・できない」「簡単・難しい」の共有
デザイン マークアッププログラミング
デザイナー エンジニア
Utilize a “Style Guide”
Utilize a “Style Guide”
今日のまとめ
•HTMLプロトタイピングやStyle Guideを導入し、トラブルを未然に防ぐ、芽を摘む
•Style Guideを生きたドキュメントとして活かす
Utilize a “Style Guide”
http://www.amazon.co.jp/gp/product/4883378942
Utilize a “Style Guide”
Thank you for your attention.
質問・フィードバック
ohtsuki2843
![[DI11] 眠れるデータを宝に変える! R 徹底活用のススメ。～分析から可視化まで～](https://img.pdfslide.tips/doc/110x75/5a6478567f8b9a3b568b459d/di11-r-.jpg)
![反復（HANPUKU）のススメ [松尾茂起]](https://img.pdfslide.tips/doc/110x75/58f9c162760da32f4b8b5bfe/hanpuku-.jpg)
