美しいアプリをデザインするには？iOSのアプリ制作に関するデザインガイドラインを徹底解説（後編）

更新日: 2018年01月31日

アプリマーケティング

色｜Color

iOSでは、色はインタラクティビティを示したり、リアルな動きの一部として活用したり、視覚上の効果として使用したりします。
iOSには以下のように標準のカラースキームが用意されており、単独もしくはライトカラー及びダークカラーの組み合わせでこれらの配色が使用されます。

▲ iOS標準のカラースキーム

参考：
FacebookのUIの配色から考える！ブランドカラーを活かすためのHSB配色講座

配色を適切に使用することは、ブランドイメージの確立という面においても非常に重要です。
控えめにブランドを表現するときに、ロゴや過度な装飾が表示できないのであれば、色を使ってブランドを表現するのが一番よい方法だからです。

1. アプリでは補完色を使いましょう｜Use complementary colors throughout your app.

アプリ内のそれぞれの色は競合したり引っ張りあったりしてはいけません。
例えば、パステルカラーがアプリのスタイルに合っているのであれば、他のパステルカラーを使ってアプリを引き立てましょう。

配色のバランスは非常に重要です。
例えば、Airbnbはアプリのリニューアル後、ブランドカラーである薄いピンクの他に、薄いエメラルドグリーンを使っています。
ただし、シンプルな機能を提供するときには、できるだけ使用する色彩の数を絞るようにしましょう。

2. 例外を除いてアプリのロゴで使っている数色のカラーパレットを使いましょう｜In general, choose a limited color palette that coordinates with your app logo.

色を少しだけ使うことでブランドを表現するのが一番いい方法です。

例えばFacebookメッセンジャーなら青、Pocketならビビッドピンクといったように、iOSではできるだけ色を限定するのがよいとされています。
使っている色彩の数が多いのは過度な装飾と同じで、ユーザーがコンテンツに集中するのを妨害してしまうからです。

3. アプリのインタラクティビティを表現するメインカラーを選びましょう｜Consider choosing a key color to indicate interactivity throughout your app.

「メモ」アプリでは、インタラクティブ要素は黄色で着色されています。
「カレンダー」アプリでは、赤色を使っています。
インタラクティビティを示す重要な要素を決めるのであれば、ほかの色はその色と競合してはいけません。

前項とセットで考えるならば、アプリのロゴで使っている色、つまりブランドカラーをインタラクティブ要素(ラベルやボタンなど)に使ってみましょう。
ある色がインタラクティビティを示す色であることをユーザーが理解できれば、ユーザーはその色のついた要素がタップ可能であると理解することができるからです。

4. インタラクティブ要素に使う色と非インタラクティブ要素の色は同じ色にしないでください

インタラクティブ要素と非インタラクティブ要素が同じ色であれば、ユーザーはどこをタップすればいいのかわからなくなってしまうからです。

例えば上の連絡先アプリの例でいえば、インタラクティビティを示す色はブルーなので、グレーはタップしても何も起こらないことを示しています。
非インタラクティブ要素は、上の例のように彩度を持たないグレーのような色が望ましいでしょう。

5. 画面表示や透明な部分と同系色との関係を考えましょう｜Consider how artwork and translucency affect nearby colors.

視覚上の一致を保ちUI要素が目立ちすぎたり目立たなくなったりしないように、異なった画面表示をする場合には変化をつけるようにしましょう。
例えば、地図アプリでは、マップモードのときにはライトカラーを使ったカラースキームで表示し、衛星モードが有効になったときにはダークカラーのカラースキームに切り替わります。
透明な要素の上に配置されたときや、ツールバーのような透明な要素に適用するときには異なる配色として見えるようにします。

上の画像では、ライトカラーの場合とダークカラーの場合で、若干ブルーの明度・彩度が変わっています。
また、黒い文字のラベルは、衛星モードでは反転して白い文字色となり、可読できるようになっています。

6. 画像にカラープロファイルを設定しましょう｜Apply color profiles to your image.

iOSのデフォルトの配色スキームは標準的なRGB(sRGB)です。
配色がこのカラースペースと合っていることを理解するために、画像にはカラープロファイルを埋め込んでおきましょう。

やや応用的な話ですが、画像にカラープロファイルが埋め込まれていないとデバイスごとに見え方が変わる場合があります。
カラープロファイルは通常の画像編集ソフトであれば自動的に調整してくれますが、万一カスタムで設定することがある場合には「RGB(sRGB)」で設定することを覚えておきましょう。

7. 互換性のあるデバイスで視覚体験を広げるためにワイドカラーを使いましょう｜Use wide color to enhance the visual experience on compatible devices.

ワイドカラーディスプレイは、sRGBよりもリッチで表現力のあるP3カラースペースをサポートしています。
ビビッドカラーを使う必要がある場合は、ピクセルあたり16ビットのP3カラースペースをサポートしたディスプレイを使って .png フォーマットにエクスポートしましょう。

ワイドカラーディスプレイとは、sRGBよりも25％広いカラースペースで、画像ソフトによっては16bit PNG保存する場合にワイドカラーディスプレイに対応したDisplay P3カラープロファイルを埋め込むことができます。
ワイドカラーディスプレイは2015年後半の27インチ・21インチのiMac、iPad Proでサポートされており、現在は実質的にiPad Pro用に最適なグラフィックを設定する方法ということになりますが、今後発売されるRetina対応のデバイスではワイドカラー仕様になる可能性があります。

8. さまざまな条件の明るさのもとでアプリのカラースキームを検証しましょう｜Test your app’s color scheme under a variety of lightning condition.

インドアであってもアウトドアであっても、部屋の暗さや日の登る時間、天気、その他の状況によって、明るさは変化します。
コンピュータ上で見える色は実生活ではいつも同じように見えるとは限りません。
快晴の屋外での見え方も含めて、アプリの色がどのように見えるかを確かめるために、さまざまな明るさの状況下でアプリの見え方を常に検証しましょう。
必要であれば、主な使用状況に合わせて最適な見え方に配色を調整するといいでしょう。

日光で画面が反射したときにスマホの画面が見にくくなったという経験をお持ちの方も多いのではないでしょうか。
そういった状況で画面がどのように見えるかは、実機を使って事前に検証しておくのがよいでしょう。

9. True Toneディスプレイでの色の見え方を確認しましょう｜Consider how the True Tone display affects color.

True Toneディスプレイでは現在の状況における照明状況に合わせるためディスプレイのホワイトポイントを自動調整するためのアンビエントライトセンサーが搭載されています。
主に文章を表示したり、写真やビデオを見たり、ゲームをしたりするアプリでは、ホワイトポイントの適用状況を特定することによってこれを強めたり弱めたりすることがあります。

True ToneはiPad Proで採用されているディスプレイで、色や彩度を自動調整することで撮影した写真がより自然に見えるようになります。
前項に関連しますが、デバイスの周辺の光が明るくなるにつれて、ディスプレイのコントラストは減少します。
そして、周囲の光源が変われば、白色の見え方も変わります。

iPad Proでは4チャンネルのセンサーが搭載されており、センサーにより周辺光の色や明るさを測定し、それに合わせてディスプレイの色や明度を自動調整する機能があるのです。
実際、True Toneによる見え方まで考慮する必要があるかは開発者判断ですが、頭の片隅に入れておくとよいでしょう。

10. 色盲の人や文化の違いで見え方が変わることを認識しましょう｜Be aware of colorblindness and how different cultures perceive color.

ユーザーによって色は違ったふうに見えます。
例えば、色盲のひとの多くは、赤と緑、あるいは別の色とグレー、青とオレンジを区別するのが難しいと感じています。
2つの状態や値を区別する唯一の方法としてこうした色の組み合わせを使うのはやめましょう。
例えば、オフラインやオンラインの状態を表示するのに赤と緑の丸を使う代わりに、赤い四角と緑の丸を使いましょう。
画像編集ソフトの中には色盲の状況をシミュレーションするツールが含まれているものもあります。
また、自分が使用する色が他の国や文化でどのように認識されるかも考えておく必要があります。
例えば、赤が危険を伝える色として使われる文化もあります。
その一方で、赤にポジティブな意味があると考える文化もあります。
アプリ上の配色が適切なメッセージを伝えているかを確認しておきましょう。

アクセシビリティを考えるのは重要なことですが、もしかしたら文化の違いまで考慮するのは難しいかもしれません。
しかしながら、自分が見る世界を当たり前だと思わず、さまざまな立場の人がアプリを使うのを想定して開発することは大切なことです。
可能な限り、さまざまな立場の人にアプリのローンチ前のテストに加わってもらいましょう。

参考：
心地いいホームページとは？アクセシビリティを高めて離脱率を低くするための5つのポイント

11. 十分なカラーコントラスト比を使いましょう｜Use sufficient color contrast ratios.

アプリ上の配色のコントラストが十分でなければ、どんな人にも読みにくいコンテンツになってしまいます。
例えば、アイコンやテキストは背景と混じり合ってしまうでしょう。
オンラインカラーコントラストカリキュレーターを使えば、アプリ上のカラーコントラストを正確に分析することができ、最適な基準に合わせることができます。
最も好ましいコントラスト比は厳格なアクセシビリティの基準値である7：1ですが、最低でもコントラスト比は4.5：1にしましょう。

コントラスト比について常に考慮するのは難しいかもしれません。
しかし、アプリのキャプチャを画像編集ソフトなどを使って白黒に脱色表示したときに、どれがボタンでどれがテキストなのかが分からなければ、コントラスト比を調整する必要があるでしょう。
前項と関連しますが、コントラスト比が十分であれば、色盲のひとでも操作しやすくなります。