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

7,833 views

Published on

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

Published in: Technology

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

  1. 1. スマートフォンタブレットデザインのこつ 2012/06/03 植草 学 @mauekusa
  2. 2. 市場状況
  3. 3. 7割 スマートフォンhttp://mb.softbank.jp/biz/trend_report/114.html
  4. 4. タブレットも右肩上がりhttp://mb.softbank.jp/biz/trend_report/114.html
  5. 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. 6. スマートフォン多種多様
  7. 7. スマートフォンサイト
  8. 8. Simple情報を絞る
  9. 9. 文字は、13文字以内
  10. 10. UIデザイン
  11. 11. Apple ガイドライン 200 ページhttps://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
  12. 12. iPad 1024x768 iPhone 320x480
  13. 13. スマホ・タブレット 解像度 iPad XGA 1024x768 HD 1280x720 ダブルVGA 960x640 QHD 960x540iPhone フルワイドVGA++ HVGA 960x480320x480 フルワイドVGA 854x480 ワイドVGA 800x480
  14. 14. 解像度個別に作るか?
  15. 15. Responsive Web Design Web Web Web Web Web
  16. 16. codiqa
  17. 17. codiqa demohttp://youtu.be/ZyyClRan3a8
  18. 18. UIテクニック
  19. 19. Simple
  20. 20. ビジュアル メニュー 直感的
  21. 21. メニューアイコン化
  22. 22. メニューサムネイル
  23. 23. フィードバックLV. 30EXP 78/120
  24. 24. 件数表示 結果表示
  25. 25. プレビュー表示
  26. 26. 一貫性
  27. 27. 3∼4色に絞る
  28. 28. 安全 注意 危険
  29. 29. ボタン配色保存削除
  30. 30. 安否確認 ボタンあお
  31. 31. ボタン配置保存 削除削除 保存
  32. 32. ボタンサイズ OK縦横 44px 以上
  33. 33. 視線移動左上から右下へ
  34. 34. 戻る 戻る 進む
  35. 35. リストは、3∼4行程度
  36. 36. 入力より選択
  37. 37. コンポーネントに慣れる UI要素 組合せ
  38. 38. タブレット
  39. 39. タップしやすい画面
  40. 40. タブレット特徴 View表示
  41. 41. Mobile Perfect SP ワンコイン ( 100円 )で 簡単に、スマホ・ タブレットを 活用するサービス
  42. 42. まとめ
  43. 43. 多くのサービスに 触れる
  44. 44. 目的ハッキリ
  45. 45. ユーザー 視点
  46. 46. Simple
  47. 47. 繰り返し 改善
  48. 48. たくさんチャレンジ!Thanks. @mauekusa

×