Download - DeNA Creative Seminar #2 に行ってきた
DENA CREATIVE SEMINAR VOL.2
•話題のヒカリエ
•雨に濡れない!
•フリーランチうらやましい
•懇親会はフリーランチ作っているとこが作った料理だった
•お酒がクーラーボックスに!
2
SESSION1: ブラウザレンダリングについて
http://dl.dropbox.com/u/2855207/uiux_20120723/index.html
3
ブラウザのことをもっと詳しく知りたい場合は
• Browserscope
• http://www.browserscope.org/
•ブラウザの比較サイト
•楽しいので一度見てみましょう
5
解像度とかの話•ピクセル密度とは
• 1インチあたりのドット(ピクセル数)
• dpi, ppi
•密度グループとデバイスピクセル比(device pixel ratio)
グループ ldpi mdpi hdpi xhdpiピクセル密度
dpx比120dpi 160pdi 240dpi 320dpi
1 1.5 2
retina
6
表示サイズ(dp) 画素数(px) 主な端末
320 x 480 320 x 480
320 x 480 640 x 960
320 x 533 480 x 800
320 x 569 480 x 854
360 x 640 540 x 960
360 x 640 720 x 1280
400 x 683 600 x 1024
iPhone3G(3GS), HTC Aria
iPhone4(4S), IS03
Galaxy S (Ⅱ), HTC Desire HD, ...
Xperia, Xperia (arc|acro|ray), REGZA Phone (T-01C|IS04), MEDIAS, ...
INFOBAR A01, REGZA Phone T02D, AQUOS Phone, Xperia SX, ...
Galaxy Nexus, REGZA PHone T-01D, Xperia (NX|GX), Xperia acro HD
Galaxy Tab
※dp(density-independent pixels)は160dpiにおける1ドットを1とするサイズ
7
ブラウザのサイズ周り
• 320pxで作ってあげて、360pxにzoomしてあげる
• 画像サイズは640px固定
• 画像がウリのアプリはちがうよ!
<meta name="viewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
var windowInitialize = function() { if ( isAndroid() ) { document.body.style.zoom = getWidth() / 320; } };
8
SESSION2: ソーシャルコマースサイトの企画と実装
http://www.slideshare.net/tetsuyukisuzuki1/uiux-13736004
Slide Not Found
9
*サイト構成
• レスポンシブウェブデザインにはしていない
• スマホ作ってるときにPCのこととか考えたくない
• LocalStorageは検索の予測とかに使っているよ
• ソーシャル連携
• SNSのカウントが意外と重いので表示しないように
• HTML5版よりiframe版のほうが軽いよ
10
ユーザビリティとは
• 特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い
• 有効さ / 効率 / 満足度 / 利用状況
• ヤコブ・ニールセン
• 学習しやすさ / 効率性 / 記憶しやすさ / エラー / 主観的満足度
11
*UI改善事例
1. ショップの画像はでかいほうがよいか、それともファーストビューに購入ボタンを入れたほうがよいか
2. カートのアイテム削除をiPhone風にしたらどうか
3. 404エラーページを良い感じにしたらどうか
4. 登録ページですでに使われている名前を遷移なしで教えてあげたらどうか
13
SESSION3: SCRUM = 爆速 X 品質
http://www.slideshare.net/tsubotax/dena-creativeseminar2
Slide Not Found
15
アジャイルとは
•迅速かつ適応的にソフトウェア開発を行う手法
•⇔ウォーターフォール
•スクラム / XP など
• http://www.t-doi.org/agile/index.html
16