ロリポップのマテリアルデザインをまとめてみる

アンドロイドやそのアプリなどの説明をするのに、画面上のGUI部品などの名前がわからないと文章を書くのが困難になります。困難というよりももう書けないといったほうがいいかもしれません。ブログなら「画面の下のアレ」みたいな表現でもいいんでしょうけど、さすがに商業サイトの記事で「アレ」はダメです。そこで、今回は、Android 5.0ことLollipopの標準的な画面やマテリアルデザインなどで使われるGUI部品をベースに、画面の名称を整理してみることにします。

Lollipopの画面

まずは、画面の種類です。アンドロイドには、「Home Screen」や「Lock Screen」といった画面があります。とりあえず、「Screen」を「画面」と訳すことにすると、標準的な画面には、

• Home Screen - ホーム画面(写真1)
• All App Screen - すべてのアプリ画面(写真2)
• Recents Screen - 最近の画面(写真3)
• Lock Screen - ロック画面(写真4)

の4種の画面とアプリの画面があります。実際には、前記の画面は「ラウンチャー」というアプリの画面なので、本来、アンドロイドの画面はすべてアプリの画面といってもいいのですが、これらの4つの画面は、システム標準なので、把握しておいたほうがいいでしょう。なお、ホーム画面の下にあるアイコンを固定して表示する部分は「お気に入りトレイ」(Favorites tray)といいます。

さて、アンドロイドの画面は、アプリが「没入」表示を行わない限り、かならず「System Bars」(システムバー)を持っています。システムバーには、

• Status Bar - ステータスバー(画面の上)
• Navigation Bar - ナビゲーションバー(画面の下)

の2つがあります(写真5)。

ステータスバーは、右側に通信やバッテリの状態を表す「システムアイコン」があり、右側にアプリの通知を示すアイコンが表示されます。また、ステータスバーをドラッグして引っ張り出すと「通知シェード」(写真6)が開きます。このとき、最上部部分を「ヘッダー」といい、ここをタップまたは下にドラッグすると「クイック設定」(写真7)が開きます。なお、通知シェードが開いていないときに二本の指でステータスバーを下にドラッグすると直接「クイック設定」を開くことができます。

ナビゲーションバーは、画面下に表示される部分でここには以下の3つのナビゲーションボタンがあります。

• Back - もどる
• Home - ホーム画面を表示
• Overview - 概要

最後の「概要」は、Lollipop以前は、「Recent Apps」(最近使ったアプリ)と言っていましたが、5.0からは、呼び方が変わったようです。また、アイコンもLollipop以前と変わっています。Android 2.3までの対応となっているアプリの場合、ここにメニューボタン(縦に3つ点が並んだアイコン)が表示されることがあります。

標準的なアプリの構成

基本的にはシステムバーはどのアプリケーションでも表示されています。このシステムバー以外の領域にアプリが画面(アプリ内部では、表示する領域をビューといいます)を表示します。

マテリアルデザインに対応したアプリの画面は、以下のような構造(写真8)を持っています。

• Action Bar - アクションバー
• Navigation Drawer - ナビゲーションドロアー
• Content Aera - コンテンツ領域

このうちコンテンツ領域は、アプリのメインの表示領域、アクションバーは、コンテンツエリアの上、ステータスバーの下にあります。また、ナビゲーションドロアーは、画面の左側から出てくる領域で、アクションバーのアプリアイコンやハンバーガーアイコンのタップ、画面左からのドラッグで表示されます。Lollipopのナビゲーションドロアーは、タブレットでの横向き表示など、横方向の表示に余裕があっても、使わない場合には隠れた状態になります。こうしたGUIパーツを使うアプリには、PlayストアやGoogleマップなどがあります。

Kitkatまで使われていたFragment(フラグメント)というGUI部品は、ナビゲーションドロアーに似ていますが、動作が違います。これは、画面を縦に分割して、左端にナビゲーション用の領域を持つもので、ナビゲーション用の領域は畳むとアイコン表示となり、完全に隠れません(写真9)。また、表示させるとコンテンツ領域を右に押しやり、そのまま表示を続けることができます(写真10)。これはGmailアプリなどが使っています。ナビゲーションドロアーは一時的な領域として表示され、表示されているときには、背面になるコンテンツ領域は、暗く表示され、アクセスできないことを示します(写真11)。これに対してフラグメントの場合、ナビゲーションエリアがコンテンツ領域の一部を奪って表示するため、コンテンツエリア自体はアクセス可能なままになります。

アプリ画面の上部にあるのが「アクションバー」でここには、以下のようなパーツがならびます(写真12)。

• ハンバーガーアイコンまたはアプリアイコン
• View Control - ビューコントロール
• Action Buttons - アクションボタン
• Action Overflow - アクションオーバーフロー

アクションバーの左端は、アプリのアイコンまたは、ハンバーガーアイコン(短い横線が3つ縦に並んだアイコン)です。これはナビゲーションドロアーを呼び出すボタンになっています。その隣にあるのがビューコントロールですが、コンテンツ領域に表示している「場所」を表示するだけの文字列になっていることも少なくありません。ビューコントロールは、本来、タップするとリストが開く「ドロップダウンリストボックス」なのですが、ナビゲーションドロアーと機能が重複するためか、多くのアプリでは、ナビゲーションドロアーで選択した「場所」たとえば、Inboxならば受信トレーやフォルダなど、Playストアなら「アプリ」「ゲーム」などのカテゴリ表示になります。

アクションバーの右側は、「アクションボタン」で、ここには機能を直接実行するボタンが並びます。ただし、ここに並べることができるボタンの数は限られていて、解像度により、数が変わってきます。表示できないボタンがある場合には、アクションバーの右端に点が縦に3つ並んだ「アクションオーバーフロー」ボタンが表示され、これをタップすることで、はみ出したアクションボタンをメニューとして選択できるようになります。

また、アクションバーは、複数の領域に分割することができ、分割すると多くのアクションボタンを並べることができるようになります(写真13)。分割は、たとえば、タブで画面を切り替えるような方式のアプリでも利用されており、タブは、アクションバーのすぐ下に並びます。また、コンテンツ領域の下(ナビゲーションバーの上)に「ボトムバー(Bottom Bar)」を配置することもでき、ここにアクションボタンを配置できます。なお、分割された場合、元のアクションバーを「メインアクションバー」、タブが置かれる場所を「トップバー」ということがあります。

Lollipopの画面とアプリ画面の構造はこんな感じです。これで少なくとも「画面の上にあるヤツ」とか「下にあるアレ」といった表現はしないで済むはずです。

本稿は、2015年2月26日にAndorid情報のWeb専門誌「AndroWire」に掲載した記事を再構成したものです。