Embed Size (px)
Citation preview
HTML5な今日この頃に贈るWebデザイナーこれからの生きる道秋葉 秀樹（ツクロア）
H I D E K I A K I B A1 9 7 1 - ? ? ? ?
INTERFACEDESIGN
APPSDESIGN
ELECTRONICKIT
SAFARI SLEIPNIR
0
2
4
6
8
マーケティング プロデューサー デザイナー ディレクター コーダー エンジニア
[出典]リクルートキャリア内の有効求人倍率データより
Web制作現場の有効求人倍率（2012）
3.49
7.53
OBJECTIVEデザインを見直す
Webデザインはブラウザを介して伝えることへの理解
ちょっとしたUIの動きはデザイナーがつくる
エンジニアと協業するために
いい仕事をするために
RE: DESIGN将来のために今、かんがえること
RESPONSIVE = MEDIAQUERIES ?
冗長な製品比較表をそのままモバイル対応…いったい何をレスポンスするのか？のほうが重要
NO !
選ぶ理由を考えるところからデザイン
優先度
よくあるこだわり
あまりないこだわり
「外観にこだわる」「カメラ画素数にこだわる」
「Wi-Fi 対応かにこだわる」「デュアルコア対応かにこだわる」
「本体のサイズにこだわる」「解像度にこだわる」「価格にこだわる」
ユーザの好みで
比較したい機能で比較したい
あなたにオススメの機種 スペック比較表
ディスプレイ解像度 価格
カメラ画素数
本体のサイズ 製品名 防水 ワンセグ おサイフケータイ
■■■■ ●
■■■■ ● ● ●
■■■■ ●
■■■■ ● ●
写真ギャラリー
ユーザーが何を比較したいのか？安易に表にまとめず、要求の本質をカタチにする
ユーザ
サイト内で携帯電話の機能を比較をしたいユーザー
色、外観で比較したい
CLASSIFICATION分類をデザイン
http://store.sony.jp/Special/Compare/Camera/Ichigan/
DESIGNER ENGINEER
COLLABORATION協業
WIREFRAME
ストーリの前後が見えますか？
DEFINITION OF DESIGN ?誤解され続けるデザイン、なにをデザインというべき？
COOLかっこよさ
POPULARITY流行り
BEAUTY美しさ
これらが行動や集客に対する直接的な理由とは何か？
REASON TO ACTION
しっかり余白を確保している例それでも日本語の形状はアルファベットのそれと違いすぎる
FLAT
COOL ?
見た目の良さを重視すると飽きられる、まるで恋愛と同じだ
平気でHTMLの修正をする少しはCSSのコードを書けるセンスはなくてもバナーや画像をつくれる
クライアントもスキルが高くなってきている
煩わしい作業は技術によって解決されてきたCMS, jQuery, CSS Preprocessor, クラウド化, Web Fonts, more...
当然。
NO FUTURE
社内プロジェクト
カテゴリ
プレゼン資料
稟議
サークル
新しいグループ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
TODOアプリ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
カテゴリ一覧 カテゴリ選択（ドロワー）
社内プロジェクト
カテゴリ
プレゼン資料
稟議
サークル
新しいグループ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
TODOアプリ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
カテゴリ一覧 カテゴリ選択（ドロワー）
行動の先が見えない…
CAN NOTSEE
ACTION
User's Actionユーザーの行動を「デザイン」する
Designer
FireworksPhotoshopIllustrator
HTMLCSS
Grid LayoutColor SchemePhotography
Illustration, CG, etc...2
1
社内プロジェクト
カテゴリ
プレゼン資料
稟議
サークル
新しいグループ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
TODOアプリ
プロジェクトA
社内プロジェクト
プロジェクトX
新規プロジェクトの企画書
C社との合同プロジェクト
B社合同の覚え書き
カテゴリ一覧 カテゴリ選択（ドロワー）
?
?
?
「行動の先」とは…？
見えない問題を解決プロトタイピング（試作品開発）
開発コストとスケジュール
PROBLEM
一連の行動パターンのみをHTMLベースで試作
WEB PROTOTYPE
プロトタイピングにとって対象ブラウザはひとつでいい
CROSS-BROWSER ? NO !
div.drawerdiv.list_view
bodydiv.list_view { position: absolute; -webkit-transition: left 0.15s;}
.show_drawer div.list_view { left: 80%;}
btn.bind("touchend", function (e){ $("body").toggleClass("show_drawer")})
CSS
JS
div.drawer
body.show_drawer
div.list_view
div.list_view { position: absolute; -webkit-transition: left 0.15s;}
.show_drawer div.list_view { left: 80%;}
btn.bind("touchend", function (e){ $("body").toggleClass("show_drawer")})
CSS
JS
jQueryのaddClass(), removeClass(), toggleClass()だけでも、さまざまな「状態遷移」を実現できる
社内プロジェクト
カテゴリ
プレゼン資料
稟議
サークル
新しいグループ
社内プロジェクト
$(".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><a href='#'>"+g_name+"</a></li>");
});ul要素に新しいリストを追加する
PROTOTYPING FOR DESIGNER
HOW TO PROTOTYPINGクライアントとのやりとりで気をつけておきたいこと
DESIGNER ENGINEER
COLLABORATION質の高い協業スタイル
UIまわりの動きはデザイナー エンジニアはもっとコアな部分
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 !
