セッションの主旨

今回のイベントではマテリアルデザインを中心としたデザインが、アプリやサービスにおいていかに重要になるかについてのセッションが行われました。
2014年のGoogle I/OにてGoogleから発表されたマテリアルデザイン。Googleが利用を推奨していて2016.10.6に日本語版(pdf版)がリリースされました。

アプリデザインで守るべき25のルール

Guri Midorikawa（Google Japan）

- 1.5M+ … GooglePlay/AppStore それぞれで公開されているアプリ数。
- 25%のアプリはインストール後一度しか使われない
- 34%のアプリはインストール後11回しか使われない
　→ 長く使ってもらえるアプリがいかに少ないかということ。

- 平均36個のアプリが入っていて、1ヶ月に2個インストールし、1個アンインストールしている。
- アプリが高評価であるほど高収益。
– 星2->3になると9倍
– 星3->4になると4倍

１）迷子にならないナビゲーション
　１−１） インストールして何をユーザーが期待するかを考え、機能を適切に見せてあげることが大事。
　１−2） アプリを立ちげて5分以内に「これいいな！」と思わなければユーザーは立ち去る
　　　- 直感的に魅力をなるべく早く伝える
　１−3） メニューカテゴリはユーザー視点で漏れなくダブりなく
　１−4） GPSでユーザーのロケーションを検出する
　　 – 近くにお店がある場合は表示し、無い場合は検索させるなど
　　 – 地図連動
　１−5） アプリの途中でWebに飛ばすなど見栄えが異なるページへ遷移するとユーザーにはストレス
　　 – アプリのサービスはアプリで完結させるのがベスト
　　 – Webに飛ばすなら、Google Custum Tabオススメ　

２）やさしいサーチ
　2−１） 検索機能は目立つところに配置する
　　　- Andoroidユーザーも上部に検索機能があることに慣れている
　　　- 手が離せない時の為にも音声検索
　　　- 検索には「何かをしたい」というユーザーの願望・行為が宿っている
　　　- 実装はマテリアルデザインを参考に
　2−2） 検索インデックスの使い心地大事
　　　- 的確なサジェスト、ユーザーの打ち間違い補完によりストレスを軽減
　2-3） 親切な絞り込み機能
　　　- フィルターやソート
　2-4） 過去の購入履歴・アイテム
　　　- ユーザーの時間の節約につながる

３）イライラしないコマース・コンバージョン
　3−１） 支払い方法の編集・クレジットカードの削除ができるように
　　　- 変更のために会員ページに誘導されると離脱してしまう
　3−2） 丁寧な操作説明
　　　- まれにユーザーによって意味を間違える。
　　　- 「クレジットカードをスキャンしてください」というアナウンスに対して、
　　　　カメラ撮影してほしいところ、端末の上にクレジットカードを置いて待機していた（スキャンできると勘違い）人が103人中3人。
　　　- ユーザーの解釈は人それぞれ

４）引かれない登録フォーム
　4−１） いきなり登録フォームやFacebook連携が立ち上がるのはいかがなものか
　　　- サービス体験がない中で登録や連携誘導はハードルが高くなり、ネガな印象
　　　- ある程度サービスを体験・価値を実感してもらうことが重要。CVとしては良くない。
　　　- 会員登録をいきなりさせるのではなく、コマースなら購入フローの後に登録させる方が自然。
　4−2） 「Sign up」よりも「Register」が主流。
　　　- 「Sign in」と間違える。日本人にもわかりにくい。
　4−3） ストレスの無いパスワード認証
　　　- Google Smart Lock
　　　- 保存したパスワード情報はhttps://passwords.google.com/で確認・設定変更可能
　4−4） フォームは入力しやすく
　　　- カーソルの移動は最小限に。電話番号などはブロックを分けない。自動移動なども必要。
　　　- キーボードが上がってきた時にインプットが隠れてしまわないように
　4−5） 入力エラーはリアルタイムでバリデーションを
　　　- 「次へ」を押した後にエラーが出るのは萎える
　4−6） 入力すべき内容にあったキーボードを立ち上げる
　　　- 電話番号など数字しか入力しないのに、日本語キーボードが立ち上がるのは残念。
　　　- 当たり前の積み重ねがサービスの印象に繋がる
　　　- 国内サービスでも適用できてないサービスが多い
　4−7） 日付入力はカレンダーを立ち上げる
　　　- キーボードで日付2016/10/07と入力させるのは不親切。
　　　　スピーディに入力させることで、他のことに気が散って離脱するのを防ぐ
　
５）納得感のあるユーザビリティ
　5−1） アイコンだけのボタンは良くない。テキストラベルを補充しよう。
　　　- 「☆」アイコンも人によって「お気に入り」「ランキング」などなど
　　　　　全ての人が同じ解釈をするとは限らないから説明大事。
　5−2） 購入・完了画面は視覚的にフィードバックを
　　　- モーション付きでのアナウンス
　5−3） アプリでユーザー情報が必要な時は、明確にどんなことに必要なのか、必然性がわかるように。

Material Motion

Nick Butcher（Design Advocate, Google）
Nick Butcher氏のプレゼン資料
- モーションに関するセッションだからコード多め。
- 補完とかすごいんだけど、開発工数に見合う成果が出るかどうかは疑問。
　デザイナーがコード書ければ最高・またはモーション好きなエンジニアさんがプロジェクトメンバーにいると最高
- 「アニメーションかっこいいんだけど、使っていると段々ウザくなるのはどうすれば？」という質問に対して
　「アニメーションを盛り込み過ぎないこと。アプリ体験を向上させることに使う。
　面白いからといって開発者の意図で入れないこと。適度に、とスピードが重要。なるべく早く。
　軽快な操作を妨げるようではユーザーにストレスがかかる。アニメーションを待つことが無いように。」
- 同時通訳が分かりやすくてすごかった。
Android Icon Animator

Material Design の活用事例 : Famm

三分一 立弥 (Timers)、あんざい ゆき(ウフィカ)
- Famm：子育てしている方向け写真整理アプリ
- リニューアルの動機・経緯
　- デザイン先行ではなく、アプリ実装を見直したかった
　- ちょうどマテリアルデザインが発表されたから使ってみた
- 気をつけたこと
　- ナビゲーション周りの見せ方はリニューアル前と合わせることで、既存ユーザーの学習コストを下げるよう考慮
　- いくつかのデザイン案を作ってユーザーインタビューもした。

　- 全画面をプリントアウトし、遷移とカラーを確認。全体を俯瞰してみた。
　　- アナログにした理由
　　　- データが重かったから。
　　　- 「この画面デザイン無いね」とか進捗管理にも使えた。
　　　- 議論しやすい

- SupportLibraryを使ったところ
　- アクションバー（ツールバー+タブ）、サブヘッダー、グリッドなど
　　- カスタマイズ性が低い
　　- 標準的なパーツをそのまま導入するのは楽

- リニューアル後、インストール数・累計平均評価が上がる

Material Design Fireside Chat

齊藤 健太(C CHANNEL)、山口 有由希(Fablic)、黒田 将司(マネーフォワード) 、高田 愛美(Google Japan)
- デザインはビジネスを成功させる為の手段
- タブレットの方が課金率が高かった
- CtoCのサービスはデザインを良くすればその分数字に繋がる
　- デザイナーもエンジニアも売上・出費など数字を見ている
- デザインはユーザビリティを上げる為のもの。
- マテリアルデザイン導入のきっかけ
　- 知ってて当たり前に使った
　- リニューアルのタイミングで導入。ちょうど発表されたところだった。
　- iOSアプリは他社にアドバイスをもらった
- アプリだけでなくWebにも力を入れている。オーガニックで流入してくるので、アプリとはUIが違って当然である。
＊ここで退席させていただきました。

まとめ

マテリアルデザイン以前に満足のゆくユーザー体験としてこれだけは守ろうという基本的な話から、アニメーション、事例を交えた話、アプリのメンタリングと盛りだくさんでデザイナー・エンジニア問わず実務に役立つセッションでした。アプリのメンタリングは早々に締め切りになってしまい残念…！
マテリアルデザインの発表とリニューアルがちょうどタイミング的に同じだったから自然な流れで取り入れたとの意見が多く、これから新規で立ち上げるサービスやフルリニューアルの構想が既にある場合には導入ハードルは低いという印象を受けました。が、既存でユーザー数の多いサービスなどには影響があまりに大きいので要検討。
モーションについては開発の工数もハードルになるけど、そこはデザイナーがいかにビジネスに還元できるという話に繋げられるかも問われるところ。