iOS Developer Library

デベロッパ

iOS ヒューマンインターフェイスガイドライン

iBooks
このページの内容

一時ビュー

アラート

アラートは、アプリケーション(またはデバイス)の使用に影響する重要な情報をユーザに提供します。

image:../Art/alert_2x.png

アラート:

  • タイトル(必須)と、必要に応じて説明を表示する

  • ボタンをいくつか配置する

アラートの表示頻度が低ければ、ユーザがこれらのアラートを深刻に受け取る手助けになります。アプリケーションが表示する警告の数を最小限にし、各警告が重要な情報および役に立つ選択肢を提供するようにします。

不要なアラートを作成しない。一般に、次のような場合には不要です。

目的...

代替手段...

アプリケーションの標準機能に関する情報を提供する

アプリケーションのスタイルに調和し、目を引く情報表示の方法を設計する。

ユーザに正常に進行しているタスクの最新情報を与える

進捗ビューやアクティビティインジケータ(「進捗ビュー」「アクティビティインジケータ」を参照)を使うか、または状態情報の表示をUIに統合する。

ユーザが開始したタスクの確認を求める

アクションシート(「アクションシート」を参照)を使う。

ユーザが何もできないエラーまたは問題についてユーザに通知する

問題が致命的でなければその表示をUIに統合し、致命的な場合のみアラートを使う。

アラートテキストの設計ガイドラインを読むに当たり、次の定義を頭に入れて置くとよいでしょう。

  • タイトル形式の大文字化とは、すべての単語の1文字目を大文字表記にすることを意味します(英語の場合)。ただし、4文字以下の冠詞、等位接続詞、または前置詞が最初の単語の場合は1文字目を大文字表記にします。

  • 文形式の大文字化とは、最初の文字を大文字表記にして、残りの文字は小文字にすることを意味します(固有名詞やそれから派生した形容詞を除く)。

状況を簡潔に記述し、その状況でユーザが実行できることを説明する。理想的には、用意したテキストは、アラートが表示された理由を理解し、どのボタンをタップするべきか決定するために必要十分なコンテキストをユーザに与えます。

image:../Art/alert_title_only_2x.png

できれば、タイトルは1行で十分表示できる短さにする。長いアラートタイトルはひと目で読むのが難しく、文が欠けたり、スクロールを強制されたりします。

一語のタイトルを避ける。「エラー」、「警告」など、有用な情報を提供しない一語のタイトルは避けてください。

可能であれば、文の断片を使用する。短く情報を伝える文は、完全な文より理解しやすい傾向があります。

できるだけ、詳しいメッセージを添える必要がないタイトルにする。たとえばアラートのタイトルとして疑問文(あるいは場合により2つの文)を使えば、詳しいメッセージは必要ないかも知れません。

よくないニュースを伝える時は、批判や非難のように聞こえないようにする。ユーザは、ほとんどのアラートの通知が何らかの問題を知らせたり、危険な状況を警告したりするものであることを理解しています。親しみやすい口調を使っている限り、明るいけれどあいまいな表現よりも、否定的で率直な表現を使うことをお勧めします。

できる限り、「あなた」、「あなたの」、「私」、「私の」は避ける。場合によっては、ユーザを直接特定するテキストは、曖昧になる可能性、あるいは侮辱や横柄な意味合いに解釈される可能性もあります。

大文字化と句読点を適切に使用する。具体的には次のとおりです。

アラートのタイトル...

書き方...

文の断片または完結した1文(疑問文を除く)

タイトル形式の大文字化を行い、末尾に句読点をつけない

完結した疑問文

文形式の大文字化を行い、末尾に疑問符をつける

複数の文

それぞれの文について、文形式の大文字化を行い、適切な句読点をつける

任意指定の警告メッセージを提供する場合は、短くて完全な文を作成する。可能であれば、1行または2行で十分表示できるようにメッセージを短くします。メッセージが長すぎるとスクロールが発生し、使い勝手がよくありません。文形式の大文字化を行い、適切な句読点をつけてください。

image:../Art/alert_title_with_msg_2x.png

タップすべきボタンの説明でアラートテキストが長くならないようにする理想的には、明確なアラートテキストと論理的なボタンラベルの組み合わせであれば、状況と選択を理解するために十分な情報をユーザに与えます。詳細なガイダンスを提供する必要がある場合は、次のガイドラインに従ってください。

  • 選択アクションを説明する場合は「タップ(Tap)」という単語を使用する(「タッチ(Touch)」、「クリック(Click)」、「選ぶ(Choose)」は使用しない)。

  • ボタンタイトルを引用符で囲まない。ただし、大文字化は維持する。

両方の向きで警告の外観をテストする。横向きではアラートの高さが制限されるため、縦向きでのアラートとは異なって見える可能性があります。どちらの向きでもスクロールせずに読めるよう、アラートテキストの長さを調整するようお勧めします。

image:../Art/two_button_alert_2x.png

一般に、2つのボタンのアラートを設定する。ユーザは2つの選択肢から選ぶのがもっとも簡単であるため、多くの場合、2つのボタンのアラートがもっとも有用です。1つのボタンのアラートは、ほとんどの場合役に立ちません。その状況に対処するための手段を与えるものではないからです。3つ以上のボタンを含むアラートは2つのボタンのアラートよりかなり複雑なので、できるだけ避けるべきでしょう。ボタンが多すぎるとスクロールが必要になり、使い勝手が悪くなってしまいます。

ボタンを適切に配置する。タップするのが最も自然なボタンとは、一番実行したいであろうアクションを実行すること、誤ってタップしても問題が生じにくいこと、という条件を満たすもののことです。これを次のように配置します。

  • 最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。

  • 最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。

アラートボタンには、短く論理的なタイトルを付ける。最もよいのは、アラートテキストのコンテキストに合った、1つまたは2つの単語から成るタイトルです。アラートボタンのタイトルを作成する際には、次のガイドラインに従います。

  • あらゆるボタンのタイトルと同様に、タイトル形式の大文字化を使用し、句点は使用しない。

  • できるだけ、「キャンセル(Cancel)」、「すべて表示(View All)」、「返信(Reply)」、「無視(Ignore)」など、アラートに直接関連する動詞を使用する。

  • 単純な受け入れを示す選択肢として、ほかに適切な候補がなければ「OK」を使用する。「はい(Yes)」や「いいえ(No)」の使用は避ける。

  • できる限り、「あなた」、「あなたの」、「私」、「私の」の使用は避ける。これらの単語を使用するボタンタイトルは、曖昧で横柄な印象を与えます。

アクションシート

アクションシートには、ユーザが開始したタスクに関連する一連の選択肢を表示します。

水平方向がコンパクトな環境では、アクションシートは画面の下部に表示されます

image:../Art/action_sheet_iphone_2x.png

水平方向が標準の環境では、アクションシートは常にポップオーバーの内部に表示されます

image:../Art/action_sheet_ipad.pdf

アクションシート:

  • ユーザアクションを実行した結果として現れる

  • 2つ以上のボタンが表示される

アクションシートは次の目的で使用します。

  • タスクを実行する別の方法を提示する。アクションシートを使用することで、UIの特定の場所に選択肢を置いておかなくても、現在のタスクのコンテキストに合った一連の選択肢を提示することができます。

  • 危険な可能性のあるタスクを完了する前に、確認を求める。アクションシートは、ユーザが行おうとしている手順によって生じるおそれのある危険な影響について考えることをユーザに促し、いくつかの選択肢をユーザに示します。

水平方向がコンパクトな環境では、ユーザがタスクを簡単かつ安全に中止できるように、「Cancel」ボタンを含める。Action Sheetの一番下に「キャンセル(Cancel)」ボタンを配置し、選択を行う前にすべての選択肢に目を通すようユーザに促します。

水平方向が標準の環境では、アクションシートの表示は、タスクの起動方法に応じて決める。具体的には次のとおりです。

タスクの起動位置...

アクションシートの表示

「取り消し(Cancel)」ボタンの有無

ポップオーバー以外

アニメーションなし、すなわち、アクションシートとポップオーバーを同時に表示

なし。ポップオーバーの外側をタップすればアクションシートを消せるため

ポップオーバー内

アニメーションあり、すなわち、ポップオーバーのコンテンツ上に、滑り上がるような形でアクションシートを表示

あり。ポップオーバーを閉じることなく、アクションシートを消せるようにするため

すべての環境で、害を及ぼす可能性があるアクションの実行ボタンが必要であれば、赤のボタンを使用する。アクションシートの一番上に赤のボタンを表示します。これは、ボタンがアクションシートの一番上に近ければ近いほど、よりユーザの目に付くからです。

image:../Art/action_sheet_red_button_2x.png

ユーザにアクションシートをスクロールさせない。アクションシートに含まれるボタンが多すぎると、すべての選択肢を確認するためにスクロールしなければならなくなります。これは、ユーザが各選択肢の検討に余計に時間を費やさなければならないため、ユーザを当惑させる体験となります。さらには、ボタンをうっかりタップしないでスクロールすることがユーザにとって非常に困難である可能性があります。

モーダルビュー

モーダルビュー(モーダルモードで表示されるビュー)は、現在のタスクやワークフローのコンテキスト内で自己完結した機能を提供します。

image:../Art/modal_view_mail_compose_2x.png

モーダルビュー:

  • 画面全体、(ポップオーバーなど)親ビューの全領域、または画面の一部に表示できる

  • タスクの実行に必要なテキストやコントロール部品を収容する

  • 一般に、タスクを完了してビューを閉じるボタン、タスクを中止する「キャンセル(Cancel)」ボタンを表示します。

アプリケーションの主たる機能が関連する自己完結型のタスクを達成できるようにする必要があるときに、モーダルビューを使用します。モーダルビューは、アプリケーションの主たるユーザインターフェイスに常には属さないUI要素を必要とする多段階のサブタスクに特に適しています。

現在のタスク、現在の環境、およびアプリケーションの視覚スタイルに適したモーダルビュースタイルを選ぶ。以下で定義するいずれかのスタイルを使用できます。

モーダルビューのスタイル

外観

推奨する用途

フルスクリーン

画面全体を覆います。

ユーザがモーダルビューのコンテキスト内で完結できる、複雑になりえるタスクを表示するのに適しています。

ページシート

水平方向が標準の環境では、下のコンテンツの一部に適用されるスタイル。適用されない領域はグレイアウトされ、ユーザが操作できません。

(水平方向がコンパクトな環境では、このスタイルはフルスクリーンスタイルと同じ働きになります。)

ユーザがモーダルビューのコンテキスト内で完結できる、複雑になりえるタスクを表示するのに適しています。

フォームシート

水平方向が標準の環境では、画面中央にコンテンツを表示するスタイル。適用されない領域はグレイアウトされ、ユーザが操作できません。キーボードが表示されると、モーダルビューの一部が調整される場合があります。

(水平方向がコンパクトな環境では、このスタイルはフルスクリーンスタイルと同じ働きになります。)

ユーザから構造化された情報を集めるときに有用です。

現在のコンテキスト

親ビューと同じサイズを使用します。

分割ビューペイン、ポップオーバーなど、全画面を占めないビュー内にモーダルコンテンツを表示します。

ポップオーバーの前面にモーダルビューを表示しない。アラートについては例外となる場合がありますが、ポップオーバーの前面には何も表示しないでください。ポップオーバー内でユーザが実行するアクションの結果としてモーダルビューを表示する必要があるというまれなケースでは、ポップオーバーを閉じてからモーダルビューを開きます。

モーダルビューの全体的な外観とアプリケーションの外観を調和させる。たとえば、多くの場合、モーダルビューには、タイトルとモーダルビューのタスクをキャンセルまたは完了するためのボタンを持つナビゲーションバーが含まれます。このような場合、ナビゲーションバーの外観は、アプリケーションのナビゲーションバーと同じにします。

必要に応じて、タスクを説明するタイトルを表示する。タスクをもっと十分に説明したり、ガイダンスを提供したりするテキストを、ビューのほかの領域に表示することもできます。

モーダルビューを表示するのに適したトランジションスタイルを選ぶ。スタイルは、アプリケーションと調和し、モーダルビューが表示する、コンテキストの一時的なシフトをユーザにより強く意識させるものを使用します。これを行うために、次のトランジションスタイルの1つを指定できます。

  • 垂直。モーダルビューは画面の下端から上に向かってスライドし、閉じると下端に向かって戻ります(これがデフォルトのトランジションスタイル)。

  • フリップ。現在のビューが水平にフリップして、右側から左側へモーダルビューを表示します。視覚的に、モーダルビューはまるで現在のビューの背景であるかのように見えます。モーダルビューを閉じると、モーダルビューは左側から右側に水平にフリップして、前のビューを表示します。

特に必要もないのにモーダルビューのトランジションスタイルを変更するのは避ける。ユーザはそのような違いにすばやく気付き、その違いに何か意味があるものと考えてしまうでしょう。ユーザが簡単に気付いて覚えておくことができる、論理的で一貫性のあるパターンを構築し、妥当な理由なしにトランジションスタイルを変更することは避けるのが最良です。