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