HTML5 Web Design Workflow

9,339
-1

Published on

WEB TOUCH MEETING Vol.51「HTML5時代のWebデザインワークフロー」

Published in: Technology
3 Comments
80 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,339
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
125
Comments
3
Likes
80
Embeds 0
No embeds

No notes for slide

HTML5 Web Design Workflow

  1. 1. HTML5 Web Design Workflow HTML5時代のWebデザインワークフロー 2012.10.21 第51回 WEB TOUCH MEETING + Mozilla 勉強会 こもりまさあき
  2. 2. まずは、自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. 今日お話しすること•デバイスの多様化で変わるWebデザイン•変わりゆくWeb制作ワークフロー•Style Tiles と Style Guide を使ってみる•未来を見据えた制作技法と素材管理•Mobile First で考えるWebデザイン
  4. 4. デバイスの多様化で変わるWebデザイン
  5. 5. HTML5 Web Design Workflow 次から次に発売されるスマートデバイスHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  6. 6. HTML5 Web Design Workflow 次から次にバージョンアップするブラウザHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  7. 7. HTML5 Web Design Workflow WWWに接続可能なデバイスの増加HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  8. 8. HTML5 Web Design Workflow これまでは、ざっくりとPCか携帯電話で区別HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  9. 9. HTML5 Web Design Workflow これからは、より多くのデバイスが対象にHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  10. 10. HTML5 Web Design Workflow 自身のコンテンツに最適な配信方法はどれ? •PC向け、スマートフォン向け、個別に最適化? •それともレスポンシブWebデザインの採用? •サービスなら専用アプリを作って配信する? •既存のPCサイトに少し手を加えるぐらいにする? •何もしないという選択肢もあるHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  11. 11. HTML5 Web Design Workflow コストと開発・メンテナンス効率のバランスHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  12. 12. HTML5 Web Design Workflow デバイスの多様化って、実は大きな問題HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  13. 13. HTML5 Web Design Workflow これまでの制作常識が通用しなくなる!?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  14. 14. 変わりゆくWeb制作ワークフロー
  15. 15. HTML5 Web Design Workflow 従来のワークフローって本当に適切なの?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  16. 16. HTML5 Web Design Workflow 一般的なWebサイトの制作ワークフロー 1.コンテンツの企画、仕様の決定 2.ワイヤーフレームの制作、確認 3.カンプの作成、クライアントへの確認 4.コーディング、プログラムの実装 5.テスト、確認をしてから公開へHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  17. 17. HTML5 Web Design Workflow たとえば、話題のレスポンシブに当てはめるとHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  18. 18. HTML5 Web Design Workflow 場合によっては、設計から考え直すことにHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  19. 19. HTML5 Web Design Workflow 実装によっては、ワークフローの見直しが必要HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  20. 20. HTML5 Web Design Workflow 最初の設計フェイズが最も大事HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  21. 21. HTML5 Web Design Workflow 関わる人すべてがより広範な知識を持つか、 コミュニケーションを密にしないと破綻するHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  22. 22. HTML5 Web Design Workflow ワイヤーフレームやラフはそこそこに。 動かさないことには問題がわからないHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  23. 23. HTML5 Web Design Workflow 短いサイクルで実装・テスト・改修を繰り返すHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  24. 24. HTML5 Web Design Workflow どれで見ても同じに、という考えは終わりHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  25. 25. HTML5 Web Design Workflow すべてのデバイスで同じになることはないHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  26. 26. HTML5 Web Design Workflow 大らかな気持ちで、問題の起きにくい設計をHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  27. 27. HTML5 Web Design Workflow 何千というデバイス、個々に相手しますか? ※世界中で出回っているOSやデバイスの総数は6,500とも(http://bit.ly/VoOfUr)HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  28. 28. Style Tiles と Style Guide
  29. 29. HTML5 Web Design Workflow まだ固定画面をベースにカンプ作ってます?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  30. 30. HTML5 Web Design Workflow クライアント確認は大変ですからね…HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  31. 31. HTML5 Web Design Workflow 対象となるデバイスが山のようにあるのに、 Photoshopでのカンプ作りは意味を持つか?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  32. 32. HTML5 Web Design Workflow まさか、サイズ毎にカンプ作ったりとか?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  33. 33. HTML5 Web Design Workflow 実装がうまくいくかもわからないのに?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  34. 34. HTML5 Web Design Workflow そろそろ、そういうやりとりは減らさないとHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  35. 35. HTML5 Web Design Workflow Photoshopは WebデザインツールじゃないHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  36. 36. HTML5 Web Design Workflow そこで登場するのが、Style TilesHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  37. 37. HTML5 Web Design Workflow 公開されているStyle Tilesのテンプレート styletil.esHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  38. 38. HTML5 Web Design Workflow サイトのデザインテイストを1枚に集約 styletil.esHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  39. 39. HTML5 Web Design Workflow チームやクライアントとサイトイメージを共有HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  40. 40. HTML5 Web Design Workflow でも、実装を考えるとStyle Tiles だけでは困るHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  41. 41. HTML5 Web Design Workflow そこで登場するのが、Style GuideHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  42. 42. HTML5 Web Design Workflow サイトで利用するスタイル定義をまとめたもの Front end StyleguidesHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  43. 43. HTML5 Web Design Workflow 誰がやっても同じになるようなスタイル指示書HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  44. 44. HTML5 Web Design Workflow 各要素のタイポグラフィやボタンのスタイルHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  45. 45. HTML5 Web Design Workflow 色の指定やカラム設定のようなものも含まれる BBC GELHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  46. 46. HTML5 Web Design Workflow 要素毎に定義して、コードをまとめておくHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  47. 47. HTML5 Web Design Workflow それを必要に応じて使い回せば同じになるHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  48. 48. HTML5 Web Design Workflow Photoshopでいちいちカンプを作らないHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  49. 49. HTML5 Web Design Workflow 動くモノを作って確認・修正した方が速いHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  50. 50. HTML5 Web Design Workflow Style Tiles + Style Guide でいきましょうHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  51. 51. 未来を見据えた制作技法と素材管理
  52. 52. HTML5 Web Design Workflow 古いブラウザもサポートしつつ前を向くHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  53. 53. HTML5 Web Design Workflow HTML5をベースにコンテンツを作るHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  54. 54. HTML5 Web Design Workflow 古いブラウザの対応は、Polyfillなどを利用するHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  55. 55. HTML5 Web Design Workflow 煩雑になりがちなCSSの実装も効率化するHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  56. 56. HTML5 Web Design Workflow CSS プリプロセッサを使って効率化をはかる •Sass / SCSS (http://sass-lang.com/) •Compass (http://compass-style.org/) •LESS (http://lesscss.org/) •Stylus (http://learnboost.github.com/stylus/)HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  57. 57. HTML5 Web Design Workflow CSS3、Webフォント、使える技術は活用するHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  58. 58. HTML5 Web Design Workflow 画像ではなくCSSで代用できるならその方が… CSS HatHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  59. 59. HTML5 Web Design Workflow CSSを書き出せるソフト、いろいろあります •Fireworks •CSS Hat (http://csshat.com/) •CSS3Ps (http://css3ps.com) •Sketch (http://www.bohemiancoding.com/sketch/)HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  60. 60. HTML5 Web Design Workflow アイコン画像には、Webフォントを使ってみる FONT AWESOMEHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  61. 61. HTML5 Web Design Workflow 元となる素材は、ベクターベースで考えるHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  62. 62. HTML5 Web Design Workflow Retinaをはじめ、高解像度デバイスの登場HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  63. 63. HTML5 Web Design Workflow 自動的に2倍サイズを書き出すソフトもある SlicyHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  64. 64. HTML5 Web Design Workflow 「あ、あの素材、高解像度対応しといて∼」HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  65. 65. HTML5 Web Design Workflow この先のどこかできっと起こるはずHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  66. 66. HTML5 Web Design Workflow どういう未来になっても柔軟に対応できるようHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  67. 67. Mobile Firstで考えるWebデザイン
  68. 68. HTML5 Web Design Workflow 何かと話題のレスポンシブWebデザインHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  69. 69. HTML5 Web Design Workflow 多くのデバイスに柔軟に配信対応する方法HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  70. 70. HTML5 Web Design Workflow レイアウト切替え=レスポンシブではないHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  71. 71. HTML5 Web Design Workflow いまあるWebを頭に浮かべるから想像しにくいHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  72. 72. HTML5 Web Design Workflow 日本のWebっていろいろ詰まりすぎじゃない?HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  73. 73. HTML5 Web Design Workflow 必要なコンテンツは何か?その見直しが先HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  74. 74. HTML5 Web Design Workflow 実際のところ、サイトの情報構造設計がキモHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  75. 75. HTML5 Web Design Workflow スケッチシートを使ってワイヤーを書いてみる ZURB: Responsive SketchsheetsHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  76. 76. HTML5 Web Design Workflow ページのデータ転送量も考慮すると、 小さな画面から考えた方がやりやすいHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  77. 77. HTML5 Web Design Workflow ブレイクポイント指定は、emが増えているHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  78. 78. HTML5 Web Design Workflow 画像配信の問題は、RESSなどで対応可能 ※RESS: Responsive Design + Server Side ComponentsHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  79. 79. HTML5 Web Design Workflow テストはブラウザの機能やツールを使ってHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  80. 80. HTML5 Web Design WorkflowFirefoxに搭載されたResponsive Design View Firefox: Responsive Design ViewHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  81. 81. HTML5 Web Design Workflow では、ちょっと実装のデモをしてみましょうHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  82. 82. まとめ•多様化するデバイスにいかに対応するか•ワークフローから考え直す必要も•Style Tiles と Style Guide、どうですか?•どんな未来がきても大丈夫にしておく•レスポンシブは、モバイルから考える
  83. 83. HTML5 Web Design Workflow 本日はありがとうございましたHTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki
  1. A particular slide catching your eye?

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

×