Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
スマートフォンタブレットデザインのこつ     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           ...
スマートフォン多種多様
スマートフォンサイト
Simple情報を絞る
文字は、13文字以内
UIデザイン
Apple                                          ガイドライン                                               200                   ...
iPad 1024x768     iPhone    320x480
スマホ・タブレット 解像度                 iPad XGA 1024x768                   HD 1280x720          ダブルVGA     960x640             QHD ...
解像度個別に作るか?
Responsive Web Design       Web             Web Web       Web         Web
codiqa
codiqa demohttp://youtu.be/ZyyClRan3a8
UIテクニック
Simple
ビジュアル メニュー  直感的
メニューアイコン化
メニューサムネイル
フィードバックLV. 30EXP 78/120
件数表示   結果表示
プレビュー表示
一貫性
3∼4色に絞る
安全 注意 危険
ボタン配色保存削除
安否確認 ボタンあお
ボタン配置保存   削除削除   保存
ボタンサイズ     OK縦横   44px 以上
視線移動左上から右下へ
戻る   戻る          進む
リストは、3∼4行程度
入力より選択
コンポーネントに慣れる     UI要素 組合せ
タブレット
タップしやすい画面
タブレット特徴 View表示
Mobile Perfect SP      ワンコイン      ( 100円 )で      簡単に、スマホ・       タブレットを      活用するサービス
まとめ
多くのサービスに 触れる
目的ハッキリ
ユーザー 視点
Simple
繰り返し 改善
たくさんチャレンジ!Thanks. @mauekusa
スマホ&タブレットデザインのこつ
スマホ&タブレットデザインのこつ
スマホ&タブレットデザインのこつ
スマホ&タブレットデザインのこつ
スマホ&タブレットデザインのこつ
Upcoming SlideShare
Loading in …5
×

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

8,191 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

×