【連載】Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう [3] Material Design を利用したアプリ設計(2)｜IT Search+

前回は、Material Designを利用した画面レイアウトの決定からブランドカラーの決定まで、アプリの大枠をどのように設計するのか、解説しました。

今回はその続きとして、より細部に渡るアイコンやロゴパーツの設計、そしてアニメーションやインタラクションの設計を行う上で、いかにMaterial Designを活用するかについて、解説していきます。

ユニバーサルデザイン

アイコンやロゴについて説明する前に、まずは「ユニバーサルデザイン」の考え方を説明します。

スマートフォンの普及と共にソーシャルメディアが飛躍的な成長を遂げたことで、デベロッパーが制作したアプリが世界中のユーザーにリーチできる可能性がグッと高まりました。これはビジネスを考える上で非常に喜ばしいことですが、同時に新たな課題が生まれました。どこの国のどんな風習の人でも認識できるデザイン、それが「ユニバーサルデザイン」であり、見過ごすことのできない要件となっているのです。

日本語を理解できるユーザーに向けたサービスであれば必要ないと思われるかもしれませんが、ユニバーサルデザインの考え方は前述のように「誰もが認識できるデザイン」を意識したものです。昨今はインバウンド需要への対応として、地方に特化したアプリであっても多言語対応が進んでおり、ユニバーサルデザインの考えを取り入れることを推奨します。

そうした日本人はもちろんそして海外の人を意識したアプリを制作する上で重要なポイントが、アイコンという”ビジュアル”で機能を伝える時に、「日本特有のアイコン」になってないかどうかです。

Material Icon

Material Deisgnは900種類以上のユニバーサルデザインに基づいたアイコンを、「Material Icon」という名称で、「png」「svg」「Web フォント」の形式で公開しています(オープンソース)。

例えば、アプリで使用頻度が高い、何か新しいお知らせを表示する「通知 (notifications) 」のアイコンは、ベルを模したものが用意されています。Material Iconを使うメリットは、ユニバーサルデザインでさまざまな国や文化のユーザーにわかりやすい点、そしてデザインの工数を減らせる点があります。例えば「アプリ内で何かを探す」という機能に対しては、一般的に「虫眼鏡」のアイコンを使います。

デザイナーはMaterial Iconを利用することで、本来集中すべきプロダクトのトータルデザインやコンテンツのデザインにリソースを分配できるようになります。もちろん、印象付けたい重要なアイコンは独自のデザインで制作しつつ、重要度の低いアイコンはMaterial Iconといった使い分けで作業の効率化を目指すこともテクニックの一つです。

ただ、Material Iconには存在しないアイコンもあります。その場合はMaterial Designのガイドラインを参照してください。独自のアイコンを作りつつ、Material Iconと並べた時に違和感が無いアイコンがどうすれば作れるか、確認できます。

フォント

アプリ上で可読性を高めるためには、フォントにも気を配る必要があります。Material Designでは非英語テキストに関して、オープンソースで公開しているNoto Sans CJKフォント(ゴシック体)とNoto Serif CJK(明朝体)の利用を推奨しています。

Noto Sans CJKは、シンプルでモダンな書体であり、アプリのユーザーインタフェースや見出しによく活用されます。一方のNoto Serif CJKは、Webページや電子書籍の本文といった長文のテキストによく使われています。

インタラクション

Material Designは現実世界の原理をデジタルデバイスに最適化しています。現実世界では「ボタンを押す」「スイッチを入れる」といった動作に物理的な反応があります。一方でデジタル世界のスクリーン上では、こうした「触覚を刺激するフィードバック」を得ることが難しいのが現状です。

そこで重要になるのがタッチフィードバック(タッチした時の反応)、つまりインタラクションです。Material Designでは「Ripple effect」というエフェクトを用意しており、触れた場所を中心として、波紋のように色が変わります。ユーザーは実際に触った感触を視覚的に認知できるため、このエフェクトの利用を推奨しています。

ボタンやタブなど、ユーザーが触れることで反応する部分には、必ずこのインタラクションを追加しましょう。

アニメーション/トランジション

アニメーションは、すべてのボタンやタブといったアプリの動作に必要な機能を実装してから考えるのではなく、プロトタイプをデザインする最初のフェーズから考えておくことがおすすめです。あらかじめ動きを含めて考えておくことで、パーツに適した自然なアニメーションが作れますし、プログラミングコードも最適化できます。

また、AndroidのOSバージョンごとに切り分けて考える事もアニメーションで意識すべきポイントの一つです。

例えば Material DesignをOSの標準UIとしてサポートしているLollipop (Android 5.0)以降の端末ではアニメーションを使い、それ以前のOSバージョンの端末では、アニメーションを切るといった最適化を行います。このようにアニメーションの切り分けをOSごとに行うことで、アプリのパフォーマンスを端末ごとに最適化できるのです。

Android 用のアプリを開発する際にはAndroid Studioで、現時点におけるOSバージョンのシェアを確認できます。

例えば、公式の開発サポートライブラリがサポートしているIce Cream Sandwitch (Android 4.0)を見てみましょう。上記の画像のように、Ice Cream Sandwitch 以降で97.4%の端末をカバーできていることがわかります。

第2回から、実際にアプリをデザインするプロセスの中で「Material Designの考え方」をいかに活用できるか説明しました。次回は、実際にMaterial Designをうまく活用したアプリの事例を参考に、Material Designのメリットと、より具体的な活用方法について解説します。

著者紹介

鈴木 拓生(すずき たくお)
Developer Relations Team Program Manager @ Google

メディア系企業にて、社外のデベロッパーと恊働するプロジェクト等を担当し、 2012 年からはシリコンバレーのスタートアップやインキュベーションに対しての投資も担当。

現在は Google の Developer Relationsチームで主にDesign SprintやMaterial Design周りのコミュニケーションを担当し、デベロッパーやスタートアップのエコシステムの向上を支援