Download as PDF, PPTX
![2012年 Web制作現場の有効求人倍率
8
7.53
6
4
3.49
2.56
2.36
2
2.04
1.9
0
マーケティング プロデューサー デザイナー ディレクター コーダー エンジニア
[出典]リクルートキャリア内の有効求人倍率データより](https://image.slidesharecdn.com/html5miyazaki-130217193237-phpapp02/85/HTML5-HTML5-Conference-MIYAZAKI-20-320.jpg)
Uploaded byHideki Akiba
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
HTML5 Conference MIYAZAKIで講演したスライド「デザイナーとしてのHTML5への向き合い方」です。
More Related Content
Similar to デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
![[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法](https://cdn.slidesharecdn.com/ss_thumbnails/cclslide20140708-140717040232-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
- 1. デザイナーとしてのHTML5への向き合い方 「機能」をデザインすること それは「安心」をデザインすること 秋葉秀樹 http://www.flickr.com/photos/michaelswiet/5487292660/
- 2.
- 3. JavaScript = Design!? × GOAL! デザイナーにとってJavaScriptはデザインの困難を解決する「手段」のひとつ http://kage-design.com
- 4. Technology ... 社内勉強会は本質を誤ると長続きしない http://www.flickr.com/photos/24800564@N03/7209304828/sizes/z/in/photostream/ http://fukidesign.com
- 5. One for All All for One コンテンツの届け方が今まで以上にひろがるということは Web制作は個人プレーではなく団体戦の質が大切
- 6. for Web Designer ひとりで解決できることは限られている 何を学ぶか？ 個人スキルか？チーム向上か？技術か？
- 7. 自己紹介 秋葉秀樹（あきば・ひでき） フリーランスのデザイナー／ 株式会社インヴォーグ外部CTO兼テクニカルアドバイザー （社内クリエイティブチームの育成強化および技術研究） 企画営業・DTP・グラフィックデザイン・ Webフロントエンド全般・Flashゲーム開発・ 3DCGモデリング・Webディレクター 執筆書籍
- 8.
- 9.
- 10. Chapter 1 Designer's Definition デザイナーという定義
- 11. ? Visual Sensation Grid Layout Color Scheme Photography Illustration, CG, etc... Web Designer? ? ? App Skills Markup Fireworks HTML Photoshop CSS Illustrator CMS
- 12. !!! GOAL! 困難な状況をどうデザインするか？
- 13. / Multi Device =MediaQueries?
- 14. Multi Device ≠CSS MediaQueries !? すべての解決策がメディアクエリとは限らない 単にPCと同じコンテンツを小さくしたところで、ユーザ目線での解決にはならない
- 15. 技術的 心理的 解決? 解決! レイアウトや技術より先に 要求の本質を考えてデザインする http://www.flickr.com/photos/michaelswiet/5487292660/
- 16. Thinks for auser. http://store.sony.jp/Special/Compare/Camera/Ichigan/
- 17. Web Designer 1 User's Action ユーザの行動を「デザイン」する 2 Grid Layout Fireworks HTML Color Scheme Photoshop CSS Photography Illustrator Illustration, CG, etc...
- 18. Chapter 2 Designer × デザイナーと技術の関係
- 19.
- 20. 2012年 Web制作現場の有効求人倍率 8 7.53 6 4 3.49 2.56 2.36 2 2.04 1.9 0 マーケティング プロデューサー デザイナー ディレクター コーダー エンジニア [出典]リクルートキャリア内の有効求人倍率データより
- 21.
- 22. JavaScript Skill No! ノンプログラマーにとってプログラミングスキルとは全く違うスキル
- 23. （デザイン） 技術も絡めたユーザ行動を考えるデザイナー （技術） 私たちが届けるコンテンツはWebブラウザを使っているから 技術と向き合うのは必須
- 24. 技術でユーザの操作を減らせられないか？ 店舗検索 操作に慣れている 操作は苦手 キーワード 検索 ? 技術によって解決できるデザインとは？ http://www.flickr.com/photos/quinnanya/5306560579/sizes/l/in/photostream/ http://www.flickr.com/photos/quinnanya/5308132092/sizes/l/in/photostream/
- 25.
- 26.
- 27.
- 28. Chapter 3 Workflow 協業する現在
- 29.
- 30. ユーザ操作にとって「不都合な状況」を考えたデザイン 電波がないところでも読ませてあげられないかな？ 不安を解消できる機能デザイン Offline Cache
- 31. 開くたびに母国語のボタンを押すなんてありえないよね？ 一度中国語で読んだんだから、次からはトーゼン中国語表示！ LocalStorage http://waoryu.jp/
- 32. Geolocation MediaCapture http://twitter.com/
- 33. <div class="button camera-container"style=""> <i class="camera-icon"></i> <input class="camera-input" name="media" type="file" accept="image/*"> </div> .camera-icon { background-position: -123px -77px; width: 21px; height: 20px; }
- 34.
- 35. 今、読み込んでる？電波切れてる！？ <body> <h1>XMLHTTPREQUEST L2 Progress</h1> <progress></progress> <p id="par"><span></span>%</p> <a href="#" id="loadStart">読み込み</a> </body> 不安を解消できる機能デザイン
- 36. 「機能」をデザインすること それは「安心」をデザインすること ユーザの不安を解消する機能をデザインすること 必要なのはプログラミングスキルではない http://www.flickr.com/photos/michaelswiet/5487292660/
- 37. 私たちWebデザイナーこそHTML5技術に必要な存在 便利な機能を用いてどうコンテンツを届けるか？ まずはそこを学習しよう！
- 38.