ガイドラインに従うだけがデザイナーの仕事？メジャーサービスUIから学ぶ『マテリアルデザイン』
ガイドラインに従うだけがデザイナーの仕事？メジャーサービスUIから学ぶ『マテリアルデザイン』
Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド
2016年8月23日
執筆：井上 辰徳（株式会社サイバーエージェント）
日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に速い。本コラムではアップデートによって進化を遂げたサービスUIにフォーカスし、より良いユーザー体験を提供する為の工夫についてサービスごとに考察。今回は2016年前半を振り返り、「Facebook Messenger」「Twitter」等のメジャーサービスがアップデートの一つとして踏み切ったマテリアルデザインについて取り上げる。
2014年、Googleがマテリアルデザインを発表し2年余り。国内のサービスにもそのフレームワークの導入事例が少しずつ増えてきた今日であるが、まだまだ一般ユーザーに浸透したとは言い難い状況。その背景には「新しい概念であるマテリアルデザインが、これまで培われてきたUXに必ずしも貢献するとは限らない」という課題がある。だからこそ多くのユーザーを抱えるメジャーサービスほど、なかなか導入に踏み切れないと言う現状がある。
■メジャーサービスがマテリアルデザインになる理由
ユーザーを数億人規模で抱えるメジャーサービスにおいては、わずかなUIの変更でも多くのユーザーの期待にそぐわない体験をさせてしまうリスクが非常に大きい。マテリアルデザインが発表されてからMessengerやTwitterがそれらを適用するまで、これほどまでに時間を要した理由も恐らくはそこにある。
では、なぜそこまでしてUIの変更に踏み切るのだろうか。
それはマテリアルデザインがAndroidを搭載した全デバイスに適用される点にあり、そこには『ユーザーがシームレス*に様々なサービスを利用できるようにしたい』というGoogleのデザイン戦略がある。そのためAndroidユーザーにとってスタンダードなUXを提供するには、マテリアルデザインに沿うことが必須となるのである。
*シームレス･･･継ぎ目のないこと。複数サービスを違和感なく利用できる仕組み。
アップデートでは両アプリ共に、マテリアルデザイン特有のグリッドを意識したスペースの取り方と、ビビットなカラーが映えるAndroidらしいデザインに変更されている。
――さらに次項では「機能」と「ブランディング」の2つの視点において、マテリアルデザインで注意するべきポイントを紐解いていこう。
■物理的な配置を意識したUI設計
マテリアルデザインのポイントは、各UIのパーツが衝突したり突如消えてしまったりしないよう、各機能のプライオリティ（優先順位）やレイヤー階層を意識することだ。「Material = 物理的な材料」と訳されるように、材料は適切な箇所に適切な優先順位で配置しなければならない。
例えば今回Twitterで採用されたドロワーナビゲーション（サイドメニュー）に注目してみよう。ここでは「プロフィール」「ハイライト」「リスト」「おすすめユーザー」などの主なページへ遷移できるようになっている。そして通常、ナビゲーションなど“ユーザーに選択させるUI”はその上に妨げになる物があってはならない。つまりドロワーナビゲーションは画面全体を覆う、最上位の階層に存在するべきものである。
また、各画面内にはプライオリティの高いユーザーアクションを表すボタンが存在する。Messengerであれば「検索」「連絡先の追加」「通話」「メッセージ作成」、Twitterであれば「ツイート」等がこれに当たる。これらは画面内においてメインとなるアクションであり、マテリアルデザインでは画面のスクロールに付いてくるフローティングアクションボタン（以下FAB）に価する。
このようにマテリアルデザインではX軸（横）、Y軸（縦）のレイアウトだけでなく、これらのUIパーツに物理的な無理がないよう、図のようなZ軸（高さ）の位置関係を意識した構造にしなければならない。
■ガイドラインに合わせることで失われてしまうもの？
マテリアルデザインのガイドラインは配色やフォントサイズ、ボタンの種類に至るまであらゆる箇所に規定があり、これらを適用していくことでAndroidらしいアプリを完成させることができる。しかしその制限の多さ故に、サービス独自の世界観を表現しづらいなど悩みを抱えることもあるだろう。
今回のアップデートでは、両アプリ共に本来テキストのラベリングが入るべき項目に独自のアイコンが使われている。例えばTwitterのFABである「ツイート」ボタン。ここには通常ガイドラインで提供されている鉛筆マークを使用するところであるが、敢えてTwitterらしい羽を入れることで単なる投稿ではなく”ツイート”を連想させている。Messengerにおいても友達リスト内の切り替えボタンには、マテリアルデザインには無い独自のボタンスタイルをデザインに盛り込んでいる。
このように全てをガイドラインに適応させるのではなく、独自のブランドイメージを保ちつつ、マテリアルデザインとの『親和性』を見出し新たなスタイルを創造していくことが重要なのではないだろうか。
≪ まとめ ≫
ガイドラインに従うだけでなく、新しい表現を生み出す発想力が必要
先日ではAndroidの新しいスタンダードになりうるUI、「ボトムナビゲーション」が発表された。このようにガイドラインは日々アップデートされており、それらは確かに守るべきものとして存在する。しかしながら、提供されたガイドラインを全て鵜呑みにした方がいいという訳ではない。弊社でも多くのAndroidアプリを開発しているが、ガイドラインを尊重すべき箇所、独自のデザイン性を盛り込むべき箇所についてはバランスを考慮しながら適用を行っている。重要なのはガイドラインのルールを頑なに守ることではなく、その理念とコンセプトを理解し、ガイドラインだけでは表現できない『サービスの世界観』を独自の手法で補う事だ。そのようにして親和性の高いデザインを生み出すことが、新たなユーザービリティを作る力ではないだろうか。
●その他の記事
「Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド」の目次はこちら
［筆者プロフィール］井上 辰徳（いのうえ たつのり） ／クリエイティブディレクター
「Ameba」メディアサービスの立ち上げを複数担当。
現在はコマースサービス「Ameba古着屋」のクリエイティブ責任者を務める。
