Human Interface Guidelines（ヒューマンインターフェースガイドライン）は、Appleがアプリの見た目や操作を設計するときの公式ガイドラインです。この記事では、WEBデザイナーが知っておきたいHuman Interface Guidelinesの基本をまとめました。
Human Interface Guidelinesとは？
Human Interface Guidelines（HIG）は、Apple製のネイティブアプリのためのデザイン指針です。
- 対象は、iPhone・iPad・Mac・Apple Watch・Apple TV・Vision Proまで、Appleの各プラットフォーム
- 見た目以外にも、操作の考え方、文字や色の扱い、アクセシビリティなどがまとめられている
※この記事はAppleの公開資料をもとにしています。ガイドラインの内容や名称は更新されることがあります。
Human Interface Guidelinesが重視していること
Apple HIGでは、コンテンツを主役にし迷わず操作できることを重視しています。
明快さ（Clarity）
- どのサイズでも文字が読める
- アイコンや操作の意味が一目でわかる
- 装飾を目立たせるのではなく、機能そのものが伝わる見た目にする
- 余白や文字の大きさ、色のコントラストで、要素の役割をはっきりさせる
控えめさ（Deference）
- インターフェース自体は控えめにして、コンテンツを主役にする
- ボタンや枠の装飾を強く主張させず、ユーザーが見たいもの（写真・文章・データ）に集中できるようにする
- 半透明やぼかしで「この奥にも続きがある」と示す
奥行き（Depth）
- 階層と流れを明確にする
- 前面に出ている画面、その奥にある画面という関係を、重なりや動きで表す
- 今どこにいて、どう戻れるかが、視覚的に伝わる
そのほか
- 標準の部品と操作を使い一貫性を保つ
- 操作に必ず反応を返す
- 主導権をユーザーに置く
具体的な数値や仕組み
Apple HIGでは、人間工学の考え方も取り入れ、具体的な数値や仕組みを決めています。
タップする領域
- 指でタップする部品の大きさを、最低でも44×44ポイントを目安にする（指の腹で正確に押せる下限値）
- 小さすぎるボタンや、近すぎて隣を押してしまう配置を避ける
親指の届く範囲
- よく使う操作は、スマホを片手で持ったときに親指が届く範囲に置く（上部より下部のほうが指で届きやすい）
- 画面が大きい端末では、片手で操作できるように、上部の内容を手元に引き下ろす「リーチャビリティ」という仕組みが用意されている（設定＞アクセシビリティ＞タッチ＞簡易アクセスON）
文字サイズとコントラスト
- 標準フォントはSan Francisco
- 本文の文字は17ポイントが標準で、最小でも11ポイントを目安にする
- 文字と背景のコントラストは4.5:1以上を目安にし、小さい文字ほど高めにとる
- 文字は、好みの大きさに変えられる「Dynamic Type」に対応し、拡大しても崩れない
操作のフィードバック
- 操作したときには、色の変化や触覚（バイブレーション）で「操作した」ことを返し、目や手で確認できる
その他
- 色だけで情報を伝えず、「色を使わずに区別（Differentiate Without Color）」の設定にも合わせる
- VoiceOver（画面読み上げ）向けに、ボタンや画像へアクセシビリティラベルで説明を付ける
- 「視差効果を減らす（Reduce Motion）」「透明度を下げる（Reduce Transparency）」の設定を検知し、動きや半透明を控える
- ノッチ・ホームインジケータ・Dynamic Islandを避けた「セーフエリア」に主要な要素を置く
- 画面端からのスワイプで戻るなど、OS標準のジェスチャーを自前の操作で奪わない
ウェブアクセシビリティの確保を前提とした上で、さらにその先の品質を目指すための指針です。アクセシビリティについては、ウェブアクセシビリティの記事にもまとめています。
よくある質問（FAQ）
Q. Human Interface Guidelinesは何を重視していますか？
コンテンツを主役にし、迷わず操作できることを重視しています。Appleは、明快さ（Clarity）・控えめさ（Deference）・奥行き（Depth）の3つを設計の柱として挙げてきました。装飾より中身を優先し、標準の部品と操作で一貫性を保ち、操作には必ず反応を返す考え方です。
Q. タップしやすいボタンの大きさはどれくらいですか？
Human Interface Guidelinesは、指でタップする部品を最低でも44×44ポイントとることを目安にしています。ポイントは画面上の大きさの単位で、指の腹で正確に押せる下限として示されています。小さいアイコンでも、押せる範囲を44×44ポイント確保し、隣のボタンと十分に離すと押し間違いを減らせます。
Q. WEBサイトもHuman Interface Guidelinesに合わせるべきですか？
見た目をそのまま合わせる必要はありません。HIGはApple製アプリ向けの指針で、WEBは他のOSやPCでも同じデザインが表示されるためです。真似るべきは装飾ではなく、コンテンツを主役にする、文字を読みやすくする、押せる場所を明確にするなどの考え方です。これらはWEBアクセシビリティの考え方とも重なります。