Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 “St...
マルチデバイス時代の到来

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-...
高1生がネット接続に良く使うデバイス
100%

75%

7%

0%
スマートフォン

ノートPC

http://www.yomiuri.co.jp/national/news/20130903-OYT1T00978.htm
Utiliz...
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-l...
デバイスの断片化

Utilize a “Style Guide”
http://blog.evernote.com/blog/2013/01/23/
beyond-the-evernote-fridge/

http://www.google.com/glass/start/

Utilize a “Styl...
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”

デザイン

エンジニア

検証

ウォーター
フォール型

...
イメージがわかない、
実際に操作してみないと
わからない

認識の違い
クライアントの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

スマートフォンブラウザ不具合特集

スマートフォン対応、
    気をつけたいトラブル
若松 浩昭(株式会...
クライアントは、確認・承認した
デザインカンプの通りに仕上がると思っている

エンジニアが火消しに奔走

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 ...
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”
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.42...
.btn-default {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.btn-primary {
color: #ffffff;
backgrou...
カートに入れる

購入手続きへ

決済方法の選択へ

確認画面へ

購入する

Utilize a “Style Guide”
カートに入れる

購入手続きへ

決済方法の選択へ

確認画面へ

購入する

Utilize a “Style Guide”
ソフトタッチTシャツ
ソフトタッチ素材のTシャツ。ふわふわとした
肌触りがとても心地よくベーシックな無地なので、
いろいろな着こなしに合わせられます。

¥2,800
カートに入れる

新商品発売のお知らせ
このたび、当店では新商品「ソフトタッ...
ソフトタッチTシャツ
ソフトタッチ素材のTシャツ。ふわふわとした
肌触りがとても心地よくベーシックな無地なので、
いろいろな着こなしに合わせられます。

¥2,800
カートに入れる

新商品発売のお知らせ
このたび、当店では新商品「ソフトタッ...
効率的なCSSの記述
Object-Oriented CSS
http://oocss.org/

Scalable and Modular
Architecutre for CSS
http://smacss.com/

Utilize a ...
+

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/

Utiliz...
Command Line

$ npm install -fg styledocco

require

Utilize a “Style Guide”
CSS
/*
# サムネイル
サンプルページのPDFダウンロードの箇所で表示するサムネイルなどに枠をつけます。

```
<img src="http://placehold.it/182x257" alt="" class="img-thum...
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/
kaleistyleg...
ローカルに
good

Utilize a “Style Guide”

Webサーバーが
走っているだけで良い
Utilize a “Style Guide”
実経験にもとづく、活用のポイント
- 制作対象のサイトをベースにStyle Guideを作成
- ヘッダーやナビゲーション、フッターなど込みの状態で作る
- CSSとJavaScriptは1ファイルで作る

Utilize a “Style G...
Utilize a “Style Guide”
• CSSやJavaScriptの結合時に
トラブルが生じにくい
good

Utilize a “Style Guide”

• テスト効率をupできる
• モジュール・コンポーネントをできるだけ出し切る
• とは言え、出し切れないので管理を徹底
- 実装担当者が独自実装しないよう管理者が一括管理する
- チームで最もスキルが高い人を管理者とする
- 1ページでしか使わないものでも、できるだけ組...
• 実際のコンテンツを入れて検証する
- 実際のテキストが入ったときにレイアウト崩れが起きないように
- アタリ画像は実際のサイズ、縦横比で

PLACEHOLD.IT
http://placehold.it/

Utilize a “Styl...
• 特にスマホでの検証へ重点を置く
- Adobe Edge InspectやGhostlabなどのツールを活用
- Androidは実機検証に越したことはない
- Remote Testkitのようなサービスを活用

Adobe Edge I...
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”
Upcoming SlideShare
Loading in …5
×

Style Guide活用のススメ

24,279 views

Published on

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/

  • Be the first to comment

Style Guide活用のススメ

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

×