レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
?
23 likes?11,878 views
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
![‘13.05.19 Web Developer Selection
function hoge_is_mobile () {
$ua = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // Android
'blackberry' // 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日火曜日](https://image.slidesharecdn.com/rwd-workflowwds-130603220821-phpapp01/85/Web-WDS-123-320.jpg)
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
- 1. ‘13.05.19 Web Developer Selection レスポンシブWebデザインの 実践ワークフロー 小川 裕之 13年6月4日火曜日
- 2. ‘13.05.19 Web Developer Selection 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 barchin??hiro.ogw 小川 裕之 13年6月4日火曜日
- 3. ‘13.05.19 Web Developer Selection ワークフロー ?レスポンシブWebデザインの ?ワークフロー ?ヒアリング ?情報設計 ?画面設計 ?プロトタイプ ?テスト ?デザイン Agenda 13年6月4日火曜日
- 4. ‘13.05.19 Web Developer Selection 実制作 Agenda ?Fluid Grid ?Fluid Image ?Media Queries ?ビューポート ?高速化 ?RESS 13年6月4日火曜日
- 6. ‘13.05.19 Web Developer Selection レスポンシブWebデザインとは 13年6月4日火曜日
- 7. ‘13.05.19 Web Developer SelectionPhoto by INtelFreePress ワンソースであらゆるデバイスに対応 13年6月4日火曜日
- 8. ‘13.05.19 Web Developer SelectionSource: A Response to ‘Responsive Web Design is Not the Future’ 13年6月4日火曜日
- 9. ‘13.05.19 Web Developer Selection OS 入力デバイス 解像度 Browser 回線 Scree Size 13年6月4日火曜日
- 10. ‘13.05.19 Web Developer Selection 想定通りに動かない 読み込みが遅い レイアウトが崩れる 13年6月4日火曜日
- 11. ‘13.05.19 Web Developer Selection 13年6月4日火曜日
- 12. ‘13.05.19 Web Developer Selection 実装してみないと分からない 13年6月4日火曜日
- 13. ‘13.05.19 Web Developer Selection 従来のワークフロー 情報 設計 画面 設計 デザイン カンプ 実装 テスト 13年6月4日火曜日
- 14. ‘13.05.19 Web Developer Selection 従来のワークフロー 情報 設計 画面 設計 デザイン カンプ 実装 テスト 修正修正修正 修正 問題 発生 13年6月4日火曜日
- 15. ‘13.05.19 Web Developer SelectionPhoto by professor megan リスクを想定した ワークフローを 13年6月4日火曜日
- 16. ‘13.05.19 Web Developer Selection 早い段階でのテスト プロト タイプ 調整 テスト 13年6月4日火曜日
- 17. ‘13.05.19 Web Developer Selection テストを繰り返し進める プロト タイプ 調整 テスト 実装 調整 テスト 調整 13年6月4日火曜日
- 18. ‘13.05.19 Web Developer Selection 情報 設計 画面 設計 プロト タイプ デザイン ワークフロー例 1 実装 調整 テスト テスト 13年6月4日火曜日
- 19. ‘13.05.19 Web Developer Selection 情報 設計 画面 設計 プロト タイプ デザイン ワークフロー例 2 実装調整 テスト テスト プロト タイプ 13年6月4日火曜日
- 20. ‘13.05.19 Web Developer Selection ワークフローはひとつに定まらない 13年6月4日火曜日
- 21. ‘13.05.19 Web Developer Selection ワークフローの共通理解 13年6月4日火曜日
- 22. ‘13.05.19 Web Developer Selection クライアントの協力 13年6月4日火曜日
- 24. ‘13.05.19 Web Developer Selection コンセプト ターゲットユーザー メインデバイス (OS? ブラウザ) Photo by Keturah Stickann 13年6月4日火曜日
- 25. ‘13.05.19 Web Developer Selection 各種法のメリット?デメリット レスポンシブWebデザイン マルチソース メリット ワンソースで無数のデバイスに対応。 URLがひとつ。 更新が比較的容易。 よりデバイスの特性に最適化したサイトを 制作できる デメリット 複数デバイスを考慮しなければならない。 設計が難しい。発展途上。 制作や更新の手間がかかる。 URLが異なる。新しいデバイスが出るたび に対応させる必要がある。 13年6月4日火曜日
- 26. ‘13.05.19 Web Developer Selectionスマートフォンデータベース OVER 200 13年6月4日火曜日
- 27. ‘13.05.19 Web Developer Selection 13年6月4日火曜日
- 28. ‘13.05.19 Web Developer Selection 13年6月4日火曜日
- 29. ‘13.05.19 Web Developer Selection Source:hibizpartners.com Source:gadgets.ndtv.com Source:onenigerianboy.com FUTURE Source:gpad.tv 13年6月4日火曜日
- 30. ‘13.05.19 Web Developer Selection レスポンシブWebデザインは万能ではないが、 どのデバイスにも柔軟に対応できる 13年6月4日火曜日
- 31. ‘13.05.19 Web Developer Selection レスポンシブWebデザインとは プログレッシブエンハンスメント、 グレースフルデグラデーション ピクセルパーフェクトではない ワークフローへの協力 伝えること 13年6月4日火曜日
- 33. ‘13.05.19 Web Developer Selection 最低スペックのデバイスから設計を することでその他のデバイスにも容易に対応。 13年6月4日火曜日
- 34. ‘13.05.19 Web Developer SelectionOUR MOBILE PLANET 13年6月4日火曜日
- 36. ‘13.05.19 Web Developer Selection 画面設計は絶対ではない 13年6月4日火曜日
- 37. ‘13.05.19 Web Developer Selection Photo by baldiri Sketch 素早く描ける 13年6月4日火曜日
- 38. ‘13.05.19 Web Developer Selection http://blog.chrisisk.com/wireframing 正確に情報が伝わる Wireframe 13年6月4日火曜日
- 39. ‘13.05.19 Web Developer Selection ケースに応じてスケッチ? ワイヤーフレームを使い分ける 13年6月4日火曜日
- 40. ‘13.05.19 Web Developer Selection !画面設計からプロトタイプへの工程を早く 13年6月4日火曜日
- 42. ‘13.05.19 Web Developer Selection テストをするための試作モデル 13年6月4日火曜日
- 43. ‘13.05.19 Web Developer Selection フレームワークを使うと作成が早い 13年6月4日火曜日
- 44. ‘13.05.19 Web Developer Selectionhttp://twitter.github.com/bootstrap/ 13年6月4日火曜日
- 45. ‘13.05.19 Web Developer Selectionhttp://foundation.zurb.com/ 13年6月4日火曜日
- 46. ‘13.05.19 Web Developer SelectionSemantic GRID SYSTEM 13年6月4日火曜日
- 48. ‘13.05.19 Web Developer Selection 不確定要素をなくす 何度も繰り返す 13年6月4日火曜日
- 49. ‘13.05.19 Web Developer SelectionPhoto by Konch 実機に勝る テストはない 13年6月4日火曜日
- 50. ‘13.05.19 Web Developer Selection 実機テストは時間と費用がかかる 13年6月4日火曜日
- 51. ‘13.05.19 Web Developer Selection テストツール?シミュレータを上手に利用 13年6月4日火曜日
- 52. ‘13.05.19 Web Developer Selectionresponsivepx 13年6月4日火曜日
- 53. ‘13.05.19 Web Developer SelectionVIEWPORT RESIZER 13年6月4日火曜日
- 54. ‘13.05.19 Web Developer SelectionAndroid SDK 13年6月4日火曜日
- 55. ‘13.05.19 Web Developer SelectionAdobe Edge Inspect 13年6月4日火曜日
- 56. ‘13.05.19 Web Developer Selection 実機>シミュレータ>Webツール テストの信頼度 13年6月4日火曜日
- 58. ‘13.05.19 Web Developer Selection Designing in the browser 13年6月4日火曜日
- 59. ‘13.05.19 Web Developer Selection 余分な作業が減る 完成イメージの相違がない Designing in the browserのメリット 13年6月4日火曜日
- 60. ‘13.05.19 Web Developer Selection 全てのサイズのデザインカンプを作るのは大変 13年6月4日火曜日
- 61. ‘13.05.19 Web Developer Selection 時間と費用の削減=クライアントにもメリット 13年6月4日火曜日
- 62. ‘13.05.19 Web Developer Selection カンプがなくて支障はないのか？ 13年6月4日火曜日
- 63. ‘13.05.19 Web Developer Selection Mood Board Style Tiles Style Guide カンプの代用 13年6月4日火曜日
- 64. ‘13.05.19 Web Developer SelectionSorce:webdesignerdepot.com MOOD BOARD 13年6月4日火曜日
- 65. ‘13.05.19 Web Developer Selection クライアントのイメージを具現化する 13年6月4日火曜日
- 66. ‘13.05.19 Web Developer SelectionStyle Tiles STYLE TILES 13年6月4日火曜日
- 67. ‘13.05.19 Web Developer Selection ロゴ 配色 テクスチャ エレメント フォント メインイメージ 形容詞 etc... 13年6月4日火曜日
- 68. ‘13.05.19 Web Developer Selection Style Tiles制作のフロー デザイン 修正 確認 ヒアリング 解釈 13年6月4日火曜日
- 69. ‘13.05.19 Web Developer Selection ビジュアルイメージを決定する 13年6月4日火曜日
- 70. ‘13.05.19 Web Developer SelectionFoundation 4 STYLE GUIDE 13年6月4日火曜日
- 71. ‘13.05.19 Web Developer Selection フロントエンドエンジニアと デザイナーが協力して作成 13年6月4日火曜日
- 72. ‘13.05.19 Web Developer Selection Mood Board、Style Tilesでビジュアルを決定 Style Guideで共通モジュールの管理 13年6月4日火曜日
- 73. ‘13.05.19 Web Developer Selection 実装 Style Guide Style Tiles Prototype 13年6月4日火曜日
- 74. DEMO 13年6月4日火曜日
- 75. ‘13.05.19 Web Developer Selection デザイナーは？ 13年6月4日火曜日
- 76. ‘13.05.19 Web Developer Selection 自分の価値をどこに置くかが重要 Visual Design Cording Visual Design UI IA 13年6月4日火曜日
- 77. ‘13.05.19 Web Developer Selection デザイナーは情報設計から実装まで関わる 13年6月4日火曜日
- 78. ‘13.05.19 Web Developer Selection カンプを求められたら？ 13年6月4日火曜日
- 79. ‘13.05.19 Web Developer Selection カンプは静止画である必要は？ 修正に対応しやすいのはどちら？ 13年6月4日火曜日
- 80. ‘13.05.19 Web Developer Selection カンプはピクセルパーフェクト のデザインでは実用性があったが… 13年6月4日火曜日
- 81. ‘13.05.19 Web Developer Selection 13年6月4日火曜日
- 82. ‘13.05.19 Web Developer Selection まずはPCのカンプだけ… ざっくりとしたデザインまで… できるとこから少しずつ変えていく 13年6月4日火曜日
- 83. ‘13.05.19 Web Developer Selection 環境に合わせてワークフローを柔軟に変える Photo by joped 13年6月4日火曜日
- 85. ‘13.05.19 Web Developer Selection Fluid Grid Fluid Image Media Queries 13年6月4日火曜日
- 86. ‘13.05.19 Web Developer Selection 幅が可変であるグリッド Fluid Grid 13年6月4日火曜日
- 87. ‘13.05.19 Web Developer Selection 均一性を保ったまま 可変レイアウトを実現 Fluid Grid 13年6月4日火曜日
- 88. ‘13.05.19 Web Developer Selection Travel Spice ● Home ● Tour ● Garelly ● Acess ● Contact HEADINGHEADING HEADINGHEADING HEADINGHEADING HEADINGHEADING HEADINGHEADING TEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXT TEXT HEADINGHEADING TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXT Twitter facebook Photo Garelly More TEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXT TEXTTEXTTEXT More TEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXT TEXTTEXTTEXT More Copyright 2012 travel spice Travel Spice HEADINGHEADING HEADINGHEADING HEADINGHEADING HEADINGHEADING HEADINGHEADING TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXT HEADINGHEADING TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEX TTEXTTEXTTEXTTEXTTEXTTEXT More TEXTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTE XTTEXT TEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXT TEXTTEXT More TEXTTEXTTEXTTEXTTEXTT EXTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTE XTTEXTTEXTTEXTTEXTTE XTTEXT More Copyright 2012 travel spice Home Tour Garelly Access Contact t f 13年6月4日火曜日
- 89. ‘13.05.19 Web Developer Selection コンテンツの幅 %px 13年6月4日火曜日
- 90. ‘13.05.19 Web Developer Selection コンテンツ幅÷親コンテンツ幅×100% 13年6月4日火曜日
- 91. ‘13.05.19 Web Developer Selection 620px 300px 960px 13年6月4日火曜日
- 92. ‘13.05.19 Web Developer Selection 620÷940×100% 64.5833% 31.25% 960px 300÷960×100% 13年6月4日火曜日
- 93. ‘13.05.19 Web Developer Selection 慣れれば最初から%で進めてもいい 13年6月4日火曜日
- 94. ‘13.05.19 Web Developer Selection 960px 60px 20px 1カラム=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. ‘13.05.19 Web Developer Selection 8カラム 64.5833% 31.25% 960px ４カラム 13年6月4日火曜日
- 96. ‘13.05.19 Web Developer Selection Fluid Image 画面サイズに応じて画像が可変する 13年6月4日火曜日
- 97. ‘13.05.19 Web Developer Selection img{ max-width:100%; height:auto; } 13年6月4日火曜日
- 98. ‘13.05.19 Web Developer Selection メディアタイプと特性に関する条件を調べ その結果に応じて処理を行う Media Queries 13年6月4日火曜日
- 99. ‘13.05.19 Web Developer Selection @media screen and (min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域640px以上の場合 背景色を赤にする メディアタイプ メディア特性 13年6月4日火曜日
- 100. ‘13.05.19 Web Developer Selection メディアタイプ デバイスの種類 screen 表示領域の幅 print 表示領域の高さ TV 家庭用テレビ projection プロジェクタ orientation 表示領域の向き resolution 解像度 13年6月4日火曜日
- 101. ‘13.05.19 Web Developer Selection メディア特性 情報 max-/min- width 表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ? resolution 解像度 ○ 13年6月4日火曜日
- 102. ‘13.05.19 Web Developer Selection @import url (/slideshow/webwds/22411915/"pc.css") screen and (min- width:600px); <link rel="stylesheet" href=/slideshow/webwds/22411915/"pc.css" media="screen and (min-width:600px)"> @media screen and (min-width:600px){ /*style*/ } 13年6月4日火曜日
- 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. ‘13.05.19 Web Developer Selection pxで指定 emで指定 13年6月4日火曜日
- 105. ‘13.05.19 Web Developer Selection ビューポート 13年6月4日火曜日
- 106. ‘13.05.19 Web Developer Selection <meta name="viewport" content="width=device-width"> 13年6月4日火曜日
- 107. ‘13.05.19 Web Developer Selection プロパティ 内容 デフォルト値 width Viewportの横幅 980px height Viewportの縦幅 横幅とアスペクト比から initial-scale 倍率の初期値 表示範囲から計算される値 user-scalable 拡大縮小の可否 yes 13年6月4日火曜日
- 108. ‘13.05.19 Web Developer Selection 13年6月4日火曜日
- 110. ‘13.05.19 Web Developer Selection CSS3 CSSスプライト Webフォント(※) SVG(※) CDN 画像圧縮 ファイル圧縮 (※)場合によっては画像より重くなることもある 13年6月4日火曜日
- 111. ‘13.05.19 Web Developer Selectionhttp://www.css3maker.com/index.html 13年6月4日火曜日
- 112. ‘13.05.19 Web Developer Selection CSSスプライト 13年6月4日火曜日
- 113. ‘13.05.19 Web Developer SelectionGoogle web fonts 13年6月4日火曜日
- 114. ‘13.05.19 Web Developer SelectionFont Awesome 13年6月4日火曜日
- 115. ‘13.05.19 Web Developer Selectionhttp://www.w3.org/Graphics/SVG/ 13年6月4日火曜日
- 116. ‘13.05.19 Web Developer Selectionhttps://developers.google.com/speed/libraries/ 13年6月4日火曜日
- 117. ‘13.05.19 Web Developer Selectionjpeg mini 13年6月4日火曜日
- 118. ‘13.05.19 Web Developer Selection CSS以外も使う 13年6月4日火曜日
- 119. ‘13.05.19 Web Developer SelectionBREAKPOINTS.JS 13年6月4日火曜日
- 120. ‘13.05.19 Web Developer SelectionResponse.js 13年6月4日火曜日
- 121. ‘13.05.19 Web Developer Selection フロントエンド+サーバーサイド RESS Responsive Web Design + Server Side Components 13年6月4日火曜日
- 122. ‘13.05.19 Web Developer Selection <?php if (wp_is_mobile()) :?> //mobile <img src=/slideshow/webwds/22411915/"image_small.png" alt=""> <?php else: ?> //PC <img src=/slideshow/webwds/22411915/"image_small.png" alt=""> <?php endif; ?> 13年6月4日火曜日
- 123. ‘13.05.19 Web Developer Selection function hoge_is_mobile () { $ua = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android', // Android 'blackberry' // 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. ‘13.05.19 Web Developer Selection 手段に囚われない 使える技術は使おう 13年6月4日火曜日
- 125. ‘13.05.19 Web Developer Selection ご清聴ありがとうございました 13年6月4日火曜日