この投稿は、 UI Design Advent Calendar 2016の14日目の記事です。
OSのアップデートに伴い新機能が追加されているため、改めて見返すとiOSのヒューマンインターフェイスガイドライン（以下HIG）も一部変更が加えられています。
過去に読んだことはあっても常にキャッチアップしなければ、デバイスに適した設計からずれてしまい、ユーザーの期待する体験を提供できなくなってしまうのではないでしょうか。
今回は、アプリデザインをする際に改めて意識すべきHIGをおさらいしつつ、以前と変わった部分などをピックアップしながらご紹介したいと思います。
iOSのUIデザイン基本3原則
おさらいの第一歩として、原則を改めて見てみましょう。
他のプラットフォームとの区別にもなり、品質と機能性を高めるためにも必要なUIデザインの基本3大原則があります。
実はこの原則、iOS9まではDeferenceが１番目だったのが、iOS10では順番が変わりClarityが１番目に変わっています。
iOS10から大きくリニューアルされたAppleMusicアプリで見られるような、大きな見出しや塗りつぶされたアイコンは、「明瞭であること」を最も重要視した結果で、原則の優先度の変化が表れているのではないでしょうか。
設計時に意識すべき原則６つ
そして、アプリ設計時にユーザーに対してインパクトとリーチを最大限に高めるために意識すると良いとされる原則がもう6つあります。
UI設計時に自然と意識できておくべき項目ではありますが、つい忘れがちな時もあると思うので、チェック項目として設けるのも一つの手だと思います。
これらは、ユーザがどのように考え、どのように作業するかに基づいているため、解決策が見つからない時は、この原則を取り入れることにより、自然とユーザーフレンドリーな設計につながります。
悩んだ時や迷った時は原点に立ち返ることが大切ですね。
iOS9,10から変わったところ3つ（新機能以外で）
新機能についてももちろんキャッチアップすべきですが、アプリデザインする時に取り入れられる基本的な要素の中で、以前と変わった部分が以下の3つです。
❶アラートのボタン配置の定義変更
iOS9以前は、一番実行したいであろうアクションを実行すること、誤ってタップしても問題が生じにくいこと、という条件を満たす「タップするのが最も自然なボタン」というものを次のように定義していました。
・最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。
・最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。
しかし、iOS10では以下のように変更されています。
人々が期待する場所にボタンを置きます。
一般的にボタンは、人がタップする可能性が最も高いのは右側にあるはずです。 キャンセルボタンは常に左側にある必要があります。
これにより、今まで「タップが自然なボタンはどっちか」問題に悩まされてきたのが無くなりますね。
状況によりボタンの位置が変わるのは違和感あったので、このガイドライン改訂は、地味にユーザー体験の向上につながるのでは思っています。
❷システムフォント刷新
ご存知の通り、iOS9からHelvetica Neue→San Franciscoにシステムフォントが変わりました。
Apple独自に開発したフォントだけあって、どのデバイスでも美しく読みやすいフォントに仕上げられています。
特に優れた点で言えば、DisplayとTextの２つのフォントを、20pt以上の場合と20pt未満の場合でシステムが自動的に使い分ける点なのですが、デザイナーはSketchやPhotoshopなどデザインソフトで画面を作成する際は自動調整されないため、その点を注意して使い分けないといけません。
和文フォントの場合
和文は、同じヒラギノなのでぱっと見の見た目は変わらないのですが、HiraKakuProN→Hiragino Sansに変更されています。
表示できるウェイトも増えて表現の幅が広がるためデザイナーとしてはとても嬉しい限りなのですが、和文フォントはファミリー全てが表示できる訳ではないようです。iOS10で検証した結果以下のような表示になりました。
また、以前はシステムフォントに指定した場合、欧文よりも和文の方がやや大きめに表示されていたため、言語が混ざる場合にわざわざヒラギノで指定することもありましたが、iOS9からは和文も欧文に合わせてサイズが調整されたため、システムフォントで指定した場合でも美しく調和されるようになりました。
これで、ヒラギノ指定して言語が混ざる場合にjqgなど下付き部分があるアルファベットの下側が切れるという現象が回避できるのでとても助かります。
ただし、欧文同様デザインソフトでの作成時は自動で文字サイズが調整されないので、実装時のフォント指示には注意しましょう。
❸ウィジェットと通知のデザイン
iOS10からガラリとデザインが変わったものといえばウィジェットと通知のデザインでしょう。
iOS9以前は、通知センターにあったものが、ロック画面や検索画面からアクセスできるようになり、それに伴って通知やウィジェットのデザインも変更されました。
黒いオーバーレイ背景と白文字だったものから、白系半透明のカード型と黒文字に変わり、以前よりアイコンやテキスト等の視認性が上がり、コンテンツがより際立つようになりました。
以前よりも、最初に挙げたデザインの基本3原則を意識したデザインに沿っていて、アラートやアクションシートなどのモーダルビューとの一貫性を保つためにもこのデザイン変更がなされたのではないでしょうか。
さいごに
iOSのHIGは基本的に「人間は何を良いと感じ、何を心地良いと感じるか」で決められた原則や思想、ルールだと思います。
Androidのマテリアルデザインに比べて自由度が高めなため、割とふわっとしたイメージだったのですが、各アプリのコンテンツを尊重しつつ、原則を守りUI要素を適切に取り入れることで、ユーザーにとって「良いUI」に近づけるよう設計されている素晴らしいガイドラインだと改めて感じました。
最近では、iOSにしてもAndroidにしても、ガイドラインに沿って制作に臨むことが常識となっています。
ガイドラインも進化しているので、常にキャッチアップして理解し、ユーザーへより良い体験を提供できるUIを目指して行きましょう。
VASILYでは中途、インターン共にデザイナー募集中です。
アプリUIのみならず、Webやグラフィック制作など多種多様なデザインを経験できる環境はなかなかありません。とにかく力をつけたいデザイナー大歓迎！ご応募お待ちしております。
http://bit.ly/2hB7eI9
http://bit.ly/2hmnyNQ
