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

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

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

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

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

image.png

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

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

ios_overview.png

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

1. 明晰であること｜Clarity

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

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

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

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

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

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

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

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