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.
開発者こそ知っておいて欲しい
モバイルコンテンツデザイン

箱と中身の整えかた
バイドゥ株式会社 プロダクト事業部
矢野りん
Happy Lunar New Year!
春节快乐!
Baidu
• 米国NASDAQへ上場しているBaidu,Inc(本社:中
国北京市、代表者:Robin Li)の日本法人
• 2014年にはUBERに出資するなど現在は location-
based service事業の可能性を熱く模索中
矢野りん
• プロダクト事業部マネージャー
• モバイル向けIME「Simeji」の開発責任者
• Simejiとは
• Android向け日本語入力アプリ(現在累計
1,4001,100万ダウンロード*目前)
• 2014年9月にはiPhon...
Simeji for Android
Simeji for iOS
Agenda
• 箱の話
- ターゲットユーザーの定義
- プロトタイピング
- デザインレビュー
• 中身の話
- コンテンツの「量」が決めるUIの姿形
- モバイルに顕著な中身の「特徴」
• まとめ
箱の話
モバイルコンテンツのデザインプロセス
1.ターゲットユーザーの定義
2.プロトタイピング
3.デザインレビュー
ターゲットユーザーの定義
• 人口統計上の特性

Demographic information
- 年齢、性別、所得、職業、学歴
• 心理学的な特性

Psychographic information
- ライフスタイル、好み、価値
ターゲットユーザーの定義
• チーム内で統一した対象者像を持つことがだいじ
• デザインの目的をブラさないために有効
• サービスやUIのデザインについて議論する際

ドキュメントに書き添える程度に使うと良い

あんまり細かく設定すると結局ブレ...
プロトタイピング
• アプリの操作手続きを理解するために作る、
仮作りの画面の集まり
• 基本機能をまずプロトタイプして、次に拡
張機能を付け足すなど、段階的に作ること
が多い
• 既存のアプリの場合、新機能のぶんだけ

追加で作ったりする
• 開発に迷惑をかけないため

開発者様を動かすのは

問題を洗い出してからだ!
• デザイン上の問題をみつけるため

例えば…効率の良い操作手順になっている
かどうかを確認するとか
プロトタイピングの効能
便利ツール:Keynote便利ですよね
•紙芝居が作れれば十分。パワポでもいいけ
どUIプロトタイプ用キットが手に入るから
矢野はKeynoteが好き
•Keynoteを使い倒すために便利なテーマ集

http://keynotopia.com...
プロトタイピングのコツ
•グラフィックは(仮)でよいが言葉づかい
は(仮)にしない
世界感を作る要素として言葉って大きくないですか?

「OK」と「わかった」意味はほぼ同じだけど印象が
違う、とか。言葉重要です
•あとは複数人の視点を入れて微調整
おまけ:プロトタイプ用ではないが、

かんたんなUIレイアウトツールもある
プロトタイプ用ではないが、レイアウトしながら

デザインガイドラインを自動的に作ってくれるサービスも
おまけのUIレイアウトリソースまとめ
•Sketch 3(簡単なUIレイアウトツール)

http://bohemiancoding.com/sketch/
•Sketch用のテンプレポータル

http://www.sketchappsour...
デザインレビュー
• デザインの効果をはかって、

アプリをよりよくするために実
施する会議のこと
2種類の指摘が想定される
A.客観的な事実(ユーザー行為の集計デー
タやユーザーからの批評)に基づいた
改善要求
B.レビューワーの趣向、主観、宗派に基
づく変更命令
※レビューでは、主にAを中心に議論
するのが理想
客観的な事実に基づいて議論することの利点
• レビューワーの課題設定能力のばら
つきに振り回されにくい
• デザイナー、開発者、マーケなど異
なる職域の人間が同じ目標を達成し
ようとしやすい
レビューのプロセス
1.デザインを最適化することで達成が見込め
る目標を設定or確認
2.目標が達成できていない部分について

レビュー
3.目標を再確認 or 再設定。うまくいってい
る部分についてはケーススタディとして情報
共有
4.TOD...
矢野が考える建設的なレビューのコツ
•ここを赤にしよう。とか、レイアウトを変えよう。
といった「デザインそのもの」に対する変更提案は
その場でしないほうがいいです。会議に時間がかか
るだけで良い結果になりにくいです
•具体的なアウトプットの 出...
B(主観に基づく指摘)ダメなの?
•ダメじゃないけれど非効率
•目的とズレる
•けんかになりやすい
むずかしいこと
• 経験の浅いデザイナーだと、ネガティブな指摘に対
して感情的になりがち
• 開発経験者がレビューアの場合、開発コストを下げ
ることばかり気にしがち
• PMが権限を振りかざして主観的な意見を

言いがち
- おたがいそういうも...
Simejiの場合
• デザインの評価は
- ユーザーの意見
- 個別の画面に対するユーザー行為の統計
- ユーザーからのレーティング
• を目安にしています。参考までに
中身の話
コンテンツが決める

UIの姿形
コンテンツがインターフェースです
(Windows Design Guidelineより)
一般的なデザインの原則
新しい時代のタッチ アプリケーションには、装飾を排除した、
見せかけや無駄のないデザインが適しています。Windows
Phone では、コンテンツがインターフェイスです。ユーザーは、
画面に表示される文字、オブジェクト...
モバイルに顕著な

中身の「特徴」
モバイルに顕著な中身の特徴
•ひと息で読める文字量を意識

(100-140文字)
•読みにくい漢字はひらがなにする

(例:漢字は平仮名にする→ひらがな
にする)
•字より図
•サービスのユースケースを常に意識
各OSのデザインテンプレを参考にすると楽
•iOS

http://ivomynttinen.com/blog/the-ios-7-design-
cheat-sheet/

※公式テンプレ無し
•Android

https://develo...
矢野の意見(まとめ)
•モバイルコンテンツのデザイン作業は

プロセスの最適化が8割
•目的の再設定と効果(ユーザーの声)

の確認の繰り返しで改良
•なにはともあれユーザーの声重視で
名刺を切らしましたので…
•Facebook

https://www.facebook.com/rin.yano
•Google+

https://plus.google.com/+rinyano
•e-mail

rinyano@gmai...
Upcoming SlideShare
Loading in …5
×

開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた

8,447 views

Published on

Developer's Summit 2015 Feb 20th セッション20-D-3の講演資料です。

Published in: Design

開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた

  1. 1. 開発者こそ知っておいて欲しい モバイルコンテンツデザイン
 箱と中身の整えかた バイドゥ株式会社 プロダクト事業部 矢野りん
  2. 2. Happy Lunar New Year! 春节快乐!
  3. 3. Baidu • 米国NASDAQへ上場しているBaidu,Inc(本社:中 国北京市、代表者:Robin Li)の日本法人 • 2014年にはUBERに出資するなど現在は location- based service事業の可能性を熱く模索中
  4. 4. 矢野りん • プロダクト事業部マネージャー • モバイル向けIME「Simeji」の開発責任者 • Simejiとは • Android向け日本語入力アプリ(現在累計 1,4001,100万ダウンロード*目前) • 2014年9月にはiPhone/iPod touch版を提供開始し、 77日間で200万ダウンロードを達成 *1,400万はiOSと合算した数字でした!すみません
  5. 5. Simeji for Android
  6. 6. Simeji for iOS
  7. 7. Agenda • 箱の話 - ターゲットユーザーの定義 - プロトタイピング - デザインレビュー • 中身の話 - コンテンツの「量」が決めるUIの姿形 - モバイルに顕著な中身の「特徴」 • まとめ
  8. 8. 箱の話
  9. 9. モバイルコンテンツのデザインプロセス 1.ターゲットユーザーの定義 2.プロトタイピング 3.デザインレビュー
  10. 10. ターゲットユーザーの定義 • 人口統計上の特性
 Demographic information - 年齢、性別、所得、職業、学歴 • 心理学的な特性
 Psychographic information - ライフスタイル、好み、価値
  11. 11. ターゲットユーザーの定義 • チーム内で統一した対象者像を持つことがだいじ • デザインの目的をブラさないために有効 • サービスやUIのデザインについて議論する際
 ドキュメントに書き添える程度に使うと良い
 あんまり細かく設定すると結局ブレる • 弊社は半期ごとくらいに見直してます
  12. 12. プロトタイピング • アプリの操作手続きを理解するために作る、 仮作りの画面の集まり • 基本機能をまずプロトタイプして、次に拡 張機能を付け足すなど、段階的に作ること が多い • 既存のアプリの場合、新機能のぶんだけ
 追加で作ったりする
  13. 13. • 開発に迷惑をかけないため
 開発者様を動かすのは
 問題を洗い出してからだ! • デザイン上の問題をみつけるため
 例えば…効率の良い操作手順になっている かどうかを確認するとか プロトタイピングの効能
  14. 14. 便利ツール:Keynote便利ですよね •紙芝居が作れれば十分。パワポでもいいけ どUIプロトタイプ用キットが手に入るから 矢野はKeynoteが好き •Keynoteを使い倒すために便利なテーマ集
 http://keynotopia.com/themes •その他のUIテンプレキットまとめ記事
 http://speckyboy.com/2014/06/26/ web-mobile-gui-kits-wireframe- templates/
  15. 15. プロトタイピングのコツ •グラフィックは(仮)でよいが言葉づかい は(仮)にしない 世界感を作る要素として言葉って大きくないですか?
 「OK」と「わかった」意味はほぼ同じだけど印象が 違う、とか。言葉重要です •あとは複数人の視点を入れて微調整
  16. 16. おまけ:プロトタイプ用ではないが、
 かんたんなUIレイアウトツールもある
  17. 17. プロトタイプ用ではないが、レイアウトしながら
 デザインガイドラインを自動的に作ってくれるサービスも
  18. 18. おまけのUIレイアウトリソースまとめ •Sketch 3(簡単なUIレイアウトツール)
 http://bohemiancoding.com/sketch/ •Sketch用のテンプレポータル
 http://www.sketchappsources.com/ •SketchのMaterial Designリソースはこれ
 http://www.sketchappsources.com/resource/ download-852.html •Zeplin
 https://zeplin.io/
 

  19. 19. デザインレビュー • デザインの効果をはかって、
 アプリをよりよくするために実 施する会議のこと
  20. 20. 2種類の指摘が想定される A.客観的な事実(ユーザー行為の集計デー タやユーザーからの批評)に基づいた 改善要求 B.レビューワーの趣向、主観、宗派に基 づく変更命令 ※レビューでは、主にAを中心に議論 するのが理想
  21. 21. 客観的な事実に基づいて議論することの利点 • レビューワーの課題設定能力のばら つきに振り回されにくい • デザイナー、開発者、マーケなど異 なる職域の人間が同じ目標を達成し ようとしやすい
  22. 22. レビューのプロセス 1.デザインを最適化することで達成が見込め る目標を設定or確認 2.目標が達成できていない部分について
 レビュー 3.目標を再確認 or 再設定。うまくいってい る部分についてはケーススタディとして情報 共有 4.TODO化
  23. 23. 矢野が考える建設的なレビューのコツ •ここを赤にしよう。とか、レイアウトを変えよう。 といった「デザインそのもの」に対する変更提案は その場でしないほうがいいです。会議に時間がかか るだけで良い結果になりにくいです •具体的なアウトプットの 出力権限 はデザイナーに 委ねて、修正結果は後日あらためて確認すること •定義を共有できていない用語については常に注意を 払うこと(ブランディング…とか…) •議事録を取ろう
  24. 24. B(主観に基づく指摘)ダメなの? •ダメじゃないけれど非効率 •目的とズレる •けんかになりやすい
  25. 25. むずかしいこと • 経験の浅いデザイナーだと、ネガティブな指摘に対 して感情的になりがち • 開発経験者がレビューアの場合、開発コストを下げ ることばかり気にしがち • PMが権限を振りかざして主観的な意見を
 言いがち - おたがいそういうもんだと思って許し合い、協力 しよう。
  26. 26. Simejiの場合 • デザインの評価は - ユーザーの意見 - 個別の画面に対するユーザー行為の統計 - ユーザーからのレーティング • を目安にしています。参考までに
  27. 27. 中身の話
  28. 28. コンテンツが決める
 UIの姿形
  29. 29. コンテンツがインターフェースです (Windows Design Guidelineより)
  30. 30. 一般的なデザインの原則 新しい時代のタッチ アプリケーションには、装飾を排除した、 見せかけや無駄のないデザインが適しています。Windows Phone では、コンテンツがインターフェイスです。ユーザーは、 画面に表示される文字、オブジェクト、メディアなどを直接操 作できるものだと考えます。ほとんどの人は、あちこちタップ することで新しいタッチ アプリケーションの使い方を学ぼうと します。画面がごちゃごちゃと凝った作りになっていると、タッ プ操作がうまくいかず、使い方を覚えるのが難しくなります。シ ンプルなデザインを心がけ、明快さを確保するために項目間を 広くとってください。 https://msdn.microsoft.com/ja-jp/library/hh202906(v=vs.92).aspx
  31. 31. モバイルに顕著な
 中身の「特徴」
  32. 32. モバイルに顕著な中身の特徴 •ひと息で読める文字量を意識
 (100-140文字) •読みにくい漢字はひらがなにする
 (例:漢字は平仮名にする→ひらがな にする) •字より図 •サービスのユースケースを常に意識
  33. 33. 各OSのデザインテンプレを参考にすると楽 •iOS
 http://ivomynttinen.com/blog/the-ios-7-design- cheat-sheet/
 ※公式テンプレ無し •Android
 https://developer.android.com/design/ downloads/index.html •Windows
 https://msdn.microsoft.com/ja-jp/library/ windows/apps/ff637515(v=vs.105).aspx
  34. 34. 矢野の意見(まとめ) •モバイルコンテンツのデザイン作業は
 プロセスの最適化が8割 •目的の再設定と効果(ユーザーの声)
 の確認の繰り返しで改良 •なにはともあれユーザーの声重視で
  35. 35. 名刺を切らしましたので… •Facebook
 https://www.facebook.com/rin.yano •Google+
 https://plus.google.com/+rinyano •e-mail
 rinyano@gmail.com •Twitter
 @yanorin

×