美しいアプリをデザインするには？iOSのアプリ制作に関するデザインガイドラインを徹底解説（前編）

Appleのデザインは、シンプルかつ非常に洗練されているので、多くのWebデザイナーや アプリ デザイナーがAppleのデザインを手本としたり、参考にしたりしています。

実際に、Appleのデザインを信奉する人々は20年以上も前からいましたが、コンピュータの形状や色などのいわゆる「外側のデザイン」に加えて、現在では画面の中身である「内側のデザイン」を模倣したり研究したりするケースも多いのではないでしょうか。
特にiOSに関しては「iOS7」からデザインを大きく変えており、App Storeで配布されているアプリケーションに関しても、できるだけ「iOS」の世界観を崩さずに(もしくはできるだけ世界観に適用するように)シンプルにデザインされている アプリ がたくさんあります。

ところで、世界で最も使われている OS である「iOS」には、「ヒューマンインターフェイスガイドライン」(Human Interface Guideline)と呼ばれるガイドラインがあるのをご存知でしたでしょうか。
実は、このガイドラインには、iOS本体やiOS上で動くアプリケーションの コンセプト やデザインガイドなどが含まれています。
言い換えれば、このガイドラインをしっかりと理解すれば、洗練されていて エンゲージメント の高いアプリケーションを作ることができます。

今回は、Appleが公表している「ヒューマンインターフェイスガイドライン」について、デザインに役立つ部分についての概要やポイントをご紹介します。
ガイドラインのデザインに関するポイントが分かれば、iOSの世界観を継承したデザインをすることもできるようになります。
前編では、iOSのデザインに関する考え方(Overview)を中心に紹介していきます。

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

iOS Human Interface Guidelineは、Appleが公表しているiOSに関するガイドラインです。
iOSに標準で採用されているアプリケーションの多くもこのガイドラインに沿ってデザインされているので、読むだけでもデザインの勉強になることは間違いありません。
ガイドラインでは、実際にApp Storeのチャートで配信数トップ層を獲得するために、熟読することが推奨されています。

iOSが持つ3つの コンセプト

ガイドラインでは、iOSが他のプラットフォームと違う3つの主要 コンセプト があることが述べられています。
その コンセプト とは「Clarity」「Deference」「Depth」の3つです。

1. 明晰であること｜Clarity

システム全体を通して、
                  テキスト
                はどのサイズでも読みやすく、アイコンは正確なサイズで識別しやすく、装飾はわずかで適切な量にして、機能を少数に絞ることでデザインを引き立たせています。
ネガティブスペース(余白部分)、色、
                  フォント
                、グラフィック、
                  UI
                要素によって重要な要素をほかの要素よりも目立たせて、インタラクティブ性が分かるようにします。

デザインとしてシンプルなだけでなく、機能的にも絞ることがiOSの アプリ にふさわしいことが述べられています。
確かに、機能が多いと、その分ボタンやタブの数も増やさなければならないので、デザインにも影響してきますよね。

2. 違いがわかること｜Deference

流れるようなアニメーション、さわやかで美しい
                  UI
                があれば、
                  ユーザー
                は
                  コンテンツ
                が理解しやすくなります。

                  コンテンツ
                は画面全体に表示され、時に透過したりぼかしたりすることで操作する上でのヒントを提示したりします。
ベゼルやグラデーション、ドロップシャドウは必要最小限にとどめ、
                  UI
                を軽めに表示することで、
                  コンテンツ
                こそが最も重要な要素であると分かるようにします。

「 コンテンツ こそが最も重要」であるというところがポイントです。
アニメーションや UI は コンテンツ をアピールするための補足的な役割をしている、というのがiOSの考え方の根底にあります。

3. 深層性があること｜Depth

明確にレイヤーを分けたり、軽快な動きをつけることで、要素の従属性を伝えたり、活き活きとした動きを伝えたり、今起こっていることへの理解がしやすくなります。
触ったり発見したりすることで
                  ユーザー
                は心地がよくなり、文脈を見失うことなく、ある機能やほかの内容にアクセスすることができます。
トランジションがあると
                  ユーザー
                は深層性を理解することができるようになります。

ユーザー に今起こっていることを伝えるために、レイヤーやトランジションなどで理解を促進するという コンセプト が明記されています。
情報構造を視覚的に分かりやすく示すことが大切です。

アプリ のアイデンティティを高めるための6要素

続いて、ガイドラインでは アプリ のインパクトやリーチを最大化するために気をつけるべき、6つの要素を紹介しています。
抽象的な解説が多く、一度で理解するのは難しいですが、何度も読み込み実際のiOSのデザインと比較しながら理解してみるといいでしょう。

1. 美観との統合｜Aesthetic Integrity

美観との統合とは
                  アプリ
                の見た目と挙動をできる限り一致させることです。
例えば、
                  ユーザー
                が重要なタスクを完遂するための
                  アプリ
                では、かすかで控えめなグラフィック、標準的なコントロール、想定できる挙動を使ってその機能にフォーカスを当てます。
一方、ゲームのように没頭するような
                  アプリ
                では、楽しくてわくわくするような、心を掴む見た目にしましょう。

シンプルな機能を提供する アプリ は、見た目もシンプルに、という「見た目と挙動の一致」に関するポイントです。
例えばToDo アプリ では、ToDo機能の コンテンツ に集中できるように、過度な装飾や行き過ぎたアニメーションは控えるようにしましょう。
ゲームや子ども向け アプリ の場合は機能性よりもエンターテインメント性が重視されるので、この限りではありません。

2. 一貫性｜Consistency

一貫した
                  アプリ
                とは、
                  UI
                要素やよく見慣れたアイコン、標準的な
                  テキスト
                のスタイル、単一の用語を使って構築された基準や枠組みで
                  アプリ
                を構築することです。

                  アプリ
                はユーザーが想定する方法で機能や挙動を提示します。

一貫性とは、 アプリ だけでなく OS との一貫性も含まれます。
例えば、「虫眼鏡」アイコンのタブを押せば検索窓が開き、「人型」アイコンのタブを押せばコンタクト一覧が表示される、といった具合です。
また、検索窓でエンターキーを押したら検索が開始される、といった一貫した挙動にすることで、 ユーザー の想定内の挙動を実現することが大切です。

3. 直接操作｜Direct Manipulation

画面上の
                  コンテンツ
                を直接操作することで、
                  ユーザー
                の
                  エンゲージメント
                が高まり、何が起きているかを理解しやすくなります。
例えば、
                  デバイス
                の向きを変えたり画面上にある
                  コンテンツ
                を操作するときに、
                  ユーザー
                は直接操作を体験します。
直接操作を行うことで、
                  ユーザー
                は自分が取ったアクションの結果をすぐにはっきりと理解することができるようになります。

直接操作とは、言い換えれば ユーザー が行なったアクション一つひとつに対してフィードバックを与えることで、 ユーザー が「今何が起きているのか」を理解することです。
タブやボタンを押しても何も反応しないというのは、直接操作の原理に反するということです。

4. フィードバック｜Feedback

フィードバックはユーザーが取ったアクションを認識し、アクションによって起こった結果を知らせる役割があります。
iOS標準の
                  アプリ
                では、
                  ユーザー
                が取ったあらゆるアクションの反応を分かりやすいフィードバックで知らせるようになっています。
インタラクティブな
                  UI
                はタップされたときにすぐにハイライト表示され、時間のかかる操作のステータスはプログレスバーによって表示します。
アニメーションやサウンドはアクションの結果をはっきりと示すのに役立ちます。

前項の直接操作と深く関係しますが、フィードバックはユーザーが取ったアクション一つひとつに起こった結果を知らせる役割があります。
フィードバックには、タップやフリックなどを通して発生する即時フィードバックと、処理の進行経過をプログレスバーで示したり処理の終了を音で知らせたりする間接フィードバックがあります。

5. メタファー｜Metaphors

                  ユーザー
                が
                  アプリ
                操作を素早く理解するのは、それが実際の世界であろうがデジタルの世界であろうが、オブジェクトやアクションが何度も繰り返される似たような経験によってメタファーであると理解できたときです。
iOS上ではメタファーがうまく機能しています。
というのは、
                  ユーザー
                は画面上で物理的な
                  インタラクション
                を体験しているからです。

                  コンテンツ
                をドラッグしたり、スワイプしたり。あるいはスイッチをオン・オフしたり、スライダーを動かしたり、スクロールしながらピッカーの値を変えたり。デジタルブックやマガジンのページをフリックすることも体験しています。

メタファーは一貫性とも非常に関わりがあり、こうすればこうなるであろうという想定を ユーザー に与えるものです。
例えば、 テキスト エディタで画面をピンチしたら画面が拡大・縮小されますが、同様に ブラウザ やその他のソフトでも、文字が見にくければピンチを行うであろうということです。
iOSに詳細な取扱説明書がついていないのは、メタファーにより ユーザー が体験を通して学習するからだと言うことができます。

6. ユーザー コントロール｜User Control

iOS全体を通して、(
                  アプリ
                ではなく)
                  ユーザー
                が支配下に置かれています。
一連のアクションを提案したり、危険な結果について注意したりする
                  アプリ
                もありますが、それは
                  アプリ
                が
                  ユーザー
                に代わって判断を仰ごうとする、よくある間違いなのです。
素晴らしい
                  アプリ
                なら、
                  ユーザー
                ができることと、望まない結果を避けることのちょうどよいバランスが分かっています。
インタラクティブ要素がよく見かけるもので想定できるもので、操作をキャンセルするのが簡単で、これまで知っているやり方で操作できるなら、
                  ユーザー
                は自分たちがその
                  アプリ
                の支配下に置かれていると感じるでしょう。

逆説的と感じるかもしれませんが、ガイドラインによれば ユーザー コントロールとは「 ユーザー によるコントロール」ではなく「 ユーザー をコントロールすること」だと定義されています。
つまり、説明不要で アプリ をすぐに扱うことができて、なおかつ アプリ の範囲内で操作ができるということは、 アプリ を立ち上げている ユーザー はその アプリ のルールに従っている、と考えることができます。

まとめ

今回は、Appleの「ヒューマンインターフェイスガイドライン」について、iOSのデザインに関する考え方(Overview)を中心にご紹介しました。
いくぶんか抽象的ではありますが、このOverviewの部分にはAppleのデザインや機能性、 UX に関しての「態度」がよく描かれています。
もし、iOS アプリ を作る上で立ち止まってしまうことがあったら、もう一度Overviewを読み返してみるといいでしょう。

次回の「後編」では、「ヒューマンインターフェイスガイドライン」のビジュアルデザイン(Visual Design)を中心に解説していきます。

参考：
美しいアプリをデザインするには？iOSのアプリ制作に関するデザインガイドラインを徹底解説（後編）