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.
HTML5 Web Design Workflow        HTML5時代のWebデザインワークフロー                  2012.10.21     第51回 WEB TOUCH MEETING + Mozilla 勉強...
まずは、自己紹介こもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフ...
今日お話しすること•デバイスの多様化で変わるWebデザイン•変わりゆくWeb制作ワークフロー•Style Tiles と Style Guide を使ってみる•未来を見据えた制作技法と素材管理•Mobile First で考えるWebデザイン
デバイスの多様化で変わるWebデザイン
HTML5 Web Design Workflow           次から次に発売されるスマートデバイスHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow          次から次にバージョンアップするブラウザHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow                  WWWに接続可能なデバイスの増加HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow     これまでは、ざっくりとPCか携帯電話で区別HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow          これからは、より多くのデバイスが対象にHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow    自身のコンテンツに最適な配信方法はどれ?            •PC向け、スマートフォン向け、個別に最適化?            •それともレスポンシブWebデザインの採用?    ...
HTML5 Web Design Workflow      コストと開発・メンテナンス効率のバランスHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow             デバイスの多様化って、実は大きな問題HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + M...
HTML5 Web Design Workflow        これまでの制作常識が通用しなくなる!?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
変わりゆくWeb制作ワークフロー
HTML5 Web Design Workflow          従来のワークフローって本当に適切なの?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow           一般的なWebサイトの制作ワークフロー                        1.コンテンツの企画、仕様の決定                        2.ワ...
HTML5 Web Design Workflow たとえば、話題のレスポンシブに当てはめるとHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強...
HTML5 Web Design Workflow        場合によっては、設計から考え直すことにHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow   実装によっては、ワークフローの見直しが必要HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla ...
HTML5 Web Design Workflow                            最初の設計フェイズが最も大事HTML5時代のWebデザインワークフロー              2012.10.21. 第51回 WEB...
HTML5 Web Design Workflow      関わる人すべてがより広範な知識を持つか、      コミュニケーションを密にしないと破綻するHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 ...
HTML5 Web Design Workflow             ワイヤーフレームやラフはそこそこに。             動かさないことには問題がわからないHTML5時代のWebデザインワークフロー       2012.10....
HTML5 Web Design Workflow   短いサイクルで実装・テスト・改修を繰り返すHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla ...
HTML5 Web Design Workflow          どれで見ても同じに、という考えは終わりHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow          すべてのデバイスで同じになることはないHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow      大らかな気持ちで、問題の起きにくい設計をHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow      何千というデバイス、個々に相手しますか?       ※世界中で出回っているOSやデバイスの総数は6,500とも(http://bit.ly/VoOfUr)HTML5時代のWebデザ...
Style Tiles と Style Guide
HTML5 Web Design Workflow      まだ固定画面をベースにカンプ作ってます?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow               クライアント確認は大変ですからね…HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + ...
HTML5 Web Design Workflow     対象となるデバイスが山のようにあるのに、     Photoshopでのカンプ作りは意味を持つか?HTML5時代のWebデザインワークフロー       2012.10.21. 第51...
HTML5 Web Design Workflow          まさか、サイズ毎にカンプ作ったりとか?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow             実装がうまくいくかもわからないのに?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + M...
HTML5 Web Design Workflow      そろそろ、そういうやりとりは減らさないとHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow       Photoshopは WebデザインツールじゃないHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + ...
HTML5 Web Design Workflow                        そこで登場するのが、Style TilesHTML5時代のWebデザインワークフロー              2012.10.21. 第51回 ...
HTML5 Web Design Workflow           公開されているStyle Tilesのテンプレート   styletil.esHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WE...
HTML5 Web Design Workflow              サイトのデザインテイストを1枚に集約   styletil.esHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TO...
HTML5 Web Design Workflow   チームやクライアントとサイトイメージを共有HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla ...
HTML5 Web Design Workflow    でも、実装を考えるとStyle Tiles だけでは困るHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + ...
HTML5 Web Design Workflow                      そこで登場するのが、Style GuideHTML5時代のWebデザインワークフロー            2012.10.21. 第51回 WEB ...
HTML5 Web Design Workflow   サイトで利用するスタイル定義をまとめたもの   Front end StyleguidesHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB ...
HTML5 Web Design Workflow   誰がやっても同じになるようなスタイル指示書HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla ...
HTML5 Web Design Workflow      各要素のタイポグラフィやボタンのスタイルHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow   色の指定やカラム設定のようなものも含まれる   BBC GELHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow          要素毎に定義して、コードをまとめておくHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow         それを必要に応じて使い回せば同じになるHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozi...
HTML5 Web Design Workflow            Photoshopでいちいちカンプを作らないHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow          動くモノを作って確認・修正した方が速いHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow          Style Tiles + Style Guide でいきましょうHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH...
未来を見据えた制作技法と素材管理
HTML5 Web Design Workflow            古いブラウザもサポートしつつ前を向くHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mo...
HTML5 Web Design Workflow                 HTML5をベースにコンテンツを作るHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING...
HTML5 Web Design Workflow 古いブラウザの対応は、Polyfillなどを利用するHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow         煩雑になりがちなCSSの実装も効率化するHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Moz...
HTML5 Web Design Workflow      CSS プリプロセッサを使って効率化をはかる            •Sass / SCSS (http://sass-lang.com/)            •Compass ...
HTML5 Web Design Workflow    CSS3、Webフォント、使える技術は活用するHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow  画像ではなくCSSで代用できるならその方が…   CSS HatHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow      CSSを書き出せるソフト、いろいろあります            •Fireworks            •CSS Hat (http://csshat.com/)       ...
HTML5 Web Design Workflow アイコン画像には、Webフォントを使ってみる   FONT AWESOMEHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEET...
HTML5 Web Design Workflow        元となる素材は、ベクターベースで考えるHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow        Retinaをはじめ、高解像度デバイスの登場HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mo...
HTML5 Web Design Workflow      自動的に2倍サイズを書き出すソフトもある   SlicyHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow     「あ、あの素材、高解像度対応しといて∼」HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla...
HTML5 Web Design Workflow                  この先のどこかできっと起こるはずHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING ...
HTML5 Web Design Workflow  どういう未来になっても柔軟に対応できるようHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉...
Mobile Firstで考えるWebデザイン
HTML5 Web Design Workflow           何かと話題のレスポンシブWebデザインHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mo...
HTML5 Web Design Workflow        多くのデバイスに柔軟に配信対応する方法HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow        レイアウト切替え=レスポンシブではないHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow いまあるWebを頭に浮かべるから想像しにくいHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉...
HTML5 Web Design Workflow 日本のWebっていろいろ詰まりすぎじゃない?HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉...
HTML5 Web Design Workflow        必要なコンテンツは何か?その見直しが先HTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design Workflow     実際のところ、サイトの情報構造設計がキモHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla...
HTML5 Web Design Workflow  スケッチシートを使ってワイヤーを書いてみる   ZURB: Responsive SketchsheetsHTML5時代のWebデザインワークフロー              2012.10...
HTML5 Web Design Workflow               ページのデータ転送量も考慮すると、               小さな画面から考えた方がやりやすいHTML5時代のWebデザインワークフロー       2012....
HTML5 Web Design Workflow      ブレイクポイント指定は、emが増えているHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozill...
HTML5 Web Design Workflow           画像配信の問題は、RESSなどで対応可能           ※RESS: Responsive Design + Server Side ComponentsHTML5時...
HTML5 Web Design Workflow        テストはブラウザの機能やツールを使ってHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozil...
HTML5 Web Design WorkflowFirefoxに搭載されたResponsive Design View   Firefox: Responsive Design ViewHTML5時代のWebデザインワークフロー       ...
HTML5 Web Design Workflow     では、ちょっと実装のデモをしてみましょうHTML5時代のWebデザインワークフロー       2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla...
まとめ•多様化するデバイスにいかに対応するか•ワークフローから考え直す必要も•Style Tiles と Style Guide、どうですか?•どんな未来がきても大丈夫にしておく•レスポンシブは、モバイルから考える
HTML5 Web Design Workflow                            本日はありがとうございましたHTML5時代のWebデザインワークフロー              2012.10.21. 第51回 WEB...
Upcoming SlideShare
Loading in …5
×

HTML5 Web Design Workflow

11,121 views

Published on

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

Published in: Technology

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

×