FRMSKI開発ブログ

AWS、iOS、AR/VRなど開発メモ

色によるコミュニケーションは慎重に!「カラー」についてのiOSガイドライン和訳&まとめ

アップルのヒューマン・インターフェース・ガイドラインiOSの「ビジュアル・デザイン/カラー」についての和訳です。

カラー和訳

色は活力を与え、視覚的な連続性を提供し、状態情報を伝達し、ユーザーの行動に応じてフィードバックを与え、人々がデータを視覚化するのを助けるための素晴らしい方法です。明るい場所と暗い場所の両方で、個別に、または組み合わせて最適な色合いを選ぶときは、システムの配色を確認してください。

f:id:frmski:20181125235815p:plain:w500

  • コミュニケーションには慎重に色を使用してください
     重要な情報に注意を喚起する色の力は、控えめに使用することで高まります。たとえば、重大な問題を警告する赤い三角形は、重要でない理由で赤がアプリケーション内の別の場所で使用されていると効果が低下します。

  • アプリ全体で補色を使用します
     あなたのアプリの色は、葛藤や混乱を招くことなく、うまく機能するはずです。たとえば、パステルがアプリのスタイルに不可欠な場合は、調整可能なパステルセットを使用します。

  • 一般的には、アプリのロゴと調整する限られたカラーパレットを選択します
     色の絶妙な使用は、あなたのブランドを伝えるのに最適な方法です。

  • アプリ全体で対話性を示すためにキーカラーを選択することを検討してください
     ノートアプリでは、インタラクティブな要素は黄色です。カレンダーでは、インタラクティブな要素は赤です。インタラクティブ性を示すキーカラーを定義する場合は、他の色と競合しないようにしてください。

  • 対話型および非対話型の要素には同じ色を使用しないでください
     インタラクティブな要素と非インタラクティブな要素が同じ色を持つ場合、人々はどこでタップするのかを知ることは難しいです。

f:id:frmski:20181126000210p:plain:w500

  • アートワークと透明度が近くの色にどのように影響するかを考えてください
     アートワークのバリエーションは、視覚的な連続性を保ち、インターフェイス要素が圧倒的になるのを防ぐために、近くの色の変更を保証することがあります。たとえば、マップは地図モードを使用しているときは明るい配色を表示しますが、サテライトモードがアクティブなときは暗い配色に切り替わります。また、半透明要素の背後に配置したり、ツールバーなどの半透明要素に適用すると、色が異なるように見えることがあります。

  • さまざまな照明条件下でアプリの配色をテストします
     照明は、部屋の雰囲気、時間帯、天候などに基づいて、屋内と屋外の両方で大きく異なります。あなたのコンピュータで見られる色は、あなたのアプリが現実世界で使用されているときに常に同じに見えるとは限りません。色がどのように表示されるかを確認するには、晴れた日の屋外など、複数の照明条件下でアプリを常にプレビューします。必要に応じて、色を調整して、大部分のユースケースで最高の視聴体験を提供します。

  • トゥルートーンの表示がどのようにカラーに影響するかを検討してください
     トゥルートーンディスプレイは、周囲光センサを使用して、現在の環境の照明条件に適応するようにディスプレイの白色点を自動的に調整します。読書、写真、ビデオ、ゲームに焦点を当てたアプリは、ホワイトポイントのアダプティブスタイルを指定することで、この効果を強化または弱めることができます。開発者ガイダンスについては、「情報プロパティーリストのキーリファレンス(About Info.plist Keys and Values)」を参照してください。

  • 色盲を意識してください
     例えば、多くの色盲人は、赤を緑色(および灰色から色を区別する)、または青色をオレンジ色から区別するのが難しいと感じています。 2つの状態や値を区別する唯一の方法として、これらの色の組み合わせを使用しないでください。たとえば、赤と緑の円を使用してオフラインとオンラインを示す代わりに、赤い四角と緑の円を使用できます。画像編集ソフトウェアの中には、色盲を証明するのに役立つツールがあります。

f:id:frmski:20181126000838p:plain:w500

  • 色の使用が他の国や文化でどのように認識されるかを考えてみましょう
     いくつかの文化では、例えば、赤は危険を伝えます。他の国では、赤は肯定的な意味を持っています。あなたのアプリの色が適切なメッセージを送信することを確認してください。

  • 十分な色コントラスト比を使用してください
     アプリのコントラストが不十分であると、誰もが読むことが難しくなります。たとえば、アイコンやテキストが背景と混ざることがあります。オンラインカラーコントラスト計算機を使用すると、アプリのカラーコントラストを正確に分析し、最適な基準を満たしているかどうかを確認できます。 4.5:1の最小コントラスト比を目指しますが、より厳しいアクセシビリティ基準を満たすため、7:1が好まれます

カラーマネジメント和訳

  • 画像にカラープロファイルを適用します
     iOSのデフォルトの色空間は標準RGB(sRGB)です。色がこの色空間に正しく一致するようにするには、画像に埋め込みカラープロファイルが含まれていることを確認してください。

f:id:frmski:20181126001633p:plain:w300

  • 互換性のあるディスプレイでの視覚体験を向上させるためにワイドカラーを使用します
     ワイドカラーディスプレイはP3カラースペースをサポートしており、より豊かで飽和した色をsRGBよりも生成することができます。その結果、ワイドカラーを使用する写真やビデオはよりリアルになり、ワイドカラーを使用するビジュアルデータとステータスインジケータはよりインパクトのあるものになります。必要に応じて、ディスプレイP3カラープロファイルを1ピクセルあたり16ビット(1チャネルあたり)で使用し、画像を.png形式で書き出します。ワイドカラー画像をデザインし、P3カラーを選択するには、ワイドカラーディスプレイが必要であることに注意してください。

  • カラースペースに特化したイメージとカラーバリエーションがあればそれを提供します
     一般に、P3の色と画像は、sRGBデバイスでは期待どおりに表示される傾向があります。しかし、時には、sRGBで見たときに非常に似通った2つのP3カラーを区別することは難しいかもしれません。 P3スペクトルで色を使用するグラデーションは、sRGBデバイスで切り取って表示されることもあります。これらの問題を回避するために、Xcodeプロジェクトのアセットカタログに明確なイメージとカラーを提供して、ワイドカラーデバイスとsRGBデバイスの両方でビジュアルな忠実性を確保することができます。

  • 実際のsRGBおよびワイドカラーディスプレイでアプリの色をプレビューします
     両方のタイプのディスプレイで同じように優れた視覚体験を得るために、必要に応じて調整を行います。

TIP
 ワイドカラーディスプレイを搭載したMacでは、システムカラーピッカーを使用してP3カラーを選択してプレビューし、sRGBカラーと比較することができます。

まとめ

色を正しく使うことでコミュニケーションを円滑にすることができます。AppleのP3カラーはsRGBよりも広域な色範囲をサポートします。カラースキームを正しく設計し、iOSの色表現を最大限に利用することでアプリのパフォーマンスはぐんとアップするでしょう。

【HIG和訳】ビジュアル・デザイン / ブランディング

アップルのヒューマン・インターフェース・ガイドラインブランディングについての和訳です。

ブランディング

 ブランド化に成功するには、アプリにブランドアセットを追加するだけではありません。素晴らしいアプリは、スマートなフォント、カラー、画像の意思決定を通じて、独自のブランドアイデンティティを表現します。あなたのアプリに文脈を与えるために十分なブランディングを提供してください、ただあまり気にならないようにすること。

f:id:frmski:20181123145202p:plain:w500

洗練された、控えめなブランドを取り入れる

 人々は、広告を見るのではなく、楽しむために、情報を入手するために、または物事を完了させるためにあなたのアプリを使用します。最高の体験を得るには、アプリのデザインを通じてブランドを微妙に組み込みます。アプリアイコンに色を使用することは、アプリにコンテキストを提供するうえで便利です。

偉大なアプリケーションデザインの方法ではブランドを得ることはできない

 とりわけ、あなたのアプリをiOSアプリのように感じさせてください。直感的で操作が簡単で、使いやすく、コンテンツに重点を置いていることを確認してください。たとえあなたのアプリが他のプラットフォームで利用可能であっても、一貫したブランディングに集中することによってデザインが薄れないようにしてください。

ブランディング以上にコンテンツに従う

 ブランドアセットを表示する以外の何もしない、画面上部の永続バーを表示すると、コンテンツを表示する余地が少なくなります。代わりに、カスタムカラースキームやフォントを使用する、または背景を微妙にカスタマイズするなど、ブランディングを実装するための邪魔にならない方法を検討してください。

アプリ全体にロゴを表示する誘惑に抵抗する

 コンテキストを提供するために必要でない限り、アプリ全体にロゴを表示しないでください。これは、タイトルがより役立つナビゲーションバーでは特に重要です。

Appleの商標に関するガイドラインに従う

 Appleの商標は、アプリの名前や画像に表示されないようにしてください。 Apple商標の使用に関するApple商標リスト(Legal - Trademark List - Apple)とガイドラインLegal - Copyright and Trademark Guidelines - Apple)を参照してください。

ヒント
 App Storeは、あなたのブランドを強調するためのより多くの機会を提供します。ガイダンスについては、App StoreマーケティングガイドラインMarketing Resources and Identity Guidelines - App Store - Apple Developer)を参照してください。

ブランディングについてのまとめ

 「洗練された、控えめな」という点がAppleらしい。あくまで全体的な機能美やデザイン性を大切にして、個々のモジュールの組み合わせによる最低限でシンプルなiOSのデザインシステムを構築しているように思う。

【HIG和訳】ビジュアル・デザイン / アニメーション

ヒューマン・インターフェース・ガイドラインのビジュアル・デザイン/アニメーションについて和訳です。
UIデザインにおいてアニメーションを用いことによるフィードバックの効果は非常に重要性の高い要素になってきています。

以下和訳項目です。

アニメーション

 iOS全体の美しく微妙なアニメーションは、画面上の人とコンテンツの視覚的なつながりを作り出します。適切に使用すると、アニメーションは状態を伝え、フィードバックを提供し、直接操作の感覚を高め、ユーザーが行動の結果を視覚化するのを助けます。

アニメーションとモーションエフェクトを使い分けてください

 アニメーションのためだけにアニメーションを使用しないでください。過度のまたは不必要なアニメーションは、特に没入感のある体験を提供しないアプリでは、人々の接続が外れたり気が散ったりするように感じることがあります。 iOSは、視差効果などのモーションエフェクトを使用して、ホーム画面や他の領域での奥行き感を作成します。これらの効果は、理解と楽しみを増やすことができますが、それらを過度に使用すると、アプリは見えなくなり、制御が難しくなります。モーションエフェクトを実装する場合は、結果が常にうまく動作するかどうかをテストしてください。

現実主義と信頼のために努力する

 人々は芸術的ライセンスを受け入れる傾向がありますが、動きが理にかなっていないか、または物理的な法律に反するように見える場合には、迷子になります。例えば、誰かが画面の上からスライドさせてビューを表示した場合、ビューを元に戻すことでビューを閉じることができます。

一貫したアニメーションを使用する

 使い慣れた、流れるような体験は、ユーザーの関わりを維持します。彼らはスムーズなトランジション、デバイスの向きの変化、物理ベースのスクロールなど、iOS全体で使用される微妙なアニメーションに慣れています。ゲームなどの没入感のある体験を作成している場合を除き、カスタムアニメーションは組み込みアニメーションに匹敵するはずです。

アニメーションをオプションにする

 アクセシビリティ設定でモーションを減らすオプションが有効になっている場合、アプリケーションはアプリケーションのアニメーションを最小限に抑えるか、またはなくす必要があります。

ビジュアル・デザイン / アニメーションの和訳を終えて

 アニメーションも適切に使うことでアフォーダンスやナッジを効果的に生み出すことができます。フォントや色などクラシカルデザインにおける要素に加えてアニメーションについての研究はより必要になってくるでしょう。

【HIG和訳】ビジュアル・デザイン / 適応性とレイアウト②

今回はアップルのヒューマン・インターフェース・ガイドライン、ビジュアル・デザインについての和訳の続きです。
前回の記事↓

makesomethingue.hatenablog.com

本記事では下記の項目を和訳しています。レイアウトを扱う上での一般的な項目が解説されています。

サイズクラス

 サイズクラスは、サイズに基づいてコンテンツ領域に自動的に割り当てられる特性です。システムは、ビューの高さと幅を表す2つのサイズクラス、レビュラー(広い領域)とコンパクト(狭い領域)を定義します。

 ビューは、サイズクラスの任意の組み合わせを持つことができます。

  • レギュラーの幅、レギュラーの高さ
  • コンパクトの幅、コンパクトの高さ
  • レギュラーの幅、コンパクトの高さ
  • コンパクトの幅、レギュラーの高さ

 他の環境のバリエーションと同様に、iOSはコンテンツエリアのサイズクラスに基づいてレイアウトを動的に調整します。たとえば、縦のサイズクラスがコンパクトな高さからレギュラーの高さに変更された場合、おそらくユーザがデバイスを横向きから縦向きに回転させたため、タブバーが大きくなることがあります。

バイスサイズクラス

 画面サイズに基づいて、さまざまなデバイスでのフルスクリーンエクスペリエンスに異なるサイズクラスの組み合わせが適用されます。

f:id:frmski:20181121122845p:plain:w500

Device Portrait orientation Landscape orientation
12.9" iPad Pro Regular width, regular height Regular width, regular height
11" iPad Pro Regular width, regular height Regular width, regular height
10.5" iPad Pro Regular width, regular height Regular width, regular height
9.7" iPad Regular width, regular height Regular width, regular height
7.9" iPad mini 4 Regular width, regular height Regular width, regular height
iPhone XS Max Compact width, regular height Regular width, compact height
iPhone XS Compact width, regular height Compact width, compact height
iPhone XR Compact width, regular height Regular width, compact height
iPhone X Compact width, regular height Compact width, compact height
iPhone 8 Plus Compact width, regular height Regular width, compact height
iPhone 8 Compact width, regular height Compact width, compact height
iPhone 7 Plus Compact width, regular height Regular width, compact height
iPhone 7 Compact width, regular height Compact width, compact height
iPhone 6s Plus Compact width, regular height Regular width, compact height
iPhone 6s Compact width, regular height Compact width, compact height
iPhone SE Compact width, regular height Compact width, compact height

マルチタスクサイズクラス

 iPad上では、アプリがマルチタスク設定で実行されているときにサイズクラスが適用されます。

f:id:frmski:20181121123221p:plain:w500

f:id:frmski:20181121131656p:plain:w500

一般的なレイアウトに関する考慮事項

  • 主なコンテンツがデフォルトサイズでクリアであることを確認する
     重要なテキストを読むために横にスクロールしたり、サイズを変更しない限り、拡大して主画像を表示する必要はありません。

  • アプリ全体にわたって一貫した外観を維持します
     一般的に、同様の機能を持つ要素は類似しているはずです。

  • ビジュアルウェイトとバランスを使用して重要性を伝えます
     大きなアイテムは目を引くもので、小さいアイテムよりも重要なアイテムです。大きなアイテムはタップしやすいので、キッチンやジムなど周囲の気が散るところでアプリを使用する場合は特に重要です。一般的には、主な項目を画面の上半分に配置し、左から右の読み込みコンテキストでは画面の左側に配置します。

  • 整列を使用してスキャンを容易にし、組織と階層を伝達します
     整列は、アプリをきれいに整理し、スクロールしながら人々が集中しやすくし、情報を見つけやすくします。インデントとアライメントは、コンテンツのグループがどのように関連しているかを示すこともできます。

  • 可能な場合は、ポートレートランドスケープの両方の方向をサポートします
     人々は、さまざまな方向でアプリを使用することを好むので、その期待を満たすことができるときに最適です。

  • テキストサイズの変更に備える
     人々は、ほとんどのアプリが設定で別のテキストサイズを選択したときに反映されると考えています。一部のテキストサイズの変更に対応するには、レイアウトを調整する必要があります。アプリケーションでのテキストの使用方法の詳細については、「タイポグラフィTypography - Visual Design - iOS - Human Interface Guidelines - Apple Developer)」を参照してください。

  • インタラクティブな要素に十分なタッチターゲットを提供します
     すべてのコントロール44pt x 44ptの最小タップ可能領域を維持してください。

  • 複数の端末でアプリをプレビューします
      Simulator(Xcodeに付属)を使用してアプリをプレビューし、クリッピングやその他のレイアウトの問題をチェックすることができます。あなたのアプリがランドスケープモードをサポートしている場合は、デバイスが左右に回転したかどうかに関係なく、レイアウトが大きく見えるようにしてください。フルスクリーンのiPhoneでは、上下逆のポートレートモードはサポートされていません。ワイドカラー画像のような一部の機能は、実際のデバイスで最もよくプレビューされます。

  • より大きいデバイスにテキストを表示するときに読みやすいマージンを適用します
     これらの余白は、快適な読書体験を確実にするためにテキスト行を短く保ちます。

コンテキストの変更への適応

  • コンテキストの変更中に現在のコンテンツに焦点を当てます
     コンテンツが最優先事項です。環境が変化したときにフォーカスを変更すると、向きが変わり、欲求不満になる可能性があり、アプリケーションを制御できなくなったような気分になる可能性があります。

  • 無償レイアウトの変更を避ける
     誰かがデバイスを回転させると、レイアウト全体が変更される必要はありません。たとえば、アプリがポートレートモードの画像のグリッドを表示する場合、横長モードのリストと同じ画像を表示する必要はありません。代わりに、単にグリッドの寸法を調整することができます。すべての文脈で同等の経験を維持してください。

  • アプリが単一の方向で動作することが不可欠な場合は、両方のバリエーションをサポートしてください
     ランドスケープモードでのみ動作するアプリは、ユーザーがデバイスを左右に回転させるかどうかにかかわらず使用可能でなければなりません。ポートレートモードでのみ動作するアプリは、逆さまのポートレートモードをサポートしていないiPhone Xを除いて、ユーザーが端末を180度回転させるとコンテンツを180度回転させる必要があります。あなたのアプリが間違った向きでデバイスを保持しているときにアプリが自動的に回転しない場合、あなたは本能的にそれを回転させることを知ります。あなたはそれらを伝える必要はありません。

  • コンテキストに応じてアプリの回転に対する反応をカスタマイズします
     たとえば、デバイスを回転させてキャラクターを移動させるゲームでは、ゲームプレイ中に方向を切り替えるべきではないでしょう。しかし、現在の方向に基づいてメニューやイントロシーケンスを表示することもできます。

  • あなたのアプリがiPhoneだけでなく、iPadで動作することを確認してください
     いずれのタイプのiOS端末でもアプリを実行できる柔軟性があります。ほとんどの人がiPhoneであなたのアプリを使用することを期待していても、インターフェイスの要素はiPad上で表示され、機能し続ける必要があります。アプリの特定の機能にiPhone固有のハードウェア(3D Touchなど)が必要な場合は、iPad上でこれらの機能を隠すか無効にして、他の機能を使用させることを検討してください。

  • 既存のアートワークを再利用する際のアスペクト比の違いに注意してください
     画面サイズが異なると、縦横比が異なるため、アートワークが切り抜かれたり、レターボックスに表示されたり、ピラボックスに表示されることがあります。重要なビジュアルコンテンツがすべてのディスプレイサイズで表示されていることを確認します。

f:id:frmski:20181121125520p:plain:w500

フルスクリーン体験の設計

  • 視覚的要素を拡張して画面を満たします
     バックグラウンドがディスプレイの端まで広がっていること、およびテーブルやコレクションなどの垂直スクロール可能なレイアウトが一番下まで連続していることを確認してください。

  • インタラクティブなコントロールを画面の最下部とコーナーに明示的に配置しないでください
     ユーザーはディスプレイの下端にあるスワイプジェスチャーを使用して、ホーム画面やアプリの切り替えなどの機能にアクセスします。これらのジェスチャーでは、この領域に実装するカスタムジェスチャーをキャンセルすることがあります。画面の遠い部分は、人々が快適に達することが困難な領域になる可能性があります。

  • クリッピングを防止するために不可欠な内容を埋め込んでいます
     一般的に、コンテンツは中央に配置され、対称的に挿入され、あらゆる方向に大きく見えるようにする必要があります。丸い角で切り取られず、センサハウジングによって隠されず、ホームスクリーンにアクセスするためのインジケータによって隠されません。
    最良の結果を得るには、標準のシステム提供のインターフェイス要素と自動レイアウトを使用してインターフェイスを構築し、UIKitで定義されたレイアウトガイドと安全領域に準拠させます。デバイスが横向きになっている場合、ゲームのようないくつかのアプリでは、スクリーンの下部(安全領域の下にある)にタップ可能なコントロールを配置して、コンテンツのためのスペースを確保することが適切な場合があります。画面の上部と下部にコントロールを配置するときは、一致するインセットを使用し、ホームインジケーターの周りに十分なスペースを残して、コントロールとやりとりしようとしたときに誤ってターゲットを設定しないようにします。ホームインジケータは画面の中央に配置されているため、アプリのインターフェイスに関連する位置が変わることがあります。

  • フルサイズのボタンを挿入します
     画面の端まで伸びるボタンは、ボタンのようには見えません。全角ボタンの両側にある標準のUIKitマージンを尊重します。画面の下部に表示されている全角ボタンは、角が丸く、安全領域の下部に揃えられたときに最もよく表示され、ホームインジケータと競合しないことが保証されます。

  • 主要な表示機能にマスクをかけたり、特別な注意を払ったりしないでください
     スクリーンの上部と下部に黒いバーを置くことによって、ホーム画面にアクセスするためのデバイスの丸い角、センサーハウジング、またはインジケーターを隠そうとしないでください。括弧、ベゼル、図形、教材などの視覚的な装飾を使用して、これらの領域に特別な注意を払うことは避けてください。

  • ステータスバーの高さに注意してください
     ステータスバーは、フルスクリーンのiPhoneでは古いiPhoneよりも高くなっています。アプリがステータスバーの下にコンテンツを配置するための固定ステータスバーの高さを想定している場合は、アプリを更新してユーザーのデバイスに基づいてコンテンツを動的に配置する必要があります。ボイスレコーディングやロケーショントラッキングなどのバックグラウンドタスクがアクティブな場合、フルスクリーンiPhoneのステータスバーの高さは変わりません。

  • あなたのアプリが現在ステータスバーを隠している場合は、フルスクリーンiPhoneのためのその決定を再考してください
     フルスクリーンのiPhoneには、古いiPhoneよりもコンテンツの垂直方向のスペースが大きく、ステータスバーは画面の一部を占めているため、アプリはおそらく完全には利用できません。ステータスバーには、人々が役に立つ情報も表示されます。それは付加価値と引き換えに隠されるべきです。

  • ホーム画面にアクセスするためのインジケータの自動非表示を許可します
     自動隠し機能が有効になっていると、ユーザーが数秒間画面に触れていないと、インジケータが消えます。ユーザーが画面に再び触れると再び表示されます。この動作は、ビデオや写真のスライドショーの再生などの受動的な視聴体験に対してのみ有効にする必要があります。

  • 追加のレイアウトに関する考慮事項
     あなたのウェブサイトが端から端までのディスプレイ上で見栄えが良いことを確認してください。 webkit.orgのiPhone XのWebサイトの設計(Designing Websites for iPhone X | WebKit)を参照してください。

適応性とレイアウト和訳を終えて

以上、適応性とレイアウトの和訳でした。iPhoneアプリ開発者であれば基本的な項目が記されていますが、改めて読み直すと小さな発見がありますね。
iPhoneXの登場により画面サイズが縦に伸びました。このガイドラインにもあるように改めてレイアウトを見直す必要があるのかもしれません。

【HIG和訳】ビジュアル・デザイン / 適応性とレイアウト①

アップルのヒューマン・インターフェース・ガイドライン、ビジュアル・デザインについての和訳です。
適応性とレイアウトについて2回にわたって和訳します。
第1回の和訳項目は下記になります。

適応性とレイアウト

 一般的に、ユーザーは自分の好きなアプリをすべての端末やあらゆる状況で使用できるようにしたいと考えています。 iOSでは、さまざまなデバイスiPad上のマルチタスクに置ける分割ビュー、画面の回転やその他の場合も、シェイプとサイズを自動的に変更するようにインターフェイスエレメントとレイアウトを設定できます。どんな環境でも優れたエクスペリエンスを提供する適応可能なインターフェイスを設計することが不可欠です。

バイスの画面サイズと方向

 iOSバイスはさまざまな画面サイズで提供され、縦向きまたは横向きのいずれかで使用できます。

Device Portrait dimensions Landscape dimensions
12.9" iPad Pro 2048px × 2732px 2732px × 2048px
11" iPad Pro 1668px × 2388px 2388px × 1668px
10.5" iPad Pro 1668px × 2224px 2224px × 1668px
9.7" iPad 1536px × 2048px 2048px × 1536px
7.9" iPad mini 4 1536px × 2048px 2048px × 1536px
iPhone XS Max 1242px × 2688px 2688px × 1242px
iPhone XS 1125px × 2436px 2436px × 1125px
iPhone XR 828px × 1792px 1792px × 828px
iPhone X 1125px × 2436px 2436px × 1125px
iPhone 8 Plus 1242px × 2208px 2208px × 1242px
iPhone 8 750px × 1334px 1334px × 750px
iPhone 7 Plus 1242px × 2208px 2208px × 1242px
iPhone 7 750px × 1334px 1334px × 750px
iPhone 6s Plus 1242px × 2208px 2208px × 1242px
iPhone 6s 750px × 1334px 1334px × 750px
iPhone SE 640px × 1136px 1136px × 640px

画面解像度がアプリケーションのアートワークにどのように影響するかを知るには、「画像サイズと解像度(Image Size and Resolution - Icons and Images - iOS - Human Interface Guidelines - Apple Developer)」を参照してください。

自動レイアウト

 自動レイアウトは、適応インタフェースを構築するための開発ツールです。自動レイアウトを使用すると、アプリ内のコンテンツを管理するルール(「制約」と呼ばれる)を定義できます。たとえば、使用可能な画面領域に関係なく、画像を常に水平方向に中央に配置し、画像の下に8ポイントの位置に配置するようにボタンを制限することができます。

 自動レイアウトは、特定の環境変動(「特性」と呼ばれる)が検出されたときに、指定された制約に従ってレイアウトを自動的に再調整します。次のようなさまざまな特性に動的に適応するようにアプリを設定できます:

  • さまざまなデバイスの画面サイズ、解像度、色域(sRGB / P3)
  • さまざまなデバイスの向き(縦/横)
  • スプリットビュー
  • iPadマルチタスクモード
  • ダイナミックタイプのテキストサイズの変更
  • ロケールに基づいて有効化された国際化機能(左から右へ/右から左へのレイアウト方向、日付/時刻/数値書式、フォントのバリエーション、テキストの長さ)
  • システム機能の可用性(3D Touch)

開発者向けのガイダンスについては、「自動レイアウトガイド」および「UITraitCollection」を参照してください。

レイアウトガイドとセーフエリア

 レイアウトガイドは、画面上に実際には表示されないが、コンテンツの配置および間隔を助ける矩形領域を定義します。このシステムには、コンテンツの周りに標準マージンを簡単に適用したり、テキストの幅を最適な読みやすさに制限したりするためのレイアウトガイドが含まれています。カスタムレイアウトガイドを定義することもできます。

 UIKitで定義された安全領域とレイアウトマージンを遵守してください。これらのレイアウトガイドは、デバイスとコンテキストに基づいて適切な挿入を保証します。安全領域は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーの下になるのを防ぎます。標準的なシステム提供のビューは、安全領域レイアウトガイドを自動的に採用します。

f:id:frmski:20181118211628p:plain:w500

②に続く

【HIG】System Capabilities / TV Providers 和訳

TV Providers

 あなたのアプリはTVアプリとシングルサインオンを統合し、非常に便利で一貫したエンターテインメント体験を人々に提供できます。

TV App Integration

 テレビアプリケーションは、システム全体からお気に入りの、最近再生された、推奨された映画やテレビ番組へのグローバルアクセスを提供します。

Beginning and Resuming Playback

 TVアプリは自動的にあなたのアプリを開き、ユーザーがあなたのアプリでコンテンツの再生を開始したときにその旨を通知します。

  • アプリへのスムーズな移行を確実にします
     TVアプリは、あなたのアプリに移行するときに暗くなり、アプリの起動画面は表示されません。コンテンツの再生または再開を開始する前に、自分の黒い画面をすぐに表示することによって、この移行で視覚的な連続性を維持する必要があります。

  • 予想されるコンテンツをすぐに表示する
     ユーザーは、選択したコンテンツが、アプリへの移行が完了するとすぐに再生を開始することを期待しています。アプリの黒い画面からコンテンツに右に移動します。スプラッシュ画面、詳細画面、イントロアニメーション、またはコンテンツに到達するまでに時間がかかるその他の障壁を提示しないでください。これは、再生を再開するときに特に重要です。

  • ユーザーが再生を再開したいかどうか尋ねないでください
     再生を再開できる場合は、確認のプロンプトを表示せずに自動的に再生を開始します。

  • 正しいユーザーのコンテンツが再生されていることを確認します
     あなたのアプリが複数のユーザープロファイルをサポートしている場合、TVアプリは再生要求を発行するときにプロファイルを指定できます。再生を開始する前に、このプロフィールに自動的に切り替える必要があります。再生要求でプロファイルが指定されていない場合は、再生開始前にユーザーに選択を依頼して、この情報を将来提供することができます。

Loading Content

 読み込みに2秒以上かかる場合は、中心のアクティビティスピナーと周囲のコンテンツがない黒い読み込み画面を1つ表示することを検討してください。

  • 可能な限り画面を読み込まないようにしてください
     コンテンツがすばやく読み込まれる場合、読み込み画面は不要です。

  • できるだけ早く再生を開始してください
     読み込み画面が必要な場合は、再生を開始するのに十分なコンテンツが読み込まれるまで表示する必要があります。残りのコンテンツはバックグラウンドで読み込み続けます。

  • ブラックロードスクリーンをデザインする
     再生画面への遷移中に画面の読み込みが表示されることがあります。それらは黒に見えるはずですので、TVアプリのフェードにブレンドされます。

  • 画面の読み込み時にコンテンツを最小限に抑えます
     ローディング画面にブランディングやイメージを含める必要がある場合は、黒い背景を維持し、再生にシームレスに移動するように最小限に抑えてください。

Exiting Playback

 ユーザーは、テレビアプリケーションに戻るのではなく、再生を終了した後もアプリに残ります。この経験により、ユーザーを混乱させないでください。

  • 文脈に関連した画面を表示する
     再生を終了するときに、ユーザーが見ていたコンテンツの詳細画面を表示し、再生を再開するためのオプションを含めます。詳細画面が表示されない場合は、ユーザーが見ていたコンテンツやアプリのメインメニューを含むメニューを表示します。

  • すぐに退出するための準備をしてください
     再生通知を受け取ったらできるだけ早く終了画面を用意して、再生開始直後にユーザーが終了するようにしてください。

Single Sign-On

 多くの一般的なテレビプロバイダは、ユーザーがシステムレベルで自分のアカウントにサインインできるようにし、アプリごとに認証する必要がなくなります。アプリでテレビプロバイダの認証が必要な場合は、この機能を使用して最も効率的なオンボーディングを提供してください。

  • ユーザーがシステムレベルでサインインしているときは、ログアウトオプションを表示しないでください
     アプリにログアウトオプションが必要な場合は、そのアカウントを呼び出すには、設定>テレビプロバイダにユーザーのアカウントからログアウトするように指示する必要があります。

  • プライバシーコントロールを調整してユーザーにサインアウトするように指示しないでください
      [設定]> [プライバシー]のテレビプロバイダコントロールは、サインアウトメカニズムではありません。これらの設定では、ユーザーは自分のテレビプロバイダアカウントにアクセスできるアプリを管理できます。

【HIG】System Capabilities / Screenshots 和訳

HIG,Screenshotsについての和訳です。

Screenshots

 ユーザーは、スクリーンショットを撮ることによって、画面に表示されているものをキャプチャすることができます。 iOS 11以降、スクリーンショットは撮った後に画面の一番下にプレビューフォームで簡単に表示されます。ユーザーはプレビューを横にスワイプして閉じることができます(プレビューは何もしないと数秒後に自動的に解除されます)。プレビューをタップしてインスタントマークアップや共有ツールにすばやくアクセスできます。スクリーンショットはPhotosのScreenshotsアルバムに保存されます。

 ローカルのスクリーンショットを撮ったときにアプリのインターフェースを変更しないでください。システムが提供するスクリーンショット機能は、スクリーンショットを撮るときに十分なコンテキストと機能を提供します。カスタムスクリーンショットで開始されたインターフェイスの変更と機能は、繰り返し、不必要、潜在的に混乱します。アプリに適している場合は、別のユーザーや別のデバイススクリーンショットを撮ったときにユーザーに警告することもできます。