スマホ・タブレットのサービスを作る際にデザインのこつをまとめました。 ウェブサイト、ウェブサービスを作る際に参考になれば。

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

2. 市場状況

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

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

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

6. スマートフォン
多種多様

7. スマートフォンサイト

11. Simple
情報を絞る

12. 文字は、13文字以内

13. UIデザイン

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

15. iPad 1024x768
iPhone
320x480

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

17. 解像度
個別に
作るか？

18. Responsive Web Design
Web
Web
Web
Web Web

20. codiqa

21. codiqa demo
http://youtu.be/ZyyClRan3a8

22. UIテクニック

23. Simple

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

25. メニュー
アイコン化

26. メニュー
サムネイル

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

28. 件数表示 結果表示

29. プレビュー表示

30. 一貫性

31. 3∼４色に絞る

32. 安全 注意 危険

33. ボタン配色
保存
削除

34. 安否確認
ボタン
あお

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

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

37. 視線移動
左上から
右下へ

38. 戻る 戻る
進む

39. リストは、３∼４行程度

40. 入力より選択

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

42. タブレット

43. タップしやすい画面

44. タブレット特徴
View表示

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

46. まとめ

47. 多くの
サービスに
触れる

48. 目的
ハッキリ

49. ユーザー
視点

50. Simple

51. 繰り返し
改善

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