SlideShare a Scribd company logo
1 of 35
Download to read offline
HTML5な今日この頃に贈る、
Webデザイナーこれからの生きる道
                          秋葉秀樹


     http://www.flickr.com/photos/guntrader/5683182247/sizes/z/in/photostream/
Wireframe


今どき「ワイヤーフレーム通りにつくる」?
チームは全員参加、アイデアに活かせることが優先


   ...
         ...   ...   ...
アプリ開発の技術が評価される時代だからこそ




 チームの強化におけるWebデザイナー・ディレクターの価値を上げよう
自己紹介
       秋葉秀樹(あきば・ひでき)

       フリーランスのデザイナー/
       株式会社インヴォーグ外部CTO兼テクニカルアドバイザー
       (社内クリエイティブチームの育成強化および技術研究)

       企画営業・DTP・グラフィックデザイン・
       Webフロントエンド全般・Flashゲーム開発・
       3DCGモデリング・Webディレクター



執筆書籍
実績(Web アプリケーション)




Grad3 http://grad3.ecoloniq.jp/
実績(Webサイト & ビジュアルデザイン)




Sadie http://www.sadie-web.com/pc-top.html
実績(スマートフォンアプリケーション)




Ikesu
https://play.google.com/store/apps/details?id=air.jp.co.brilliantservice.TouchAquarium&hl=ja
Chapter 1




Designer's definition
     デザイナーという定義
?
         Visual Sensation
                      Grid Layout
                    Color Scheme
                     Photography
                Illustration, CG, etc...



  Web Designer?

 ?                                         ?
App Skills                                 Markup
  Fireworks
                                             HTML
  Photoshop
                                              CSS
  Illustrator
      CMS
!!!
              GOAL!



困難な状況をどうデザインするか?
/
 Multi Device




= MediaQueries?
Multi Device ≠ CSS MediaQueries




           !?
 すべての解決策がメディアクエリとは限らない
単にPCと同じコンテンツを小さくしたところで、ユーザ目線での解決にはならない
技術的                                               心理的
解決?                                               解決!
           レイアウトや技術より先に
要求の本質を考えてデザインする
http://www.flickr.com/photos/56981260@N08/8384489043/sizes/l/in/photostream/
Thinks
  for
a user.


          http://store.sony.jp/Special/Compare/Camera/Ichigan/
Web Designer
1   User's Action
    ユーザの行動を「デザイン」する




     2
                                  Grid Layout
         Fireworks
                     HTML       Color Scheme
         Photoshop
                      CSS        Photography
         Illustrator
                            Illustration, CG, etc...
Chapter 2




Designer        ×

  デザイナーと技術の関係
アイデアを届けるのは誰の仕事?
歓迎されないからといって…
           「弊社はWebデザイナーを募集しています」

  【求める人物・スキル・経験】
  ◆Webデザイナーとしての実務経験
  ◆Dreamweaver、Photoshop、Illustrator、Flashの実務レベルのスキル
  ◆HTML5+CSS3の理解


  【歓迎するスキル】
  ウェブプログラミング、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="file">だけでカメラアクセスがOK
アイデアを届けるのは誰の仕事?
Chapter 3




Workflow
  協業する現在
ユーザ操作にとって「不都合な状況」を考えたデザイン

 電波がないところでも読ませてあげられないかな?




            Designer's Thinking




     Offline Cache
開くたびに母国語のボタンを押すなんてありえないよね?
 一度中国語で読んだんだから、次からはトーゼン中国語表示!




                      LocalStrage


  http://waoryu.jp/
Geolocation
                      MediaCapture


http://twitter.com/
<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;
}
Communication &
Consensus
着手前のコミュニケーションはコンセンサスを産みやすい
動的かつ非同期なコンテンツはこれから増え続け、
デザイナーはこれらの仕組みを知るだけで修正の手間が減るだろう
今、読み込んでる?電波切れてる!?



                      <body>
                         <h1>XMLHTTPREQUEST L2 Progress</h1>

                         <progress></progress>
                         <p id="par"><span></span>%</p>

Designer's Thinking      <a href="#" id="loadStart">読み込み</a>
                      </body>
デザイナーよ、そのユーザ操作…
エンジニアに丸投げしてないか?


     見えにくい「ユーザ行動」をデザインすること
「もし回線が切れたら・エラーが出たら…ユーザに何を与えるか?」
         これはデザイナーが考えること
Thanks !!
Hidetaro7@Twitter


   秋葉秀樹

More Related Content

Viewers also liked

Wireframe(po) ishikurapdf
Wireframe(po) ishikurapdfWireframe(po) ishikurapdf
Wireframe(po) ishikurapdf
Keisuke Ishikra
 
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
Taisuke Fukuno
 
水平思考のススメ
水平思考のススメ水平思考のススメ
水平思考のススメ
Keisuke Oohata
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道
Hideki Akiba
 
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
 

Viewers also liked (20)

Wireframe(po) ishikurapdf
Wireframe(po) ishikurapdfWireframe(po) ishikurapdf
Wireframe(po) ishikurapdf
 
Wireframe Template
Wireframe TemplateWireframe Template
Wireframe Template
 
モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形
 
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
 
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
 
なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?
 
デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々
 
水平思考のススメ
水平思考のススメ水平思考のススメ
水平思考のススメ
 
Followership
FollowershipFollowership
Followership
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
「おもしろい」の社会実装のために
「おもしろい」の社会実装のために「おもしろい」の社会実装のために
「おもしろい」の社会実装のために
 
これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!
 
SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
伝えあう図解術
伝えあう図解術伝えあう図解術
伝えあう図解術
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
 
ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道ぼっけもんデザイナーへの道
ぼっけもんデザイナーへの道
 
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
 
普通以下のデザイナーがなんとかやっていく方法
普通以下のデザイナーがなんとかやっていく方法普通以下のデザイナーがなんとかやっていく方法
普通以下のデザイナーがなんとかやっていく方法
 

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

Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Hideki Akiba
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
 
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイントスマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
lychee .
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Atsushi Kambara
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 

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

もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
 
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
 
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツToolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術
 
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-devVs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 
Web
WebWeb
Web
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
 
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
 
Webデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツールWebデザイナーにフル活用してもらいたいWeb制作ツール
Webデザイナーにフル活用してもらいたいWeb制作ツール
 
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイントスマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
 
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD PatternApplication Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 

More from Hideki Akiba

More from Hideki Akiba (10)

デザインエンジニア・ボーダーレスな時代を楽しもう!
デザインエンジニア・ボーダーレスな時代を楽しもう!デザインエンジニア・ボーダーレスな時代を楽しもう!
デザインエンジニア・ボーダーレスな時代を楽しもう!
 
Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦Webデザイナー、 Tesselに挑戦
Webデザイナー、 Tesselに挑戦
 
Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -
Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -
Creative Cloud デザインツールの便利な8つの機能 - ADC MEETUP ROUND 08 SESSION2 -
 
見た目以上に大事なこれからのデザイン
見た目以上に大事なこれからのデザイン見た目以上に大事なこれからのデザイン
見た目以上に大事なこれからのデザイン
 
伝わる!デザインのつくりかた
伝わる!デザインのつくりかた伝わる!デザインのつくりかた
伝わる!デザインのつくりかた
 
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
 
DesignersHack002 presentation
DesignersHack002 presentationDesignersHack002 presentation
DesignersHack002 presentation
 
HTML5 APIを使ったデモとソースの解説
HTML5 APIを使ったデモとソースの解説HTML5 APIを使ったデモとソースの解説
HTML5 APIを使ったデモとソースの解説
 
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
 
Html5west
Html5westHtml5west
Html5west
 

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