デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI

1,436 views
1,407 views

Published on

HTML5 Conference MIYAZAKIで講演したスライド「デザイナーとしてのHTML5への向き合い方」です。

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,436
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI

  1. 1. デザイナーとしてのHTML5への向き合い方「機能」をデザインすること それは「安心」をデザインすること 秋葉秀樹 http://www.flickr.com/photos/michaelswiet/5487292660/
  2. 2. Wireframe今どき「ワイヤーフレーム通りにつくる」?
  3. 3. JavaScript = Design !? × GOAL!デザイナーにとってJavaScriptはデザインの困難を解決する「手段」のひとつ http://kage-design.com
  4. 4. Technology ...社内勉強会は本質を誤ると長続きしない http://www.flickr.com/photos/24800564@N03/7209304828/sizes/z/in/photostream/ http://fukidesign.com
  5. 5. One for All All for Oneコンテンツの届け方が今まで以上にひろがるということは Web制作は個人プレーではなく団体戦の質が大切
  6. 6. for Web Designer ひとりで解決できることは限られている何を学ぶか? 個人スキルか?チーム向上か?技術か?
  7. 7. 自己紹介 秋葉秀樹(あきば・ひでき) フリーランスのデザイナー/ 株式会社インヴォーグ外部CTO兼テクニカルアドバイザー (社内クリエイティブチームの育成強化および技術研究) 企画営業・DTP・グラフィックデザイン・ Webフロントエンド全般・Flashゲーム開発・ 3DCGモデリング・Webディレクター執筆書籍
  8. 8. 実績(Web アプリケーション)Grad3 http://grad3.ecoloniq.jp/
  9. 9. 実績(スマートフォンアプリケーション)Ikesuhttps://play.google.com/store/apps/details?id=air.jp.co.brilliantservice.TouchAquarium2
  10. 10. Chapter 1Designers Definition デザイナーという定義
  11. 11. ? Visual Sensation Grid Layout Color Scheme Photography Illustration, CG, etc... Web Designer? ? ?App Skills Markup Fireworks HTML Photoshop CSS Illustrator CMS
  12. 12. !!! GOAL!困難な状況をどうデザインするか?
  13. 13. / Multi Device= MediaQueries?
  14. 14. Multi Device ≠ CSS MediaQueries !? すべての解決策がメディアクエリとは限らない単にPCと同じコンテンツを小さくしたところで、ユーザ目線での解決にはならない
  15. 15. 技術的 心理的解決? 解決! レイアウトや技術より先に要求の本質を考えてデザインする http://www.flickr.com/photos/michaelswiet/5487292660/
  16. 16. Thinks fora user. http://store.sony.jp/Special/Compare/Camera/Ichigan/
  17. 17. Web Designer1 Users Action ユーザの行動を「デザイン」する 2 Grid Layout Fireworks HTML Color Scheme Photoshop CSS Photography Illustrator Illustration, CG, etc...
  18. 18. Chapter 2Designer × デザイナーと技術の関係
  19. 19. アイデアから逃げない、向き合うデザイナー
  20. 20. 2012年 Web制作現場の有効求人倍率8 7.5364 3.49 2.56 2.362 2.04 1.90 マーケティング プロデューサー デザイナー ディレクター コーダー エンジニア [出典]リクルートキャリア内の有効求人倍率データより
  21. 21. 「弊社はWebデザイナーを募集しています」【求める人物・スキル・経験】◆Webデザイナーとしての実務経験◆Dreamweaver、Photoshop、Illustrator、Flashの実務レベルのスキル◆HTML5+CSS3の理解【歓迎するスキル】ウェブプログラミング、JavaScript/jQueryができる方 そんなに簡単じゃない
  22. 22. JavaScript Skill No!ノンプログラマーにとってプログラミングスキルとは全く違うスキル
  23. 23. (デザイン)技術も絡めたユーザ行動を考えるデザイナー (技術) 私たちが届けるコンテンツはWebブラウザを使っているから 技術と向き合うのは必須
  24. 24. 技術でユーザの操作を減らせられないか? 店舗検索 操作に慣れている 操作は苦手 キーワード 検索 ?技術によって解決できるデザインとは?http://www.flickr.com/photos/quinnanya/5306560579/sizes/l/in/photostream/http://www.flickr.com/photos/quinnanya/5308132092/sizes/l/in/photostream/
  25. 25. もっと簡単にできないだろうか?
  26. 26. 写真投稿型キャンペーンサイトとかできないだろうか?<input type="file"> カメラを使える
  27. 27. アイデアから逃げない
  28. 28. Chapter 3Workflow 協業する現在
  29. 29. Communication http://www.flickr.com/photos/buriednexttoyou/5047684334/sizes/l/in/photostream/
  30. 30. ユーザ操作にとって「不都合な状況」を考えたデザイン 電波がないところでも読ませてあげられないかな? 不安を解消できる機能デザイン Offline Cache
  31. 31. 開くたびに母国語のボタンを押すなんてありえないよね? 一度中国語で読んだんだから、次からはトーゼン中国語表示! LocalStorage http://waoryu.jp/
  32. 32. Geolocation MediaCapturehttp://twitter.com/
  33. 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. 34. 動的かつ非同期なコンテンツはこれから増え続け、デザイナーはこれらの仕組みを知るだけで修正の手間が減るだろう
  35. 35. 今、読み込んでる?電波切れてる!? <body> <h1>XMLHTTPREQUEST L2 Progress</h1> <progress></progress> <p id="par"><span></span>%</p> <a href="#" id="loadStart">読み込み</a> </body>不安を解消できる機能デザイン
  36. 36. 「機能」をデザインすることそれは「安心」をデザインすること ユーザの不安を解消する機能をデザインすること 必要なのはプログラミングスキルではない http://www.flickr.com/photos/michaelswiet/5487292660/
  37. 37. 私たちWebデザイナーこそHTML5技術に必要な存在便利な機能を用いてどうコンテンツを届けるか? まずはそこを学習しよう!
  38. 38. Thanks !!Hidetaro7@Twitter 秋葉秀樹

×