web制作者は変化についていけるか？ 変化についていくべきか？
DESCRIPTION
WebSig 24/7 Vol. 31 こもり資料TRANSCRIPT
Web制作者は変化についていけるか？変化についていくべきか？2012.12.01 WebSig 24/7 こもりまさあき
1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、など
Twitter: @cipher / @proteanbmInstagram: @cipher
こもりまさあき
まずは自己紹介
LINEのスタンプ買っちゃった！
ある居酒屋での会話です
世の中、変わり始めてます
今日お話しすること
•Webを閲覧する状況の変化
•変わらざるを得ないワークフロー
•より多くの環境に対応するために
•スマートで効率的な仕事環境づくり
Webを閲覧する状況の変化
変わりゆくWebを閲覧する環境
•PCもしくはフィーチャーフォンが主だったあの頃
•気がつけば、ブロードバンド回線も普及した
•しかし、この数年でまた大きく変わり始めている
そう、大きく変わりはじめている
フィーチャーフォンからスマートフォンへ
そして、タブレットの登場と普及
http://www.microsoft.com/Surface/en-US
“When it came to online shopping, 14.1% of shoppers preferred using their mobile phones. The most popular device for US consumers — the iPhone, followed by the iPad.
Online Black Friday sales shot up 20.7% from last year, mostly from mobile shoppers. 16.3% of mobile sales, mostly from an iPad.
24% of Black Friday retail traffic came from a mobile, whereas it was only 14.3% last year and less than 1% in 2009http://www.zurb.com/article/1115/the-need-for-a-responsive-retail-experienhttp://www.lukew.com/ff/entry.asp?1665
The Need for a Responsive Retail Experience
必ずしもPCでアクセスする時代ではない
変わらざるを得ないワークフロー
閲覧環境が多様化しているのはわかった
それとワークフローに何の関係が？
たとえば、スマートフォンを対象に考えると
•個々のデバイスに対して最適化？
•それとも話題のレスポンシブ・ウェブデザイン？
•アプリにしてしまうということも？
•既存のPCサイトのままという選択肢もある？
配信の手段はいくつか存在する
でも、一体どれだけ機種があると？
＋タブレットはどうする？
Googleから、ひとつの提案
タブレット端末ユーザーにはフルサイズのウェブを表示しましょうhttp://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html
“
利用者のことを考えることが大事
http://www.html5rocks.com/en/mobile/cross-device/
デバイスの利用シーンは多岐にわたる
さて、そんな環境変化の中で
従来のワークフローでやっていけるか？
•次から次に発売されていくデバイス
•OSの違い、端末の仕様の違い
•下手したら、最初の設計からやり直しの場合も…
そうならないために
無理のない設計、柔軟なワークフローを
•デバイスの仕様に左右されない無理のない設計
•ワイヤーフレームやデザインラフはそこそこに
•早めにモックアップ、テストしながら作っていく
http://trentwalton.com/2012/10/03/a-new-microsoft-com/
http://trentwalton.com/2011/07/14/content-choreography/
フローの変更には多くの人の理解が必要
そろそろ考え方を変えないといけない時期
より多くの環境に対応するために
知らないでは済まされないデバイスの特性
なぜ、デバイスのことを知る必要があるか
•あれがやりたい、これがやりたい、が難しい
•実装側が無理をしてどうにかなるものではない
•企画する人もビジュアルデザインする人も、デバイスの特性ぐらいは知らないと話にならない
http://android-developers.blogspot.jp/2012/10/building-quality-tablet-apps.html
http://msdn.microsoft.com/library/windows/apps/hh465424
そして…
固定サイズでデザインすることの難しさ
•PCだけが対象であれば、固定サイズでもよい
•スマートデバイスの画面サイズや比率はまちまち
•バラバラの環境に対して、固定のデザインは無理
1pxのズレとか気にしてたらできない
そもそもWebは可変することが前提でありPhotoshopは Webデザインツールではない
そろそろ、pxベースからの卒業を
•画面のピクセル密度の違いをどう考えるか
•高解像度化するデバイスに対して画像を再生成する、柔軟に扱えることを前提に
•CSS3で置き換え、SVGやWebフォントの利用
同じ16pxでも端末で見え方は異なる
多様な環境に対応するために必要なこと
•操作そのものがマウスから指先になることを考える
•利用環境が必ずしも高速ではないので、WebサイトやWebアプリの表示スピードも大事
•他にも、オフラインユースを想定するなど
考えなければならないことが一杯
http://trentwalton.com/2011/07/14/content-choreography/
“We’ve found that the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.
Content Choreography | Trent Walton
みんなで一丸となって対応していく
そして、それを取り巻く制作環境にも変化が
スマートで効率的な仕事環境づくり
スタイルタイル、スタイルガイド
スタイルタイルとは
•ワイヤーフレームでもなく、デザインラフでもない
•全体的なデザインテイストの確認のため、必要な要素を1枚のファイルにまとめたもの
•それをベースにサイトのイメージを共有
スタイルガイドとは
•Webサイトを構成する、さまざまな要素をまとめたガイドライン的なもの
•フォントの指定、サイズの指定はもちろん。HTML、CSS、JavaScriptのコードなども
•誰が修正しても同じものができる
http://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
https://github.com/styleguide/css
http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy
http://www.flickr.com/photos/aarronwalter/5579386649/
CSSプリプロセッサによる実装の効率化
CSSプリプロセッサ
•煩雑になりがちなCSSを、効率よく書くためのメタ言語
•変数などを使って、特定の入力を自動で処理
•Sass/SCSS、LESS、Stylusなど
http://learnboost.github.com/stylus/
フレームワークを使った開発
パッケージマネージャを活用する
“bower install jquery”
jQueryの最新版が手元に
バージョン管理システムを介しての協業
バージョン管理システム
•システム開発の現場ではおなじみのバージョン管理
•GitやSubversion、Mercurialなど
•GitHubやBitbucketを使えばオンライン管理も
•どこにいてもやりとりができるという点も魅力
サービスを通じて人と繋がることも
いろいろなところが変わり始めてます
最後に
“1 – Learn to write better JavaScript and CSS2 – Familiarize yourself with a Responsive Framework3 – Learn the most useful JavaScript MVC frameworks4 – Understand REST and HTTP5 – Understand HTML5 Beyond the Buzzword6 – Optimizehttp://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html
Changing Times For Web Developers – 6 Tips You Should Read To Survive
時代の変化についていくか、いかないか
それは皆さんが決めることです
本日のまとめ
•閲覧環境が多様化していることを認識しよう
•従来のワークフローで対応できるか考えよう
•少しやわらかな気持ちと頭に切り替えよう
•環境の変化を察知すれば、次の世界がみえます
本日はありがとうございました