• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Style Guide活用のススメ
 

Style Guide活用のススメ

on

  • 3,179 views

CSS Nite in OSAKA, Vol. 36(2013/9/10)、CSS Nite in Ginza, ...

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/

Statistics

Views

Total Views
3,179
Views on SlideShare
2,477
Embed Views
702

Actions

Likes
28
Downloads
20
Comments
0

8 Embeds 702

http://cssnite.jp 607
http://cloud.feedly.com 32
https://twitter.com 25
http://www.feedspot.com 23
http://www.cssnite.jp 11
http://reader.aol.com 2
http://tweetedtimes.com 1
https://www.chatwork.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Style Guide活用のススメ Style Guide活用のススメ Presentation Transcript

  • Style Guide活用のススメ Utilize a “Style Guide” ニイハチヨンサン 大月 茂樹 © 2843 all rights reserved.
  • AGENDA • マルチデバイス時代の到来 • Webのマルチデバイス対応 • Style Guide活用のススメ Utilize a “Style Guide”
  • 質問・フィードバック ohtsuki2843 Utilize a “Style Guide”
  • Shigeki Ohtsuki Marketing, Consulting, Design, Markup, Frontend, Backend, Smartphone Apps, Lecture, Writing Utilize a “Style Guide”
  • マルチデバイス時代の到来 Utilize a “Style Guide”
  • How Apple Has Changed The World In Just 7 Years http://www.cultofmac.com/219813/how-apple-has-changed-the-world-in-just-7-years-picture-1000-words/ Utilize a “Style Guide”
  • 高1生がネット接続に良く使うデバイス 100% 75% 7% 0% スマートフォン ノートPC http://www.yomiuri.co.jp/national/news/20130903-OYT1T00978.htm Utilize a “Style Guide”
  • Webをパソコンで見るのは 我々Web制作者だけになるかもしれない Utilize a “Style Guide”
  • OUR MOBILE PLANET http://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,997 Distinct Android devices seen last year Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • 11,868 Distinct Android devices seen this year Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • 8 Android versions still in use Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • Android KitKat http://www.android.com/kitkat/ Utilize a “Style Guide”
  • This is What Android Fragmentation Looks Like http://www.gottabemobile.com/2012/05/16/this-is-what-android-fragmentation-looks-like/ Utilize a “Style Guide”
  • デバイスの断片化 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”
  • This is the web. http://bradfrostweb.com/blog/post/this-is-the-web/ Utilize a “Style Guide”
  • 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” 検証 公開 表示が遅い! 動作が重い!
  • Android対応が大変 http://www.slideshare.net/HiroakiWakamatsu/ss-12718639 スマートフォンブラウザ不具合特集 スマートフォン対応、     気をつけたいトラブル 若松 浩昭(株式会社ジークス) http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 Utilize a “Style Guide” 若松 浩昭(株式会社ジークス)
  • クライアントは、確認・承認した デザインカンプの通りに仕上がると思っている エンジニアが火消しに奔走 Utilize a “Style Guide”
  • トラブルや手戻りを防ぐ方法は? Utilize a “Style Guide”
  • そこで、HTMLプロトタイピング アジャイル型 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”
  • 設計 ラフ デザイン デザイン 動くものを 見せる 検証 制作・ 開発 実装 プロトタイプやモックアップ Utilize a “Style Guide”
  • • トラブルの芽を早期に摘める • 理解しやすい、 good イメージが湧きやすい • そのまま作り込んでいける Utilize a “Style Guide”
  • ビジュアルデザインは Style Tilesで 設計 Utilize a “Style Guide” ラフ デザイン デザイン 検証 制作・ 開発
  • Style Tilesとは? Style Tiles http://styletil.es/ Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • ラフ デザイン プロトタイピングの 成果物がStyle Guide デザイン 検証 制作・ 開発 実装 Utilize a “Style Guide” 公開
  • Style Guide活用のススメ Utilize a “Style Guide”
  • Style Guideとは? Google HTML/CSS Style Guide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • これまでは… • 制作チーム内で実装方法を統一するための ドキュメント • 公開後もWebサイトの品質を保つための メモ書き、さらには納品物 Utilize a “Style Guide”
  • • デザインやレイアウトの統一 • 制作・運用・管理の効率化 good Utilize a “Style Guide” • コード品質低下の抑制
  • これからは、 さらに… • さまざまなデバイスやブラウザでの表示・動作も 検証・担保された、生きたドキュメント • 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の例 Bootstrap CSS/Compornents/JavaScript http://getbootstrap.com/ Utilize a “Style Guide”
  • 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; } Utilize a “Style Guide” CSS
  • .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; } Utilize a “Style Guide” CSS 差分のみ記述
  • カートに入れる 購入手続きへ 決済方法の選択へ 確認画面へ 購入する 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 CSS http://oocss.org/ Scalable and Modular Architecutre for CSS http://smacss.com/ Utilize a “Style Guide”
  • + good Utilize a “Style Guide” • 実装・検証の効率化 • 効率的なコード
  • Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/ Utilize a “Style Guide”
  • Style Guide作成ツール StyleDocco http://jacobrask.github.io/styledocco/ Kalei -Style Guide http://kaleistyleguide.com/ Utilize a “Style Guide”
  • Command Line $ npm install -fg styledocco require Utilize a “Style Guide”
  • CSS /* # サムネイル サンプルページのPDFダウンロードの箇所で表示するサムネイルなどに枠をつけます。 ``` <img src="http://placehold.it/182x257" alt="" class="img-thumbnail"> ``` *Bootstrapのimg-thumbnailクラスのプロパティをオーバーライドしています。 */ .img-thumbnail { display: block; margin: 0 auto .5em; padding: .5em; } Utilize a “Style Guide” Markdown
  • Command Line $ styledocco -n “My Web Project” css Utilize a “Style Guide”
  • Command Line $ styledocco -n “My Web Project” css -n プロジェクト名 Utilize a “Style Guide”
  • Command Line $ styledocco -n “My Web Project” css 対象のCSSファイルがある フォルダ名 Utilize a “Style Guide”
  • Command Line $ styledocco -n “My Web Project” css/style.css 対象のCSSファイル Utilize a “Style Guide”
  • Utilize a “Style Guide”
  • CSSプリプロセッサーへ対応 good Utilize a “Style Guide”
  • Command Line $ git clone git://github.com/thomasdavis/kaleistyleguide.git or https://github.com/thomasdavis/ kaleistyleguide Utilize a “Style Guide” Download
  • ローカルに 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の結合時に トラブルが生じにくい good Utilize a “Style Guide” • テスト効率をupできる
  • • モジュール・コンポーネントをできるだけ出し切る • とは言え、出し切れないので管理を徹底 - 実装担当者が独自実装しないよう管理者が一括管理する - チームで最もスキルが高い人を管理者とする - 1ページでしか使わないものでも、できるだけ組み込む Utilize a “Style Guide”
  • • 実際のコンテンツを入れて検証する - 実際のテキストが入ったときにレイアウト崩れが起きないように - アタリ画像は実際のサイズ、縦横比で PLACEHOLD.IT http://placehold.it/ Utilize a “Style Guide”
  • • 特にスマホでの検証へ重点を置く - Adobe Edge InspectやGhostlabなどのツールを活用 - Androidは実機検証に越したことはない - Remote Testkitのようなサービスを活用 Adobe Edge Inspect http://html.adobe.com/jp/edge/inspect/ Utilize a “Style Guide” Ghostlab http://vanamco.com/ghostlab/
  • Remote Testkit http://appkitbox.com/testkit 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 Utilize a “Style Guide”