アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付）
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します）
スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これはアプリ」「これはWebサイト」という区別はしていません。そのため、一般的なアプリとWebサイトの振る舞いが異なると、ユーザを戸惑わせる原因になりえます。
AppleとGoogleのガイドラインを比較する目的は、両者に共通する部分、いずれかが優れた部分を抜き出し、スマートフォン向けのWebデザインにおけるセオリーを学習するためです。
以下は、主な比較項目をまとめたスライドです。詳細はスライドを見ていただくとして、要点のみをこのエントリーでは記載しておきます。
1. 文字
1-1. 最小サイズ
欧文＝11pt、和文＝13pt
Apple、Googleともに文字の最小サイズに関する具体的な指定があります。双方を判断し、欧文は11pt相当、和文は13pt相当を最小サイズとするのが良いでしょう。
1-2. 見出し
13pt←15pt（基準）→17pt→21pt→24pt→34pt→45pt→56pt→112ptでサイズ変化
Appleには指定がありませんが、Googleでは、 欧文・和文ごとに、サイズ、ウエイト、行間についてかなり細かく指定されています。Googleのガイドラインはあくまでマテリアル・デザインのためのガイドラインであるため、厳密に踏襲する必要はないでしょう。ただ、デザインをシンプルにするためには、見出しの装飾を極力抑える必要があり、そうなると、文字サイズの違いで見出しレベルを表現しなければならなくなります。その参考値として、Googleが規定している文字サイズを捉えておくとよいのではないでしょうか。
1-3. 行長
欧文＝60字以内、和文＝30字以内
Appleに指定はありませんが、Googleには欧文のみ、本文は60文字以内、見出しは40文字以内で折り返すという指定があります。これを参考とし、欧文では60字以内、和文は30字以内を行送りの基準と捉えるといいでしょう。
1-4. 字間
大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）
Apple、Googleともに、文字が小さいほど字間を広くし、大きいほど狭くすべきと書かれています。Googleではトラッキングの値も明確にされています。こちらも厳密に踏襲する必要はありませんが、大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）、という定石があると捉えておくとよいでしょう。
1-5. 書体
書体の種類、ウエイトはできるだけ少なく
Appleでは書体を一つに絞る、Googleでは決められた書体を使う、と規定されています。書体はCIやブランド戦略が優先されるべきであり、やはり厳密に踏襲する必要はありません。ただし、書体数、ウエイト数はできるだけ少なくする、というのがセオリーであることは、念頭に置いておくとよいでしょう。
1-6. 色
文字色と背景色の輝度を「4.5:1」以上に
Apple、Googleともに、文字色と背景色のコントラストに関する具体的な規定があります。Googleは色の指定まで行っていますが、これを遵守するとブランドに合わせた配色ができなくなります。ここではAppleのガイドラインを優先し、輝度を「4.5:1」以上の比にする、と捉えておくと良いでしょう。
2. ボタン
2-1. サイズ
横96px×縦96px以上（物理サイズ9mm×9mm以上）
Apple、Googleともに、ピクセル数や物理サイズの規定があります。やや大きめのGoogleを参考値とするのがよいでしょう。
2-2. 形
一般的な形状で、種類は3つ以内に
Apple、Googleともに、形状に関する記述があります。Appleはテキストのみの表現としていますが、これは難しい制約でしょう。フラット（文字のみ）、ライズド（長方形）、フローティングアクション（円形）と3種類の形状を設定しているGoogleのガイドラインの方がより現実的といえます。厳密に守る必要はありませんが、一般的な形状を採用する、種類は3つ以内に押さえる、と捉えておくとよいでしょう。
2-3. 装飾
立体表現を用い、最低限の装飾を施す
Appleではグラデーションやドロップシャドウなどの立体表現を非推奨とし、Googleでは立体表現の活用を推奨しているのが対照的です。フラットデザインのミニマリズムは継承しながら、より分かりやすいUIを規定したのがマテリアル・デザインという歴史に習うわけではありませんが、やはりGoogleのガイドラインの方が現実的でしょう。装飾過多になるは避けながらも、立体表現も活用し、リンクをリンクと認識できるルールをサイト内に敷設すべきです。
2-4. マージン
ボタン同士は16px以上離す
Googleのみ、隣接するボタン同士は16px相当以上空ける、という規定があります。基本的にはこれを参考値として捉えるとよいでしょう。
2-5. ラベル
シンプルな動詞を用いる
ボタンのラベル（文字）について、Appleのみがシンプルな動詞を用いるべきという記述があります。Webサイトもこれに準じるのが良いでしょう。
2-6. 配置
目的を達成するボタンを右、行動を取り消すボタンを左に
行動を選択させるボタンを左右のどちらに配置するか、ということについて、Appleでは破壊的かどうか、Googleでは肯定的かどうかを基準としています。UXに従って考えるべきで、通り一辺倒のルール化は禁物ですが、多くの場合、目的を達成するボタン（「確認」、「実行」など）を右側、行動を取り消すボタン（「キャンセル」「クリア」など）を左側に置くのが基本と捉えておくのがよいでしょう。
3. 配色
3-1. 原則
色を多用せず、基本色は2色以内に。機能上の必然性に従いルール化
Appleでは、色は対話の手段であり使いすぎてはいけない、と記述されています。Googleではプライマリカラーとセカンダリカラーの2色を選び、さらにその各色から3色相を選ぶ、という具体的な規定がなされています。色もブランド戦略の影響を受けるものであり、何も考えずAppleやGoogleに従うべきではありませんが、色は機能を補完するもの、ユーザフレンドリーなUIにはシンプルな配色が望ましい、という基本は押さえておくべきでしょう。
3-2. コントラスト
前景色と背景色の輝度を4.5 : 1以上に
Appleには数値化された明確な規定があり、Googleには「コントラストを確保する」という緩やかな記述があります。様々な光量下での閲覧が想定されるスマートフォン向けのWebサイトでは、コントラストがユーザビリティに大きな影響を与える可能性があります。ここではより厳密なAppleを踏襲し、前景色と背景色の輝度比を「4.5 : 1」以上に保つと考えておきましょう。
4. アイコン
4-1. 形
シンプルで分かりやすいものに
両社ともにシンプルであるべきと規定されています。Appleではストロークについて、Googleではベースの形状にまで言及していますが、シンプルという大きな指針のみ、参考にするのが良いでしょう。
4-2. 色
基本は単色。非選択時は塗り方とコントラストも調整
Appleでは、選択時と非選択時の色の塗り方に関する言及があります。Googleでは、色の濃度を%で指定しています。双方とも厳密に守る必要はありませんが、単色が基本であるというのは、意識しておくとよいでしょう。
4-3. モチーフ
誰もが分かるモチーフに
Googleの、無生物に人間らしさを与えない、という記述が特徴的ですが、これに従うべきかは議論の余地があるでしょう。Appleが規定している「ユーザが認識しやすい普遍性」というのは順守すべき基準になりえるでしょう。独創的なアイコンはNGということです。
4-4. サイズ
アイコン本体は24 x 24 px～50 x 50 pxの間、タッチエリアは44 x 44 px以上
Apple、Googleともにサイズに関する規定があります。両者を統合し、アイコン本体は24 x 24 px～50 x 50 pxの間とし、タッチエリアは44 x 44 pxを最小値とするのがよいでしょう。
5. その他
5-1. イメージ
必然性のある自然で具体的な画像
Googleのみ、画像は飾りではなくツールである、という考え方が述べられています。厳密や制約事項はありませんが、目的に対して明確に機能する自然で具体的な画像であるべきという考え方は、一つの指針にできるでしょう。
5-2. レイアウト
左上が起点。グルーピングと階層化を活用。8がグリッドの最小値
Apple、Googleともに、それぞれ異なる視点からレイアウトに関する言及があります。双方を統合して参考にするのが良いでしょう。
5-3. ライティング
ユーザの知識に合わせた簡潔な表現
Appleでは術後を用い、Googleでは簡潔さを満たすいくつかの基準が示されています。いずれも普遍的なことであり、UIに載せるコピーの参考にできるでしょう。