Apple, Googleのガイドラインをざっくりまとめてみました
Apple iOS Human Interface
Google Material Design Guideline
この双方について勉強してみた覚書です。
MFIに対応するため、ガイドラインを熟知し、それに沿ったコンテンツ作りは重要です。
文字
最小サイズ
Apple 11pt
Google 欧文12sp 和文13sp
見出し
Apple 特に指定なし
Google マテリアルデ サインのためのガイドラインあり
基準が15pt
17pt → 21pt → 24pt → 34pt → 45pt → 56pt → 112pt
小さい方は13pt
行長
Apple 特に指定なし
Google 本文60文字・見出し40文字まで（欧文）
行長とは、一行の長さのことです。和文は２倍と捉え、本文30文字・見出し20文字が適当でしょう。
書体
Apple 全体を通じて一種類、スタイル・ウェイトも少数に
Google 欧文はRoboto 和文はNoto
デザインによっては柔軟に対応することとなります。
色
Apple 文字色と背景色の輝度比は 4.5 : 1 以上にする
Google 輝度を測定するコントラスト比計測器を使用する。
黒のパーセンテージで、小さい文字と大きい文字が視覚的に同じ見え方になるよう調整されている。
ただ、デサインによってはこの基準に添えない場合があります。
ボタン
最小サイズ
Apple 44×44pt (88×88px）で、タップ可能な範囲が7mmになる（最小）
Google サイズは 128 × 72px 必要。タップ範囲は 96 × 96px 必要で、実際の大きさは9mm（最小）
形
Apple 44×44pt (88×88px）境界なし背景なし。内容によって操作を指示。
Google フラットボタン・ライズドボタン・フローティングアクションボタンの３つを使い分ける
フラットボタンとは、文字のみのボタン。
ライズドボタン とは、長方形のボタン。
フローティングアクションとは、円形のボタン。
種類は3つ以内に抑えるのが基本。
装飾
Apple UIは補助的役割にとどめる
Google 単色インクによるベタ塗り
グラデーションやシャドウを多用すると重く感じられてしまい、押されるボタンにならないので、最低限にとどめる。シャドウを落とす時は物理の法則に基づいてつける。
また、リンクはリンクと認識できるようにする方が親切。
マージン
Apple 特に指定なし
Google 隣接する場合、ボタン同士は16pxあける
ラベル
Apple ボタンを押したときのアクションを動詞で記述。単語は大文字から始める。長すぎるタイトルはNG。
Google 欧文の場合、ラベルの文字は全て大文字に。
配置
Apple 破壊的かどうかが基準。
Google 否定的なアクションは左に配置。肯定的アクションは右側に。
行動を選択させるボタンで左右どちらに配置するか？という点は、多くの場合、目的を達成するボタンは右に、行動を取り消すボタンは左側に置くのが基本。
配色
原則
Apple 色に意味がある場合を除き、使いすぎない。
Google カラーパレットの中から2色、その各色から3色相まで。
プライマリーカラーとセカンダリーカラーを選び、その各色から暗い色と明るい色を選び、それ以外は使わない原則。
ブランド戦略がある場合はこの限りではないが、ユーザーフレンドリーなUIにはシンプルな配色が望ましい。
コントラスト
Apple 輝度 4.5 : 1 にする
Google 十分なコントラストを確保する
アイコン
形
Apple シンプルで無駄がない形。
Google 正方形・円・長方形の形状をベースに幾何学的に。
シンプルであるべき。複雑な形は使わない。
FontawesomeやGoogle iconなど使用。
色
Apple 選択時と非選択時の二種類用意。
Google 白背景の時は黒54%(非選択時は26%) 黒背景の時は白100%(非選択時は30%)
単色が基本で、選択されたときに色が変わってわかりやすくする。
モチーフ
Apple 普遍的な画像を用いる。
Google ミニマルな表現にする。
誰もがわかるモチーフにすることが基本。
サイズ
Apple ツールバー・ナビゲーションバー：44 × 44px タブバー：50 × 50px（最大96 × 64px）
Google アイコン自体のサイズは44 × 44px タッチエリアは 48dp
aurinko-webでは、MFIに対応すべく上記ガイドラインに沿ったデザインを心がけています。
デザインによってはこの限りではないこともありますが、ユーザーフレンドリーな、スマホに最適化したサイト制作を目標としています。
＼お問い合わせはこちらまで／