web制作者は変化についていけるか? 変化についていくべきか?
DESCRIPTION
WebSig 24/7 Vol. 31 こもり資料TRANSCRIPT
![Page 1: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/1.jpg)
Web制作者は変化についていけるか?変化についていくべきか?2012.12.01 WebSig 24/7 こもりまさあき
![Page 2: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/2.jpg)
1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、など
Twitter: @cipher / @proteanbmInstagram: @cipher
こもりまさあき
まずは自己紹介
![Page 3: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/3.jpg)
LINEのスタンプ買っちゃった!
![Page 4: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/4.jpg)
ある居酒屋での会話です
![Page 5: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/5.jpg)
世の中、変わり始めてます
![Page 6: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/6.jpg)
今日お話しすること
•Webを閲覧する状況の変化
•変わらざるを得ないワークフロー
•より多くの環境に対応するために
•スマートで効率的な仕事環境づくり
![Page 7: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/7.jpg)
Webを閲覧する状況の変化
![Page 8: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/8.jpg)
変わりゆくWebを閲覧する環境
•PCもしくはフィーチャーフォンが主だったあの頃
•気がつけば、ブロードバンド回線も普及した
•しかし、この数年でまた大きく変わり始めている
![Page 9: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/9.jpg)
そう、大きく変わりはじめている
![Page 10: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/10.jpg)
フィーチャーフォンからスマートフォンへ
![Page 11: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/11.jpg)
そして、タブレットの登場と普及
![Page 14: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/14.jpg)
http://www.microsoft.com/Surface/en-US
![Page 15: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/15.jpg)
“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
![Page 16: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/16.jpg)
必ずしもPCでアクセスする時代ではない
![Page 17: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/17.jpg)
変わらざるを得ないワークフロー
![Page 18: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/18.jpg)
閲覧環境が多様化しているのはわかった
![Page 19: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/19.jpg)
それとワークフローに何の関係が?
![Page 20: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/20.jpg)
たとえば、スマートフォンを対象に考えると
•個々のデバイスに対して最適化?
•それとも話題のレスポンシブ・ウェブデザイン?
•アプリにしてしまうということも?
•既存のPCサイトのままという選択肢もある?
![Page 21: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/21.jpg)
配信の手段はいくつか存在する
![Page 22: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/22.jpg)
でも、一体どれだけ機種があると?
![Page 24: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/24.jpg)
+タブレットはどうする?
![Page 26: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/26.jpg)
Googleから、ひとつの提案
![Page 27: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/27.jpg)
タブレット端末ユーザーにはフルサイズのウェブを表示しましょうhttp://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html
“
![Page 28: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/28.jpg)
利用者のことを考えることが大事
![Page 29: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/29.jpg)
http://www.html5rocks.com/en/mobile/cross-device/
![Page 30: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/30.jpg)
デバイスの利用シーンは多岐にわたる
![Page 31: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/31.jpg)
さて、そんな環境変化の中で
![Page 32: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/32.jpg)
従来のワークフローでやっていけるか?
•次から次に発売されていくデバイス
•OSの違い、端末の仕様の違い
•下手したら、最初の設計からやり直しの場合も…
![Page 33: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/33.jpg)
そうならないために
![Page 34: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/34.jpg)
無理のない設計、柔軟なワークフローを
•デバイスの仕様に左右されない無理のない設計
•ワイヤーフレームやデザインラフはそこそこに
•早めにモックアップ、テストしながら作っていく
![Page 35: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/35.jpg)
http://trentwalton.com/2012/10/03/a-new-microsoft-com/
![Page 36: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/36.jpg)
http://trentwalton.com/2011/07/14/content-choreography/
![Page 37: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/37.jpg)
フローの変更には多くの人の理解が必要
![Page 38: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/38.jpg)
そろそろ考え方を変えないといけない時期
![Page 39: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/39.jpg)
より多くの環境に対応するために
![Page 40: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/40.jpg)
知らないでは済まされないデバイスの特性
![Page 41: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/41.jpg)
なぜ、デバイスのことを知る必要があるか
•あれがやりたい、これがやりたい、が難しい
•実装側が無理をしてどうにかなるものではない
•企画する人もビジュアルデザインする人も、デバイスの特性ぐらいは知らないと話にならない
![Page 42: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/42.jpg)
http://android-developers.blogspot.jp/2012/10/building-quality-tablet-apps.html
![Page 43: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/43.jpg)
http://msdn.microsoft.com/library/windows/apps/hh465424
![Page 44: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/44.jpg)
そして…
![Page 45: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/45.jpg)
固定サイズでデザインすることの難しさ
•PCだけが対象であれば、固定サイズでもよい
•スマートデバイスの画面サイズや比率はまちまち
•バラバラの環境に対して、固定のデザインは無理
![Page 46: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/46.jpg)
1pxのズレとか気にしてたらできない
![Page 47: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/47.jpg)
そもそもWebは可変することが前提でありPhotoshopは Webデザインツールではない
![Page 48: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/48.jpg)
そろそろ、pxベースからの卒業を
•画面のピクセル密度の違いをどう考えるか
•高解像度化するデバイスに対して画像を再生成する、柔軟に扱えることを前提に
•CSS3で置き換え、SVGやWebフォントの利用
![Page 49: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/49.jpg)
同じ16pxでも端末で見え方は異なる
![Page 50: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/50.jpg)
多様な環境に対応するために必要なこと
•操作そのものがマウスから指先になることを考える
•利用環境が必ずしも高速ではないので、WebサイトやWebアプリの表示スピードも大事
•他にも、オフラインユースを想定するなど
![Page 51: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/51.jpg)
考えなければならないことが一杯
![Page 52: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/52.jpg)
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
![Page 53: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/53.jpg)
みんなで一丸となって対応していく
![Page 54: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/54.jpg)
そして、それを取り巻く制作環境にも変化が
![Page 55: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/55.jpg)
スマートで効率的な仕事環境づくり
![Page 56: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/56.jpg)
スタイルタイル、スタイルガイド
![Page 57: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/57.jpg)
スタイルタイルとは
•ワイヤーフレームでもなく、デザインラフでもない
•全体的なデザインテイストの確認のため、必要な要素を1枚のファイルにまとめたもの
•それをベースにサイトのイメージを共有
![Page 60: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/60.jpg)
スタイルガイドとは
•Webサイトを構成する、さまざまな要素をまとめたガイドライン的なもの
•フォントの指定、サイズの指定はもちろん。HTML、CSS、JavaScriptのコードなども
•誰が修正しても同じものができる
![Page 61: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/61.jpg)
http://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
![Page 62: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/62.jpg)
https://github.com/styleguide/css
![Page 63: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/63.jpg)
http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy
![Page 64: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/64.jpg)
http://www.flickr.com/photos/aarronwalter/5579386649/
![Page 65: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/65.jpg)
CSSプリプロセッサによる実装の効率化
![Page 66: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/66.jpg)
CSSプリプロセッサ
•煩雑になりがちなCSSを、効率よく書くためのメタ言語
•変数などを使って、特定の入力を自動で処理
•Sass/SCSS、LESS、Stylusなど
![Page 69: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/69.jpg)
http://learnboost.github.com/stylus/
![Page 70: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/70.jpg)
フレームワークを使った開発
![Page 73: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/73.jpg)
パッケージマネージャを活用する
![Page 75: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/75.jpg)
“bower install jquery”
![Page 76: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/76.jpg)
jQueryの最新版が手元に
![Page 77: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/77.jpg)
バージョン管理システムを介しての協業
![Page 78: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/78.jpg)
バージョン管理システム
•システム開発の現場ではおなじみのバージョン管理
•GitやSubversion、Mercurialなど
•GitHubやBitbucketを使えばオンライン管理も
•どこにいてもやりとりができるという点も魅力
![Page 82: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/82.jpg)
サービスを通じて人と繋がることも
![Page 83: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/83.jpg)
いろいろなところが変わり始めてます
![Page 84: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/84.jpg)
最後に
![Page 85: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/85.jpg)
“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
![Page 86: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/86.jpg)
時代の変化についていくか、いかないか
![Page 87: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/87.jpg)
それは皆さんが決めることです
![Page 88: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/88.jpg)
本日のまとめ
•閲覧環境が多様化していることを認識しよう
•従来のワークフローで対応できるか考えよう
•少しやわらかな気持ちと頭に切り替えよう
•環境の変化を察知すれば、次の世界がみえます
![Page 89: Web制作者は変化についていけるか? 変化についていくべきか?](https://reader037.vdocuments.mx/reader037/viewer/2022102521/5549ffc2b4c905e56c8b4f00/html5/thumbnails/89.jpg)
本日はありがとうございました