仙台からこんにちは。MIRAILのiOS/Androidアプリを担当しておりますasmzです。
はじめに
さて今回ですが、2ヶ月前くらいに「Sendai Frontend Meetup #2」という仙台のWebフロントエンド技術関連勉強会に登壇させていただいたので、そこで発表した内容をブログ用に再編集してご紹介いたします。
私はアプリエンジニアということで、そもそもWebフロントエンド勉強会で何を話すんだ？となるわけですが、本エントリのタイトルにも書いた通り、今回はアプリの話ではなくApple Human Interface Guidelines（以下HIG）についてです。
HIGというもの自体は、iOSアプリ開発者以外の人でもどこかで耳にすることはあるかと思いますが、実際にちゃんと中身まで読む人はあまり多くないかなと思います。
ただ、実はiOSアプリ開発だけに限らず、WebサービスなどのUIデザインやUI開発するような人にとっても結構有益な部分があったりするので、今回はWebのフロントエンドエンジニア、デザイナー、ディレクターといった方を主な対象として、HIGの概要について発表させていただきました。
- 当日の発表スライド
なお、勉強会当日の雰囲気はこちらにまとまっていますので、興味ありましたらぜひご覧ください。
Apple Human Interface Guidelinesとは
一言でいうと、Apple社各種デバイス向けのUIデザイン設計思想、デザイン原則などをまとめたものです。
基本的に英語となりますが、Webに公開されており誰でも読むことができるようになっています。
https://developer.apple.com/design/human-interface-guidelinesdeveloper.apple.com
HIGの構成として、まず最初に「デザインテーマ」や「Design Principles（デザイン原則）」といった、デザインに対する大局的な指針が示されており、以降で実際のUIコンポーネントやアニメーション、ユーザインタラクションといった具体的なUIデザインについてどう設計していくべきかが記載されています。
なお、HIGはあくまで先に挙げた大局的な指針に沿ってデザイン設計を導いてくれる「ガイドライン」ですので、単にUIコンポーネントの紹介や利用方法を集めたリファレンスドキュメントのようなものではないという点がポイントです。
なぜiOSアプリ開発者以外もHIG？
HIGの歴史は意外と古く、1978年Apple IIというコンピュータ向けのものが初版とされています。
Apple社はその当時から長らく「人間とコンピュータとの対話はどうあるべきか」という課題に向き合ってきていて、HIGにはその長い歴史の中で培われたインタフェース設計知見が詰まっています。
もちろん時代とともに技術やデバイス、その利用方法などは大きく変わってきているため、歴史が長ければ良いという訳ではないのですが、HIGは時代とともに刷新を繰り返しており、また時代やデバイスが変わっても普遍的な部分は現在に到るまで受け継がれています。
で、この「普遍的な部分」については、iOS開発に限らず多くのUIデザインにおいても有益なのではないかと思い、今回取り上げることにしました。
Design Principles（デザイン原則）
先述した「普遍的な部分」として、昔のHIGから現在に到るまで主要な要素が受け継がれている「Design Principles（デザイン原則）」についてご紹介します。
「Design Principles」はApple社が考える「インタフェースデザインはこうあるべき」といった原理・原則をまとめたもので、以下の6つの要素で構成されます。
- Aesthetic Integrity（美的整合性）
- Consistency（一貫性）
- Direct Manipulation（直接的な操作感）
- Feedback（フィードバック）
- Metaphors（メタファーの利用）
- User Control（ユーザによる制御）
以下、この6つの要素それぞれの概要について紹介していきます。
Aesthetic Integrity（美的整合性）
- アプリの外観や動作は、そのアプリの目的や機能と整合性が取れたものにする
- ビジネス系・データ管理系のアプリなら気を散らさない控えめな装飾に
- エンタメ系・ゲーム系のアプリならアニメーションなど使って引き込ませるデザインに
Consistency（一貫性）
- 標準コンポーネントなどの利用でシステム全体としての一貫性を保つことで、機能の理解を助ける
- 既に見知っているコンポーネントであれば、初めて触るアプリでもそれを使った時の動作を予期しやすい
Direct Manipulation（直接的な操作感）
- 画面上のコンテンツをタップやジェスチャーなどで直接操作させることにより、操作の理解を促す
- 例えば何らかオブジェクトを並び替えたい場合、「これとこれをチェックして並び替えボタン押下」とするよりそのままオブジェクトをドラッグして動かせた方が直感的
Feedback（フィードバック）
- アクションに対して知覚可能な反応を返すことで、ユーザへ正しく結果や情報を認識させる
- アクションがちゃんと反応したのか、その結果として処理は成功したのか失敗したのか、を明確に
- 例えばApple課金画面のように、視覚だけじゃなく聴覚（Sound）、触覚（Haptics）を使って反応を返すとより効果的
Metaphors（メタファーの利用）
- 現実の体験に近いオブジェクトやアクションを用いることで、ユーザの学習ハードルを下げる
- 見ただけで、そのオブジェクトをどう操作すればいいか想像できる
User Control（ユーザによる制御）
- アプリはユーザの意思決定の下で制御されるものであり、アプリで操作・制御を強制しない
- 望ましくない結果を伴う場合でもそれを明確に伝達し、アプリは意思決定を補助する立場
まとめ
これらの原則を眺めてみると、あくまでアプリを利用するユーザが主体であり、ユーザにとってより良いインタフェースをデザインすることが重要であることが見えてきます。
このようなユーザ主体の考え方は、iOSアプリ開発に限らずWebサービス含めた多くのUIデザインの場面において十分適用できそうな内容かと思いますので、これまでHIG読んだことない方でもぜひ目を通してもらえればと思います。
最後に2017年のWWDCで、このDesign Principlesに関するセッションの一節が印象に残ったので共有します。
The goal isn't to make a beautiful app, or a well-organized app, or a simple app or a focused app. Those things are all really important, but they're not the real goal.
（インタフェース設計の）目標は美しいアプリ、整然としたアプリ、シンプルなアプリ、フォーカスしたアプリを作ることではありません。これらは全て非常に重要ですが、本当の目標ではありません。
The real goal is about serving the human beings or positively affecting the lives of the people who use the apps that you make.
本当の目標は人間に奉仕すること、また、そのアプリを利用する人々の生活にプラスの影響を与えることです。
つまり、あくまでテクニカルな部分だけでなく、人間というのはどうやって情報を処理し、どうやってコミュニケーションを取り、どのように意思決定を行うのか、といったようないわゆる「人間的なレベル」でターゲットを理解した上でインタフェース設計することが重要である、というような話が動画内で述べられていました。
ご興味あればぜひこちらの動画も併せてご覧ください。
余談として、この動画内で少し触れられていますが、Appleが「User Interface」ではなくあえて「Human Interface」という用語を用いている意図もこの辺りにあるそうです。
おわりに
以上がSendai Frontend Meetup #2で発表してきた内容になります。
もちろんHIG自体は当然ながらAppleデバイス向けに寄っていますし、これを読んでおけば全てOKと言うわけではありませんが、HIGがUIデザインを考える際の一助となれば幸いです。
