【怒りのUI】iOSヒューマンインターフェイスガイドラインから学ぶUI設計

こんにちは、デザイナーのスライです。
初々しい新社会人の姿が眩しいです。。。

突然ですが、Webデザイナーのみなさんに質問です。
モバイルファーストを意識していますか？

モバイルファーストと聞くけど、作業環境はPC、見るサイトもPCサイト。
何となく、ふわふわした印象を持つWebデザイナーの方は多いと思います。

今回は、そんなモバイルファーストな設計に関連することを書こうと思います。
怒りのUI 第二回目「iOSヒューマンインターフェイスガイドラインから学ぶUI設計」です。

iOSヒューマンインターフェイスガイドラインとは

正式名称「iOS Human Interface Guidelines」は、
AppleがiOSアプリ開発者向けに公開しているガイドラインです。

モバイルファーストなUI設計を実現するためのヒントが、
このガイドラインに書かれています。

このコラムではWebデザインに関連する項目に絞って紹介しようと思います。

iOSには、UI設計に関する基本方針があります。
以下で、サンプルを用いながら基本方針を説明していきます。

ユーザーが快適に操作できること、コンテンツの妨げにならないこと、
この2点がUI設計をする上で重要となります。
操作性に関して、タップ領域は44px（@2xで88px）以上を推奨しています。

控えめであることの例
小さくタップし難いボタンと、コンテンツよりも目立つデザインは禁物です。
ボタンはタップするのに十分な大きさ、コンテンツに集中できる控えめなデザインが理想的です。

文字は芸術性よりも視認性を優先させるべきです。
誰もが読みやすい大きさとコントラストを意識することが大切です。
文字の大きさに関して、11px（@2xで22px）以上を推奨しています。

明瞭であることの例
小さすぎる文字と、誤タップを招くアンカーリンクは禁物です。
文字は見やすい大きさで、アンカーリンクは正確にタップできる十分な大きさが必要です。

透過した背景を用いることで、ユーザーに要素の重要度と階層を理解させることができます。
奥行を出すことで、ユーザーへ情報を正確・確実に伝えることが可能です。

奥行きを与えること
背景がベタ塗りだと、ユーザーは情報の重要度と階層が理解できず、混乱してしまいます。
背景を透過にすることで、ユーザーは自身のいる階層と何に対する情報なのか、が理解できます。

以上がiOSの基本方針です。
では、これらを基に、どのようにUI設計へ落とし込めばいいのか？
その問にiOSは以下のように答えています。

例えば、黒く塗りつぶされたリンゴがあるとします。
私達はそれをリンゴだと認識できるでしょうか？

リンゴとは、丸くて赤いもの、と私達は学習しています。

UI設計にも同じことが言えます。
創造性溢れるデザインよりも、ユーザーが快適に使用できることが最優先です。

Net Applicationsでの統計によると、世界のモバイル端末のOSシェアは、
Androidが60.99%、iOSが31.76%、残りその他となっています。
※2016年3月の数値

スマホユーザーの半数近くがiOSユーザーということから、
iOSの標準UIに倣うことは正しい選択と言えます。

それでは、以下でiOSのUI設計を説明していきます。

情報の進行方向
iOSでは、情報は右へ進む、左へ戻る、となっています。
文字の進行方向と同じなので、ユーザーは自然に理解することができます。

ここで度々議論になるのが、ページネーションにおける進行方向です。

ブログや掲示板の多くが、左へ行くと新しくなり、右へ行くと古くなります。
このUI設計は、文字の進行方向、iOSとは逆行していると言えます。

なお、iOSにはページネーションするアプリとして、カメラロールがあります。
こちらは当然右へ行くと新しくなり、iOSの法則に則ってあります。

ページネーション、アイコン、ボタンなど、情報の流れは統一しておきたいものです。

ポジティブ要素とネガティブ要素
iOSでは、ポジティブ要素は右、ネガティブ要素は左、に配置されています。
多くのユーザーが右利きであることを考えると、この配置が自然と言えそうです。
エントリーフォームやモーダルウィンドウなど、ボタンの配置で参考にしたいです。

iOSのカラースキーム
iOSにはデフォルトのカラースキームが設定されています。
エントリーフォームなど、より操作性が重視されるページにおいて、
ネイティブに近づけるものとして使用すると良いかもしれません。

iOSインターフェイスガイドラインは、UI設計の聖典とも呼ばれています。
文字サイズやタップ領域など、感覚ではなく推奨される数値が明記されています。

ガイドラインをしっかり読み、モバイルファーストな設計をマスターしましょう。
そして、ふわふわした印象や「感覚」から卒業しましょう。