スマホサービスにおける
あたりまえのデザイン
CyberAgent
佐藤 洋介 @sugaar
佐藤 洋介(さとうようすけ) 
株式会社サイバーエージェント Ameba事業本部
デカ/ブログ/コミュニティ部門 チーフクリエイティブディレクター
スマホブログ「Simplog」や、新感覚コミュニティ「きいてよ!ミルチョ」の立ち上げを行う他、
...
3
月間2,800万人*以上の方々が利用するインターネットメディアとして、
PC・モバイル・スマートフォン上において、無料で開設可能なブログサービス、
アバターコミュニティ「アメーバピグ」、ゲーム等を提供している。
※出所:ネットレイティングス...
4
「Ameba コミュニティ」
10名程度のスモール開発で、30を越えるサービスを運営
ダカイ
(打開)
× カイゼン
(改善)
= ダカイゼン
さっそくですが...
今回の授業では
5
6
スマホサービスの
未来について考えます
コミュニケーションの
歴史とその未来
7
8
狼煙
9
シンプルな「意思の伝達」
10
手紙
11
一方的に送るものが「手紙」
12
電話
13
双方向によるコミュニケーション
時間による課金を意識
14
eメール
15
物理的なやり取りの問題を解消
電子通信がベースに
機械的なコミュニケーション手段
16
17
絵文字・スタンプ
18
絵文字を使って感情を同調
機械的なコミュニケーションに
暖かみをプラス
19
コミュニケーションの未来
20
コミュニケーションの本質は
「意思の伝達」
21
1 対 1 1 対 複数
従来の受け手
22
1 対 不特定多数
受け手の曖昧化
23
曖昧さのコントロール
サービス設計のキモ
24
例えば...
ゆる∼いQ&Aコミュニティ
Tellme
即レス
5分!!
回答率
99%
25
Tellmeの場合
マイページから 質問を投稿
最新のQ&Aに表示される
※出所:http://tell-me.jp
26
Tellmeの場合
質問がある
受け手を曖昧にする
投稿画面
自分の質問にも
答えて欲しい人たち
「受け手の不在」
「受け取る手紙」
「家で使う電話」
曖昧な環境に左右されない
コミュニケーション
27
「留守番電話」
「受信するメール」
「外でも使える携帯電話」
デバイスの進化と
その未来
28
29
【主な機能】
通話・カメラ・インターネット・音楽再生・おさいふケータイ・
ワンセグなど
【主な用途】
主に通話やメール、インターネットをするために利用。
メーカーが設計したコンテンツの中で、独自の機能を活用できる。
フィーチャーフォン
30
【主な機能】
通話・カメラ・インターネット・音楽再生・ToDo・各種アプリなど
【主な用途】
通話やメール、インターネットはもちろん、「アプリ」を追加して、
自分なりにカスタマイズ(機能追加)できる。
スマートフォン
31
それぞれの役割
外出先でも
パソコンが使える
※出所:http://www.excite.co.jp/News/it_g/20130909/Mdn_31925.html
外出先でも
電話が使える
32
スマホ社会になって
何が変わって、
何が変わらないのか
33
ネットワークを意識して切る時代
いつでも、どこでも
34
木ゆび
一昔前のユビキタス社会
35
現在のユビキタス社会
必要な情報が、
たった1つのデバイスに集約
36
スマホ社会になって
変わらないもの
37
「使うのは人間」
38
デバイスが
勝手に進化した
デバイスが
人に合わせて進化した
「使うのは人間」
39
デバイスに合わせたUI
人に合わせたUI
「使うのは人間」
40
例えば...
※出所:http://www.idownloadblog.com/2013/06/11/ios-6-vs-ios-7-icons/
デザインのあたりまえの
移り変わり
41
42
ガラケー向けのデザイン 1
テキストが主役
43※出所:http://mobiledesignarchive.jp
ジョブセンス うたフルdeまにあ 東京メトロMOBILE
44
ガラケー向けのデザイン 2
テンキーを意識
※  ♯
45※出所:http://mobiledesignarchive.jp
docomo imenu au style SoftBank
46
スマホ向けのデザイン 1
クリックではなくタップ
47※出所:simplog.jp
スマホブログ「Simplog」
48
スマホ向けのデザイン 2
ファーストビュー
49
スマホブログ「Simplog」
※出所:simplog.jp
ファーストビュー ファーストビュー
50
一般的に考えて、狭い画面に
いかに詰め込むか
ユーザー的に考えて、狭い画面に
本当に詰め込むべきか?
スマホサービスのUI
51
スマホ向けのデザイン 3
利用シーンを考える
52
背景とのコントラスト
女性限定の匿名掲示板「GIRLS TALK」 手作り料理コミュニティー「ペコリ」
※出所:http://www.ca-girlstalk.jp/ ※出所:http://pecolly.jp/
この先の
デザインのあたりまえ
53
54
フラットデザイン
メトロUI
iOS7
シンプルさ
55
使いやすさ
56
スマホブログ「Simplog」
※出所:simplog.jp
通常
レア1
レア2
ナイス数
増加
57
技術の進展から機器に「複雑性」が伴うのは当然であり、
問題なのは「複雑性」ではなく「わかりにくさと、
その結果生まれる矛盾」にある。
つまり、デザインは「やたらと込み入った(complicated)」り「人を戸惑わせ
た(confused...
58
要素を完結に表現することは前提
必要最小限で、
いかに使いやすくするか
59
「情報を伝達する手段」
60
「使うのは人間」
61
Thank you
Upcoming SlideShare
Loading in …5
×

20131005 WebSig1日学校2013_個別授業_佐藤 洋介先生

1,723 views

Published on

WebSig1日学校2013
個別授業
佐藤 洋介(さとうようすけ)先生
スマホサービスにおけるあたりまえのデザイン

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,723
On SlideShare
0
From Embeds
0
Number of Embeds
834
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

20131005 WebSig1日学校2013_個別授業_佐藤 洋介先生

  1. 1. スマホサービスにおける あたりまえのデザイン CyberAgent 佐藤 洋介 @sugaar
  2. 2. 佐藤 洋介(さとうようすけ)  株式会社サイバーエージェント Ameba事業本部 デカ/ブログ/コミュニティ部門 チーフクリエイティブディレクター スマホブログ「Simplog」や、新感覚コミュニティ「きいてよ!ミルチョ」の立ち上げを行う他、 主にスマートフォン向けのAmebaコミュニティサービスのUIデザインを手がける。 現在はAmebaコミュニティサービスのデザイナーを統括し、 クリエイティブ責任者として各スマホサービスのUIデザインを監修。 2 @sugaar
  3. 3. 3 月間2,800万人*以上の方々が利用するインターネットメディアとして、 PC・モバイル・スマートフォン上において、無料で開設可能なブログサービス、 アバターコミュニティ「アメーバピグ」、ゲーム等を提供している。 ※出所:ネットレイティングス株式会社
  4. 4. 4 「Ameba コミュニティ」 10名程度のスモール開発で、30を越えるサービスを運営 ダカイ (打開) × カイゼン (改善) = ダカイゼン
  5. 5. さっそくですが... 今回の授業では 5
  6. 6. 6 スマホサービスの 未来について考えます
  7. 7. コミュニケーションの 歴史とその未来 7
  8. 8. 8 狼煙
  9. 9. 9 シンプルな「意思の伝達」
  10. 10. 10 手紙
  11. 11. 11 一方的に送るものが「手紙」
  12. 12. 12 電話
  13. 13. 13 双方向によるコミュニケーション 時間による課金を意識
  14. 14. 14 eメール
  15. 15. 15 物理的なやり取りの問題を解消 電子通信がベースに
  16. 16. 機械的なコミュニケーション手段 16
  17. 17. 17 絵文字・スタンプ
  18. 18. 18 絵文字を使って感情を同調 機械的なコミュニケーションに 暖かみをプラス
  19. 19. 19 コミュニケーションの未来
  20. 20. 20 コミュニケーションの本質は 「意思の伝達」
  21. 21. 21 1 対 1 1 対 複数 従来の受け手
  22. 22. 22 1 対 不特定多数 受け手の曖昧化
  23. 23. 23 曖昧さのコントロール サービス設計のキモ
  24. 24. 24 例えば... ゆる∼いQ&Aコミュニティ Tellme 即レス 5分!! 回答率 99%
  25. 25. 25 Tellmeの場合 マイページから 質問を投稿 最新のQ&Aに表示される ※出所:http://tell-me.jp
  26. 26. 26 Tellmeの場合 質問がある 受け手を曖昧にする 投稿画面 自分の質問にも 答えて欲しい人たち
  27. 27. 「受け手の不在」 「受け取る手紙」 「家で使う電話」 曖昧な環境に左右されない コミュニケーション 27 「留守番電話」 「受信するメール」 「外でも使える携帯電話」
  28. 28. デバイスの進化と その未来 28
  29. 29. 29 【主な機能】 通話・カメラ・インターネット・音楽再生・おさいふケータイ・ ワンセグなど 【主な用途】 主に通話やメール、インターネットをするために利用。 メーカーが設計したコンテンツの中で、独自の機能を活用できる。 フィーチャーフォン
  30. 30. 30 【主な機能】 通話・カメラ・インターネット・音楽再生・ToDo・各種アプリなど 【主な用途】 通話やメール、インターネットはもちろん、「アプリ」を追加して、 自分なりにカスタマイズ(機能追加)できる。 スマートフォン
  31. 31. 31 それぞれの役割 外出先でも パソコンが使える ※出所:http://www.excite.co.jp/News/it_g/20130909/Mdn_31925.html 外出先でも 電話が使える
  32. 32. 32 スマホ社会になって 何が変わって、 何が変わらないのか
  33. 33. 33 ネットワークを意識して切る時代 いつでも、どこでも
  34. 34. 34 木ゆび 一昔前のユビキタス社会
  35. 35. 35 現在のユビキタス社会 必要な情報が、 たった1つのデバイスに集約
  36. 36. 36 スマホ社会になって 変わらないもの
  37. 37. 37 「使うのは人間」
  38. 38. 38 デバイスが 勝手に進化した デバイスが 人に合わせて進化した 「使うのは人間」
  39. 39. 39 デバイスに合わせたUI 人に合わせたUI 「使うのは人間」
  40. 40. 40 例えば... ※出所:http://www.idownloadblog.com/2013/06/11/ios-6-vs-ios-7-icons/
  41. 41. デザインのあたりまえの 移り変わり 41
  42. 42. 42 ガラケー向けのデザイン 1 テキストが主役
  43. 43. 43※出所:http://mobiledesignarchive.jp ジョブセンス うたフルdeまにあ 東京メトロMOBILE
  44. 44. 44 ガラケー向けのデザイン 2 テンキーを意識 ※  ♯
  45. 45. 45※出所:http://mobiledesignarchive.jp docomo imenu au style SoftBank
  46. 46. 46 スマホ向けのデザイン 1 クリックではなくタップ
  47. 47. 47※出所:simplog.jp スマホブログ「Simplog」
  48. 48. 48 スマホ向けのデザイン 2 ファーストビュー
  49. 49. 49 スマホブログ「Simplog」 ※出所:simplog.jp ファーストビュー ファーストビュー
  50. 50. 50 一般的に考えて、狭い画面に いかに詰め込むか ユーザー的に考えて、狭い画面に 本当に詰め込むべきか? スマホサービスのUI
  51. 51. 51 スマホ向けのデザイン 3 利用シーンを考える
  52. 52. 52 背景とのコントラスト 女性限定の匿名掲示板「GIRLS TALK」 手作り料理コミュニティー「ペコリ」 ※出所:http://www.ca-girlstalk.jp/ ※出所:http://pecolly.jp/
  53. 53. この先の デザインのあたりまえ 53
  54. 54. 54 フラットデザイン メトロUI iOS7
  55. 55. シンプルさ 55 使いやすさ
  56. 56. 56 スマホブログ「Simplog」 ※出所:simplog.jp 通常 レア1 レア2 ナイス数 増加
  57. 57. 57 技術の進展から機器に「複雑性」が伴うのは当然であり、 問題なのは「複雑性」ではなく「わかりにくさと、 その結果生まれる矛盾」にある。 つまり、デザインは「やたらと込み入った(complicated)」り「人を戸惑わせ た(confused)」りしてはならないが、「複雑(complex)」になるのは、あ る意味当然であるという考え。 ※出所:「複雑さと共に暮らす―デザインの挑戦」D・A・ノーマン
  58. 58. 58 要素を完結に表現することは前提 必要最小限で、 いかに使いやすくするか
  59. 59. 59 「情報を伝達する手段」
  60. 60. 60 「使うのは人間」
  61. 61. 61 Thank you

×