開発者こそ知っておいて欲しい モバイルコンテンツデザイン...
TRANSCRIPT
開発者こそ知っておいて欲しい モバイルコンテンツデザイン箱と中身の整えかた
バイドゥ株式会社 プロダクト事業部 矢野りん
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
•Zeplinhttps://zeplin.io/
デザインレビュー•デザインの効果をはかって、アプリをよりよくするために実施する会議のこと
２種類の指摘が想定される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のデザインテンプレを参考にすると楽•iOShttp://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/※公式テンプレ無し
•Android https://developer.android.com/design/downloads/index.html
•Windowshttps://msdn.microsoft.com/ja-jp/library/windows/apps/ff637515(v=vs.105).aspx
矢野の意見（まとめ）•モバイルコンテンツのデザイン作業はプロセスの最適化が８割
•目的の再設定と効果（ユーザーの声）の確認の繰り返しで改良
•なにはともあれユーザーの声重視で
名刺を切らしましたので…•Facebook https://www.facebook.com/rin.yano
•Google+https://plus.google.com/+rinyano
•e-mail [email protected]
•Twitter@yanorin