スマートフォン誕生による
UX,UIの変化と対応

12年8月18日土曜日
自己紹介
宇野 雄

• Zynga Japn
デザインセンター リードデザイナー
UI・UXデザイナー

• Twitter: @saladdays
• 連載:LESSで3倍ラクする
スマートフォンコーディング
http://gihyo.jp...
本日のお題

12年8月18日土曜日
スマートフォン誕生による
UX,UIの変化を

見つめなおす

12年8月18日土曜日
まずは

12年8月18日土曜日
PCとスマートフォンの
UI/UXの違い

12年8月18日土曜日
画面の大きさが違う
12年8月18日土曜日
そうなると

12年8月18日土曜日
1

12年8月18日土曜日

見る順番が違う
PCの場合
• PCサイトは「F」字に
見るというのが定説

• 基本的に左上から右
上、その後下に見てい
く

12年8月18日土曜日
スマホの場合
• 上から下へ
• 視線を左右に振らずに
そのまま読める

12年8月18日土曜日
これによって
何が起こるか
12年8月18日土曜日
メリット

•コンテンツに集中できる
•コンテンツが眼に入る順番を固
定できる

12年8月18日土曜日
デメリット

•情報量が少ない
•他ページへの回遊性が落ちる
•ページが縦に長くなりがち
12年8月18日土曜日
余計な要素を
詰め込みすぎない
極力シンプルに
12年8月18日土曜日
すなわち

12年8月18日土曜日
コンテンツ
ファーストへ
12年8月18日土曜日
Instapaper

12年8月18日土曜日

Readability
コンテンツ優先のデメリット

12年8月18日土曜日
コンテンツ優先のデメリット

• 広告やリコメンドリストなどの扱いが
難しい

12年8月18日土曜日
コンテンツ優先のデメリット

• 広告やリコメンドリストなどの扱いが
難しい

• メインコンテンツとは異質なものでは
あるが、並列して見せないと意味が無
い

12年8月18日土曜日
コンテンツ側の要望とユーザーの
目的の乖離によるUIデザインの
葛藤が生まれやすい

12年8月18日土曜日
対応策?

• ユーザー層とユーザーの目的によって
異なる

• そのコンテンツが見たく来てきたユー
ザーか、目的を持たずに来たユーザー
か判断が必要

12年8月18日土曜日
2

12年8月18日土曜日

サイズの基準が違う
PCの場合
解像度に種類はあるけど、
感覚的に絶対的なサイズで
デザインできた

12年8月18日土曜日
スマホの一般的な解像度

• 320×480

• 480×854

• 640×960

• 540×960

• 460×960

• 720×1280

• 480×800
12年8月18日土曜日
これくらいの数なら…

12年8月18日土曜日
でも、液晶の解像度と
液晶の大きさって
比例しないんですよね

12年8月18日土曜日
スマホの場合ここに
液晶の大きさの概念を加える

12年8月18日土曜日
スマホ液晶の大きさ
• 5.0インチ
• 3.7インチ
• 4.6インチ
• 4インチ
• 4.5インチ
• 4.3インチ
• 4.2インチ
12年8月18日土曜日

• 4.7インチ
• 4.8インチ
• 3.4インチ
• 3.2インチ
• ...
1pxあたりの密度(dpi)が
端末によって大きく違う

12年8月18日土曜日
文字の大きさは?
ボタンの大きさは?
結局いくつが正解?

12年8月18日土曜日
基本的には公式の
ガイドラインを読み込む

• iOS:

https://developer.apple.com/library/ios/#documentation/

UserExperience/Conceptual/MobileHIG...
dpiを意識した
記述を見つける

12年8月18日土曜日
iOSは実質的には
pt = 絶対値

12年8月18日土曜日
Androidの
dip(divice independent

12年8月18日土曜日

pixel)
ldpi/mdpi/hdpi/xhdpi
という4タイプの解像度に分け
絶対的なサイズとしてdipを用いる

12年8月18日土曜日
Metro UI?

12年8月18日土曜日
最小ボタンサイズは
9mm

12年8月18日土曜日
でもそのサイズを
絶対的に記述する方法は
無いっぽい、、

12年8月18日土曜日
日本人は小さい端末が好き

12年8月18日土曜日
現状の絶対的な対応策なし
ひたすら実機検証を重ねる

12年8月18日土曜日
3

ボタンやリストの
デザインが違う

12年8月18日土曜日
12年8月18日土曜日
液晶のサイズとタッチ操作に
よって
大きくデザインも変化した

12年8月18日土曜日
Android

12年8月18日土曜日
iOS

12年8月18日土曜日
Metro UI

12年8月18日土曜日
わかりにくい

12年8月18日土曜日
迷ったら
使っている端末のOS
準拠のデザインが無難
12年8月18日土曜日
やっぱりまずは
ガイドラインを読み込む

• iOS:

https://developer.apple.com/library/ios/#documentation/

UserExperience/Conceptual/MobileHIG/...
PCファースト
モバイルファースト

12年8月18日土曜日
一昔前
• PCサイトを作成
• モバイル版は機能限定
• 投稿専用
• 閲覧専用
12年8月18日土曜日
最近
• モバイルアプリ/サイトを先に作成
• PC版は後から作る(機能限定の場合も
ある)

• モバイルでしかできないこと(カメラ
やGPS)なども多く、PCの延長線上
にあるものではない場合も多い
12年8月18日土曜日
これで
何が変わったか

12年8月18日土曜日
PCを普段使わない人が
さわるサービスができた

12年8月18日土曜日
つまり
PCのセオリーは
通じない
12年8月18日土曜日
モバイルの特性を
活かしたデザインを
心がけましょう
12年8月18日土曜日
アプリとWebの

UIの差を考える

12年8月18日土曜日
ネイティブのアプリと
Webサイトのデザインは
一緒でいいのか?

12年8月18日土曜日
それぞれが
どんな目的で存在するか
考える

12年8月18日土曜日
Facebook

アプリ
12年8月18日土曜日

Web
ほぼ一緒

12年8月18日土曜日
外部から飛んでくる
ことがあまり無い

12年8月18日土曜日
違うデザインの
メリット

12年8月18日土曜日
COOKPAD

12年8月18日土曜日
レシピのページは似てる

12年8月18日土曜日
考えてみる

12年8月18日土曜日
アプリ
• アプリを使う人基本的にみんなクック
パッドユーザー

• 「今日はこんなの作りたい」という、
ある程度目的を持ったユーザー

• アプリトップから料理を探す
12年8月18日土曜日
Web
• FacebookやTwitterなどからレシピ
ページに直接飛んでくる場合が多い?

• 「この料理おいしそう」と料理に興味
を持ったユーザー

• 特定の目的を持っていないので、検索
やリコメンドなどの誘導が多い
12年8月18日...
常にどんなユーザーが
どこから来るのかを
考えるのが大事
12年8月18日土曜日
スマートフォンアプリの

UIのセオリーとその進化

12年8月18日土曜日
12年8月18日土曜日
12年8月18日土曜日
みんなお手本にした

12年8月18日土曜日
でも、
もっといいUI/UXを!

12年8月18日土曜日
どんなセオリーが
生み出されたのか
探してみました
12年8月18日土曜日
UIの制限が無く自由すぎ
セオリーを考えにくい
12年8月18日土曜日
ガイドラインの厳しすぎ
セオリーしか無い
12年8月18日土曜日
適度にガイドラインがあって
でも更に自由にみんな作ってる
12年8月18日土曜日
iOSアプリの
UIの進化を考える

12年8月18日土曜日
Tweetie 2

12年8月18日土曜日
Gmail

12年8月18日土曜日
Evernote

12年8月18日土曜日
Pinterest

12年8月18日土曜日
Facebook

12年8月18日土曜日
優れたUIの踏襲のススメ
と

間違ったオマージュ

12年8月18日土曜日
パクリは
悪いことじゃないです

12年8月18日土曜日
本当に優れてると
思ったのなら
真似ることを考えてみる

12年8月18日土曜日
ユーザー視点を持つとは
そういうこと

12年8月18日土曜日
それがいずれ
「セオリー」と呼ばれる

12年8月18日土曜日
でも

12年8月18日土曜日
そのまま見た目を
真似てもダメです
12年8月18日土曜日
そのUIの意味を
きちんと考える
12年8月18日土曜日
Pinterest

12年8月18日土曜日
Tweetie 2

12年8月18日土曜日
Clear

12年8月18日土曜日
Path

12年8月18日土曜日
新しいUI/UXは
常に生まれ続けてます

12年8月18日土曜日
ただ、一人よがりな
UI/UXはかっこ悪い

12年8月18日土曜日
ターゲットを見定めて
どのUI/UXが適切なのか
常に考えながら作ること

12年8月18日土曜日
使って幸せになる
UI/UXを作ってください

12年8月18日土曜日
ありがとうございました

12年8月18日土曜日
Upcoming SlideShare
Loading in …5
×

スマートフォン誕生によるUX,UIの変化と対応

4,091 views

Published on

・スマートフォンとパソコンのUX/UIの違い
・スマートフォンアプリUIのセオリーとその変化
・優れたUIの踏襲のススメと間違ったオマージュ

こちらのセミナーで公開したスライドとなります。
http://swapskills.info/doubbble/07.html

Published in: Design
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total views
4,091
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
0
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

スマートフォン誕生によるUX,UIの変化と対応

  1. 1. スマートフォン誕生による UX,UIの変化と対応 12年8月18日土曜日
  2. 2. 自己紹介 宇野 雄 • Zynga Japn デザインセンター リードデザイナー UI・UXデザイナー • Twitter: @saladdays • 連載:LESSで3倍ラクする スマートフォンコーディング http://gihyo.jp/design/serial/01/less 12年8月18日土曜日
  3. 3. 本日のお題 12年8月18日土曜日
  4. 4. スマートフォン誕生による UX,UIの変化を 見つめなおす 12年8月18日土曜日
  5. 5. まずは 12年8月18日土曜日
  6. 6. PCとスマートフォンの UI/UXの違い 12年8月18日土曜日
  7. 7. 画面の大きさが違う 12年8月18日土曜日
  8. 8. そうなると 12年8月18日土曜日
  9. 9. 1 12年8月18日土曜日 見る順番が違う
  10. 10. PCの場合 • PCサイトは「F」字に 見るというのが定説 • 基本的に左上から右 上、その後下に見てい く 12年8月18日土曜日
  11. 11. スマホの場合 • 上から下へ • 視線を左右に振らずに そのまま読める 12年8月18日土曜日
  12. 12. これによって 何が起こるか 12年8月18日土曜日
  13. 13. メリット •コンテンツに集中できる •コンテンツが眼に入る順番を固 定できる 12年8月18日土曜日
  14. 14. デメリット •情報量が少ない •他ページへの回遊性が落ちる •ページが縦に長くなりがち 12年8月18日土曜日
  15. 15. 余計な要素を 詰め込みすぎない 極力シンプルに 12年8月18日土曜日
  16. 16. すなわち 12年8月18日土曜日
  17. 17. コンテンツ ファーストへ 12年8月18日土曜日
  18. 18. Instapaper 12年8月18日土曜日 Readability
  19. 19. コンテンツ優先のデメリット 12年8月18日土曜日
  20. 20. コンテンツ優先のデメリット • 広告やリコメンドリストなどの扱いが 難しい 12年8月18日土曜日
  21. 21. コンテンツ優先のデメリット • 広告やリコメンドリストなどの扱いが 難しい • メインコンテンツとは異質なものでは あるが、並列して見せないと意味が無 い 12年8月18日土曜日
  22. 22. コンテンツ側の要望とユーザーの 目的の乖離によるUIデザインの 葛藤が生まれやすい 12年8月18日土曜日
  23. 23. 対応策? • ユーザー層とユーザーの目的によって 異なる • そのコンテンツが見たく来てきたユー ザーか、目的を持たずに来たユーザー か判断が必要 12年8月18日土曜日
  24. 24. 2 12年8月18日土曜日 サイズの基準が違う
  25. 25. PCの場合 解像度に種類はあるけど、 感覚的に絶対的なサイズで デザインできた 12年8月18日土曜日
  26. 26. スマホの一般的な解像度 • 320×480 • 480×854 • 640×960 • 540×960 • 460×960 • 720×1280 • 480×800 12年8月18日土曜日
  27. 27. これくらいの数なら… 12年8月18日土曜日
  28. 28. でも、液晶の解像度と 液晶の大きさって 比例しないんですよね 12年8月18日土曜日
  29. 29. スマホの場合ここに 液晶の大きさの概念を加える 12年8月18日土曜日
  30. 30. スマホ液晶の大きさ • 5.0インチ • 3.7インチ • 4.6インチ • 4インチ • 4.5インチ • 4.3インチ • 4.2インチ 12年8月18日土曜日 • 4.7インチ • 4.8インチ • 3.4インチ • 3.2インチ • 3.8インチ • 3.0インチ • etc...
  31. 31. 1pxあたりの密度(dpi)が 端末によって大きく違う 12年8月18日土曜日
  32. 32. 文字の大きさは? ボタンの大きさは? 結局いくつが正解? 12年8月18日土曜日
  33. 33. 基本的には公式の ガイドラインを読み込む • iOS: https://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html • Android: http://developer.android.com/design/index.html • Metro UI: http://msdn.microsoft.com/ja-jp/library/windows/ apps/hh779072.aspx 12年8月18日土曜日
  34. 34. dpiを意識した 記述を見つける 12年8月18日土曜日
  35. 35. iOSは実質的には pt = 絶対値 12年8月18日土曜日
  36. 36. Androidの dip(divice independent 12年8月18日土曜日 pixel)
  37. 37. ldpi/mdpi/hdpi/xhdpi という4タイプの解像度に分け 絶対的なサイズとしてdipを用いる 12年8月18日土曜日
  38. 38. Metro UI? 12年8月18日土曜日
  39. 39. 最小ボタンサイズは 9mm 12年8月18日土曜日
  40. 40. でもそのサイズを 絶対的に記述する方法は 無いっぽい、、 12年8月18日土曜日
  41. 41. 日本人は小さい端末が好き 12年8月18日土曜日
  42. 42. 現状の絶対的な対応策なし ひたすら実機検証を重ねる 12年8月18日土曜日
  43. 43. 3 ボタンやリストの デザインが違う 12年8月18日土曜日
  44. 44. 12年8月18日土曜日
  45. 45. 液晶のサイズとタッチ操作に よって 大きくデザインも変化した 12年8月18日土曜日
  46. 46. Android 12年8月18日土曜日
  47. 47. iOS 12年8月18日土曜日
  48. 48. Metro UI 12年8月18日土曜日
  49. 49. わかりにくい 12年8月18日土曜日
  50. 50. 迷ったら 使っている端末のOS 準拠のデザインが無難 12年8月18日土曜日
  51. 51. やっぱりまずは ガイドラインを読み込む • iOS: https://developer.apple.com/library/ios/#documentation/ UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html • Android: http://developer.android.com/design/index.html • Metro UI: http://msdn.microsoft.com/ja-jp/library/windows/apps/ hh779072.aspx 12年8月18日土曜日
  52. 52. PCファースト モバイルファースト 12年8月18日土曜日
  53. 53. 一昔前 • PCサイトを作成 • モバイル版は機能限定 • 投稿専用 • 閲覧専用 12年8月18日土曜日
  54. 54. 最近 • モバイルアプリ/サイトを先に作成 • PC版は後から作る(機能限定の場合も ある) • モバイルでしかできないこと(カメラ やGPS)なども多く、PCの延長線上 にあるものではない場合も多い 12年8月18日土曜日
  55. 55. これで 何が変わったか 12年8月18日土曜日
  56. 56. PCを普段使わない人が さわるサービスができた 12年8月18日土曜日
  57. 57. つまり PCのセオリーは 通じない 12年8月18日土曜日
  58. 58. モバイルの特性を 活かしたデザインを 心がけましょう 12年8月18日土曜日
  59. 59. アプリとWebの UIの差を考える 12年8月18日土曜日
  60. 60. ネイティブのアプリと Webサイトのデザインは 一緒でいいのか? 12年8月18日土曜日
  61. 61. それぞれが どんな目的で存在するか 考える 12年8月18日土曜日
  62. 62. Facebook アプリ 12年8月18日土曜日 Web
  63. 63. ほぼ一緒 12年8月18日土曜日
  64. 64. 外部から飛んでくる ことがあまり無い 12年8月18日土曜日
  65. 65. 違うデザインの メリット 12年8月18日土曜日
  66. 66. COOKPAD 12年8月18日土曜日
  67. 67. レシピのページは似てる 12年8月18日土曜日
  68. 68. 考えてみる 12年8月18日土曜日
  69. 69. アプリ • アプリを使う人基本的にみんなクック パッドユーザー • 「今日はこんなの作りたい」という、 ある程度目的を持ったユーザー • アプリトップから料理を探す 12年8月18日土曜日
  70. 70. Web • FacebookやTwitterなどからレシピ ページに直接飛んでくる場合が多い? • 「この料理おいしそう」と料理に興味 を持ったユーザー • 特定の目的を持っていないので、検索 やリコメンドなどの誘導が多い 12年8月18日土曜日
  71. 71. 常にどんなユーザーが どこから来るのかを 考えるのが大事 12年8月18日土曜日
  72. 72. スマートフォンアプリの UIのセオリーとその進化 12年8月18日土曜日
  73. 73. 12年8月18日土曜日
  74. 74. 12年8月18日土曜日
  75. 75. みんなお手本にした 12年8月18日土曜日
  76. 76. でも、 もっといいUI/UXを! 12年8月18日土曜日
  77. 77. どんなセオリーが 生み出されたのか 探してみました 12年8月18日土曜日
  78. 78. UIの制限が無く自由すぎ セオリーを考えにくい 12年8月18日土曜日
  79. 79. ガイドラインの厳しすぎ セオリーしか無い 12年8月18日土曜日
  80. 80. 適度にガイドラインがあって でも更に自由にみんな作ってる 12年8月18日土曜日
  81. 81. iOSアプリの UIの進化を考える 12年8月18日土曜日
  82. 82. Tweetie 2 12年8月18日土曜日
  83. 83. Gmail 12年8月18日土曜日
  84. 84. Evernote 12年8月18日土曜日
  85. 85. Pinterest 12年8月18日土曜日
  86. 86. Facebook 12年8月18日土曜日
  87. 87. 優れたUIの踏襲のススメ と 間違ったオマージュ 12年8月18日土曜日
  88. 88. パクリは 悪いことじゃないです 12年8月18日土曜日
  89. 89. 本当に優れてると 思ったのなら 真似ることを考えてみる 12年8月18日土曜日
  90. 90. ユーザー視点を持つとは そういうこと 12年8月18日土曜日
  91. 91. それがいずれ 「セオリー」と呼ばれる 12年8月18日土曜日
  92. 92. でも 12年8月18日土曜日
  93. 93. そのまま見た目を 真似てもダメです 12年8月18日土曜日
  94. 94. そのUIの意味を きちんと考える 12年8月18日土曜日
  95. 95. Pinterest 12年8月18日土曜日
  96. 96. Tweetie 2 12年8月18日土曜日
  97. 97. Clear 12年8月18日土曜日
  98. 98. Path 12年8月18日土曜日
  99. 99. 新しいUI/UXは 常に生まれ続けてます 12年8月18日土曜日
  100. 100. ただ、一人よがりな UI/UXはかっこ悪い 12年8月18日土曜日
  101. 101. ターゲットを見定めて どのUI/UXが適切なのか 常に考えながら作ること 12年8月18日土曜日
  102. 102. 使って幸せになる UI/UXを作ってください 12年8月18日土曜日
  103. 103. ありがとうございました 12年8月18日土曜日

×