ひつじのにっき

mhidakaのにっきです。たまに長文、気が向いたとき更新。

Google+アプリに新しいデザインが来たのでGoogle I/O 2014で発表される新Androidバージョンでのデザインガイドラインを推測する遊びをしてみた

Android

2014年5月23日、G+アプリに更新があるというので試してみたら既存のデザインガイドラインに無いロックな挙動をしていたので紹介します。

1か月後にはGoogle I/O 2014を控えているこの時期の更新、ということで新しいAndroidバージョンに取り込まれるのだろうなー、とか推測しながら挙動を書き留めました（私自身、すぐ慣れてしまうので忘れないように）。
先にまとめておくと次の通りです。

まとめ

  • カードUIに最適化した一例としてG+アプリをみると良い
  • ActionBarの機能拡張、ブランドカラーの強化
  • ListView(カードUI)の上部にメニューをだす形が流行りそう
  • いままでもGoogleは自らデザインガイドラインを破ってきたし、時代に合わせて新しいガイドラインに更新している

今回に限らず、Google製アプリでは、アプリごと思想が微妙に違ってるケースがあります。Google+とGmail、Googleドライブなどアプリごと細かい部分での挙動を統一しきれないこと自体は珍しくないので、まぁそんなもんです。

想像力を膨らませながらデザインの新しそうなところをまとめたので（実際の意図は設計者に聞かないと分からないものですが）読んで気になったところ、デザインの意図とか、あーだこーだ周りの人と議論すると面白いと思います。

NavigationDrawerは、死んだ。

Android開発者なら、アプリを立ち上げて、いくつか気になる点があると思います。

ActionBarの高さが微妙にデカいこと、NavigationDrawerが廃止されていること、投稿ボタンを下に置いてあること。

ActionBarのブランドカラーやサイズ感などでしっくりこないかもしれませんが、ActionBarには「更新しています…」など状態表示も含まれるようになっています。

今回、特に注目したいのは、NavigationDrawerでのメニュー表示を廃止してしまったことです。
実際のメニューはどのように表示されるかというと

新しいメニュー

Google+では、このようにListView(カードUI)の上にメニューをもってきてます。ListViewの上部にメニューを表示する手法は、わりと最近に見かけるようになってます。流行に乗っかってる感じがしてますね。

従来のデザイン

ちなみに現在のガイドラインに沿うなら次のようなデザインが一般的です。

こちらはNavigationDrawerを採用したタイプで現在位置をTabで表示して左右スワイプでカテゴリを移動するスタンダードなタイプです。

デザイン変更の理由は？

もともとG+の旧アプリも、このようなをNavigationDrawerを持ってましたが今回の更新でバッサリ変更となりました。理由としては

  • カードUIとしての操作性の統一

がありそうです。最近のモバイルアプリでは、左スワイプを別の動作にあてることがあります。たとえばGmailアプリではスワイプはアーカイブにあたり、Google Nowではスワイプはカードの非表示です。

左右スワイプの使われ方が、カテゴリを移動する、から派生して、いろんな操作を意味することになった点が大きいかも。
これらの操作と混同することを防ぐためにはNavigationDrawer以外のほうがよいのかもしれません。

NavigationDrawerは消え去るのか？

死んだ、と言ってしまいましたが実際はそんなことはないです。NavigationDrawerのメリットは画面端からのスワイプで、いつでもメニューにアクセスできる点ですし、複雑な操作を一手に引き受けてくれます（メニューの出し方がわかりにくくチュートリアルが必要だったり沢山あるメニューから正確なアイテムを取り出せるか、など議論の余地はありますが）。
現状、すぐになくなってしまうデザインパターンとは言いにくい状況です（つまり、まだ主流）。今後のトレンドをみつつ採否を考えていけばいいかと。

Google+で、NavigationDrawerを廃止した理由は、画面ごとに何をすればよいか、という分かりやすさがほしかったからかもしれません。利用シーンにあわせてメニュー（またはコンテンツ）を表示すると、何ができるかわかりやすく伝えらえると考えたのかも。

右側から出てくる通知領域

NavigationDrawerは左側からでてきましたが、Google+の通知領域は右からでてきます。
（13:58 追記：今回のアプデではなく以前からこの挙動のようです）

これは驚いた。定着するかはちょっとわかりませんが、右スワイプが余ってる（※左スワイプはカードの削除や非表示に割り当てられている）ので何か使ってみたかったのでは…。ちなみに通知領域が画面右側に寄って出ること自体はウェブ（Googleのウェブページでは右上にアイテムが集中してるので）でよく見るので普通の発想かなー、と思います。

そういえばFacebookアプリも以前は右側をスワイプするとアクティブな人リストがでてきてましたね（FBのほうは新デザイン移行に伴い、でなくなっちゃいましたが）

邪推すると…

Webと同じ操作系にしてくるってことは、やっぱりAndroid 5.0ではChromeとAndroidが統合されるのだなー、とか考えると夢が広がります（反論をあげておくと、モバイルでWebと似たような操作系を採用すること自体は、珍しくはないという気もしますね）。

ブランドカラーの扱い方

ActionBarはアプリのブランドカラー（Google+なら赤）がはいります。また今までよりActionBarは背が高くなっており、存在感が増しています。かわりにメニューなどはListView(カードUI)をスクロールさせれば非表示になるなど画面を有効に使う工夫がされています。

個人情報のページではブランドカラーが個人のカバー画像で入れ替わるように工夫されてます。一方、画面左上の「

下ボタンUIが復活しそうな気配がある

どうも画面下部の扱いが見直されている気がします。
というの画面下に投稿ボタンが置かれてるからです。G+のアプリ画面を見ると投稿ボタンが下に移動しています。

いつもなら画面上部に置くはずのボタンが下にあります。さらに投稿画面をみてみると、やっぱり投稿ボタンが下に移動しています（下図）。

現在、一般的なアプリだと画面右上に投稿ボタンを配置しています（図の右）。しかし新G+アプリでは画面右上が空いてるにも関わらず画面右下に統一しています。明確な意思が感じられるなー、と。あとデフォルトでキーボードを非表示にしているあたりもポイント高いですね。

かわりに画像やカメラ（しかもプレビュー付）での写真を選びやすくしています。これはSNS（とくにGoogle+）が画像中心になっている現状を踏まえて、優先度を文字から写真にスイッチしたのでしょう。

デザインガイドラインは変化するもの。

以前、Googleはこういっていたと記憶してます。「画面下はホームボタンやバックボタンとかあるから下タブとかやめていこう！」しかし、日は流れ、スマートフォンのサイズが4インチを超え、5インチ超も当たり前となりつつあります。
ぶっちゃけ画面上だともう指が届かないので下に持ってくることを是としたと思います。

投稿ボタンも画面下、ホームボタンのすぐそばにおかず、少し上部に離して配置していることからも、ユーザーへの誤クリック防止の配慮がみてとれます。

デザインガイドラインを守るのも大事ですがユーザーの立場にたって考えることも重要ですね、みたいな話なのですがGoogleはわりと自分でデザインガイドラインを破ってきます。

日々ガイドラインを守れ守れと言っておきながらなので手のひら返しにみえますが、
「ユーザーにとって何が一番いいか」という試行錯誤は個人の開発者ではやりにくいのも事実です。今回の変更も新ガイドライン化されるかもしれないし、ユーザーの受けが悪ければ、何事もなかったかのように消えるだけかもしれません。

まとめ

ガイドラインは時代や流行りと共に変わる点に留意しておくこと。ただし、基本はガイドラインに準じるとデザインの観点からもコストパフォーマンスが良いはず。やはりユーザーが操作に迷わないというのは強い。

あとこの新ガイドラインを推測する遊びは多分こういう意図だろうなー、と思ったことをざっくり書いただけです。次のデザインガイドラインはこれだー！とか信用せず、Google I/O 2014を楽しみに待ちましょう。