html5 web design workflow

HTML5 Web Design Workflow

2012.10.21第51回 WEB TOUCH MEETING + Mozilla 勉強会

こもりまさあき

HTML5時代のWebデザインワークフロー

1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし

近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、など

Twitter: @cipher / @proteanbmInstagram: @cipher

こもりまさあき

まずは、自己紹介

今日お話しすること

•デバイスの多様化で変わるWebデザイン

•変わりゆくWeb制作ワークフロー

•Style Tiles と Style Guide を使ってみる

•未来を見据えた制作技法と素材管理

•Mobile First で考えるWebデザイン

デバイスの多様化で変わるWebデザイン


HTML5時代のWebデザインワークフロー 2012.10.21. 第51回 WEB TOUCH MEETING + Mozilla 勉強会: Komori, Masaaki

次から次に発売されるスマートデバイス



次から次にバージョンアップするブラウザ



WWWに接続可能なデバイスの増加



これまでは、ざっくりとPCか携帯電話で区別



これからは、より多くのデバイスが対象に



•PC向け、スマートフォン向け、個別に最適化？

•それともレスポンシブWebデザインの採用？

•サービスなら専用アプリを作って配信する？

•既存のPCサイトに少し手を加えるぐらいにする？

•何もしないという選択肢もある

自身のコンテンツに最適な配信方法はどれ？



コストと開発・メンテナンス効率のバランス



デバイスの多様化って、実は大きな問題



これまでの制作常識が通用しなくなる！？

変わりゆくWeb制作ワークフロー



従来のワークフローって本当に適切なの？



一般的なWebサイトの制作ワークフロー

1.コンテンツの企画、仕様の決定

2.ワイヤーフレームの制作、確認

3.カンプの作成、クライアントへの確認

4.コーディング、プログラムの実装

5.テスト、確認をしてから公開へ



たとえば、話題のレスポンシブに当てはめると



場合によっては、設計から考え直すことに



実装によっては、ワークフローの見直しが必要



最初の設計フェイズが最も大事



関わる人すべてがより広範な知識を持つか、コミュニケーションを密にしないと破綻する



ワイヤーフレームやラフはそこそこに。動かさないことには問題がわからない



短いサイクルで実装・テスト・改修を繰り返す



どれで見ても同じに、という考えは終わり



すべてのデバイスで同じになることはない



大らかな気持ちで、問題の起きにくい設計を



何千というデバイス、個々に相手しますか？※世界中で出回っているOSやデバイスの総数は6,500とも（http://bit.ly/VoOfUr）

Style Tiles と Style Guide



まだ固定画面をベースにカンプ作ってます？



クライアント確認は大変ですからね…



対象となるデバイスが山のようにあるのに、Photoshopでのカンプ作りは意味を持つか？



まさか、サイズ毎にカンプ作ったりとか？



実装がうまくいくかもわからないのに？



そろそろ、そういうやりとりは減らさないと



Photoshopは Webデザインツールじゃない



そこで登場するのが、Style Tiles



公開されているStyle Tilesのテンプレート

styletil.es

http://styletil.es

http://styletil.es



サイトのデザインテイストを1枚に集約

styletil.es

http://styletil.es

http://styletil.es



チームやクライアントとサイトイメージを共有



でも、実装を考えるとStyle Tiles だけでは困る



そこで登場するのが、Style Guide



サイトで利用するスタイル定義をまとめたもの

Front end Styleguides

http://bit.ly/RPwM3S

http://bit.ly/RPwM3S



誰がやっても同じになるようなスタイル指示書



各要素のタイポグラフィやボタンのスタイル



色の指定やカラム設定のようなものも含まれる

BBC GEL

http://www.bbc.co.uk/gel

http://www.bbc.co.uk/gel



要素毎に定義して、コードをまとめておく



それを必要に応じて使い回せば同じになる



Photoshopでいちいちカンプを作らない



動くモノを作って確認・修正した方が速い



Style Tiles + Style Guide でいきましょう

未来を見据えた制作技法と素材管理



古いブラウザもサポートしつつ前を向く



HTML5をベースにコンテンツを作る



古いブラウザの対応は、Polyfillなどを利用する



煩雑になりがちなCSSの実装も効率化する



CSS プリプロセッサを使って効率化をはかる

•Sass / SCSS （http://sass-lang.com/）

•Compass （http://compass-style.org/）

•LESS （http://lesscss.org/）

•Stylus （http://learnboost.github.com/stylus/）



CSS3、Webフォント、使える技術は活用する



画像ではなくCSSで代用できるならその方が…

CSS Hat

http://csshat.com/

http://csshat.com/



CSSを書き出せるソフト、いろいろあります

•Fireworks

•CSS Hat （http://csshat.com/）

•CSS3Ps （http://css3ps.com）

•Sketch （http://www.bohemiancoding.com/sketch/）



アイコン画像には、Webフォントを使ってみる

FONT AWESOME

http://fortawesome.github.com/Font-Awesome/

http://fortawesome.github.com/Font-Awesome/



元となる素材は、ベクターベースで考える



Retinaをはじめ、高解像度デバイスの登場



自動的に2倍サイズを書き出すソフトもある

Slicy

http://macrabbit.com/slicy/

http://macrabbit.com/slicy/



「あ、あの素材、高解像度対応しといて～」



この先のどこかできっと起こるはず



どういう未来になっても柔軟に対応できるよう

Mobile Firstで考えるWebデザイン



何かと話題のレスポンシブWebデザイン



多くのデバイスに柔軟に配信対応する方法



レイアウト切替え＝レスポンシブではない



いまあるWebを頭に浮かべるから想像しにくい



日本のWebっていろいろ詰まりすぎじゃない？



必要なコンテンツは何か？その見直しが先



実際のところ、サイトの情報構造設計がキモ



スケッチシートを使ってワイヤーを書いてみる

ZURB: Responsive Sketchsheets

http://zurb.com/playground/responsive-sketchsheets

http://zurb.com/playground/responsive-sketchsheets



ページのデータ転送量も考慮すると、小さな画面から考えた方がやりやすい



ブレイクポイント指定は、emが増えている



画像配信の問題は、RESSなどで対応可能※RESS: Responsive Design + Server Side Components



テストはブラウザの機能やツールを使って



Firefoxに搭載されたResponsive Design View

Firefox: Responsive Design View

http://www.mozilla.jp/firefox/

http://www.mozilla.jp/firefox/



では、ちょっと実装のデモをしてみましょう

まとめ

•多様化するデバイスにいかに対応するか

•ワークフローから考え直す必要も

•Style Tiles と Style Guide、どうですか？

•どんな未来がきても大丈夫にしておく

•レスポンシブは、モバイルから考える



本日はありがとうございました

html5 web design workflow

Technology