WebやアプリのUIデザインやデザインガイドラインについて考える際に、その代表例として取り上げられるものにAppleの「Human Interface Guidelines」とGoogleの「Material Design」があります。どちらもその後のデザインガイドラインに大きく影響を与え、これらを基にデザインガイドラインという考え方が広まったとも言えるでしょう。
この記事ではAppleの「Human Interface Guidelines」に焦点を当てて、その概要やポイントとなる部分について解説します。デザインやデザインガイドラインそのものを勉強中という方は、ぜひご一読ください。
Human Interface Guidelinesの概要
Human Interface Guidelinesは、Appleが定めた「アプリケーション開発者向けに一連の推奨事項を提供するソフトウェア開発ドキュメント」をまとめたデザインガイドラインです。
このガイドラインは、アプリのインターフェイスをより直感的で学習しやすく、一貫性のあるものにすることでユーザー体験の向上を図ることを目的とされています。
具体的には、iOS7以降のAppleのフラットデザインに基づいたデザイン指針をまとめたものであり、macOS、iOS、watchOS、tvOSといった4つのOSごとに細かくデザインの基準が定められているものです。アプリ開発者などはこのガイドラインを参考に、プロダクト開発を行うことが推奨されています。
Human Interface Guidelinesの特徴
続いてHuman Interface Guidelinesで挙げられるMacOSとiOSを例として、その特徴をご紹介します。
- MacOSアプリのデザインテーマ
- MacOSのデザインのポイント
- iOSアプリのデザインテーマ
- iOSのデザインのポイント
MacOSアプリのデザインテーマ
MacOSアプリのデザインテーマは大きく分けて以下の4つです。このテーマが細かいデザイン定義の前提として存在しています。ガイドラインに記載の内容をもとに順に解説します。
- フレキシブル
- 広大さ
- 多才性
- 注目のしやすさ
フレキシブル
直感的かつ、カスタマイズと柔軟性によって様々なワークフローに適応可能なデザイン（環境設定の変更、インターフェースのカスタマイズ、ウィンドウのサイズ変更、ツールバー、メニュー、コントロール、キーボードショートカット、タッチバー、アクセシビリティ機能などから開始できる仕様など）。
広大さ
大型で高解像度のディスプレイや、拡張ディスプレイにも対応できる（そタブ、サイドバー、シート、パネルなどの多彩なインターフェースコンポーネントを活用し、フルスクリーンモードなどの没入感のある機能をサポート）。
多才性
シンプルなものから高度なもの、ニッチなものまで、ユーザーのさまざまなニーズに応える豊富な機能やワークフローを提供する。
注目のしやすさ
現在のタスクを明確にし、焦点を合わせやすい設計や適切な装飾（視覚的なコントラスト、半透明、大きなドロップシャドウによる、アクティブなウィンドウと非アクティブなウィンドウの区別など）。
MacOSのデザインのポイント
上述した内容を要約するのであれば、ユーザーが自由に設定などをカスタマイズ可能で、ニーズに合わせた機能性を確保し、様々な画面環境に最適化された視認性の高いデザイン、となるでしょう。テーマに関してはこのように少し抽象的ではありますが、このテーマをもとに、以下の画像のような細かい項目に分けてデザイン定義がされています。
（Human Interface Guidelines内のメニューを翻訳表記したもの）
iOSアプリのデザインテーマ
次にiOSアプリのデザインテーマについてです。
- 明瞭さ
- 控えめ
- 奥行き
- 美的統合性
- 一貫性
- 直接操作
- フィードバック
- メタファー（比喩）
- ユーザーコントロール（ユーザー主体の制御）
明瞭さ
どのサイズでも読みやすい文字、正確で明快なアイコン、さりげない装飾、機能性を重視したデザイン、視認しやすい色やフォントなどの分かりやすいUI。
控えめ
あくまでもコンテンツが主役のため、インターフェースはグラデーション、ドロップシャドウなどの効果を最小限に抑えた軽快なものとし、コンテンツを最優先にするデザイン。
奥行き
視覚的な階層や切り替えなどのモーションを用いて、ユーザーに奥行きを感じさせ、体験に深みを与える。
美的統合性
アプリの外観や動作と機能との統合性のことで、ビジネスツールやゲームといったアプリごとの目的に合わせた装飾や操作性を重視する。
一貫性
一般的によく見られるインターフェース要素やアイコン、標準的なテキストスタイル、統一された用語を使用して、ユーザーが疑問を感じず操作可能なデザインに。
直接操作
画面上のコンテンツをユーザーが直接操作可能にするデザインで、具体的にはデバイスの回転やジェスチャーと連動して画面上のコンテンツが挙動することで、ユーザーにシームレスでリアリティのある体験を提供する。
フィードバック
ユーザーの操作に対してモーションやサウンドなどでフィードバックを返すことで、操作の結果を分かりやすく伝える。
メタファー（比喩）
ユーザーがより直感的に操作できるように、現実世界の物質や物理法則をデザインに取り入れる（下にあるコンテンツを見るためにスワイプしたり、本や雑誌のページをめくるなどの操作）。
ユーザーコントロール（ユーザー主体の制御）
アプリではなくユーザーが意思決定を行えるようにデザインを施す（望ましくないもしくは誤った操作によるデータ削除などでも、進行中にキャンセルを可能にするなど、ユーザーが自身で制御しているように感じさせる）。
iOSのデザインのポイント
MacOSと比べてデザインテーマの項目は多いのですが、iOSにおいて重要な点は見やすさや直感的な操作性、ユーザー体験の充実といった点が主軸で、根底としてはMacOSと同様な精神のもとにデザインテーマが定められていると言えるでしょう。
またiOSもMacOS同様に、テーマをもとにした細かいデザイン定義項目が定められているので、気になった方は実際にガイドラインを参照してみてください。
Human Interface Guidelinesのメリット、デメリット
Human Interface Guidelinesにはメリットとデメリットが存在します。この点も簡単に整理しておきます。
メリット
Appleの製品は多岐に渡り、それらは世界中で普及しているため、そのデザインに関しても広く受け入れられているものだと言えます。そのため、デザインにおける一つの解法として、デザインやデザインガイドラインを策定する際に大きく役立つものでしょう。
デメリット
一方、Human Interface GuidelinesはそのほとんどがApple製品向けのアプリデザインに特化しています。そのためアプリ以外のデザインに活用する場合は、必ずしも正しい回答が得られるものではないとも言えます。万能な見本とまでは言えないため、内容をよく吟味して、活かすようにすると良いでしょう。
Human Interface Guidelinesはどんな場面でよく使われるのか
当然ではありますが、Human Interface Guidelinesは基本的にMacOSやiOSのアプリ開発時のデザインガイドラインとして使用されています。昨今では、特にiOSアプリの開発は業種に関わらず多くの企業が取り組んでいます。
世界的に見ても日本はiPhoneの使用率が高いため、国内の企業でスマートフォン向けアプリ開発する場合には、まず目を通すべきデザインガイドラインであると言えます。
その他の便利な使い方
Googleと並んでデザインガイドラインの代表例として扱われることの多いAppleのHuman Interface Guidelinesは、アプリデザインのみでなくデザインガイドライン作成のガイドとしても参考になります。
「なんとなく」デザインガイドラインの必要性を感じていて、自社プロダクトでも作成を検討している際には触れておくべき事例の一つであることは間違いありません。構成などに関してきっと学べる点も多いはずです。
デザインガイドラインを一から作成するなら「Spirally」
参考とすべきデザインガイドラインは分かったとしても、実際にどういった形でガイドラインを作成し運用していくべきかが見えていない、という方も多いのではないでしょうか。
そのような方々向けに最適なツール「Spirally（スパイラリー）」をご紹介します。
「Spirally」のサービス・機能
Spirallyは、企業向けのデザインガイドライン作成プラットフォームです。ガイドライン作成をサポートするため、Spirallyは以下のような機能を備えています。
- テキストの編集
- メディアの挿入
- テンプレート機能
- カラーブロック設定
- カラーブロックの自動生成
- ファイルアップロード可能
- プロジェクト単位での公開範囲設定
- バージョン管理情報
Spirallyを活用すれば、ガイドライン作成自体に手間をかけず、内容の策定に注力することが可能です。作成をSpirallyのみで完結できるため、効率的な運用も行えます。共有設定や共同編集も可能なので、適宜更新しながら常に最新の情報を共有できる体制を実現できるでしょう。
まとめ
Appleのデザインガイドライン「Human Interface Guidelines」について、簡単に概要をご説明しました。
アプリ分野という特化した内容ではありますが、ユーザー体験を重視しているという観点では、様々なサービスやプロダクトに精通する要素も含まれているはずです。ぜひ一度ご自身で目を通してみることをオススメします。
また、デザインガイドライン作成を本格的に始めたいという方は、スムーズなスタートを切るため「Spirally」の活用もぜひご検討いただければ幸いです。疑問やお悩みなども承りますので、以下までお気軽にお問い合わせください
