GoogleとAppleのガイドラインを比較してみた
今回はアプリのデザインをする上で、スタンダードなデザインルールを学ぶために、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。
1. 文字
1-1.最小文字サイズ
Google: 欧文 12px、和文 13px。
Apple: 11px。
Appleが11pxなのに対して、Googleは、欧文 12px、和文 13pxとやや大きめです。双方を判断し、欧文は11pt相当、和文は13pt相当を最小サイズとするのが良いと思われます。
1-2.行長（1行に入れる文字数）
Google: 本文 60文字まで、見出し 40文字まで。
Apple: 指定なし。
Appleに指定はなく、Googleには上記指定がありますが、長すぎる行は、終わりから次の行まで目で追う距離が長くなってしまいストレスがかかってしまいます。また、行長が適当でない文章にならないよう調整し、ユーザーにストレスを与えないよう工夫が必要になります。
1-3.見出し
Google:12pt←14pt→16pt（基準）→20pt→24pt→34pt→48pt→60pt→96pt。
Apple: 指定なし。
Googleのガイドラインはあくまでガイドラインであるため、厳密に対応する必要はないでしょう。ただ、文字サイズの違いで見出しのレベルを表現しなければならなくなるので、その参考値にGoogleが規定している文字サイズを捉えておくと良いと思います。
1-4.字間（トラッキング）
Google: 小さいほど広く、大きいほど狭く。
Apple:小さいほど広く、大きいほど狭く。
Apple、Googleともに、文字が小さいほど字間を広くし、大きいほど狭くすべきと書かれています。見出しなどの大きい文字は、字間を詰め、本文や注釈などの文字は字間を広げると読みやすくなるようです。
1-5.書体
Google: 欧文は:roboto、和文:noto（どちらもGoogle font）。
Apple: 1種類使用、スタイル、ウェイトも少数に止める
Appleでは書体を一つに絞る、Googleでは決められた書体を使う、と規定されています。書体数、ウエイト数はできるだけ少なくする、ということを覚えておくと良いでしょう。
2. ボタン
2-1.サイズ
Google: タップ範囲48px以上（物理サイズ9mm）。
Apple:タップ範囲44px以上（物理サイズ7mm）。
物理サイズは、実際に表示される領域のサイズです。
統計によると7mmのボタンのタップミスは 100回に1回、9mmのボタンのタップミスは 200回に1回とされているそうです。
44pxから48pxにボタンサイズを広げるだけで、タップミスは半減されるそう…
2-2.形
Google: ラベルのみ 長方形 正円の形を使い分ける。
Apple: 背景、境界なし ラベルによって対話型要素を示す。
Appleはテキストのみの表現としていますが、ラベルのみ 長方形 正円の形など3種類の形状を設定しているGoogleのガイドラインの方がより現実的かと思います。
2-3.装飾
Google: 単色のベタ塗りにシャドーを使用。
Apple: グラデーションやドロップシャドウなどの立体表現を非推奨。
Appleでは立体表現を非推奨とし、Googleでは立体表現の活用を推奨している点で少し異なっています。シンプルにさせつつも、立体表現も活用し、リンクをリンクと認識できるルールをサイト内に作ると良いのかなと思いました。
2-4.余白
Google: ボタン同士は16px以上離す。
Apple: 指定なし。
Googleのみ、隣接するボタン同士は16px相当以上空けるという規定があります。
2-5.配置
Google: 否定のアクションは肯定的なアクションの左。
Apple: 肯定のアクションは右 否定のアクションは左。ただし否定を促すアクションは肯定が左（逆配置になる）。
否定のアクションは左というのは共通していますが、Appleの場合は否定のアクションを促したい場合は、否定のボタンを右に配置するとしています。
ただ、基本的にはGoogleの事例が一般化されている印象です。
3. 配色
3-1.配色のルール
Google: Googleではプライマリカラーとセカンダリカラーの2色を選び、さらにその各色から3色相を選ぶ。
Apple: 色に意味がある場合を除き使いすぎない。
Googleは2色を基本として制限するのに対し、Appleは色を使用する意味を求めていました。
3-2.コントラスト
Google: コントラストの確保。
Apple: 前景色と背景色の輝度を4.5 : 1以上。
Appleには数値化された明確な規定があり、Googleには「コントラストを確保する」という緩やかな記述がありましたが、ここではAppleの記述を参考にすると良いと思いました。
4. アイコン
4-1.形
Google: 正方形、円、長方形をベースにし、リアルなシルエットなど複雑な形は使用しない。立体的表現は使用しない。
Apple: シンプルで無駄がない形にし、大きさ、描画の細かさ、重みに統一感を持たせる。また2-3pxのストローク（線）を使用すると良い。
Appleではストロークについて、Googleではベースの形状にまで言及していますが、両社ともにシンプルであるべきと規定されています。
アイコンはGoogle、Appleともアイコンフォントを配布しているため、下記URLから選ぶと間違いがなさそうです。
4-2.色
Google: 非アクティブの場合は薄くする。
Apple: 選択時、非選択時の2種類を用意する。
両者とも選択時と非選択時の色の塗り方に関する言及があります。基本的には単色。非選択時は塗り方とコントラストも調整すると良いと思います。
4-3.モチーフ
Google: ミニマルな表現で無生物に人間らしさを与えない。
Apple: ユーザが認識しやすい普遍性を用いる。
メールは封筒、電話は受話器など、現代では使用する機会が少なくても、共通認識ができているモチーフを使用することが推奨されています。
5. レイアウト
Google: ベースライングリッドに合わせ、8で割り切れる数字を使うと端数が出ない。
Apple: 重要な項目を左上にし、グループ分け、階層分けする。
レイアウトに関しては、Googleはグリッド、Appleはガイドラインに揃えることがルール化されていました。Googleでは8の倍数でデザインを作成するといったルールで統一されているのは良いなと思いました。
まとめ
GoogleとAppleのデザインガイドラインを比較してみて、両者に共通する部分、どちらかが優れた部分を発見することでができました。その上で今後、iOS・Android ともに違和感のないアプリを作れるよう意識していこうと思いました。
参考URL
この記事が気に入ったらサポートをしてみませんか？