Web制作者は変化についていけるか? 変化についていくべきか?
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 10,889 views

WebSig 24/7 Vol. 31 こもり資料

WebSig 24/7 Vol. 31 こもり資料

Statistics

Views

Total Views
10,889
Views on SlideShare
8,704
Embed Views
2,185

Actions

Likes
101
Downloads
89
Comments
1

36 Embeds 2,185

http://bikkuri.me 554
http://www.jagat.jp 519
http://job-tech.jp 277
http://websig247.jp 252
https://twitter.com 159
http://localhost 152
http://s.deeeki.com 92
http://192.168.33.10 53
http://dev.job-tech.jp 40
http://t.co 18
http://reviewappsnavitime.blogspot.jp 16
http://nuevospowerpoints.blogspot.com.es 5
http://www.facebook.com 5
http://mundo-powerpoints.blogspot.com.es 4
http://nuevospowerpoints.blogspot.com 3
http://reviewappsnavitime.blogspot.com 3
https://www.facebook.com 3
https://si0.twimg.com 3
http://www.job-tech.jp 3
https://www.chatwork.com 2
http://cloud.feedly.com 2
https://t.co 2
http://hootsuite.com 2
http://geechscamp.lovepop.jp 2
http://favtile.com 2
http://www.tumblr.com 2
https://m.facebook.com&_=1354431755469 HTTP 1
https://m.facebook.com&_=1354435180190 HTTP 1
http://rssc.dokoda.jp 1
http://www.feedspot.com 1
http://nuevospowerpoints.blogspot.mx 1
http://nuevospowerpoints.blogspot.com.ar 1
http://favolog.org 1
http://www.instapaper.com 1
http://twitter.com 1
https://twimg0-a.akamaihd.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web制作者は変化についていけるか? 変化についていくべきか? Web制作者は変化についていけるか? 変化についていくべきか? Presentation 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.apple.com/ipad/
    • http://www.google.com/nexus/
    • http://www.microsoft.com/Surface/en-US
    • “ The Need for a Responsive Retail ExperienceWhen it came to online shopping, 14.1% of shoppers preferredusing their mobile phones. The most popular device for USconsumers — the iPhone, followed by the iPad.Online Black Friday sales shot up 20.7% from last year, mostlyfrom mobile shoppers. 16.3% of mobile sales, mostly from an iPad.24% of Black Friday retail traffic came from a mobile, whereas itwas 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
    • 必ずしも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 allmembers of a team together to design, build, test andthen 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 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
    • 時代の変化についていくか、いかないか
    • それは皆さんが決めることです
    • 本日のまとめ•閲覧環境が多様化していることを認識しよう•従来のワークフローで対応できるか考えよう•少しやわらかな気持ちと頭に切り替えよう•環境の変化を察知すれば、次の世界がみえます
    • 本日はありがとうございました