第3回 ガイドラインからみたAndroidアプリデザインの特徴１

第3回 ガイドラインからみたAndroidアプリデザインの特徴１

2013年3月21日
解説・文：秋葉ちひろ

前回までは、普段Androidを使わない方にもわかる簡単なiPhoneとの比較をお伝えしました。今回からはいよいよAndroidアプリのデザインの特徴について、3回にわたって詳しく解説していきます。

【1】Androidのバージョンを知っておこう

アプリのデザインの話に入る前に、まずはAndroid自体について知っておきましょう。


●Androidのバージョン

---

AndroidのOSにも、「iOS5」や「iOS6」のようなバージョンが存在し、それぞれにコードネームがついています。

上記のグラフは、Googleが公開したプラットフォームバージョン分布データで、2013年3月4日までの14日間にGoogle Playにアクセスした端末のOSのバージョンを調べたものです。

※参照：Dashboards | Android Developers

3.1/3.2のHoneycombは、タブレットコンピュータ向けに設計されたバージョンで、2010年ごろのタブレット端末には搭載されていましたが、現在では1.2%と大変少ない割合となっています。なかには4系にアップデート可能なものもあり、すでに4系になって使っている方もいるでしょう。

バージョンについての細かい説明や分析は省きますが、ここでデザイナーに知っておいてほしいことは、「現在主要となっている2.3.xと4.xのバージョンの違いについて」です。いちばん大きな違いとなるキーワードは、「メニュー」そして「アクションバー」です。この回と次の回では、新たなこの2つの機能のUIについて詳しくみていきましょう。
※メニューとアクションバーについては、厳密には3.xからの新しい機能になりますが、スマートフォンの中には3.xの端末は
存在しないので、4.xと比べていきます。

【2】メニューボタンについて

ここからはメニューボタンについて解説したいと思います。

●ハードキーとソフトキーについて

---

2.3.xの搭載された端末ではすべてがハードキーをもっているため、ハードキーのメニューボタンというのがあります。

ところが4.xの搭載された端末は、ハードキーをもたない、ソフトキーのものが多いため、この「メニューボタン」の機能が変更されたのです。

それではどのように変更されたかという具体的な例を、Gmailアプリをサンプルに挙げて確認していきます。

これはAndroid OS 2.3.3（HTC 001HT）ですが、ハードキーのメニューボタンを押すと、アイコンとテキストがセットになったボタン群が下から出てきます。また、さらにその中の「その他」をタップするとその他の設定が出てきます。

それに対して、Android OS 4.1.1（Galaxy Nexus）では次のようになっています。

4.xになって変更された点は、次の2つです。

・ハードキーやソフトキーの中ではなく、アプリ内にメニューのボタン（アクションオーバーフローといい、詳しくは第4回にて説明します）が表示されている
・メニューの表示が1列にまとめられている

デザインもですが、インターフェイスがずいぶん変わっているのがわかるでしょう。ただ、ここで興味深いのはインターフェイスが変わっても、この画面で必要な要素というのはほとんど変わっていないということです。

中にはまとめられたり、バラされたりした要素もありますが、ほとんどがそれぞれにおいて対応しています。

古いメニューボタンという概念でしか考えられていないアプリに対する対策

Gmailアプリの新しいメニューの例は、きちんと新しいUIのメニューの機能を考えて作られています。しかし、中には2.3.xのメニューボタンでしか考えて作られていないものもあります。

このような場合、ハードキーのメニューボタンを使っていた機能のものが、ソフトキーになると当然メニューボタンもなくなるわけですから、さあどうしたものかという状況に陥ってしまいます。しかしそれでは古いアプリがあまりにも使えなくなるということで、ソフトキー内にメニューボタンが表示されるよう、OS側で制御されます。

上図のようにソフトキーのいちばん右側に、新しいUIでのメニューに相当するアイコンが出現し、それをタップすると、ハードキーのメニューボタンを押したときと同じように下からボタン群が出てくるようになります。このような対策により、メニューボタンのなくなったソフトキーの端末でもメニューボタンに相当するものが現れ、問題なく使えるようになっています。

これから作るアプリにおけるメニューボタンの扱い

これから作るアプリにおいては、ハードキーにおける古いメニューボタンではなく、新しいメニューの概念、つまりソフトキーにはメニューボタンが存在しないことを想定して、アプリ内のメニューボタンを使うようにすることが推奨されています。このためには、AndroidアプリのUIをしっかり理解して設計するようにしましょう。

【3】ソフトキーのもうひとつのボタン

さて、ソフトキーにもだいぶ慣れてきたと思いますが、実はソフトキーにはもうひとつ新しいボタンがあります。それは、「最近使ったアプリ」の一覧を表示するためのボタンです。

●アプリの切り替え

---

スマートフォンの電源を入れてから今までの間に使っていたアプリがずらりと表示されています。他のアプリに切り替えたいときに、いちいちホーム画面に戻らなくてもここから切り替えることができます。

これは、アプリの切り替えもしくはアプリを終了させたいときに使う画面です。

スマートフォンのアプリには、パソコンのソフトウェアのように「終了する」というメニューはほとんどありません。
Androidの場合、アプリを使っていて終わりたいなと思ったときには、「ホームボタン」もしくは「戻るボタン」を押してホームに戻って終わりだと思います。しかしこのときにはアプリはまだバックグラウンドにひそんでいます。再度使うときに一から立ち上げなくてもいいように、裏でスタンバイしているのです。

●アプリの終了

---

立ち上がっているアプリが多くなってくると、動作が重くなってくると感じる端末もあります。気になるときは、この画面でリストを左右どちらかにフリックすることでそのアプリを終了させることができます。

●iOSにもあるアプリの切り替え/終了

---

iOSだと、ホームボタンをダブルクリックすると出てくる画面にあたります。iOSでは、この画面でアプリを切り替えたり、アイコンをロングタップして出てくるマイナスマークを押すことでそのアプリを終了させることができるのと同じです。

今回は、Androidアプリデザインの特徴の中でもベースとなる部分をお伝えしました。

いざデザインをしようと思っても、バージョンや画面のサイズなどはどうしても実装時にネックとなる部分です。これらのことは知らなくてもデザインはできると思いますが、知っていると、エンジニアの方へ実装時のことを指示しやすくなります。ややこしい話ですが、ぜひ頭に入れておいてください。

[記事リンク]
>>> 「秋葉ちひろのAndroidアプリデザイン入門」目次へ戻る
>>> 第1回「iPhoneアプリとAndroidアプリのデザインの違い（前編）」はこちら（2/21公開）
>>> 第2回「iPhoneアプリとAndroidアプリのデザインの違い（後編）」はこちら（3/7公開）
>>> 第3回「ガイドラインからみた、Androidアプリデザインの特徴1」（3/21公開）
>>> 第4回「ガイドラインからみた、Androidアプリデザインの特徴2」（4/4公開予定）
>>> 第5回「ガイドラインからみた、Androidアプリデザインの特徴3」（4/18公開予定）
>>> 第6回「これからのアプリデザインに必要な知識とスキル、それをとりまく環境」（5/2公開予定）

---

【著者プロフィール】
株式会社ツクロア
デザイナー／アートディレクター　秋葉ちひろ（あきばちひろ）
●Web制作に従事する傍らAndroidデザイン・XML実装までを担当。デザインや実装に関する講演、執筆、寄稿なども多数手がける。2012年後半はBaidu JapanにてAndroidアプリ⌈Simeji⌋の開発に携わる。2013年4月に株式会社ツクロアを設立。言われたデザインをただ指示通りに作るだけでなく、構造や仕様もデザイナー側から言及できるよう、ハードウェアやソフトウェアプログラミングなどの勉強にも余念がない。技術にとらわれずに体験からデザインを考えるコミュニティ⌈デザイナーズハック⌋を運営。もの作りが好きなことが原点。
●株式会社ツクロア：http://tuqulore.com
●Lady Beetle Design（個人ブログ）：http://www.ladybeetle-design.com
●Twitter：@tommmmy