SlideShare a Scribd company logo
1 of 35
Download to read offline
開発者こそ知っておいて欲しい
モバイルコンテンツデザイン

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

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

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

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

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

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

開発者様を動かすのは

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

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

http://keynotopia.com/themes
•その他のUIテンプレキットまとめ記事

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

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

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

デザインガイドラインを自動的に作ってくれるサービスも
おまけの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/



デザインレビュー
• デザインの効果をはかって、

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

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

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

UIの姿形
コンテンツがインターフェースです
(Windows Design Guidelineより)
一般的なデザインの原則
新しい時代のタッチ アプリケーションには、装飾を排除した、
見せかけや無駄のないデザインが適しています。Windows
Phone では、コンテンツがインターフェイスです。ユーザーは、
画面に表示される文字、オブジェクト、メディアなどを直接操
作できるものだと考えます。ほとんどの人は、あちこちタップ
することで新しいタッチ アプリケーションの使い方を学ぼうと
します。画面がごちゃごちゃと凝った作りになっていると、タッ
プ操作がうまくいかず、使い方を覚えるのが難しくなります。シ
ンプルなデザインを心がけ、明快さを確保するために項目間を
広くとってください。
https://msdn.microsoft.com/ja-jp/library/hh202906(v=vs.92).aspx
モバイルに顕著な

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

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

(例:漢字は平仮名にする→ひらがな
にする)
•字より図
•サービスのユースケースを常に意識
各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
矢野の意見(まとめ)
•モバイルコンテンツのデザイン作業は

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

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

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

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

rinyano@gmail.com
•Twitter

@yanorin

More Related Content

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

Global engineerlab kawani
Global engineerlab kawaniGlobal engineerlab kawani
Global engineerlab kawaniShin Kawani
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版真一 藤川
 
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」feedtailor
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshopYoichiro Sakurai
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインTakeshiro Kani
 
やってみよう!ユーザーテスト
やってみよう!ユーザーテストやってみよう!ユーザーテスト
やってみよう!ユーザーテストke_shira
 
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様Tomoharu Fukushima
 
Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)
 Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1) Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)
Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)schoowebcampus
 
フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)feedtailor
 
Feedtailor portfolio 20141115
Feedtailor portfolio 20141115Feedtailor portfolio 20141115
Feedtailor portfolio 20141115feedtailor
 
IoTをやるため起業した話
IoTをやるため起業した話IoTをやるため起業した話
IoTをやるため起業した話Naotaka Saito
 
メディアへの寄稿をやってみて〜きっかけと仕事の流れ
メディアへの寄稿をやってみて〜きっかけと仕事の流れメディアへの寄稿をやってみて〜きっかけと仕事の流れ
メディアへの寄稿をやってみて〜きっかけと仕事の流れsugimoto1022
 
iOSアプリケーションの継続的デリバリー 〜エンタープライズ品質のiOSアプリケーションを目指して〜
iOSアプリケーションの継続的デリバリー   〜エンタープライズ品質のiOSアプリケーションを目指して〜iOSアプリケーションの継続的デリバリー   〜エンタープライズ品質のiOSアプリケーションを目指して〜
iOSアプリケーションの継続的デリバリー 〜エンタープライズ品質のiOSアプリケーションを目指して〜Naoki Umehara
 
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場Adinnovation Inc.
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material DesignNobuya Sato
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014Nobuya Sato
 
インタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glblインタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glblInteractive Creators Tokyo
 
Onlab [growth] hackers conference 2013 Ryosuke Matsumoto
Onlab [growth] hackers conference 2013 Ryosuke MatsumotoOnlab [growth] hackers conference 2013 Ryosuke Matsumoto
Onlab [growth] hackers conference 2013 Ryosuke MatsumotoRyosuke Matsumoto
 

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

Tapnow資料
Tapnow資料Tapnow資料
Tapnow資料
 
Global engineerlab kawani
Global engineerlab kawaniGlobal engineerlab kawani
Global engineerlab kawani
 
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版
 
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」
第2回 近JASA セミナー 「組み込みの世界に影響を与える エンタープライズiOS」
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
 
やってみよう!ユーザーテスト
やってみよう!ユーザーテストやってみよう!ユーザーテスト
やってみよう!ユーザーテスト
 
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様
【Aidちゃんねる放送資料】400万DLの女性向けカメラアプリ、その企画・デザイン・prとは? 有限会社アンジー様
 
Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)
 Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1) Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)
Aidちゃんねる 400万dlの女性向けカメラアプリ_その企画_デザイン_prとは__有限会社アンジー (1)
 
フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)フィードテイラー紹介(2014.11.15版)
フィードテイラー紹介(2014.11.15版)
 
Feedtailor portfolio 20141115
Feedtailor portfolio 20141115Feedtailor portfolio 20141115
Feedtailor portfolio 20141115
 
IoTをやるため起業した話
IoTをやるため起業した話IoTをやるため起業した話
IoTをやるため起業した話
 
早稲田ビジネススクール講義 ゲスト YAHOO!Lodge水田千恵
早稲田ビジネススクール講義 ゲスト YAHOO!Lodge水田千恵早稲田ビジネススクール講義 ゲスト YAHOO!Lodge水田千恵
早稲田ビジネススクール講義 ゲスト YAHOO!Lodge水田千恵
 
メディアへの寄稿をやってみて〜きっかけと仕事の流れ
メディアへの寄稿をやってみて〜きっかけと仕事の流れメディアへの寄稿をやってみて〜きっかけと仕事の流れ
メディアへの寄稿をやってみて〜きっかけと仕事の流れ
 
iOSアプリケーションの継続的デリバリー 〜エンタープライズ品質のiOSアプリケーションを目指して〜
iOSアプリケーションの継続的デリバリー   〜エンタープライズ品質のiOSアプリケーションを目指して〜iOSアプリケーションの継続的デリバリー   〜エンタープライズ品質のiOSアプリケーションを目指して〜
iOSアプリケーションの継続的デリバリー 〜エンタープライズ品質のiOSアプリケーションを目指して〜
 
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場
世界で戦うアプリディベロッパーセミナー 海外ゲームパブリッシングビジネスとロシア及びヨーロッパから見た日本市場
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material Design
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
 
インタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glblインタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glbl
 
Onlab [growth] hackers conference 2013 Ryosuke Matsumoto
Onlab [growth] hackers conference 2013 Ryosuke MatsumotoOnlab [growth] hackers conference 2013 Ryosuke Matsumoto
Onlab [growth] hackers conference 2013 Ryosuke Matsumoto
 

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