「Human Interface Guidelines」のデベロッパ向けのガイド

Human Interface Guidelines(略称「HIG」)は、特定のテクノロジー分野を含むすべてのAppleプラットフォームを対象に、詳しい情報とUIのリソースを提供しています。HIGには、より魅力のあふれる美しいユーザーエクスペリエンスを生み出し、より優れたAppをデザインするためのデザイナー向けの情報が満載です。

しかしエンジニアの方々もデザイナーと同様に、HIGを開発プロセス全体のガイドとして役立てることができます。HIGでは、主要なUI要素、関連するAPI、およびベストプラクティスの概要と全体像について解説しているので、Appに機能を実装する際に役立ちます。

HIGがAppのデザインと開発プロセスにどのように役立つかということを、いくつかのシナリオにまとめてご紹介いたします。


HIG - Inclusion

Right to Left Human Interface Guidelines

Learn more about SF Symbols

Mac Catalyst Human Interface Guidelines

HIG - Widgets

HIG - Spatial Interactions

Human Interface Guidelines: Notifications

HIG - In-App Purchase

Human Interface Guidelines


はじめに

HIGの内容は、プラットフォームとテクノロジーごとにまとめられていて、それぞれ独自の索引がついています。HIGを利用するのが初めてであれば、現在開発中のプラットフォームからスタートしましょう。

各プラットフォームのデザイン原則を確認しましょう。

各プラットフォームは、Appのアーキテクチャ、インタラクション、ビュー、コントロールおよびシステム機能などのトピックを扱う複数のセクションに分かれています。たとえば、Apple Watch AppにカスタムUIエレメントを実装する場合、「システム機能」セクションのSpriteKitおよびSceneKitページを参照して、Appにテクスチャ画像および3D画像を実装する際のユーザーエクスペリエンスに関する考慮事項を確認できます。また、デベロッパドキュメントのウェブサイトでは、WKInterfaceSCNSceneおよびWKInterfaceSKSceneフレームワークへのリンクを参照できます。

「新しいUIエレメントを追加するにはどうすればいいですか。」

HIGでは、要素(エレメント)の使用目的に焦点を当て、すべてのインターフェース要素のガイダンスを提供します。Appに新しいUIを含める場合では、HIGを参考にしながら、目的の要素を画面に表示する方法を確認してください。また、推奨事項を参照し、スタイルの原理についても学習できます。ブランドを表現し、Appのユーザーが親しみを持てるような表示にする方法をHIGでご覧ください。

セーフエリア、マージン、丸みのあるボタンを表示したiPhoneの画面と、セーフエリアとマージンに入ってしまうフラットなボタンを表示したiPhoneの画面との対比

ボタンをインターフェイスに追加するだけの簡単な操作についても、HIGでは、App内での配置、ラベル付け、位置合わせの方法に関する推奨事項があり、さらにこれらの要素の表示と使用に関するガイダンスも記載されています。

「Appに新しい機能を導入するにはどうすればいいですか。」

Appleが新機能をリリースすると、多くの場合その新機能の導入に関する情報やベストプラクティスがHIGにも追加されます。

AR(拡張現実)コンテンツをAppに追加するとしましょう。HIGでは、ARを使ったインタラクションに関する情報を見つけることができます。また、インターフェイスパターンに関するよくある問題の解決方法を知ることもできます。たとえば、ユーザーをARエクスペリエンスへ誘導する方法や、ユーザーが画面上にある実際のコンテンツと仮想のコンテンツをどのように操作しているのかということをHIGで学習することができます。また、このガイダンスは、機能の組み込みの計画、実装の改善を図るために、デザインチームと開発チームがディスカッションする際にも役立ちます。

Appleのデザイン要素を知りましょう

Appleのリソースライブラリは常に強化され続けているため、プラットフォームのデザインを簡単に検討することができます。ダウンロード可能なこれらのリソースは、コンセプトのプロトタイプ作成、仕様の検索、およびデザイン要素の用語学習に最適です。

Appleのデザインリソースには、ツールバー、タブバー、ボタンなど、すぐに使えるiOS要素が満載されたテンプレートとライブラリが含まれています。

Adobe Photoshop、Adobe XD、Sketch、Keynote用のテンプレートとライブラリがあり、どのファイルにもツールバー、タブバー、ボタンなど、すぐに使用できるiOSのUI要素が満載です。また、SF Symbols Appなどのリソースも参照できます。このAppには、さまざまなウエイトとスケールの何千ものシンボルが含まれています。これらのシンボルはXcodeとうまく統合されており、テキストラベルに簡単に合わせることができます。また、Dynamic Typeや Bold Textなどのアクセシビリティ機能もサポートしています。

便利なHIG

HIGは、Appのデザインやエンジニアリングに関する決定を行う際に、特に有用なリソースです。HIGは、Appleの全プラットフォームに共通するデザイン原則を定義しています。また、多くのユーザーがAppの使用時に何を求めているのかを知り、それに応えていくための推奨事項も記載されています。

特に、HIGはAppleプラットフォーム全体の変化および改善を反映するために継続的に更新されています。そのため、ユーザーが求める内容の変化に応じて、自信を持って機能を実装していくことができます。

リソース

Apple Design Resources