レスポンシブWebデザインの実践ワークフロー(WDS)

7,530
-1

Published on

第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,530
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
47
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

レスポンシブWebデザインの実践ワークフロー(WDS)

  1. 1. ‘13.05.19 Web Developer SelectionレスポンシブWebデザインの実践ワークフロー小川 裕之13年6月4日火曜日
  2. 2. ‘13.05.19 Web Developer Selection印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、Web デザイナーのアルバイトとして複数の制作会社を転々としたり海外に行ったりしたあと横浜の制作会社に務める。制作会社でデザイン、コーディング、ディレクション、コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。「レスポンシブWebデザイン入門」執筆barchin  hiro.ogw小川 裕之13年6月4日火曜日
  3. 3. ‘13.05.19 Web Developer Selectionワークフロー•レスポンシブWebデザインの ワークフロー•ヒアリング•情報設計•画面設計•プロトタイプ•テスト•デザインAgenda13年6月4日火曜日
  4. 4. ‘13.05.19 Web Developer Selection実制作Agenda•Fluid Grid•Fluid Image•Media Queries•ビューポート•高速化•RESS13年6月4日火曜日
  5. 5. WORKFLOWワークフロー13年6月4日火曜日
  6. 6. ‘13.05.19 Web Developer SelectionレスポンシブWebデザインとは13年6月4日火曜日
  7. 7. ‘13.05.19 Web Developer SelectionPhoto by INtelFreePressワンソースであらゆるデバイスに対応13年6月4日火曜日
  8. 8. ‘13.05.19 Web Developer SelectionSource: A Response to ‘Responsive Web Design is Not the Future’13年6月4日火曜日
  9. 9. ‘13.05.19 Web Developer SelectionOS入力デバイス解像度Browser 回線Scree Size13年6月4日火曜日
  10. 10. ‘13.05.19 Web Developer Selection想定通りに動かない読み込みが遅いレイアウトが崩れる13年6月4日火曜日
  11. 11. ‘13.05.19 Web Developer Selection13年6月4日火曜日
  12. 12. ‘13.05.19 Web Developer Selection実装してみないと分からない13年6月4日火曜日
  13. 13. ‘13.05.19 Web Developer Selection従来のワークフロー情報設計画面設計デザインカンプ実装 テスト13年6月4日火曜日
  14. 14. ‘13.05.19 Web Developer Selection従来のワークフロー情報設計画面設計デザインカンプ実装 テスト修正修正修正修正問題発生13年6月4日火曜日
  15. 15. ‘13.05.19 Web Developer SelectionPhoto by professor meganリスクを想定したワークフローを13年6月4日火曜日
  16. 16. ‘13.05.19 Web Developer Selection早い段階でのテストプロトタイプ調整 テスト13年6月4日火曜日
  17. 17. ‘13.05.19 Web Developer Selectionテストを繰り返し進めるプロトタイプ調整 テスト実装調整 テスト 調整13年6月4日火曜日
  18. 18. ‘13.05.19 Web Developer Selection情報設計画面設計プロトタイプデザインワークフロー例 1実装調整 テストテスト13年6月4日火曜日
  19. 19. ‘13.05.19 Web Developer Selection情報設計画面設計プロトタイプデザインワークフロー例 2実装調整テストテストプロトタイプ13年6月4日火曜日
  20. 20. ‘13.05.19 Web Developer Selectionワークフローはひとつに定まらない13年6月4日火曜日
  21. 21. ‘13.05.19 Web Developer Selectionワークフローの共通理解13年6月4日火曜日
  22. 22. ‘13.05.19 Web Developer Selectionクライアントの協力13年6月4日火曜日
  23. 23. HEARINGヒアリング13年6月4日火曜日
  24. 24. ‘13.05.19 Web Developer Selectionコンセプトターゲットユーザーメインデバイス(OS・ ブラウザ)Photo by Keturah Stickann13年6月4日火曜日
  25. 25. ‘13.05.19 Web Developer Selection各種法のメリット・デメリットレスポンシブWebデザイン マルチソースメリットワンソースで無数のデバイスに対応。URLがひとつ。 更新が比較的容易。よりデバイスの特性に最適化したサイトを制作できるデメリット複数デバイスを考慮しなければならない。設計が難しい。発展途上。制作や更新の手間がかかる。URLが異なる。新しいデバイスが出るたびに対応させる必要がある。13年6月4日火曜日
  26. 26. ‘13.05.19 Web Developer SelectionスマートフォンデータベースOVER20013年6月4日火曜日
  27. 27. ‘13.05.19 Web Developer Selection13年6月4日火曜日
  28. 28. ‘13.05.19 Web Developer Selection13年6月4日火曜日
  29. 29. ‘13.05.19 Web Developer SelectionSource:hibizpartners.comSource:gadgets.ndtv.comSource:onenigerianboy.comFUTURESource:gpad.tv13年6月4日火曜日
  30. 30. ‘13.05.19 Web Developer SelectionレスポンシブWebデザインは万能ではないが、どのデバイスにも柔軟に対応できる13年6月4日火曜日
  31. 31. ‘13.05.19 Web Developer SelectionレスポンシブWebデザインとはプログレッシブエンハンスメント、グレースフルデグラデーションピクセルパーフェクトではないワークフローへの協力伝えること13年6月4日火曜日
  32. 32. CONTENTS STRATEGY情報設計13年6月4日火曜日
  33. 33. ‘13.05.19 Web Developer Selection最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応。13年6月4日火曜日
  34. 34. ‘13.05.19 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
  35. 35. SKETCH / WIREFRAME画面設計13年6月4日火曜日
  36. 36. ‘13.05.19 Web Developer Selection画面設計は絶対ではない13年6月4日火曜日
  37. 37. ‘13.05.19 Web Developer Selection Photo by baldiriSketch素早く描ける13年6月4日火曜日
  38. 38. ‘13.05.19 Web Developer Selection http://blog.chrisisk.com/wireframing正確に情報が伝わるWireframe13年6月4日火曜日
  39. 39. ‘13.05.19 Web Developer Selectionケースに応じてスケッチ・ワイヤーフレームを使い分ける13年6月4日火曜日
  40. 40. ‘13.05.19 Web Developer Selection!画面設計からプロトタイプへの工程を早く13年6月4日火曜日
  41. 41. PROTO TYPEプロトタイプ13年6月4日火曜日
  42. 42. ‘13.05.19 Web Developer Selectionテストをするための試作モデル13年6月4日火曜日
  43. 43. ‘13.05.19 Web Developer Selectionフレームワークを使うと作成が早い13年6月4日火曜日
  44. 44. ‘13.05.19 Web Developer Selectionhttp://twitter.github.com/bootstrap/13年6月4日火曜日
  45. 45. ‘13.05.19 Web Developer Selectionhttp://foundation.zurb.com/13年6月4日火曜日
  46. 46. ‘13.05.19 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
  47. 47. TESTテスト13年6月4日火曜日
  48. 48. ‘13.05.19 Web Developer Selection不確定要素をなくす何度も繰り返す13年6月4日火曜日
  49. 49. ‘13.05.19 Web Developer SelectionPhoto by Konch実機に勝るテストはない13年6月4日火曜日
  50. 50. ‘13.05.19 Web Developer Selection実機テストは時間と費用がかかる13年6月4日火曜日
  51. 51. ‘13.05.19 Web Developer Selectionテストツール・シミュレータを上手に利用13年6月4日火曜日
  52. 52. ‘13.05.19 Web Developer Selectionresponsivepx13年6月4日火曜日
  53. 53. ‘13.05.19 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
  54. 54. ‘13.05.19 Web Developer SelectionAndroid SDK13年6月4日火曜日
  55. 55. ‘13.05.19 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
  56. 56. ‘13.05.19 Web Developer Selection実機>シミュレータ>Webツールテストの信頼度13年6月4日火曜日
  57. 57. DESIGNデザイン13年6月4日火曜日
  58. 58. ‘13.05.19 Web Developer SelectionDesigning in the browser13年6月4日火曜日
  59. 59. ‘13.05.19 Web Developer Selection余分な作業が減る完成イメージの相違がないDesigning in the browserのメリット13年6月4日火曜日
  60. 60. ‘13.05.19 Web Developer Selection全てのサイズのデザインカンプを作るのは大変13年6月4日火曜日
  61. 61. ‘13.05.19 Web Developer Selection時間と費用の削減=クライアントにもメリット13年6月4日火曜日
  62. 62. ‘13.05.19 Web Developer Selectionカンプがなくて支障はないのか?13年6月4日火曜日
  63. 63. ‘13.05.19 Web Developer SelectionMood BoardStyle TilesStyle Guideカンプの代用13年6月4日火曜日
  64. 64. ‘13.05.19 Web Developer SelectionSorce:webdesignerdepot.comMOOD BOARD13年6月4日火曜日
  65. 65. ‘13.05.19 Web Developer Selectionクライアントのイメージを具現化する13年6月4日火曜日
  66. 66. ‘13.05.19 Web Developer SelectionStyle TilesSTYLE TILES13年6月4日火曜日
  67. 67. ‘13.05.19 Web Developer Selectionロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc...13年6月4日火曜日
  68. 68. ‘13.05.19 Web Developer SelectionStyle Tiles制作のフローデザイン修正 確認ヒアリング 解釈13年6月4日火曜日
  69. 69. ‘13.05.19 Web Developer Selectionビジュアルイメージを決定する13年6月4日火曜日
  70. 70. ‘13.05.19 Web Developer SelectionFoundation 4STYLE GUIDE13年6月4日火曜日
  71. 71. ‘13.05.19 Web Developer Selectionフロントエンドエンジニアとデザイナーが協力して作成13年6月4日火曜日
  72. 72. ‘13.05.19 Web Developer SelectionMood Board、Style Tilesでビジュアルを決定Style Guideで共通モジュールの管理13年6月4日火曜日
  73. 73. ‘13.05.19 Web Developer Selection実装Style GuideStyle TilesPrototype13年6月4日火曜日
  74. 74. DEMO13年6月4日火曜日
  75. 75. ‘13.05.19 Web Developer Selectionデザイナーは?13年6月4日火曜日
  76. 76. ‘13.05.19 Web Developer Selection自分の価値をどこに置くかが重要VisualDesignCordingVisualDesignUIIA13年6月4日火曜日
  77. 77. ‘13.05.19 Web Developer Selectionデザイナーは情報設計から実装まで関わる13年6月4日火曜日
  78. 78. ‘13.05.19 Web Developer Selectionカンプを求められたら?13年6月4日火曜日
  79. 79. ‘13.05.19 Web Developer Selectionカンプは静止画である必要は?修正に対応しやすいのはどちら?13年6月4日火曜日
  80. 80. ‘13.05.19 Web Developer Selectionカンプはピクセルパーフェクトのデザインでは実用性があったが…13年6月4日火曜日
  81. 81. ‘13.05.19 Web Developer Selection13年6月4日火曜日
  82. 82. ‘13.05.19 Web Developer SelectionまずはPCのカンプだけ…ざっくりとしたデザインまで…できるとこから少しずつ変えていく13年6月4日火曜日
  83. 83. ‘13.05.19 Web Developer Selection環境に合わせてワークフローを柔軟に変えるPhoto by joped13年6月4日火曜日
  84. 84. TECHNIQUE実制作13年6月4日火曜日
  85. 85. ‘13.05.19 Web Developer SelectionFluid GridFluid ImageMedia Queries13年6月4日火曜日
  86. 86. ‘13.05.19 Web Developer Selection幅が可変であるグリッドFluid Grid13年6月4日火曜日
  87. 87. ‘13.05.19 Web Developer Selection均一性を保ったまま可変レイアウトを実現Fluid Grid13年6月4日火曜日
  88. 88. ‘13.05.19 Web Developer SelectionTravelSpice● Home● Tour● Garelly● Acess● ContactHEADINGHEADINGHEADINGHEADINGHEADINGHEADINGHEADINGHEADING HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTHEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTwitterfacebookPhoto Garelly MoreTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTMoreTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTMoreCopyright 2012 travel spiceTravel SpiceHEADINGHEADINGHEADINGHEADINGHEADINGHEADINGHEADINGHEADING HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTHEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTMoreTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTMoreTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTMoreCopyright 2012 travel spiceHome Tour Garelly Access Contactt f13年6月4日火曜日
  89. 89. ‘13.05.19 Web Developer Selectionコンテンツの幅%px13年6月4日火曜日
  90. 90. ‘13.05.19 Web Developer Selectionコンテンツ幅÷親コンテンツ幅×100%13年6月4日火曜日
  91. 91. ‘13.05.19 Web Developer Selection620px 300px960px13年6月4日火曜日
  92. 92. ‘13.05.19 Web Developer Selection620÷940×100%64.5833% 31.25%960px300÷960×100%13年6月4日火曜日
  93. 93. ‘13.05.19 Web Developer Selection慣れれば最初から%で進めてもいい13年6月4日火曜日
  94. 94. ‘13.05.19 Web Developer Selection960px60px 20px1カラム=60px÷960px×100%=6.25%2カラム=140px÷960px×100%=14.5833%3カラム=220px÷960px×100%=22.9166%4カラム=300px÷960px×100%=31.25%13年6月4日火曜日
  95. 95. ‘13.05.19 Web Developer Selection8カラム64.5833% 31.25%960px4カラム13年6月4日火曜日
  96. 96. ‘13.05.19 Web Developer SelectionFluid Image画面サイズに応じて画像が可変する13年6月4日火曜日
  97. 97. ‘13.05.19 Web Developer Selectionimg{max-width:100%;height:auto;}13年6月4日火曜日
  98. 98. ‘13.05.19 Web Developer Selectionメディアタイプと特性に関する条件を調べその結果に応じて処理を行うMedia Queries13年6月4日火曜日
  99. 99. ‘13.05.19 Web Developer Selection@media screen and (min-width: 640px){body{background-color: red;}}メディアがスクリーンで表示領域640px以上の場合背景色を赤にするメディアタイプ メディア特性13年6月4日火曜日
  100. 100. ‘13.05.19 Web Developer Selectionメディアタイプ デバイスの種類screen 表示領域の幅print 表示領域の高さTV 家庭用テレビprojection プロジェクタorientation 表示領域の向きresolution 解像度13年6月4日火曜日
  101. 101. ‘13.05.19 Web Developer Selectionメディア特性 情報 max-/min-width 表示領域の幅 ○height 表示領域の高さ ○device-width デバイスの横方向の解像度 ○device-height デバイスの縦方向の解像度 ○orientation 表示領域の向き ☓resolution 解像度 ○13年6月4日火曜日
  102. 102. ‘13.05.19 Web Developer Selection@import url ("pc.css") screen and (min-width:600px);<link rel="stylesheet" href="pc.css"media="screen and (min-width:600px)">@media screen and (min-width:600px){/*style*/}13年6月4日火曜日
  103. 103. ‘13.05.19 Web Developer Selection@media screen and (min-width: 40em){body{background-color: red;}}1em=16px   640px=40emメディアがスクリーンで表示領域40em以上の場合背景色を赤にする13年6月4日火曜日
  104. 104. ‘13.05.19 Web Developer Selectionpxで指定 emで指定13年6月4日火曜日
  105. 105. ‘13.05.19 Web Developer Selectionビューポート13年6月4日火曜日
  106. 106. ‘13.05.19 Web Developer Selection<meta name="viewport" content="width=device-width">13年6月4日火曜日
  107. 107. ‘13.05.19 Web Developer Selectionプロパティ 内容 デフォルト値width Viewportの横幅 980pxheight Viewportの縦幅 横幅とアスペクト比からinitial-scale 倍率の初期値 表示範囲から計算される値user-scalable 拡大縮小の可否 yes13年6月4日火曜日
  108. 108. ‘13.05.19 Web Developer Selection13年6月4日火曜日
  109. 109. HIGH PERFORMANCE高速化13年6月4日火曜日
  110. 110. ‘13.05.19 Web Developer SelectionCSS3CSSスプライトWebフォント(※)SVG(※)CDN画像圧縮ファイル圧縮(※)場合によっては画像より重くなることもある13年6月4日火曜日
  111. 111. ‘13.05.19 Web Developer Selectionhttp://www.css3maker.com/index.html13年6月4日火曜日
  112. 112. ‘13.05.19 Web Developer SelectionCSSスプライト13年6月4日火曜日
  113. 113. ‘13.05.19 Web Developer SelectionGoogle web fonts13年6月4日火曜日
  114. 114. ‘13.05.19 Web Developer SelectionFont Awesome13年6月4日火曜日
  115. 115. ‘13.05.19 Web Developer Selectionhttp://www.w3.org/Graphics/SVG/13年6月4日火曜日
  116. 116. ‘13.05.19 Web Developer Selectionhttps://developers.google.com/speed/libraries/13年6月4日火曜日
  117. 117. ‘13.05.19 Web Developer Selectionjpeg mini13年6月4日火曜日
  118. 118. ‘13.05.19 Web Developer SelectionCSS以外も使う13年6月4日火曜日
  119. 119. ‘13.05.19 Web Developer SelectionBREAKPOINTS.JS13年6月4日火曜日
  120. 120. ‘13.05.19 Web Developer SelectionResponse.js13年6月4日火曜日
  121. 121. ‘13.05.19 Web Developer Selectionフロントエンド+サーバーサイドRESSResponsive Web Design + Server Side Components13年6月4日火曜日
  122. 122. ‘13.05.19 Web Developer Selection<?php if (wp_is_mobile()) :?>//mobile<img src="image_small.png" alt=""><?php else: ?>//PC<img src="image_small.png" alt=""><?php endif; ?>13年6月4日火曜日
  123. 123. ‘13.05.19 Web Developer Selectionfunction hoge_is_mobile () {$ua = array(iPhone, // iPhoneiPod, // iPod touchAndroid, // Androidblackberry // Blackberry);$pattern = /.implode(|, $ua)./i;return preg_match($pattern,$_SERVER[HTTP_USER_AGENT]);}<?php if(hoge_is_mobile()): ?><p>mobileです</p><?php endif; ?>13年6月4日火曜日
  124. 124. ‘13.05.19 Web Developer Selection手段に囚われない使える技術は使おう13年6月4日火曜日
  125. 125. ‘13.05.19 Web Developer Selectionご清聴ありがとうございました13年6月4日火曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×