ヒューマンインターフェースガイドラインを日本語で解説!iOS Appele15の原則

日本語でApple iOSのヒューマンインターフェースデザイン15の原則を5分で解説。

ヒューマンインターフェースガイドライン(日本語)とは

ヒューマンインターフェースガイドラインは、iOSアプリのデザイナーが絶対に守るべき原則が書かれているものです。

これによりユーザーが操作に迷うことなくiOSアプリを使うことができます。

iOSヒューマンインターフェースガイドラインの元となる英語資料はこちらから読むことができます。

 

ヒューマンインターフェースガイドライン15の原則(日本語)

アプリの目的をひとつにする

アプリの開発でよくやってしまう誤りは「本質とは異なる目的を多数設置してしまうこと」です。アプリの機能が膨れ上がって使いづらくなってしまう原因のひとつはここにあります。

80:20の法則を適応する

これはユーザーとアプリ内の機能やデザインに因果関係を見つけ機能に優先順位をつけるということです。効果の不均衡がどこにあるかを把握して、アプリの重要な部分にお金や労力、時間を割くべき、ということ。例えば、ユーザーが注目する80%はアプリの20%の部分に費やされていることがあるかもしれないなどです。

 

一貫性 (Consistency)

macOSやiOSで広く用いられるアイコンを積極的に採用するようにしましょう。一貫性のあるアプリケーションでは、システム標準のアイコンや言語表現などが用いられます。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

マッピング (Mapping)

ユーザーの立ち位置、ステータスをあらわすことです。例えば、申し込み機能の場合、申し込みのどの段階にいるかを示すことです。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

明瞭 (Clarity)、視認性 (Visibility)

コンテンツがはっきりと理解できることです。

・読みやすいテキスト
・わかりやすいアイコン
控えめな装飾
・意味のある動作
・コンテンツ間の適切な余白
・視認しやすい色やフォント

 

近接 (Proximity)、分類 (Grouping)

要素をグループ分けして、近い意味のものや近い用途のものを近くに配置しましょう。

 

行き先の探しやすさ (Wayfinding)

ユーザーがしたい操作がどこにあるのか考えなくともわかることです。

 

比喩の使用 (Metaphors)

アプリ内のオブジェクトやアクションを現実にあるものを真似てデザインすることで、ユーザーが直感でわかるようにします。

例えばボタンやスイッチのデザイン、音量調節バーなど、ユーザーが一目見てそれがどのように作用するかを理解することができます。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

フィードバック (Feedback)

操作した結果何が起きたのかを視覚、聴覚で伝えることです。例えば、送信ボタンの音、ボタンを押したらへこむように見えるので押したように感じられます。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

否定的な情報は左に配置する

例えばキャンセルボタンなど否定的な情報は左に配置しましょう。また、アプリを消すようなDeleteボタンも通常左に現れます。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

情報を左から右に流す

テキストの入力方向、slide to unlock の方向、スライダーの方向など情報を左から右へ流すデザインにしましょう。

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

画面遷移の種類

iOS の画面遷移の種類は主に3種類あって、これらを文脈に合わせて適切に使い分ければ正しい画面遷移を設計することができます。

  • プッシュ(階層型):タスクを進行する
  • モーダル(分岐型):一時的な画面の状態で元の画面(表示元画面)に戻る必要がある
  • タブ(並列型):目的までの導線が複数ある場合に使用する

 

プッシュ(階層型)

タスクを進行する

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

モーダル(分岐型)

一時的な画面の状態で元の画面(表示元画面)に戻る必要がある

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

タブ(並列型)

目的までの導線が複数ある場合に使用する

iOSのヒューマンインターフェースガイドライン15の原則を元UX部門iOSチーム所属の人が解説す

 

メンタルモデル (Mental Model)

ユーザーの見慣れたデザインにする、シンプルな機能にしてユーザーが簡単にタスクを完結できるようにするなど。

 

Apple iOSヒューマンインターフェースガイドラインまとめ

原則は5分でパパッと知ることができますが、実践に移すのは難しいです。

UIトレースなどをして実際のアプリの構造から学んでみる、デザインをしてヒューマンインターフェースガイドラインに則っているかチェックしてみるなどしてみましょう。