ビュジュアルデザイン
適応性とレイアウト
iOSアプリでは、iPadでのマルチタスク中、分割ビュー、画面の回転時などに、
さまざまなデバイスの形状とサイズを自動的に変更するようにインターフェイス要素とレイアウトを構成できます。
あらゆる環境で優れたエクスペリエンスを提供する、適応可能なインターフェースを設計することが重要です。
デバイスの画面サイズと向き
iOSデバイスにはさまざまな画面サイズがあり、縦向きでも横向きでも使用できます。
iPhone XやiPad Proなどの端から端までのデバイスでは、ディスプレイの角が丸くなっており、
デバイスの全体的な寸法とほぼ一致しています。
iPhone SEやiPad Airなどの他のデバイスには、長方形のディスプレイがあります。
アプリが特定のデバイスで実行される場合は、そのデバイスのすべての画面サイズで実行されることを確認してください。
つまり、iPhone専用アプリはすべてのiPhone画面サイズで実行する必要があり、iPad専用アプリはすべてのiPad画面サイズで実行する必要があります。
| 端末 | 寸法（縦） |
|---|---|
| 12.9インチiPad Pro | 1024pt×1366pt（2048px×2732px @ 2x） |
| 11インチiPad Pro | 834pt×1194pt（1668px×2388px @ 2x） |
| 10.5インチiPad Pro | 834pt×1194pt（1668px×2388px @ 2x） |
| 9.7インチiPad Pro | 768pt×1024pt（1536px×2048px @ 2x） |
| 7.9インチiPad mini | 768pt×1024pt（1536px×2048px @ 2x） |
| 10.5インチiPad Air | 834pt×1112pt（1668px×2224px @ 2x） |
| 9.7インチiPad Air | 768pt×1024pt（1536px×2048px @ 2x） |
| 10.2インチiPad | 810pt×1080pt（1620px×2160px @ 2x） |
| 9.7インチiPad | 768pt×1024pt（1536px×2048px @ 2x） |
| iPhone 11 Pro Max | 414pt×896pt（1242px×2688px @ 3x） |
| iPhone 11 Pro | 375pt×812pt（1125px×2436px @ 3x） |
| iPhone 11 | 414pt×896pt（828px×1792px @ 2x） |
| iPhone X S Max | 414pt×896pt（1242px×2688px @ 3x） |
| iPhone X S | 375pt×812pt（1125px×2436px @ 3x） |
| iPhone X R | 414pt×896pt（828px×1792px @ 2x） |
| iPhone X | 375pt×812pt（1125px×2436px @ 3x） |
| iPhone 8 Plus | 414pt×736pt（1080px×1920px @ 3x） |
| iPhone 8 | 375pt×667pt（750px×1334px @ 2x） |
| iPhone 7 Plus | 414pt×736pt（1080px×1920px @ 3x） |
| iPhone 7 | 375pt×667pt（750px×1334px @ 2x） |
| iPhone 6s Plus | 414pt×736pt（1080px×1920px @ 3x） |
| iPhone 6s | 375pt×667pt（750px×1334px @ 2x） |
| iPhone 6 Plus | 414pt×736pt（1080px×1920px @ 3x） |
| iphone 6 | 375pt×667pt（750px×1334px @ 2x） |
| 4.7インチiPhone SE | 375pt×667pt（750px×1334px @ 2x） |
| 4インチiPhone SE | 320pt×568pt（640px×1136px @ 2x） |
| iPod touch第5世代以降 | 320pt×568pt（640px×1136px @ 2x） |
AutoLayout
Auto Layoutは、アダプティブインターフェイスを構築するための開発ツールです。
Auto Layoutを使用すると、アプリのコンテンツを制御するルール（制約と呼ばれる）を定義できます。
たとえば、使用可能な画面スペースに関係なく、ボタンを常に水平方向の中央に配置し、
画像の下に8ポイント配置するようにボタンを制限できます。
Auto Layoutは、指定された制約に従ってレイアウトを自動的に再調整します。
次のようなさまざまな特性に動的に適応するようにアプリを設定できます。
- さまざまなデバイスの画面サイズ、解像度、色域（sRGB / P3）
- さまざまなデバイスの向き（縦/横）
- 分割ビュー
etc...
詳しくはAuto Layout Guideを参照してください。
Layout GuideとSafe Area
Layout Guideは、実際には画面上に表示されない長方形の領域を定義します。
これらのLayout Guideは、デバイスとコンテキストに基づいて適切なインセットを保証します。
Safe Areaは、コンテンツがステータスバー、ナビゲーションバー、ツールバー、タブバーと重ならないようにします。
システムが提供する標準のビューでは、自動的にSafe Areaが採用されます。
詳しくはUILayoutGuide、layoutMarginsGuide、readableContentGuide、およびsafeAreaLayoutGuideを参照してください。
Size Class
サイズクラスは、サイズに基づいてコンテンツ領域に自動的に割り当てられる特性です。
OSはビューの高さと幅を表す2つのサイズクラス、
- Regular（拡張スペースを表す）と
- Compact（制約付きスペースを表す）を定義します。
ビューはサイズクラスの任意の組み合わせを持つことができます。
- Regular width, regular height
- Compact width, compact height
- Regular width, compact height
- Compact width, regular height
※単純に横向きと縦向きそれぞれの高さを定義しているってことです。
例えば、iPhone 11 Pro Maxは縦向きはコンパクトな幅、通常の高さと認識され、横向きは通常の幅、コンパクトな高さとなります。
**マルチタスクサイズクラスというのが分割ビューの登場により出てきました。**ここはとりあえず割愛します。
レイアウトに関する一般的な考慮事項
視覚的な重みとバランスの考慮
大きなアイテムは目を引き、小さなものよりも重要に見えます。
大きいアイテムはタップするのも簡単です。
アプリがキッチンやジムなどの周囲の注意散漫に使用される場合、特に重要です。
基本的に主要なアイテムは画面の上半分に、左から右に読む場合は画面の左側に配置します。
※ただ、デバイスが大きくなっていることもあり右下に押しやすい、よく押すボタンを置くというのもUXの向上に繋がります。（個人的意見）
配置を有効に利用する
アラインメントにより、アプリがすっきりと整理された外観になり、
スクロール中にユーザーが集中できるようになり、情報を見つけやすくなります。
インデントと配置は、コンテンツのグループがどのように関連しているかを示すこともできます。
テキストサイズの変更に対応する
OSの設定画面からフォントサイズを変更できるので、調整する必要がある場合があります。
アプリでのテキストの使用の詳細については、タイポグラフィを参照してください。
タップ可能領域
すべてのコントロールの最小タップ可能領域を44pt x 44ptに維持するようにしてください。
フルスクリーンエクスペリエンスの設計
どちらのタイプのiOSデバイスでもアプリを実行できる柔軟性があることを高く評価しています。
アプリの特定の機能でテレフォニーなどのiPhone固有のハードウェアが必要な場合は、
iPadでそれらの機能を非表示にするか無効にして、アプリの他の機能を使用できるようにすることを検討してください。
画面の一番下や隅にインタラクティブなコントロールを明示的に配置しないでください。
ユーザーはディスプレイの下端でスワイプジェスチャーを使用して、ホーム画面やアプリスイッチャーなどの機能にアクセスします。
これらのジェスチャーは、この領域に実装するカスタムジェスチャーをキャンセルする場合があります。
画面の隅は、人々が快適に到達するのが難しい領域になる可能性があります。
※Safe Areaにかからなければ基本的には大丈夫です。iPhone8などは注意が必要ですね。
クリッピングを防ぐために必須コンテンツを挿入する
一般に、コンテンツは中央に配置され、対称的にはめ込まれているため、
どの方向でも見栄えがよく、角の丸い部分で切り取られたり、
ホーム画面にアクセスするためのインジケーターで隠れたりしません。
最良の結果を得るには、標準のシステム提供のインターフェース要素とAuto Layoutを使用してインターフェースを構築し、
Layout GuideとSafe Areaに準拠するべきです。
■正解
■不正解
はめ込み全角ボタン
画面の端まで延びるボタンは、ボタンのように見えない場合があります。
全幅ボタンの両側にある標準のUIKitマージンを尊重してください。
画面の下部に表示される全幅のボタンは、角が丸く、安全領域の下部と揃っているときに最適に見えます。
ステータスバーの高さに注意
フルスクリーンのiPhoneモデルでは、ステータスバーが他のモデルよりも高くなっています。
アプリがステータスバーの下にコンテンツを配置するために固定のステータスバーの高さを想定している場合は、
現在のデバイスに基づいてコンテンツを動的に配置するようにアプリを更新する必要があります。
現在ステータスバーを非表示にしている場合は、アプリをフルスクリーンのiPhoneで実行するときにその決定を再検討してください。
他のモデルよりもコンテンツの垂直方向のスペースが多く、ステータスバーは、アプリが十分に活用できない画面の領域を占めます。
ステータスバーには、人々が役立つと思う情報も表示されます。付加価値と引き換えにのみ非表示にする必要があります。
アニメーション
iOS全体の美しく繊細なアニメーションは、画面上の人とコンテンツ間の視覚的なつながりを構築します。
アニメーションを適切に使用すると、ステータスを伝え、フィードバックを提供し、直接操作の感覚を高め、
ユーザーがアクションの結果を視覚化するのに役立ちます。
アニメーションとモーションエフェクトは慎重に使用すること
過度または不必要なアニメーションは、特に没入型のエクスペリエンスを提供しないアプリで、
人々が途切れたり気が散ったりするように感じる可能性があります。
モーションエフェクトを実装する場合は、常に結果をテストして、それらが適切に機能することを確認してください。
リアリズムと信頼性に努める
物理的な法則に反するように見えるとき、ユーザーは混乱します。
たとえば、誰かが画面の上から下にスライドしてビューを表示した場合、上にスライドしてビューを閉じることができるはずです。
ブランディング
ブランディングを成功させるには、スマートなフォント、色、画像の決定を通じて、
独自のブランドアイデンティティを表現します。
洗練された控えめなブランディング
最高のエクスペリエンスを実現するには、アプリのデザインにブランドを微妙に取り入れます。
インターフェイス全体でアプリアイコンの色を使用することは、アプリにコンテキストを提供するための1つの優れた方法です。
ブランディングよりコンテンツを優先する
画面の上部にブランドアセットを表示するだけの永続的なバーを表示すると、コンテンツを表示する余地が少なくなります。
代わりに、カスタムの配色やフォントを使用したり、背景を微妙にカスタマイズしたりするなど、
ブランドを実装する邪魔にならない方法を検討してください。
アプリ全体にロゴを表示するという誘惑に負けないで
コンテキストを提供する必要がない限り、ロゴをアプリ全体に表示しないでください。
これは、タイトルがより役立つナビゲーションバーで特に重要です。
誘惑に負けないでって言葉、なんだか面白いですねw
Appleの商標ガイドラインに従う
Appleの商標をアプリ名や画像に表示しないでください。
アップルの商標リストおよびアップルの商標の使用に関するガイドラインを参照してください。
色
色は、活力を与え、視覚的な連続性を提供し、ステータス情報を伝え、ユーザーのアクションに応じてフィードバックを提供し、人々がデータを視覚化するのに役立つ優れた方法です。
注意を引く色
重要な情報に注意を引く色の力は、控えめに使用すると高まります。たとえば、重大な問題を警告する赤い三角形は、重大でない理由でアプリの他の場所で赤を使用すると効果が低下します。
アプリのロゴと調和する限られたカラーパレットを選択する
色を緻密に使用することは、ブランドを伝える優れた方法です。
アプリ全体のインタラクティブ性を示す
メモアプリでは、インタラクティブな要素は黄色です。
カレンダーアプリでは、インタラクティブな要素は赤です。
インタラクティビティを表すティントカラーを定義する場合は、他のカラーがそれと競合しないことを確認してください。
ティントカラーでライトモードとダークモードに対応
ティントカラーにシステムカラーを使用すると、ハイコントラストが自動的にサポートされます。
インタラクティブ要素と非インタラクティブ要素に同じ色を使用しないでください。
インタラクティブ要素と非インタラクティブ要素の色が同じ場合、タップする場所を人々が知るのは困難です。
半透明性が近くの色にどのように影響するかを検討する
半透明要素の背後に配置したり、ツールバーなどの半透明要素に適用したりすると、色が異なって表示される場合があります。
さまざまな照明条件下でアプリの配色をテスト
部屋の雰囲気、時間帯、天候などに基づいて、照明は屋内と屋外の両方で大きく異なります。
アプリが現実の世界で使用されている場合、コンピューターに表示される色は常に同じとは限りません。
晴れた日の屋外など、さまざまな照明条件下でアプリを常にプレビューして、色がどのように表示されるかを確認してください。
True Toneディスプレイが色にどのように影響するか
True Toneディスプレイを利用すると環境光センサーを使用して、その場の環境の照明条件に適応します。
読書、写真、ビデオ、およびゲームに主に焦点を当てたアプリは、ホワイトポイントのアダプティブスタイルを指定することで、
この効果を強化または弱めることができます。
開発者向けガイダンスについては、UIWhitePointAdaptivityStyleを参照してください。
コンテンツを認識しにくい色の使用は避ける
たとえば、色覚異常の人は一部の色の組み合わせを区別できない場合があり、
コントラストが不十分な場合、アイコンとテキストが背景に溶け込み、コンテンツが読みにくくなることがあります。
ガイダンスについては色とコントラストを参照ください。
システムカラー
アプリでシステムカラー値をハードコードしないこと
実際の色の値は、さまざまな環境変数に基づいて、リリースごとに変動する可能性があります。
システムカラーを適用するには、常にAPIを使用してください。開発者向けガイダンスについては、UIColorを参照してください。
iOS 13では、半透明がうまく機能しないまれなケースで使用できる6種類の不透明な灰色も導入されています。
たとえば、交差する要素や重なり合う要素（グリッドの線や棒など）は、不透明度を使用すると見栄えがよくなります。
基本的に、UI要素には意味的に定義されたシステムカラーを使用します。
ダイナミックシステムカラー
濃淡の色に加えて、iOSは意味的に定義されたシステムカラーも提供します。
これは、ライトモードとダークモードの両方に自動的に適応します。
セマンティックカラーは、その目的ではなく、背景領域と前景コンテンツで使用する色を定義しています。
たとえば、iOSでは、ラベル、セパレーター、塗りつぶしなど。
ダークモード
iOS 13.0以降では、システム全体で暗いモードと呼ばれる暗い外観を採用することを選択できます。
ダークモードでは、システムはすべての画面、ビュー、メニュー、コントロールに暗いカラーパレットを使用し、
より鮮やかな色を使用して、前景のコンテンツを暗い背景に対して目立たせます。
ダークモードは、すべてのユーザー補助機能をサポートしています。
設定で選択した外観モードに準拠する
システム全体の外観の選択に適応しない場合、アプリが壊れているとユーザーは思うかもしれません。
選択された外観を元に調整するか、どちらかのモードをアプリで強制的に選択する必要があります。
色のコントラストを調整
システム定義の色を使用すると、前景コンテンツと背景コンテンツの適切なコントラスト比が保証されます。
カスタムカラーの場合、特に小さいテキストの場合は、7：1のコントラスト比を目指します。
ガイダンスについては、「ダイナミックシステムカラー」を参照してください。
白い背景の色を柔らかく
ダークモードの場合は、背景が周囲の暗いコンテンツに対して光らないように、少し暗い白を選択します。
Materials
鮮やかさは、暗い背景のテキストのコントラストを維持するのに役立ちます。
システム提供のラベルの色を使用する場合
一次、二次、三次、および四次のラベルの色は、明るい外観と暗い外観に自動的に適応します。
関連するガイダンスについては、「タイポグラフィ」を参照してください。
ぼかし効果
iOSは、奥行き感を出すために半透明の効果を作成するぼかし効果を提供します。
これにより、前景のコンテンツに邪魔されることなく、ビューとコントロールが背景のコンテンツの見栄えを良くします。
この効果を生み出すために、マテリアルは背景の色情報がフロントのビューを通過できるようにし、
同時に背景のコンテキストをぼかして読みやすさを維持します。
用語
親しみやすく理解しやすい語句を使用する
技術的なことは受け入れがたいかもしれません。
人々が理解できないかもしれない頭字語や専門用語を避けてください。
基本的に誰にでも勧められるアプリは、高度に技術的な言葉を避けなければなりません。
専門的な言語は、より高度な、または技術的な群衆を対象とするアプリに適している場合があります。
インターフェイスのテキストは明確かつ簡潔に
ユーザーは短い直接のテキストを好み、タスクを完了するために長い文章を読むことは避けたいと思います。
最も重要な情報を特定し、簡潔に表現し、目立つように提示することで、
ユーザーが次に何をすべきかを理解しやすくさせます。
インタラクティブな要素を適切に
要素が何をするのかがひと目でわかるようにすべきです。
ボタンやその他のインタラクティブな要素にラベルを付ける場合は、接続、送信、追加などのアクション動詞を使用します。
ひいきに聞こえるかもしれない言葉は避ける
私たち、私、などの表現を避けてください、（例えば、「チュートリアル」ではなく「私のトレーニングを」）。
ユーザーは時々不快に解釈されます。
ユーモアを使うときは注意する
ユーザーはあなたのインターフェースのテキストを何度も読む可能性が高く、
最初は良いと思われるかもしれないものの、時間の経過とともに苛立たしいものになる可能性があることを覚えておいてください。
また、ある文化のユーモアは、必ずしも他の文化にうまく翻訳できるとは限らないことも覚えておいてください。
日付を正確に表現する
今日や明日のようなわかりやすい用語を使用するのが適切ですが、
現在のロケールを考慮に入れないと、これらの用語は混乱したり不正確になったりする可能性があります。
真夜中に始まるイベントを考えてみましょう。
1つのタイムゾーンで、イベントが今日開始される場合があります。
別のタイムゾーンで、同じイベントが昨日開始された可能性があります。
通常、日付はイベントを表示する人のタイムゾーンを反映する必要があります。
ただし、フライト追跡アプリなどの一部のケースでは、フライトの出発地である開始日とタイムゾーンを明示的に示す方が明確な場合があります。
タイポグラフィ
Appleは、iOSアプリで使用できる2つのタイプファミリーを提供しています。
サンフランシスコ（SF）。
サンフランシスコは、SF Pro、SF Pro Rounded、SF Mono、SF Compact、SF Compact Roundedを含むサンセリフタイプファミリーです。SF Proは、iOS、macOS、tvOSのシステムフォントです。
SF Compactは、watchOSのシステムフォントです。
プラットフォームUIの視覚的な明快さに一致するように設計されたシステムフォントは、読みやすく中立です。
ニューヨーク
ニューヨークは、インターフェースで使用したり、従来の読書体験を提供したりできる、古典的なセリフ書体です。
NYは以下をサポートします：
ラテン語、ギリシャ語、キリル文字のスクリプトを使用する100以上の言語
レギュラーからブラックまで、アップライトとイタリックの6つのウェイト
テキストのサイズに基づいて自動的に調整される可変文字間隔
小、中、大、および特大の個別の光学サイズに加えて、動的光学サイズ
ダイナミックタイプサイズ
ダイナミックタイプは、読者が好みのテキストサイズを選択できるようにすることで、さらに柔軟性を提供します。
以下は、異なるダイナミックタイプサイズでの各テキストスタイルの重み、サイズ、および先行値です。
より大きなアクセシビリティタイプサイズ
標準の動的タイプサイズに加えて、システムは、アクセシビリティが必要なユーザー向けに、さらに多くのサイズを提供します。
これは、より大きなアクセシビリティタイプサイズでの各テキストスタイルの重み、サイズ、および先行値です。
アイコンとサイズ
画像サイズと解像度
iOSがコンテンツを画面に配置するためにiOSが使用する座標系は、
ディスプレイのピクセルにマッピングされるポイントの測定に基づいています。
標準解像度ディスプレイのピクセル密度は1：1（@ 1x）で、1ピクセルは1ポイントに相当します高解像度ディスプレイはより高いピクセル密度を持ち、2.0または3.0の倍率を提供します（@ 2xおよび@ 3xと呼ばれます）。
その結果、高解像度ディスプレイには、より多くのピクセルを持つ画像が必要になります。
たとえば、100px×100pxの標準解像度（@ 1x）の画像があるとします。この画像の@ 2xバージョンは200px×200px、@ 3xバージョンは300px×300pxになります。
アプリアイコン
すべてのアプリには、App Storeで注目を集め、ホーム画面で目立つ、美しく思い出に残るアイコンが必要です。
アイコンは、一目でアプリの目的を伝える最初の機会です。また、設定や検索結果など、システム全体に表示されます。
シンプルさ
アプリの本質を捉えた単一の要素を見つけ、その要素をシンプルでユニークな形で表現します。
より修飾する場合は慎重に検討する必要があります。
アイコンのサイズが小さい場合、詳細を識別しにくい場合があります。
わかりやすいアイコンを心がける
アイコンが何を表しているのか、詳しく理科してもらう必要はありません。
たとえば、メールアプリのアイコンは、メールに広く関連付けられているエンベロープを使用します。
時間をかけて、アプリの目的を芸術的に表す美しく魅力的な抽象的なアイコンをデザインしてください。
※芸術的に表す美しく魅力的な抽象的なアイコンってサラッと書いてあるけど難しいような。。
背景をシンプルに、透明度の高いものは避ける
アイコンが不透明で、背景が乱雑にならないようにしてください。
近くにある他のアプリのアイコンを邪魔しないように背景をシンプルにします。
ただし、アイコン全体をコンテンツで埋める必要はありません。
単語は、ロゴが不可欠またはロゴの一部である場合にのみ使用する
アプリの名前がホーム画面のアイコンの下に表示されます。
名前を繰り返す、重要でない汎用的な単語を含めないでください。
デザインにテキストが含まれている場合は、アプリが提供する実際のコンテンツに関連する単語を強調します。
写真は含めない
写真の細部は、小さなサイズでは非常に見にくい場合があります。
Appleハードウェア製品の複製を使用しない
Apple製品は著作権で保護されており、アイコンや画像に複製することはできません。
さまざまな壁紙に対してアイコンをテストする
ユーザーがホーム画面用に選択する壁紙を予測することはできないため、
明るい色または暗い色に対してアプリをテストするだけではいけません。
さまざまな写真でどのように見えるかを確認してください。
スポットライト、設定、通知アイコン
※スポットライト、設定、通知アイコンで使用するアイコンを提供しないといけないということが書かれていますが、
Assetsに全てのサイズ入れれば良いので割愛。
開発者向けガイダンスについては、UIApplicationのsetAlternateIconNameメソッドを参照してください。
カスタムアイコン
iOS 13以降では、SFシンボルを使用することがお勧めされています。
アプリがiOS12以前で実行されている場合、またはカスタムビットマップアイコンを作成する必要がある場合はこちらのガイダンスを一読しておくと良いです。
簡素化されたデザイン
ディテールが凝りすぎていないユニバーサルなデザインを目指します。
良いアイコンの要素の一つとして、使い慣れた視覚的なメタファーがあります。
グリフ
グリフ（テンプレートイメージとも呼ばれます）は、マスクを使用して形状を定義する、
透明度、アンチエイリアス、およびドロップシャドウのない単色イメージです。
グリフは、コンテキストとユーザーインタラクションに基づいて、
適切な外観（カラーリング、ハイライト、鮮やかさなど）を自動的に受け取ります。
ナビゲーションバー、タブバー、ツールバー、ホーム画面のクイックアクションなど、
さまざまな標準インターフェイス要素がグリフをサポートしています。
アイコンの読みやすさ
一般に、塗りつぶされたアイコンは、輪郭を描かれたアイコンよりも明確になる傾向があります。
アイコンに線を含める必要がある場合は、他のアイコンやアプリのタイポグラフィと重さを調整してください。
色を使用して、選択状態と選択解除状態を伝える
ソリッドバージョンとアウトラインバージョンのように、2つの異なるアイコンデザインを切り替えないでください。
アイコンにテキストを含めない
テキストが必要な場合は、アイコンの下にラベルを表示し、それに応じて配置を調整します。
カスタムアイコンサイズ
何よりも、アプリのアイコンファミリーのサイズは視覚的に一貫している必要があります。個々のアイコンのデザインの重さが異なる場合、この効果を実現するには、一部のアイコンを他のアイコンよりも少し大きくする必要がある場合があります。
サイズ一覧など詳細はhttps://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/で。
システムアイコン
システムが提供するすべてのイメージには、特定のよく知られた意味があります。
ユーザーの混乱を避けるために、各画像はその意味と推奨される使用法に従って使用することが不可欠です。
もし意図したイメージを表すアイコンがない場合は自分でアイコンを作成します。
システムアイコンの意味と使用方法については以下を参考にしてください。