Your SlideShare is downloading. ×
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道

15,610
views

Published on

日本Webデザイナーズ協会、株式会社インヴォーグ共催のセミナー「JWSDA×IN VOGUE スマフォで遊ぼ!インヴォーグ流スマートフォンソリューション」の講演スライドです。

日本Webデザイナーズ協会、株式会社インヴォーグ共催のセミナー「JWSDA×IN VOGUE スマフォで遊ぼ!インヴォーグ流スマートフォンソリューション」の講演スライドです。


2 Comments
83 Likes
Statistics
Notes
  • til I looked at the draft ov $7328, I accept that my best friend was like they say actualy receiving money part-time on their computer.. there aunts neighbour haz done this for only nineteen months and just repayed the dept on there villa and got a new Volkswagen Golf GTI. go to, Great70dotcom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • レイアウトや技術より先にユーザーの行動や体験を考えたシナリオやデザインを考えることは重要ですなのは当然ですねー。

    メディアクエリは技術だけなので、そこでデザインもカバーできないですよ。の切り口は違うように思います。

    言われるように単なる技術でありるのですから、メディアクエリを議論するのであるのであれば、振り分けかメディアクエリかの観点でのお話ではないのでしょうか?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,610
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
67
Comments
2
Likes
83
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道 秋葉秀樹 http://www.flickr.com/photos/guntrader/5683182247/sizes/z/in/photostream/
  • 2. Wireframe今どき「ワイヤーフレーム通りにつくる」?
  • 3. チームは全員参加、アイデアに活かせることが優先 ... ... ... ...
  • 4. アプリ開発の技術が評価される時代だからこそ チームの強化におけるWebデザイナー・ディレクターの価値を上げよう
  • 5. 自己紹介 秋葉秀樹(あきば・ひでき) フリーランスのデザイナー/ 株式会社インヴォーグ外部CTO兼テクニカルアドバイザー (社内クリエイティブチームの育成強化および技術研究) 企画営業・DTP・グラフィックデザイン・ Webフロントエンド全般・Flashゲーム開発・ 3DCGモデリング・Webディレクター執筆書籍
  • 6. 実績(Web アプリケーション)Grad3 http://grad3.ecoloniq.jp/
  • 7. 実績(Webサイト & ビジュアルデザイン)Sadie http://www.sadie-web.com/pc-top.html
  • 8. 実績(スマートフォンアプリケーション)Ikesuhttps://play.google.com/store/apps/details?id=air.jp.co.brilliantservice.TouchAquarium&hl=ja
  • 9. Chapter 1Designers definition デザイナーという定義
  • 10. ? Visual Sensation Grid Layout Color Scheme Photography Illustration, CG, etc... Web Designer? ? ?App Skills Markup Fireworks HTML Photoshop CSS Illustrator CMS
  • 11. !!! GOAL!困難な状況をどうデザインするか?
  • 12. / Multi Device= MediaQueries?
  • 13. Multi Device ≠ CSS MediaQueries !? すべての解決策がメディアクエリとは限らない単にPCと同じコンテンツを小さくしたところで、ユーザ目線での解決にはならない
  • 14. 技術的 心理的解決? 解決! レイアウトや技術より先に要求の本質を考えてデザインするhttp://www.flickr.com/photos/56981260@N08/8384489043/sizes/l/in/photostream/
  • 15. Thinks fora user. http://store.sony.jp/Special/Compare/Camera/Ichigan/
  • 16. Web Designer1 Users Action ユーザの行動を「デザイン」する 2 Grid Layout Fireworks HTML Color Scheme Photoshop CSS Photography Illustrator Illustration, CG, etc...
  • 17. Chapter 2Designer × デザイナーと技術の関係
  • 18. アイデアを届けるのは誰の仕事?
  • 19. 歓迎されないからといって… 「弊社はWebデザイナーを募集しています」 【求める人物・スキル・経験】 ◆Webデザイナーとしての実務経験 ◆Dreamweaver、Photoshop、Illustrator、Flashの実務レベルのスキル ◆HTML5+CSS3の理解 【歓迎するスキル】 ウェブプログラミング、JavaScript/jQueryができる方デザイナーに歓迎する経験やスキルがプログラミング能力と言われるけど…
  • 20. JavaScript Skill No!ノンプログラマーにとってプログラミングスキルとは全く違うスキル
  • 21. (ユーザ行動)技術も絡めたデザインを考えるチカラ (技術)なぜって私たちが届けるコンテンツはWebブラウザを使っているから
  • 22. 技術でユーザの操作を減らせられないか? 店舗検索 操作に慣れている 操作は苦手 キーワード 検索 ?技術によって解決できるデザインとは?http://www.flickr.com/photos/quinnanya/5306560579/sizes/l/in/photostream/http://www.flickr.com/photos/quinnanya/5308132092/sizes/l/in/photostream/
  • 23. もっと簡単にできないだろうか?
  • 24. もっとアイデアで楽しませられないだろうか? <input type="file">だけでカメラアクセスがOK
  • 25. アイデアを届けるのは誰の仕事?
  • 26. Chapter 3Workflow 協業する現在
  • 27. ユーザ操作にとって「不都合な状況」を考えたデザイン 電波がないところでも読ませてあげられないかな? Designers Thinking Offline Cache
  • 28. 開くたびに母国語のボタンを押すなんてありえないよね? 一度中国語で読んだんだから、次からはトーゼン中国語表示! LocalStrage http://waoryu.jp/
  • 29. Geolocation MediaCapturehttp://twitter.com/
  • 30. <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;}
  • 31. Communication &Consensus着手前のコミュニケーションはコンセンサスを産みやすい
  • 32. 動的かつ非同期なコンテンツはこれから増え続け、デザイナーはこれらの仕組みを知るだけで修正の手間が減るだろう
  • 33. 今、読み込んでる?電波切れてる!? <body> <h1>XMLHTTPREQUEST L2 Progress</h1> <progress></progress> <p id="par"><span></span>%</p>Designers Thinking <a href="#" id="loadStart">読み込み</a> </body>
  • 34. デザイナーよ、そのユーザ操作…エンジニアに丸投げしてないか? 見えにくい「ユーザ行動」をデザインすること「もし回線が切れたら・エラーが出たら…ユーザに何を与えるか?」 これはデザイナーが考えること
  • 35. Thanks !!Hidetaro7@Twitter 秋葉秀樹

×