Embed Size (px)
Citation preview
http://www.flickr.com/photos/michaelswiet/5487292660/
秋葉秀樹
「機能」をデザインすることそれは「安心」をデザインすること
デザイナーとしてのHTML5への向き合い方
今どき「ワイヤーフレーム通りにつくる」？
Wireframe
GOAL!
デザイナーにとってJavaScriptはデザインの困難を解決する「手段」のひとつ
JavaScript = Design !?
http://kage-design.com
×
社内勉強会は本質を誤ると長続きしない
...
http://www.!ickr.com/photos/24800564@N03/7209304828/sizes/z/in/photostream/
Technology
http://fukidesign.com
コンテンツの届け方が今まで以上にひろがるということはWeb制作は個人プレーではなく団体戦の質が大切
One for AllAll for One
for Web Designerひとりで解決できることは限られている
何を学ぶか？ 個人スキルか？チーム向上か？技術か？
企画営業・DTP・グラフィックデザイン・Webフロントエンド全般・Flashゲーム開発・3DCGモデリング・Webディレクター
秋葉秀樹（あきば・ひでき）自己紹介
執筆書籍
フリーランスのデザイナー／株式会社インヴォーグ外部CTO兼テクニカルアドバイザー（社内クリエイティブチームの育成強化および技術研究）
Grad3 http://grad3.ecoloniq.jp/
実績（Web アプリケーション）
実績（スマートフォンアプリケーション）
Ikesu https://play.google.com/store/apps/details?id=air.jp.co.brilliantservice.TouchAquarium2
Chapter 1
Designer's Definitionデザイナーという定義
Web Designer?App Skills
FireworksPhotoshopIllustrator
CMS
MarkupHTML
CSS
Visual SensationGrid Layout
Color SchemePhotography
Illustration, CG, etc...?? ?
GOAL!
困難な状況をどうデザインするか？
!!!×
Multi Device
MediaQueries?=
/
単にPCと同じコンテンツを小さくしたところで、ユーザ目線での解決にはならない
!?
Multi Device ≠ CSS MediaQueries
すべての解決策がメディアクエリとは限らない
心理的解決!
技術的解決?
レイアウトや技術より先に要求の本質を考えてデザインする
http://www.flickr.com/photos/michaelswiet/5487292660/
Thinksfor
a user.
http://store.sony.jp/Special/Compare/Camera/Ichigan/
User's Actionユーザの行動を「デザイン」する
Web Designer
FireworksPhotoshopIllustrator
HTMLCSS
Grid LayoutColor SchemePhotography
Illustration, CG, etc...2
1
Chapter 2
Designer ×
デザイナーと技術の関係
アイデアから逃げない、向き合うデザイナー
0
2
4
6
8
マーケティング プロデューサー デザイナー ディレクター コーダー エンジニア
7.53
2.041.9
3.49
2.562.36
[出典]リクルートキャリア内の有効求人倍率データより
2012年 Web制作現場の有効求人倍率
【求める人物・スキル・経験】◆Webデザイナーとしての実務経験 ◆Dreamweaver、Photoshop、Illustrator、Flashの実務レベルのスキル ◆HTML5＋CSS3の理解
【歓迎するスキル】
「弊社はWebデザイナーを募集しています」
そんなに簡単じゃない
ウェブプログラミング、JavaScript/jQueryができる方
JavaScript Skill
No!
ノンプログラマーにとってプログラミングスキルとは全く違うスキル
技術も絡めたユーザ行動を考えるデザイナー
私たちが届けるコンテンツはWebブラウザを使っているから技術と向き合うのは必須
（ デ ザ イ ン ）
（技術）
技術によって解決できるデザインとは？
キーワード検索
操作に慣れている
技術でユーザの操作を減らせられないか？
?操作は苦手
店舗検索
http://www.flickr.com/photos/quinnanya/5306560579/sizes/l/in/photostream/http://www.flickr.com/photos/quinnanya/5308132092/sizes/l/in/photostream/
もっと簡単にできないだろうか？
<input type=""le">
写真投稿型キャンペーンサイトとかできないだろうか？
カメラを使える
アイデアから逃げない
Chapter 3
Workflow協業する現在
Communicationhttp://www.flickr.com/photos/buriednexttoyou/5047684334/sizes/l/in/photostream/
ユーザ操作にとって「不都合な状況」を考えたデザイン
電波がないところでも読ませてあげられないかな？
Offline Cache
不安を解消できる機能デザイン
http://waoryu.jp/
LocalStorage
開くたびに母国語のボタンを押すなんてありえないよね？一度中国語で読んだんだから、次からはトーゼン中国語表示！
<div class="button camera-container" style=""> <i class="camera-icon"></i> <input class="camera-input" name="media" type=""le" accept="image/*"></div>
.camera-icon { background-position: -123px -77px; width: 21px; height: 20px;}
動的かつ非同期なコンテンツはこれから増え続け、デザイナーはこれらの仕組みを知るだけで修正の手間が減るだろう
<body> <h1>XMLHTTPREQUEST L2 Progress</h1> <progress></progress> <p id="par"><span></span>%</p> <a href="#" id="loadStart">読み込み</a> </body>
今、読み込んでる？電波切れてる！？
不安を解消できる機能デザイン
ユーザの不安を解消する機能をデザインすること必要なのはプログラミングスキルではない
「機能」をデザインすることそれは「安心」をデザインすること
http://www.flickr.com/photos/michaelswiet/5487292660/
私たちWebデザイナーこそHTML5技術に必要な存在
便利な機能を用いてどうコンテンツを届けるか？まずはそこを学習しよう！
Thanks !!
秋葉秀樹
Hidetaro7@Twitter
