モバイルWebのUIデザインことはじめ : 第4回 プラットフォーム別のデザイン特性ーAndroidの場合
モバイルデバイスには、PCと同じくOSがあります。
AppleのiPhoneは「iOS」を搭載していますし、その他の端末は殆ど「Android」というGoogleが開発したOSを搭載していますね。日本では未発表ながらMicrosoftのWindowsもモバイル向けOSがあります。
各プラットフォーム向けのネイティブアプリ （アプリストアから入手するタイプのアプリ） は、それぞれのOSの操作に比べて違和感のないUIを持たせることになっています。これは、ユーザビリティを上げることが目的です。
違和感のないUIのつくりかたは、それぞれのOS開発元が公開している「デザインガイドライン」で規定されています。
こういうときガイドラインを参照しよう
Webサイトの場合、複数のOS上で表示されることから、特定のOSの操作感にデザインを合わせる必要はありません。
とはいえ、OSごとの特徴を知っておかないとデザインが難しいことがあります。例えば、以下のような場合です。
- 特定のデバイスからのアクセスが多いモバイルWeb
- ネイティブアプリに組み込まれているWebページ
- 制作依頼元から特に指定があった場合
1は、特定のOSにターゲティングしているゲームの紹介ページによくあります。iOS専用のゲーム紹介なら、iOSデバイスからのアクセスが圧倒的に多く、そのためにOSのデザインと共通点を持たせておくことでシームレスに使えると考えられるからです。
2も1と同じ理由です。
3は明確なメリットが無くても好みの問題としてそのような指示を受ける場合です。それでもデザイナーとしては指示されたらすぐに対応できることが求められるでしょう。
では、それぞれのOSが規定しているデザインガイドラインを説明しましょう。まずはAndroidです。
Androidのデザインガイドライン
Androidは、バージョン4.0からUIの色やレイアウトグリッドにガイドラインが設けられています。Android Designのページにはネイティブアプリの画面設計で参考にすべき内容が集められています。
そこから、Webサイトの画面設計に応用できる項目をピックアップします。先ずはグリッドに関するルールです。
Metrics and Grids
Androidには「48dipリズム」というグリッドサイズの規定があります。基本的な余白の最小単位は8dipで、その倍数にしたがって余白やリストの高さを決めます。
なお、48dipは物理的サイズが9mm程度になり、タップの誤操作が少ないサイズです。
dip (Density-independent pixels) という単位はネイティブアプリのサイズ指定方法で、異なる解像度の端末でも見た目の大きさを統一できる仕組みです。
Androidアプリのモックアップを作成するときはxhdpiという解像度をメインターゲットとしますが、その場合8dipは16pxに換算されます。よって、xhdpiのディスプレイサイズ（横720px換算）のモックアップ画面で16pxを最小単位としたグリッド設計が基本になります。
Webページのモックアップでも16pxを目安としてレイアウトを設定することで操作しやすい画面が作れるでしょう。
Typography
Androidでは、欧文の場合、Roboto Fontというオープンソースのフォントファミリーが標準として指定されています。Helvetica neueによく似たデザインで、親しみやすいシンプルなフォントです。
日本語にはNOTO Fontというこちらもオープンなフォントを利用できます。日本語だけでなく繁体字中国語、簡体字中国語、韓国語など2バイト圏の言語の多くをカバーしているフォントです。
Roboto Fontとの調和も考えられています。この2つのフォントを使用すると、Androidらしさがより強調できます。
Icongraphy
AndroidのアイコンはiOS同様フラットさが特徴です。太めのストロークに直線的なフォルムを持ちます。塗りと抜きの割合が半々の印象を持つ、視認性を重視したデザインです。
アイコンの形状までGoogleが指定しているわけではありませんがAndroidのアイコンとして共通性を持つデザインのリソースがネット上でたくさん入手できます。
そのリソースを使うか、それらを参考にオリジナルを作成すれば、手軽にAndroidっぽいアイコンを揃えられます。
下はアイコンリソースのひとつicon8です。
Material Desgin
Androidは次期バージョンからデザインガイドラインを刷新する予定です。新しいデザインガイドはMaterial Designと呼ばれ、紙をモチーフにしたUIデザインの実装規範のプレビュー版がすでに公開されています。
Material Designは、画面設計をこうしなさい。という指示書ではありません。サイトに書いてあるのは「こういう考えで作りましたよ」というデザイン哲学の解説だけです。
Plrincipleの中の「Bold（太く）,graphic（図で）,intentional（意図をわかりやすく）」などはかなり抽象的で、どう参考にしたらよいかわかりにくいほどですね。
Material Designの面白いところはそれが次期バージョンのSDKと連動している点です。プレビュー版のSDKを使うと、Material DesignのインタラクションやUIスタイルがすぐに実装できるように用意されています。
なお、ガイドラインのサイトから、イラストレーター形式でモックアップ用リソースが公開されています。
このリソースではモックの画面幅が320pxになっていますが、xhdpiの解像度をターゲットにする場合は、縦横比を固定した状態で幅を720pxにリサイズ（225%増）して使うと良いでしょう。
polymer
Material Designは、PolymerというWEBのフロントエンド構築用フレームワークにも適用されています。PolymerはjQueryとかBootstrapといったフレームワークと同じように、インタラクションとスタイルを伴ったページが簡単に実装できる仕組みです。
ChromeやSafariのようなモダンなブラウザで動作します。アプリと同等のインタラクション効果が簡単に実現できることから数あるフレームワークのなかの有効な選択肢となるかもしれません。
次回はiOSのスタイルについて解説します。