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

2018年01月31日

Appleのデザインが素朴で繊細で洗練されていると感じるのは、なぜでしょうか。
その答えの手がかりが、Appleの「iOSヒューマンインターフェイスガイドライン」(iOS Human Interface Guideline)にあります。

このガイドラインは、iOSに関する考え方や機能紹介、デザインガイドやエクステンションなどのあらゆるリソースが記述されています。
もともとはiOSアプリの開発者向けに書かれたものですが、アプリデザイナーやアプリエンジニアだけでなく、テック業界の人なら一度は目を通しておくとよいでしょう。

前編では、iOS全体に関するデザインや機能性の考え方(Overview)に関してご紹介しました。

後編となる今回は、各論のうちデザインに関する部分＝ビジュアルデザイン(Visual Design)の一部をご紹介します。
iOSやiOSアプリに関するデザインガイドをしっかりと理解すれば、App Storeでヒットを叩き出しているアプリがなぜこのデザインになっているのかもおのずと分かってくるかもしれません。

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

アニメーション｜Animation

iOSではアプリを起動したり閉じたりするときをはじめとして、様々な場面で美しくも繊細なアニメーションが表示されます。
アニメーションが適切に使用されれば、現在のステータスを伝えたり、アクションのフィードバックをビジュアル化して伝えたりすることができます。
アニメーションに関して、ガイドラインでは次の4つの提言をしています。

1. アニメーションやモーションエフェクトを賢く使いましょう｜Use animation and motion effects judiciously.

アニメーションを「アニメーションを使うため」に使ってはいけません。
使う目的のないアニメーションを過度に使用すると、ユーザーはうんざりしてアプリを閉じたくなってしまいます(特に没頭する要素のないシンプルなアプリケーションで起こります)。
iOSでは、ホームスクリーンや他のエリアでの階層を表現するために、パララックスエフェクトのようなモーションエフェクトを使っています。
こうしたエフェクトがあれば今起きていることを理解したり楽しんだりすることができますが、使いすぎるとユーザーはイライラしたり操作しづらいと感じたりします。
モーションエフェクトを使うときは、常にその結果が想定通りにいくか検証しましょう。

Webデザインでもよく言われることですが、アニメーションを「適正なタイミング」で使うことは非常に重要なことです。
目的のない不毛なアニメーションが多いと、アプリ全体が野暮ったくなって、せっかくいい機能を提供していてもアニメーションによってアプリが台無しになってしまう恐れがあります。
アニメーションを使うときは、ちょうどいいタイミング、ちょうどいい量を見極めましょう。

2. リアリティと信用の両方を求めましょう｜Strive for realism and credibility.

ユーザーはある程度なら芸術的な表現を受け入れられますが、意味のない動きをしたり、物理法則に逆らった現れかたをしたりすればユーザーはうんざりしてしまいます。
例えば、画面上方からスライドダウンしてしてメッセージを表示したら、ユーザーはスライド仕返してメッセージを非表示にできるようにしなければなりません。

これはアニメーションそのものというよりは機能的な側面に関することですが、アニメーションを一方的に押し付けるのではなく、ユーザー側でもコントロールできるようにすべきだという提言です。

3. 一貫性のあるアニメーションを使いましょう｜Use consistent animation.

いつでも同じような流れるような体験のほうが、ユーザーのエンゲージメント率は上がります。
スムーズなトランジション、デバイスの方向を変える際の流れるようなアニメーション、物理法則に基づいたスクローリングなど、ユーザーはiOS全体で使われている繊細なアニメーションに慣れています。
ゲームのようにのめり込むような体験を提供したいのであれば、iOS標準のアニメーションに匹敵するほどのカスタムアニメーションにしましょう。

前編で見た「一貫性」(Consistency)の原則と同様、iOS上で一貫した体験を作り出すために、アニメーションにも一貫性が求められています。
そのため、オリジナルアニメーションを過度に使うことは避け、できるだけiOS標準のアニメーションを使うことが重要です。

4. アニメーションをオフにできるようにしましょう｜Make animations optional.

アクセシビリティの設定で動きを抑える設定にした場合、アプリ中のアニメーションも最小限にするか削除できるようにしましょう。

必要があれば、ユーザーがアニメーションをオフにできるように設定しましょう。

ブランディング｜Branding

ブランディングとはいささか抽象的な概念ではありますが、アプリのアイデンティティを支える重要な考え方でもあります。
例えばAirbnbやFacebookアプリのように、フォント、色、画像の配置などを通して独自のブランドアイデンティティを確立しているアプリはたくさんあります。
それでは、ガイドラインではブランディングについてどのようなことに触れているのでしょうか。

1. 明瞭ながら控えめなブランディングをしましょう｜Incorporate refined, unobtrusive branding.

ユーザーがアプリを使うのは、楽しんだり、情報を探したり、何かを成し遂げたりするためであって、広告を見るためではありません。
素晴らしいUXを実現するために、アプリのデザインを通してブランドを控えめに織り交ぜましょう。
アプリのアイコンで使われている色をUI全体で使うのは、アプリのコンテクストを伝えるための手段の一つです。

控えめにブランドアイデンティティを織り交ぜるというのは、「コンプレクション・リダクション」(CR)の考え方とも一致します。
例えば、画像投稿SNSであるInstagramは、それまで紺色のブランドカラーをヘッダーやUIのバックグラウンドに採用していましたが、今はメニューやアイコンは簡素化され、モノトーンに紫・ピンク・黄色のカラフルなグラデーションをアクセントに加えたシンプルなデザインになっています。

参考：
デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？

2. ブランディングをイケてるアプリデザインの目的にしてはいけません｜Don’t let branding get in the way of great app design.

特に、アプリをまるでiOS標準のアプリであるかのように仕立て上げてください。
直感的で、ナビゲーションしやすく、使いやすく、コンテンツに集中できるようにしてください。
他のプラットフォームでも同じアプリが利用できるのだとしても、一貫したブランディングにこだわりすぎてデザインが華美になるのを避けてください。

ブランディングの名の下に、余計な装飾が施されているアプリはたくさんあります。
他のプラットフォームとは主にAndroidを指すと考えられますが、iOSアプリではiOSのガイドラインに沿ってシンプルにデザインすることが求められます。

3. ブランディングよりもコンテンツに従いましょう｜Defer to content over branding.

スクリーン上方にブランドアイテムだけが表示されている固定バーが表示されているということは、コンテンツを閲覧するためのスペースが少なくなるということを意味します。
代わりに、カスタムカラースキームやフォントを使ったり、背景を少しカスタマイズしたりして、ブランディングするためにうっとうしいと思われるようなことを回避する方法を考えてみましょう。

アプリ内でブランドを誇示するのはやめて、コンテンツを重視するよう提言しています。
確かに、ブランドカラーばかりを誇張して使いづらいアプリより、控えめにブランドをアピールしつつも機能的に使いやすいアプリのほうが長く使いたくなりますよね。

4. アプリ内でロゴを表示したいという欲求を抑えましょう｜Resist the temptation to display your logo throughout your app.

アプリ内でロゴを表示するのは、必要なとき以外は控えましょう。
これは特にナビゲーションバー内では大切なことです。
タイトルを出したほうが役立つでしょう。

ロゴを押し付けがましく表示することは、前項の「ブランディングよりもコンテンツに従う」ということにも反しますね。
ロゴマークはアプリアイコンで表示すればよく、アプリを立ち上げたあとはできるだけ控えめにするのが望ましいと言えます。

5. Appleの商標ガイドラインに従いましょう｜Adhere to Apple’s trademark guideline.

Appleの商標をアプリ名やアプリの画面で使ってはいけません。
詳しくはAppleの商標一覧やApple商標使用ガイドラインをご覧ください。

最後は、Appleの名称やアイコンなどを勝手に使用してはいけないということでした。
他のブランドを侵害しないように、正しくブランディングを行いましょう。

色｜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にしましょう。

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