the basic design for smart phone service

スマホサービスにおける

あたりまえのデザイン

CyberAgent佐藤 洋介　@sugaar

佐藤 洋介（さとうようすけ）　株式会社サイバーエージェント Ameba事業本部

デカ／ブログ／コミュニティ部門 チーフクリエイティブディレクター

スマホブログ「Simplog」や、新感覚コミュニティ「きいてよ！ミルチョ」の立ち上げを行う他、

主にスマートフォン向けのAmebaコミュニティサービスのUIデザインを手がける。

現在はAmebaコミュニティサービスのデザイナーを統括し、

クリエイティブ責任者として各スマホサービスのUIデザインを監修。

2

@sugaar

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

１ 対 １ １ 対 複数

従来の受け手

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レア２

ナイス数増加

57

技術の進展から機器に「複雑性」が伴うのは当然であり、

問題なのは「複雑性」ではなく「わかりにくさと、その結果生まれる矛盾」にある。

つまり、デザインは「やたらと込み入った（complicated）」り「人を戸惑わせた（confused）」りしてはならないが、「複雑（complex）」になるのは、ある意味当然であるという考え。

※出所：「複雑さと共に暮らす―デザインの挑戦」D・A・ノーマン

58

要素を完結に表現することは前提

必要最小限で、いかに使いやすくするか

59

「情報を伝達する手段」

60

「使うのは人間」

61

Thank you