DeNA Creative Seminar #2 に行ってきた話を社内でしたときの資料

1. DENA CREATIVE SEMINAR
VOL. 2
の話と、それに関する雑多な話
2012/07/26
silvers
1

2. DENA CREATIVE SEMINAR VOL.2
• 話題のヒカリエ
• 雨に濡れない！
• フリーランチうらやましい
• 懇親会はフリーランチ作っているとこが作った料理だった
• お酒がクーラーボックスに！
2

3. SESSION1:
ブラウザレンダリングについて
http://dl.dropbox.com/u/2855207/uiux_20120723/index.html
3

4. WEB VIEWとは
• お手軽にHTMLを描画するために提供されている標準
Viewコンポーネント
• 標準ブラウザと（だいたい）同じことがネイティブで
できる
• いろいろ設定ができる
4

5. ブラウザのことをもっと
詳しく知りたい場合は
• Browserscope
• http://www.browserscope.org/
• ブラウザの比較サイト
• 楽しいので一度見てみましょう
5

6. 解像度とかの話
• ピクセル密度とは
• 1インチあたりのドット（ピクセル数）
• dpi, ppi
• 密度グループとデバイスピクセル比(device pixel ratio)
グループ ldpi mdpi hdpi xhdpi retina
ピクセル密度 120dpi 160pdi 240dpi 320dpi
dpx比 1 1.5 2
6

7. 表示サイズ(dp) 画素数(px) 主な端末
320 x 480 320 x 480 iPhone3G(3GS), HTC Aria
320 x 480 640 x 960 iPhone4(4S), IS03
320 x 533 480 x 800 Galaxy S (Ⅱ), HTC Desire HD, ...
Xperia, Xperia (arc|acro|ray),
320 x 569 480 x 854 REGZA Phone (T-01C|IS04), MEDIAS, ...
INFOBAR A01, REGZA Phone T02D,
360 x 640 540 x 960 AQUOS Phone, Xperia SX, ...
Galaxy Nexus, REGZA PHone T-01D,
360 x 640 720 x 1280 Xperia (NX|GX), Xperia acro HD
400 x 683 600 x 1024 Galaxy Tab
※dp(density-independent pixels)は160dpiにおける1ドットを1とするサイズ
7

8. ブラウザのサイズ周り
• 320pxで作ってあげて、360pxにzoomしてあげる
<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;
}
};
• 画像サイズは640px固定
• 画像がウリのアプリはちがうよ！
8

9. SESSION2:
ソーシャルコマースサイトの企画と実装
Slide Not Found
http://www.slideshare.net/tetsuyukisuzuki1/uiux-13736004
9

10. *サイト構成
• レスポンシブウェブデザインにはしていない
• スマホ作ってるときにPCのこととか考えたくない
• LocalStorageは検索の予測とかに使っているよ
• ソーシャル連携
• SNSのカウントが意外と重いので表示しないように
• HTML5版よりiframe版のほうが軽いよ
10

11. ユーザビリティとは
• 特定の利用状況において、特定のユーザによって、ある製品
が、指定された目標を達成するために用いられる際の、有効
さ、効率、ユーザの満足度の度合い
• 有効さ / 効率 / 満足度 / 利用状況
• ヤコブ・ニールセン
• 学習しやすさ / 効率性 / 記憶しやすさ / エラー / 主観的満足度
11

12. ミニマルデザインとは
• シンプルで洗練されたデザインのこと
• 無駄な要素を排除して伝えたいことを簡潔に伝える
• ex. Google, Apple
• Less is more
12

13. *UI改善事例
1. ショップの画像はでかいほうがよいか、それともファー
ストビューに購入ボタンを入れたほうがよいか
2. カートのアイテム削除をiPhone風にしたらどうか
3. 404エラーページを良い感じにしたらどうか
4. 登録ページですでに使われている名前を遷移なしで教え
てあげたらどうか
13

14. A/Bテストとは
• 異なる2つ以上のページ（画像）を作って、どちらがコ
ンバージョンが良いかを調べるテスト
• google analytics 便利！
• 有意差があるかに注意しよう
14

15. SESSION3:
SCRUM = 爆速 X 品質
Slide Not Found
http://www.slideshare.net/tsubotax/dena-creativeseminar2
15

16. アジャイルとは
• 迅速かつ適応的にソフトウェア開発を行う手法
• ウォーターフォール
• スクラム / XP など
• http://www.t-doi.org/agile/index.html
16

17. 注意
• この資料は、DeNA Creative Seminar Vol.2に行ってきた
よという話を社内にFBしたときに使用したものです
• ページの見出しに＊がついているもの以外はぼくが適
当に書いた内容なので、セミナーとは無関係の場合が
あります
17