WebSig1日学校2013 http://1ds.websig247.jp/2013/ 20131005 個別授業 佐藤 洋介（さとうようすけ）先生 スマホサービスにおけるあたりまえのデザイン

1. スマホサービスにおける
あたりまえのデザイン
CyberAgent
佐藤 洋介 @sugaar

2. 佐藤 洋介（さとうようすけ）
株式会社サイバーエージェント Ameba事業本部
デカ／ブログ／コミュニティ部門 チーフクリエイティブディレクター
スマホブログ「Simplog」や、新感覚コミュニティ「きいてよ！ミルチョ」の立ち上げを行う他、
主にスマートフォン向けのAmebaコミュニティサービスのUIデザインを手がける。
現在はAmebaコミュニティサービスのデザイナーを統括し、
クリエイティブ責任者として各スマホサービスのUIデザインを監修。
2
@sugaar

3. 3
月間2,800万人*以上の方々が利用するインターネットメディアとして、
PC・モバイル・スマートフォン上において、無料で開設可能なブログサービス、
アバターコミュニティ「アメーバピグ」、ゲーム等を提供している。
※出所：ネットレイティングス株式会社

4. 4
「Ameba コミュニティ」
10名程度のスモール開発で、30を越えるサービスを運営
ダカイ
（打開）
× カイゼン
（改善）
＝ ダカイゼン

5. さっそくですが...
今回の授業では
5

6. 6
スマホサービスの
未来について考えます

7. コミュニケーションの
歴史とその未来
7

8. 8
狼煙

9. 9
シンプルな「意思の伝達」

10. 10
手紙

11. 11
一方的に送るものが「手紙」

12. 12
電話

13. 13
双方向によるコミュニケーション
時間による課金を意識

14. 14
eメール

15. 15
物理的なやり取りの問題を解消
電子通信がベースに

16. 機械的なコミュニケーション手段
16

17. 17
絵文字・スタンプ

18. 18
絵文字を使って感情を同調
機械的なコミュニケーションに
暖かみをプラス

19. 19
コミュニケーションの未来

20. 20
コミュニケーションの本質は
「意思の伝達」

21. 21
１ 対 １ １ 対 複数
従来の受け手

22. 22
1 対 不特定多数
受け手の曖昧化

23. 23
曖昧さのコントロール
サービス設計のキモ

24. 24
例えば...
ゆる∼いQ&Aコミュニティ
Tellme
即レス
5分!!
回答率
99%

25. 25
Tellmeの場合
マイページから 質問を投稿
最新のQ&Aに表示される
※出所：http://tell-me.jp

26. 26
Tellmeの場合
質問がある
受け手を曖昧にする
投稿画面
自分の質問にも
答えて欲しい人たち

27. 「受け手の不在」
「受け取る手紙」
「家で使う電話」
曖昧な環境に左右されない
コミュニケーション
27
「留守番電話」
「受信するメール」
「外でも使える携帯電話」

28. デバイスの進化と
その未来
28

29. 29
【主な機能】
通話・カメラ・インターネット・音楽再生・おさいふケータイ・
ワンセグなど
【主な用途】
主に通話やメール、インターネットをするために利用。
メーカーが設計したコンテンツの中で、独自の機能を活用できる。
フィーチャーフォン

30. 30
【主な機能】
通話・カメラ・インターネット・音楽再生・ToDo・各種アプリなど
【主な用途】
通話やメール、インターネットはもちろん、「アプリ」を追加して、
自分なりにカスタマイズ（機能追加）できる。
スマートフォン

31. 31
それぞれの役割
外出先でも
パソコンが使える
※出所：http://www.excite.co.jp/News/it_g/20130909/Mdn_31925.html
外出先でも
電話が使える

32. 32
スマホ社会になって
何が変わって、
何が変わらないのか

33. 33
ネットワークを意識して切る時代
いつでも、どこでも

34. 34
木ゆび
一昔前のユビキタス社会

35. 35
現在のユビキタス社会
必要な情報が、
たった1つのデバイスに集約

36. 36
スマホ社会になって
変わらないもの

37. 37
「使うのは人間」

38. 38
デバイスが
勝手に進化した
デバイスが
人に合わせて進化した
「使うのは人間」

39. 39
デバイスに合わせたUI
人に合わせたUI
「使うのは人間」

40. 40
例えば...
※出所：http://www.idownloadblog.com/2013/06/11/ios-6-vs-ios-7-icons/

41. デザインのあたりまえの
移り変わり
41

42. 42
ガラケー向けのデザイン 1
テキストが主役

43. 43※出所：http://mobiledesignarchive.jp
ジョブセンス うたフルdeまにあ 東京メトロMOBILE

44. 44
ガラケー向けのデザイン 2
テンキーを意識
※ ♯

45. 45※出所：http://mobiledesignarchive.jp
docomo imenu au style SoftBank

46. 46
スマホ向けのデザイン 1
クリックではなくタップ

47. 47※出所：simplog.jp
スマホブログ「Simplog」

48. 48
スマホ向けのデザイン 2
ファーストビュー

49. 49
スマホブログ「Simplog」
※出所：simplog.jp
ファーストビュー ファーストビュー

50. 50
一般的に考えて、狭い画面に
いかに詰め込むか
ユーザー的に考えて、狭い画面に
本当に詰め込むべきか？
スマホサービスのUI

51. 51
スマホ向けのデザイン 3
利用シーンを考える

52. 52
背景とのコントラスト
女性限定の匿名掲示板「GIRLS TALK」 手作り料理コミュニティー「ペコリ」
※出所：http://www.ca-girlstalk.jp/ ※出所：http://pecolly.jp/

53. この先の
デザインのあたりまえ
53

54. 54
フラットデザイン
メトロUI
iOS7

55. シンプルさ
55
使いやすさ

56. 56
スマホブログ「Simplog」
※出所：simplog.jp
通常
レア1
レア２
ナイス数
増加

57. 57
技術の進展から機器に「複雑性」が伴うのは当然であり、
問題なのは「複雑性」ではなく「わかりにくさと、
その結果生まれる矛盾」にある。
つまり、デザインは「やたらと込み入った（complicated）」り「人を戸惑わせ
た（confused）」りしてはならないが、「複雑（complex）」になるのは、あ
る意味当然であるという考え。
※出所：「複雑さと共に暮らす―デザインの挑戦」D・A・ノーマン

58. 58
要素を完結に表現することは前提
必要最小限で、
いかに使いやすくするか

59. 59
「情報を伝達する手段」

60. 60
「使うのは人間」

61. 61
Thank you