アプリのモックやワイヤーフレームを作る時によく「文字サイズは...」「色は...」「マージンは...」というレビューバックがデザイナー間で発生します。今回はそんなレビューバックに悩んでいるデザイナー初心者向けにiOS、AndroidのDesignガイドラインについて解説していきます。iOSとAndroidの印象の違いiOSiOS7より従来の質感のあるものから全体的に平面的なものになった。非常に細微で知覚できるかどうかのラインでの陰影しかない。色を極力使わずにモノトーンをベースとしたデザインを用いる。ポップアップやテーブルにすりガラスのような効果が見受けられる。タブバーは画面最下部に設置される。Android平面的でフラットではあるが、オブジェクトの前後感を陰影の加減で表現している。オブジェクトに陰影での質感を残したままフラットに寄せてある。彩度が高めの色使いをすることで視認性を向上させている。上部にタブバーを設置することが多いため、もっともよく使うと予想される。メニューが右下にポップアップで設置されることがある。左上に戻るボタン、右上にメニューが設置されることが多い。※MHT調べ（2019/02/21）上記のように、同じスマートフォンアプリでもここまでイメージが違ったりすることがあるということがわかりました。その中でも、テキストサイズなどでも細かな規定があります。それでは、iOSとAndroidの細かい箇所の規定を比較しながら見てみましょう。文字についてiOSiOS側でもっとも重要視しているものは可読性(読みやすさ)最小サイズは欧文、和文共に11pt色は前景色と背景色の輝度を測り【4.5:1】以上の比率にするそれ以外は細かく指定がされていません。iOS7からダイナミックタイプという自動的に文字のレイアウトを調節してくれるシステムが導入され、常に読みやすい表示を重視しています。また、ユーザーによってテキストの大きさを調節できたり、デザイン思考（ユーザーが本当に悩んでいることは何か）を用いてルールが定められています。AndroidiOSと違い、Android側では具体的なガイドラインが設定されています。文字の最小サイズ欧文…12sp和文…13sp見出しのサイズ13pt〜15pt…のように細かい指定がある。行長欧文…60字以内和文…30字以内字間文字が小さいほど広く、大きいほど狭くする。細かい数値の指定あり。書体欧文はRobot、日本語はNoteを使用。色白背景の場合、見出しとキャプションは黒54%その他は87%の二種類を使い分ける。ボタンについてiOSサイズタップ可能なコントロール部品には、4444pt(8888px)の領域を与える。物理的には7mmのサイズを保つ。形アウトラインも背景もないボタンを活用する。UXに沿い操作を促すようなラベルによって操作可能であることを示す。装飾立体感を出しすぎると「重い」UI要素になり中身に目がいかない。メインを立てるUIを意識し、UIはあくまでも補助的に捉える。マージン細かい設定の記載はなし。ラベル動詞や動詞句を使って、ボタンを押した際のアクションを記述する。すべての単語は大文字で始め簡潔な文言で示す。配置取り返しのつくボタンは左側に、取り返しのつかないボタンは右側に置く。Androidサイズ64dp36dp(12872px)必要。タッチ範囲は48dp48dpでなければならない。48dp48dp=96*96px：物理的には9mmのサイズ形ラベルのみのフラットボタン・長方形のライズドボタン・正円のフローティングアクションボタンを使い分ける。装飾単色でベタ塗り。ボタンの重要度に従い階層があり距離感を陰影のグラデーションによって表現するマージン隣接するボタン同士のマージンは8dp(16px)空ける。ラベル文言に関する記述はなし。(2017/4/6)欧文の場合、文字は全て大文字にする。配置否定アクションは肯定的なアクションの左側に配置する。取り返しのつくボタンは右側に、取り返しのつかないボタンは左側に置く。配色についてiOS原則対話型要素(特に重要である部分)と、それ以外を同じ色にしない。色に意味がある場合を除いて使いすぎないこと。コントラスト前景色と背景色の輝度を測定し、「4.5:1」以上の比にする。明確な差をつける。色弱者に配慮する色弱者の多くは赤と緑をうまく識別できない。ほかの判断要素を用意するなどの対処が望ましい。Android原則調和することを前提として設計されたカラーパレットの中からプライマリーカラーとセンダリーカラーの二色を選び、さらにその各色から三色そうを選び使用を制限する。プライマリーカラー…原色。赤・黄・青など。セカンダリーカラー…原色を二色選んで混ぜてできる色。紫・緑・橙など。コントラストプライマリーカラーの上にセカンダリーカラーを配置する場合、十分なコントラスト比を確保すること。アイコンについてiOS形ディティールを省略しできる限りシンプルな形にする。オブジェクトの大きさや部位の大きさなどに統一感を持たせる。2px~3pxのストロークを使用する。色選択時と非選択時の二種類を用意する。選択時のアイコンは、形によって適宜視認性を重視した塗り方を選択する。 例…線の細いものは外部に任意の形で塗り足しをする・線を太くするなど。モチーフユーザーが意味を理解しやすいような身近で普遍的な対象を選択する。サイズツールバー及びナビゲーションバーのアイコンは約4444px。タブバーのアイコンは約5050px。Android形正方形・円・長方形をベースにした形にする。輪郭が複雑なものは使用を避ける。立体的なオブジェクトは使用しない。幾何学的。色モノクロの場合、黒背景の場合には白100%。(非アクティブは30%)白背景の場合は黒54%。(非アクティブは26%)モチーフ要点のみを抑えた最低限の端的な表現にする。無機物に人間らしさを付与しない。サイズアイコン自体のサイズは24dp。タッチエリアは48dp。その他iOSイメージ細かい設定に関する記載はなし(2017/4/6)レイアウト重要な項目を画面の上方に配置する。書字方向は左から右であれば左寄りに配置する。全体を把握しやすいようまとまりごとに揃えることや階層分けをする。ライティングターゲットとしているユーザーの理解しやすい適切な言葉選びをする。Androidイメージ目的を意識した適切かつより具体的な画像を選択するべき。レイアウト全てのオブジェクトは８ｄｐ正方形のベースライングリッドに揃える。ライティング簡潔にそのまま表現する。大げさにしたり不必要なものは書かない。ユーザーの知りたい情報を的確に告げる。読み手に対する二人称は「あなた」を使用する。カジュアルで会話的な表現を用いるが、不適切な俗語は避ける。まとめiOSやAndroidではプログラミング言語や開発ツールが違うのもそうですが、ターゲット層が大きく違うことがわかったかと思います。AndroidのスマートフォンはiPhoneシリーズと比べて比較的安価で手に入るため、Androidユーザーはブランドに対してロイヤリティが低い傾向が見られました。しかし、iOSよりAndroidユーザーの方が多く、マーケットシェア（市場占有率）は高いと言えます。一方、iOSユーザーには所得が高い傾向が見られます。それによってデザインの原則に違いがあったりするのも納得できます。下記にiOSとAndroidのガイドラインを添付しておきますので、そちらも合わせて読んでみてください。iOShttps://developer.apple.com/jp/design/human-interface-guidelines/Android%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fm3.material.io%22%20data-iframely-url%3D%22%2F%2Fiframely.net%2FCHiT15o%3Fcard%3Dsmall%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%20src%3D%22%2F%2Fiframely.net%2Fembed.js%22%3E%3C%2Fscript%3E