Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Style Guide活用のススメ
Semelhante a Style Guide活用のススメ (20)
Style Guide活用のススメ
- 1. Style Guide活用のススメ Utilize a “Style Guide” ニイハチヨンサン 大月 茂樹 © 2843 all rights reserved.
- 2. AGENDA • マルチデバイス時代の到来 • Webのマルチデバイス対応 • Style Guide活用のススメ Utilize a “Style Guide”
- 3. 質問・フィードバック ohtsuki2843 Utilize a “Style Guide”
- 4. Shigeki Ohtsuki Marketing, Consulting, Design, Markup, Frontend, Backend, Smartphone Apps, Lecture, Writing Utilize a “Style Guide”
- 5. マルチデバイス時代の到来 Utilize a “Style Guide”
- 6. 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”
- 9. OUR MOBILE PLANET http://www.thinkwithgoogle.com/mobileplanet/ja/ Utilize a “Style Guide”
- 10. Utilize a “Style Guide”
- 11. 利用スタイルの多様化 Utilize a “Style Guide”
- 12. Android Fragmentation Visualized (July 2013) http://opensignal.com/reports/fragmentation-2013/ Utilize a “Style Guide”
- 13. 3,997 Distinct Android devices seen last year Utilize a “Style Guide”
- 14. Utilize a “Style Guide”
- 15. 11,868 Distinct Android devices seen this year Utilize a “Style Guide”
- 16. Utilize a “Style Guide”
- 17. 8 Android versions still in use Utilize a “Style Guide”
- 18. Utilize a “Style Guide”
- 19. Android KitKat http://www.android.com/kitkat/ Utilize a “Style Guide”
- 20. 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”
- 21. デバイスの断片化 Utilize a “Style Guide”
- 23. This is the web. http://bradfrostweb.com/blog/post/this-is-the-web/ Utilize a “Style Guide”
- 24. Webのマルチデバイス対応 Utilize a “Style Guide”
- 26. 昨今のWebサイトは、とにかく複雑 • クリック（タップ）するとメニューが表示される、 スライドするとか… • ポップアップやレイヤーを重ねるとか… • ページ遷移のアニメーションとか、 パララックスとか… いちいち静的なデザイン カンプなんて作れない （作れるけど、大変）… Utilize a “Style Guide”
- 27. 静的なデザインカンプとウォーターフォール型の ワークフローのままだと… 静的なデザインカンプ 設計 制作・開発 デザイナー Utilize a “Style Guide” デザイン エンジニア 検証 ウォーター フォール型 公開
- 29. ココとココの あいだの動きは？ 認識の違い デザイナー Utilize a “Style Guide” 手戻り 制作チームメンバー
- 30. Utilize a “Style Guide”
- 31. このデバイスで 動作しない！ 設計 デザイン 制作・開発 手戻り Utilize a “Style Guide” 検証 公開 表示が遅い！ 動作が重い！
- 32. Android対応が大変 http://www.slideshare.net/HiroakiWakamatsu/ss-12718639 スマートフォンブラウザ不具合特集 スマートフォン対応、 気をつけたいトラブル 若松 浩昭（株式会社ジークス） http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 Utilize a “Style Guide” 若松 浩昭（株式会社ジークス）
- 34. トラブルや手戻りを防ぐ方法は？ Utilize a “Style Guide”
- 35. そこで、HTMLプロトタイピング アジャイル型 or デザイン スパイラル型 デザイナー 検証 Utilize a “Style Guide” エンジニア 制作・ 開発
- 36. 設計 ラフ デザイン デザイン 検証 制作・ 開発 実装 Utilize a “Style Guide” 公開
- 38. プロトタイプ = 試作品 Utilize a “Style Guide”
- 39. Utilize a “Style Guide”
- 42. • トラブルの芽を早期に摘める • 理解しやすい、 good イメージが湧きやすい • そのまま作り込んでいける Utilize a “Style Guide”
- 43. ビジュアルデザインは Style Tilesで 設計 Utilize a “Style Guide” ラフ デザイン デザイン 検証 制作・ 開発
- 44. Style Tilesとは？ Style Tiles http://styletil.es/ Utilize a “Style Guide”
- 45. Utilize a “Style Guide”
- 46. Utilize a “Style Guide”
- 47. Utilize a “Style Guide”
- 48. ラフ デザイン プロトタイピングの 成果物がStyle Guide デザイン 検証 制作・ 開発 実装 Utilize a “Style Guide” 公開
- 49. Style Guide活用のススメ Utilize a “Style Guide”
- 50. Style Guideとは？ Google HTML/CSS Style Guide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml Utilize a “Style Guide”
- 51. Utilize a “Style Guide”
- 52. これまでは… • 制作チーム内で実装方法を統一するための ドキュメント • 公開後もWebサイトの品質を保つための メモ書き、さらには納品物 Utilize a “Style Guide”
- 53. • デザインやレイアウトの統一 • 制作・運用・管理の効率化 good Utilize a “Style Guide” • コード品質低下の抑制
- 54. これからは、 さらに… • さまざまなデバイスやブラウザでの表示・動作も 検証・担保された、生きたドキュメント • HTMLとCSSだけでなく、JavaScriptで実装する 機能も含めたもの • ページの構成要素（モジュール、 コンポーネント） を集めたもの Utilize a “Style Guide”
- 55. Utilize a “Style Guide”
- 56. Utilize a “Style Guide”
- 57. Utilize a “Style Guide”
- 58. Utilize a “Style Guide”
- 59. Utilize a “Style Guide”
- 60. Utilize a “Style Guide”
- 61. Utilize a “Style Guide”
- 62. Utilize a “Style Guide”
- 63. Style Guideの例 Bootstrap CSS/Compornents/JavaScript http://getbootstrap.com/ Utilize a “Style Guide”
- 64. Utilize a “Style Guide”
- 65. .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
- 66. .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 差分のみ記述
- 71. 効率的なCSSの記述 Object-Oriented CSS http://oocss.org/ Scalable and Modular Architecutre for CSS http://smacss.com/ Utilize a “Style Guide”
- 72. + good Utilize a “Style Guide” • 実装・検証の効率化 • 効率的なコード
- 73. Starbucks Style Guide http://www.starbucks.com/static/reference/styleguide/ Utilize a “Style Guide”
- 74. Style Guide作成ツール StyleDocco http://jacobrask.github.io/styledocco/ Kalei -Style Guide http://kaleistyleguide.com/ Utilize a “Style Guide”
- 75. Command Line $ npm install -fg styledocco require Utilize a “Style Guide”
- 76. 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
- 77. Command Line $ styledocco -n “My Web Project” css Utilize a “Style Guide”
- 78. Command Line $ styledocco -n “My Web Project” css -n プロジェクト名 Utilize a “Style Guide”
- 79. Command Line $ styledocco -n “My Web Project” css 対象のCSSファイルがある フォルダ名 Utilize a “Style Guide”
- 80. Command Line $ styledocco -n “My Web Project” css/style.css 対象のCSSファイル Utilize a “Style Guide”
- 81. Utilize a “Style Guide”
- 82. CSSプリプロセッサーへ対応 good Utilize a “Style Guide”
- 83. Command Line $ git clone git://github.com/thomasdavis/kaleistyleguide.git or https://github.com/thomasdavis/ kaleistyleguide Utilize a “Style Guide” Download
- 84. ローカルに good Utilize a “Style Guide” Webサーバーが 走っているだけで良い
- 85. Utilize a “Style Guide”
- 86. 実経験にもとづく、活用のポイント - 制作対象のサイトをベースにStyle Guideを作成 - ヘッダーやナビゲーション、フッターなど込みの状態で作る - CSSとJavaScriptは1ファイルで作る Utilize a “Style Guide”
- 87. Utilize a “Style Guide”
- 88. • CSSやJavaScriptの結合時に トラブルが生じにくい good Utilize a “Style Guide” • テスト効率をupできる
- 89. • モジュール・コンポーネントをできるだけ出し切る • とは言え、出し切れないので管理を徹底 - 実装担当者が独自実装しないよう管理者が一括管理する - チームで最もスキルが高い人を管理者とする - 1ページでしか使わないものでも、できるだけ組み込む Utilize a “Style Guide”
- 90. • 実際のコンテンツを入れて検証する - 実際のテキストが入ったときにレイアウト崩れが起きないように - アタリ画像は実際のサイズ、縦横比で PLACEHOLD.IT http://placehold.it/ Utilize a “Style Guide”
- 91. • 特にスマホでの検証へ重点を置く - 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/
- 92. Remote Testkit http://appkitbox.com/testkit Utilize a “Style Guide”
- 93. Utilize a “Style Guide”
- 94. • 静的なデザインカンプの扱い - 全く不要になるわけではない - クライアントとのコミュニケーションツールとして有用 - あくまでも「イメージを共有するためのツール」 Utilize a “Style Guide”
- 95. • デザイナーとエンジニアのコミュニケーション - 役割やスキルセット以外のタスクも柔軟に、積極的に - 「できる・できない」「簡単・難しい」の共有 デザイン デザイナー Utilize a “Style Guide” マークアップ プログラミング エンジニア
- 96. 今日のまとめ • HTMLプロトタイピングやStyle Guideを導入し、 トラブルを未然に防ぐ、芽を摘む • Style Guideを生きたドキュメントとして活かす Utilize a “Style Guide”
- 98. Thank you for your attention. 質問・フィードバック ohtsuki2843 Utilize a “Style Guide”