色とタイポグラフィ

色は情報を効果的に伝える

iOSでは色が、対話型要素を他と識別しやすくする、躍動感を与える、流れを視覚的に表す、などの役割を担います。組み込みアプリケーションは、純色の中から選んで用いることにより、単独であっても他と組み合わせてでも、また、背景が明るくても暗くても、良好に見えるようにしています。

../Art/color_family_a_2x.png

独自の色をいくつか用いる場合、それぞれを組み合わせても問題がないようにする。たとえば、アプリケーションのスタイル上、パステル色が重要であるならば、調和する一群のパステル色を決め、一貫して使うようにしてください。

さまざまな状況を考慮し、色のコントラストに注意する。たとえば、ナビゲーションバーの背景とバーボタンのラベル部分のコントラスト(明暗比)に注意しないと、ラベルが読みにくくなってしまいます。コントラストが充分かどうか検証するためには、科学的とは言えませんが、晴れた日の屋外などさまざまな光源状況で、実際にデバイスにアプリケーションを表示してみる、という方法が簡単でしょう。

この方法は、手直しが必要な箇所を見極める上でも参考になりますが、これで代えるわけにはいかない、より実証的で信頼できる結果が得られる手法もあります。前景色と背景色の輝度を測定し、その比を調べるのです。オンラインのコントラスト比計算機を使うか、WCAG 2.0規格として確立されている式を使って、自分で計算してください。4.5:1以上の比であれば理想的です。

バーの色遣いを独自に設定する場合は、その透明度や、アプリケーションの内容表示との関係を考慮する。ブランド表示に用いる色など、特定の色との相性を考慮してバーの色合いを決める際には、アプリケーションの内容をさまざまな色で表示して試してみる必要があるでしょう。バーの外観は、iOS側が決める透明度と、(バーの奥に表示されうる)アプリケーション自体の外観の、両方によって決まります。

色弱者に配慮する。色弱者の多くは赤と緑をうまく識別できません。2つの状態や値を、赤か緑かで識別するしかない箇所はないでしょうか(画像編集ソフトウェアの中には、色弱者にとってどう見えるかを確認できるものがあります)。一般に、対話型要素を識別する手がかりは、複数用意するとよいでしょう(iOSで対話型要素を示す方法については“対話型要素にはタッチ操作を誘う働きがある”を参照)。

キーカラーを決めて、対話型の要素や状態を示すようにする。組み込みアプリケーションに使われているキーカラーとしては、「メモ(Notes)」の黄色、「カレンダー(Calendar)」の赤などがあります。対話型要素や状態を示すキーカラーを設定する際には、そのアプリケーションに使われている他の色と競合しないようにしてください。

対話型要素とそれ以外に同じ色を使うことは避ける。色はUI要素が対話型であることを示す手段のひとつです。対話型要素とそれ以外を同じ色にすると、どこをタップすればよいのか分かりにくくなってしまいます。

色には情報伝達力があるが、意図どおりに伝わるとは限らない。色に対する感じ方は、人によっても文化によっても異なります。他の国や文化圏で、ある色遣いがどのように受け取られるか調査するのもよいでしょう。できるだけ色が適切なメッセージを伝えるようにしてください。

ユーザの気が散るような色遣いは避ける。アプリケーションの目的上、色に意味がある場合を除き、使いすぎないことが大切です。

テキストの体裁については、常に読みやすさを優先する

テキストは何と言っても読みやすさが重要です。何と書いてあるのか分からなければ、いくら美しい外観でも意味がありません。アプリケーションがダイナミックタイプに対応すると、次のようなことが可能になります。

ダイナミックタイプに適合するためには、開発者の側にも若干の作業が必要です。テキストスタイルの使い方、ユーザが設定を変更したときにその旨の通知を受け取る方法については、“Text Styles” in Text, Web, and Editing Programming Guide for iOSを参照してください。

テキストの大きさを変更する際には、コンテンツの重要度を考慮する。ユーザにとって、どのコンテンツも等しく重要というわけではありません。ユーザがテキストを大きく表示しようとする場合、実際には、着目している箇所を読みやすくしたいと考えているのです。画面上の文字すべてを拡大すればよいとは限りません。

たとえば「Mail」は、アクセシビリティテキストサイズが変わっても件名と本文のみ拡大し、それほど重要でない部分(日付、受信者など)は小さいままにします。

../Art/mail_message_axlarge_2x.png

状況によっては、テキストの大きさに合わせてレイアウトも調整する。たとえば文字が小さければ、段組を1段から2段に変えるとよいかも知れません。もっとも、文字の大きさに合わせて細かく調整するのではなく、大まかに(たとえば小、中、大のように)区分してレイアウトを設定するとよいでしょう。

独自フォントの場合も、スタイルに応じて大きさを調整する。iOSはスタイルに応じて大きさを調整するようになっているので、その方法を真似るとよいかも知れません。以下に例を挙げます。

一般に、アプリケーション全体を通して同じフォントを使う。フォントが混在していると、ばらばらで締まりのない外観になります。1種類だけを用い、スタイルや大きさもごく少数にとどめてください。テキストスタイルを扱うUIFontのAPIを使い、本文、見出しなど、意味的な区分に応じて領域を定義するとよいでしょう。

推奨 ../Art/font_choice_rec_2x.png 非推奨 ../Art/font_choice_not-rec_2x.png