Material Designを用いたアプリ設計(1)

前回は「Material Designの基本的な考え方」について説明しましたが、今回はアプリを開発する際に「どうMaterial Designを活用すべきか」について解説します。

アプリの開発フローは企業によって異なりますが、以下のような流れが一般的かと思います。

もちろんチーム単位の開発は順番通り、かつ1回で終了できないでしょう。例えば、4番以降のデザインの詳細を詰める段階で、2番の画面レイアウトの見直しを迫られるケースも存在するわけです。開発プロセスに用いる「DesignSprint」は第3回以降に改めて解説しますが、今回はアプリ開発の最初のステップに相当する1番～4番について解説します。

アプリの構成で意識すべき3つのポイント

上の画像のようなアプリを開発する場合、いきなり「デザインする」のではなく、下記の3つのポイントを意識してアプリの構成を検討することが重要です。

• 適切なマージン(余白)を設けたレイアウトデザイン
• 画面にどのようなコンポーネントが必要か
• 画面を構成する「色」

Material DesignのWebサイトでは、対応アプリを開発する上で必要となるさまざまなリソースを提供しています。アプリを開発する際はぜひこのサイトを参考にしてみてください。

適切なマージン(余白)を設けたレイアウトデザイン

前回も触れましたが、Material Designは「グリッドシステム」を利用してユーザーがコンテンツに集中できるようにデザインしています。システムを利用する上で、「Whitepaper」というイラストレーター形式のテンプレートがWebサイトからダウンロードできるので、アプリの構成を検討する際はこちらのテンプレートを利用してください。テンプレートは、モバイル用とタブレット用、デスクトップ用の3種類を用意しています。

これらのテンプレートを利用することで、グリッドやマージンを自分でイチから設定する手間が省けます。

「どんなコンポーネントが必要か」を検討しよう

ベースとなる「利用したいテンプレート」を選択したら、次に「どのようなコンポーネントが画面に必要か」を考えていきます。

一例ですが、上記の画面では、

1 : Toolbars (ツールバー) 2 : Tabs (タブ) 3 : Navigation drawer (ナビゲーション ドロワー) 4 : Lists (リスト) 5 : Floating Action Button (FAB : フローティングアクションボタン)

という4つのコンポーネントで構成されています。これらのコンポーネントは、それぞれ異なる奥行きを持っています。例えばLists のサーフェスよりも、Toolbars や Floating Action Buttonの方がZ軸上高い位置に配置されており、より大きな影があります。

各コンポーネントのZ軸の高さの数値を参照する場合は、こちらのWebページで各コンポーネント毎に推奨している高さの一覧があるので、アプリの構成を考える際には参考にしてください。

モバイルアプリのレイアウト

モバイルアプリにはさまざまなレイアウトが存在しますが、下の画像はその代表格となるレイアウトです。レイアウト下に記載されている名称は、その中でもよく使われるコンポーネントのものです。

ここからは、よく利用される5つのコンポーネント「Toolbars」と「Tabs」「Navigation Drawer」「Contents Area」「Button」について説明します。

1 : Toolbars

画面の上部に存在するコンポーネントが「Toolbars」です。アプリの画面名称やタブ、各種メニューを表示する領域で、ゲームを除くほとんどのアプリでToolbarsが利用されています。

Material Designでは、このコンポーネントを利用したアプリのブランディングを推奨しています。例えば第1回で取り上げた「プライマリカラー」をToolbarsのコンポーネントに適用すれば、アプリ全体の統一感を持たせることができ、企業ブランドをより強く打ち出すことができます。

また、それ以外でも、画像を使って表現する事も有効です。Toolbars自体は高さを自由に持つ事が可能なので、画像やコンテンツに合わせた高さにする事を推奨します。

2 : Tabs

Tabsは、Webサイトの上部に位置する「グローバルメニュー」と同じような機能として、アプリ内の各機能画面へ遷移する際に使います。モバイルアプリの中では使用頻度がもっとも高いメニューといえます。

ユーザビリティの観点からToolbars内に設置し、各タブをタッチするか、画面を横にスワイプすることで画面が遷移します。上の画像はテキストによるTabsの例ですが、下の画像のように、アイコンを用いた表現も可能です。

3 : Navigation drawer (ナビゲーション ドロワー)

ToolbarsやTabsは常時画面に表示しておきたいメニューを設定しますが、「ログアウト」や「設定」といったユーザーがあまり利用することのないメニューに関しては、Navigation Drawer内に配置する事ができます。同時にアカウント切り替え機能を用意して、ユーザーのプロフィール写真やアカウント名称を表示することも可能です。

なお、Navigation Drawerは画面の左端に格納されており、Toolbar内に設置したNavigation Menuをタップするか、画面の左端からスワイプするジェスチャーによって表示することが一般的です。

4 : Contents Area

コンテンツエリアは実際にコンテンツが表示される領域になります。このサンプル画面は「サムネイルアイコン」と「タイトル」「差出人」「本文」で構成されています。

コンテンツを見やすくする為には、第1回で説明したグリッドシステムに沿った形でマージンを取ることが重要です。例えば、画面の両端から16dpずつをマージンとするほか、テキスト要素も左端から72dpのスペースを開けています。これらの数値は、全体の8dpのグリッドシステムがベースになっています。

また、コンテンツをリスト形式で表示する場合はユーザービリティの観点から、均等にコンテンツを配置することが重要になります。

5 : ボタン

サンプルアプリの画像で右下に円形のボタンが配置されていましたが、このボタンを「Floating Action Button」と呼びます。さまざまなコンポーネントがある中でも、このボタンは「最も重要なひとつのアクション」を規定するものです。

重要なアクションと言われても一言ではわかりにくいかもしれませんが、例えば、Eメールに類するサービスであれば「鉛筆のアイコン」を、Eコマース系のサービスで商品をお気に入り登録することが重要であれば「ハートのアイコン」をFloating Action Buttonの中に設置します。

もちろん、ほかにも規定したいボタンはあるでしょう。そこで用意したものが「Flat Button」と「Raised Button」です。下の画像のボタンは、左から「Floating Action Button」と「Raised Button」「Flat Button」です。

一番汎用的に使うもの、例えばダイアログ内の「AGREE」や「DISAGREE」などは、Flat Buttonで設定します。Flat Buttonについては、Z軸の高さが通常のサーフェスと同じボタンになりますので、余白を設けて利用しましょう。

Flat Button よりも、より重要度が高いボタンは「Raised Button」として設置します。これは「Flat Button」にはない「影」が付きますから、より明示的にボタンを表現できます。ただし、ひとつの画面内にRaised Buttonを多用するとボタンだらけの画面になってしまい、ユーザビリティを下げる一つの要因となります。

実際に画面のデザインを行うときは、Flat Buttonのみでデザインを構成し、その中で重要なボタンをRaised Button、最も重要なボタンをFloating Action Buttonという考え方を意識して仕様を決めましょう。

最後に決める「色の構成」

アプリのコンポーネントをどう構成するか決まったら、最後に「どのようにアプリを配色するか」を検討するフェーズに入ります。アプリのブランディングを考える上で配色は非常に重要な要素となります。

ブランドのメインカラーは、すでに確立しているか、あるいはアプリを開発する前に決めていると思います。しかし、アクセントカラーについて決めているケースは少ないはずです。

Material DesignのWebサイトでは、カラーパレットはもちろん、PhotoshopやIllustratorで使えるカラースイッチャーも提供していますので、デザインされる際にPhotoshopやIllustratorを使う場合は、スイッチャーをインストールしておけばMaterial Colorを便利に使えます。

今回は、アプリを作成する際にベースとなる、レイアウト構成時の留意すべき点と、そこに活用できるリソースについて紹介しました。次回は、アイコンやアニメーション等の細部をデザインする上で、いかにMaterial Designを適用できるかについて説明していきます。