スマートフォンタブレットデザインのこつ

2012/06/03植草 学 @mauekusa

市場状況

7割 スマートフォン

http://mb.softbank.jp/biz/trend_report/114.html

タブレットも右肩上がり

http://mb.softbank.jp/biz/trend_report/114.html

スマートフォン OSシェア

その他17%

Android19%

iOS63%

http://marketshare.hitslink.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpcd=1300

iPhoneAndroidで

8割

スマートフォン多種多様

スマートフォンサイト

Simple情報を絞る

文字は、13文字以内

UIデザイン

Appleガイドライン

200ページ

https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

iPad 1024x768

iPhone320x480

iPhoneHVGA320x480

HD 1280x720iPad XGA 1024x768

ダブルVGA 960x640QHD 960x540

ワイドVGA 800x480

フルワイドVGA++ 960x480

フルワイドVGA 854x480

スマホ・タブレット 解像度

解像度個別に作るか？

Web

WebWeb

Web

Web

Responsive Web Design

codiqa

codiqa demo

http://youtu.be/ZyyClRan3a8

UIテクニック

Simple

ビジュアル メニュー直感的

メニューアイコン化

メニューサムネイル

LV. 30EXP 78/120

フィードバック

件数表示 結果表示

プレビュー表示

一貫性

3～４色に絞る

安全 注意 危険

保存削除

ボタン配色

安否確認ボタンあお

保存削除 保存

削除ボタン配置

OKボタンサイズ

縦横 44px 以上

視線移動左上から

右下へ

戻る 進む戻る

リストは、３～４行程度

入力より選択

UI要素 組合せ

コンポーネントに慣れる

タブレット

タップしやすい画面

View表示

タブレット特徴

ワンコイン（ 100円 ）で簡単に、スマホ・タブレットを活用するサービス

Mobile Perfect SP

まとめ

多くのサービスに触れる

目的ハッキリ

ユーザー視点

Simple

繰り返し改善

たくさんチャレンジ！

Thanks. @mauekusa