DENA CREATIVE SEMINARVOL. 2

の話と、それに関する雑多な話

2012/07/26silvers

1

DENA CREATIVE SEMINAR VOL.2

•話題のヒカリエ

•雨に濡れない！

•フリーランチうらやましい

•懇親会はフリーランチ作っているとこが作った料理だった

•お酒がクーラーボックスに！

2

SESSION1: ブラウザレンダリングについて

http://dl.dropbox.com/u/2855207/uiux_20120723/index.html

3

WEB VIEWとは

•お手軽にHTMLを描画するために提供されている標準Viewコンポーネント

•標準ブラウザと（だいたい）同じことがネイティブでできる

•いろいろ設定ができる

4

ブラウザのことをもっと詳しく知りたい場合は

• 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

ミニマルデザインとは

•シンプルで洗練されたデザインのこと

•無駄な要素を排除して伝えたいことを簡潔に伝える

• ex. Google, Apple

• Less is more

12

*UI改善事例

1. ショップの画像はでかいほうがよいか、それともファーストビューに購入ボタンを入れたほうがよいか

2. カートのアイテム削除をiPhone風にしたらどうか

3. 404エラーページを良い感じにしたらどうか

4. 登録ページですでに使われている名前を遷移なしで教えてあげたらどうか

13

A/Bテストとは

•異なる2つ以上のページ（画像）を作って、どちらがコンバージョンが良いかを調べるテスト

• google analytics 便利！

•有意差があるかに注意しよう

14

SESSION3: SCRUM = 爆速 X 品質

http://www.slideshare.net/tsubotax/dena-creativeseminar2

Slide Not Found

15

アジャイルとは

•迅速かつ適応的にソフトウェア開発を行う手法

•⇔ウォーターフォール

•スクラム / XP など

• http://www.t-doi.org/agile/index.html

16

注意

•この資料は、DeNA Creative Seminar Vol.2に行ってきたよという話を社内にFBしたときに使用したものです

•ページの見出しに＊がついているもの以外はぼくが適当に書いた内容なので、セミナーとは無関係の場合があります

17