SlideShare a Scribd company logo
Web制作者は変化についていけるか?
変化についていくべきか?
2012.12.01 WebSig 24/7 こもりまさあき
まずは自己紹介

こもりまさあき

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

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


Twitter: @cipher / @proteanbm
Instagram: @cipher
LINEのスタンプ買っちゃった!
ある居酒屋での会話です
世の中、変わり始めてます
今日お話しすること

•Webを閲覧する状況の変化
•変わらざるを得ないワークフロー
•より多くの環境に対応するために
•スマートで効率的な仕事環境づくり
Webを閲覧する状況の変化
変わりゆくWebを閲覧する環境


•PCもしくはフィーチャーフォンが主だったあの頃
•気がつけば、ブロードバンド回線も普及した
•しかし、この数年でまた大きく変わり始めている
そう、大きく変わりはじめている
フィーチャーフォンからスマートフォンへ
そして、タブレットの登場と普及
http://www.apple.com/ipad/
http://www.google.com/nexus/
http://www.microsoft.com/Surface/en-US
“
           The Need for a Responsive Retail Experience


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 2009
http://www.zurb.com/article/1115/the-need-for-a-responsive-retail-experien
http://www.lukew.com/ff/entry.asp?1665
必ずしもPCでアクセスする時代ではない
変わ ざ を
  ら る 得ないワークフロー
閲覧環境が多様化しているのはわかった
それとワークフローに何の関係が?
たとえば、スマートフォンを対象に考えると

•個々のデバイスに対して最適化?
•それとも話題のレスポンシブ・ウェブデザイン?
•アプリにしてしまうということも?
•既存のPCサイトのままという選択肢もある?
配信の手段はいくつか存在する
でも、一体どれだけ機種があると?
http://www.android.com/devices/
+タブレットはどうする?
http://www.android.com/devices/
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アプリの表示スピードも大事

•他にも、オフラインユースを想定するなど
考えなければならないことが一杯
Content Choreography | Trent Walton




“
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.
http://trentwalton.com/2011/07/14/content-choreography/
みんなで一丸となって対応していく
そして、それを取り巻く制作環境にも変化が
スマートで効率的な仕事環境づくり
スタイルタイル、スタイルガイド
スタイルタイルとは


•ワイヤーフレームでもなく、デザインラフでもない
•全体的なデザインテイストの確認のため、
必要な要素を1枚のファイルにまとめたもの

•それをベースにサイトのイメージを共有
http://styletil.es
http://styletil.es
スタイルガイドとは

•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://lesscss.org/
http://sass-lang.com/
http://learnboost.github.com/stylus/
フレームワークを使った開発
http://todomvc.com/
http://metroui.org.ua
パッケージマネージャを活用する
http://twitter.github.com/bower/
“bower install jquery”
jQueryの最新版が手元に
バージョン管理システムを介しての協業
バージョン管理システム

•システム開発の現場ではおなじみのバージョン管理
•GitやSubversion、Mercurialなど
•GitHubやBitbucketを使えばオンライン管理も
•どこにいてもやりとりができるという点も魅力
http://git-scm.com/
http://bitbucket.org
http://github.com
サービスを通じて人と繋がることも
いろいろなところが変わり始めてます
最後に
Changing Times For Web Developers – 6 Tips You Should Read To Survive




“
1 – Learn to write better JavaScript and CSS
2 – Familiarize yourself with a Responsive Framework
3 – Learn the most useful JavaScript MVC frameworks
4 – Understand REST and HTTP
5 – Understand HTML5 Beyond the Buzzword
6 – Optimize
http://www.amazedsaint.com/2012/11/changing-times-for-web-developers-6.html
時代の変化についていくか、いかないか
それは皆さんが決めることです
本日のまとめ


•閲覧環境が多様化していることを認識しよう
•従来のワークフローで対応できるか考えよう
•少しやわらかな気持ちと頭に切り替えよう
•環境の変化を察知すれば、次の世界がみえます
本日はありがとうございました

More Related Content

Web制作者は変化についていけるか? 変化についていくべきか?