HTML5 Web Design Workflow

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

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

こもりまさあき

まずは、自己紹介

こもりまさあき

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

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

Twitter: @cipher / @proteanbm
Instagram: @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）



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



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



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



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



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



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



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



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



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

styletil.es



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

styletil.es



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



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



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



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

Front end Styleguides



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



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



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

BBC 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



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

•Fireworks
•CSS Hat （http://csshat.com/）
•CSS3Ps （http://css3ps.com）
•Sketch （http://www.bohemiancoding.com/sketch/）



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

FONT AWESOME



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



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



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

Slicy



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



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



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


Mobile Firstで考えるWebデザイン


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



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



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



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



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



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



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



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

ZURB: Responsive Sketchsheets



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



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



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



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



Firefoxに搭載されたResponsive Design View

Firefox: Responsive Design View



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


まとめ

•多様化するデバイスにいかに対応するか
•ワークフローから考え直す必要も
•Style Tiles と Style Guide、どうですか？
•どんな未来がきても大丈夫にしておく
•レスポンシブは、モバイルから考える


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


HTML5 Web Design Workflow

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5 Web Design Workflow

Ähnlich wie HTML5 Web Design Workflow (20)

Mehr von masaaki komori

Mehr von masaaki komori (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

HTML5 Web Design Workflow