HTML5な今日この頃に贈る
Webデザイナーこれからの生きる道
秋葉 秀樹（ツクロア）

HIDEKI AKIBA
1971 - ????

INTERFACEDESIGNAPPS
DESIGNELECTRONIC
KITSAFARISLEIPNIR

Web制作現場の有効求人倍率（2012）
87.53

63.49

420

マーケティング

プロデューサーデザイナー

ディレクター[出典]リクルートキャリア内の有効求人倍率データより

コーダー

エンジニア

OBJECTIVE
デザインを見直す
Webデザインはブラウザを介して伝えることへの理解
ちょっとしたUIの動きはデザイナーがつくる
エンジニアと協業するためにいい仕事をするために

RE: DESIGN
将来のために今、かんがえること

RESPONSIVE = MEDIAQUERIES ?

NO !
冗長な製品比較表をそのままモバイル対応…
いったい何をレスポンスするのか？のほうが重要

よくあるこだわり「外観にこだわる」「カメラ画素数にこだわる」「価格にこだわる」「解像度にこだわる」「本体のサイズにこだわる」

あまりない「Wi-Fi 対応かにこだわる」「デュアルコア対応かにこだわる」
こだわり

選ぶ理由を考えるところからデザイン

優先度

サイト内で携帯電話の機能を比較をしたいユーザー

ユーザ

ユーザの好みで比較したい

機能で比較したい色、外観で比較したい

写真ギャラリー

あなたにオススメの機種
本体のサイズ

ディスプレイ解像度

価格

カメラ画素数

スペック比較表
製品名

防水■■■■

●

■■■■

●

■■■■

●

■■■■

●

ワンセグ おサイフケータイ

ユーザーが何を比較したいのか？
安易に表にまとめず、要求の本質をカタチにする

●

●

●

CLASSIFICATION
分類をデザインhttp://store.sony.jp/Special/Compare/Camera/Ichigan/

COLLABORATION
協業

DESIGNERENGINEER

WIREFRAME

ストーリの前後が見えますか？

DEFINITION OF DESIGN ?
誤解され続けるデザイン、なにをデザインというべき？

REASON TO ACTION
COOL

POPULARITY

BEAUTY

かっこよさ

流行り

美しさ

これらが行動や集客に対する直接的な理由とは何か？

FLAT

しっかり余白を確保している例
それでも日本語の形状はアルファベットのそれと違いすぎる

COOL ?

見た目の良さを重視すると飽きられる、まるで恋愛と同じだ平気でHTMLの修正をする
少しはCSSのコードを書けるセンスはなくてもバナーや画像をつくれる

クライアントもスキルが高くなってきている当然。
煩わしい作業は技術によって解決されてきた
CMS, jQuery, CSS Preprocessor, クラウド化, Web Fonts, more...

NO FUTURE

カテゴリ一覧

カテゴリ選択（ドロワー）

TODOアプリ社内プロジェクト
プロジェクトA
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

カテゴリ
社内プロジェクト
プレゼン資料稟議
サークル
新しいグループ

社内プロジェクト
プロジェクトA
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

カテゴリ一覧

カテゴリ選択（ドロワー）

TODOアプリ社内プロジェクト

CAN NOTSEE
ACTION
プロジェクトA

プロジェクトX

新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

行動の先が見えない…

カテゴリ
社内プロジェクト
プレゼン資料稟議サークル
新しいグループ

社内プロジェクト
プロジェクトA
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

Designer

1

User's Action
ユーザーの行動を「デザイン」する

2

Fireworks
HTMLPhotoshop
CSS
Illustrator

Grid Layout
Color Scheme
Photography
Illustration, CG, etc...

カテゴリ一覧

TODOアプリ社内プロジェクト

カテゴリ選択（ドロワー）?
カテゴリ

プロジェクトA
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

社内プロジェクト

?

プレゼン資料稟議サークル?

新しいグループ「行動の先」とは…？

社内プロジェクト
プロジェクトA
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き

PROBLEM
見えない問題を解決
プロトタイピング（試作品開発）
開発コストとスケジュール

WEB PROTOTYPE
一連の行動パターンのみをHTMLベースで試作

CROSS-BROWSER ? NO !
プロトタイピングにとって対象ブラウザはひとつでいいCSS

bodydiv.list_view {position: absolute;-webkit-transition: left 0.15s;}.show_drawer div.list_view {left: 80%;}

div.list_view
div.drawerJS
btn.bind("touchend", function (e){$("body").toggleClass("show_drawer")})

body.show_drawer

CSS
div.list_view {position: absolute;-webkit-transition: left 0.15s;}.show_drawer div.list_view {left: 80%;}

div.list_view
div.drawerJS
btn.bind("touchend", function (e){$("body").toggleClass("show_drawer")})

jQueryのaddClass(), removeClass(), toggleClass()
だけでも、さまざまな「状態遷移」を実現できるカテゴリ

社内プロジェクト

社内プロジェクト

PROTOTYPING FOR DESIGNER

プレゼン資料稟議サークル
新しいグループ$(".new_group a").bind("touchend",function () {});
「新しいグループ」が押されたら

社内プロジェクト

カテゴリ

PROTOTYPING FOR DESIGNER

社内プロジェクト
プレゼン資料
ページxxx.comの記述…

稟議

グループ名を入力
サークル
デザイン会議新しいグループOK

キャンセル$(".new_group a").bind("touchend", function() {var g_name = prompt("グループ名を入力","");});
ユーザーにグループ名を入力させる

カテゴリ
社内プロジェクト
プレゼン資料稟議
サークル
デザイン会議新しいグループ

社内プロジェクト

PROTOTYPING FOR DESIGNER$(".new_group a").bind("touchend", function() {var g_name = prompt("グループ名を入力","");
if(g_name) {$("ul.drawer_list").append("<li><ahref='#'>"+g_name+"</a></li>");});ul要素に新しいリストを追加する

HOW TO PROTOTYPING
クライアントとのやりとりで気をつけておきたいこと

COLLABORATION
質の高い協業スタイル

DESIGNERENGINEERUIまわりの動きはデザイナー

エンジニアはもっとコアな部分

TECHNOLOGY& DESIGNデザインと技術との関係も無視できない

JavaScript APIはエンジニアのオモチャであってはいけない
デザイナーは機能がどうユーザーに利便性を与えるかを考えるべき

ERROR

人為的ミスと環境によるエラー

ERROR
人為的ミス … 操作をキャンセルさせて以前の状態に戻す救済措置
通信切断 … 回線が切れていることをユーザーに知らせる措置
通信速度が遅い … タイムアウトの措置など

いままでデザイナーがエンジニアに丸投げしてきたこと

ユーザー操作にとって「不都合な状況」を考えたデザイン

不安を解消できる機能デザイン

技術でユーザーの操作を減らせられないか？

店舗検索操作に慣れているキーワード

検索

http://www.flickr.com/photos/quinnanya/5306560579/sizes/l/in/photostream/
http://www.flickr.com/photos/quinnanya/5308132092/sizes/l/in/photostream/

操作は苦手?

GEOLOCATIONWEB STORAGE

毎回ユーザーに操作させないデザイン

少量のユーザーデータを保存

XMLHTTPREQUEST LEVEL2TECHNOLOGY & DESIGN
技術にとらわれない、でも技術に背を向けない

VALUE !
あなたなりの価値を！

THANK YOU !