スマホ&タブレットデザインのこつ

スマートフォンタブレットデザインのこつ 2012/06/03 植草学 @mauekusa

市場状況

7割スマートフォンhttp://mb.softbank.jp/biz/trend_report/114.html

タブレットも右肩上がりhttp://mb.softbank.jp/biz/trend_report/114.html

スマートフォン OSシェア iPhone その他 17% Androidで Android 19% iOS 8割 63%http://marketshare.hitslink.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpcd=1300

スマートフォン多種多様

スマートフォンサイト

Simple情報を絞る

文字は、13文字以内

UIデザイン

Apple ガイドライン 200 ページhttps://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

iPad 1024x768 iPhone 320x480

スマホ・タブレット解像度 iPad XGA 1024x768 HD 1280x720 ダブルVGA 960x640 QHD 960x540iPhone フルワイドVGA++ HVGA 960x480320x480 フルワイドVGA 854x480 ワイドVGA 800x480

解像度個別に作るか？

Responsive Web Design Web Web Web Web Web

codiqa

codiqa demohttp://youtu.be/ZyyClRan3a8

UIテクニック

Simple

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

メニューアイコン化

メニューサムネイル

フィードバックLV. 30EXP 78/120

件数表示結果表示

プレビュー表示

一貫性

3∼４色に絞る

安全注意危険

ボタン配色保存削除

安否確認ボタンあお

ボタン配置保存削除削除保存

ボタンサイズ OK縦横 44px 以上

視線移動左上から右下へ

戻る戻る進む

リストは、３∼４行程度

入力より選択

コンポーネントに慣れる UI要素組合せ

タブレット

タップしやすい画面

タブレット特徴 View表示

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

まとめ

多くのサービスに触れる

目的ハッキリ

ユーザー視点

Simple

繰り返し改善

たくさんチャレンジ！Thanks. @mauekusa

スマホ&タブレットデザインのこつ

by Manabu Uekusa on Jun 03, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 953

Statistics

スマホ&タブレットデザインのこつ Presentation Transcript

http://blog.bot.vc	952
http://webcache.googleusercontent.com	1