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

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

makesomethingue.hatenablog.com

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

サイズクラス

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

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

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

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

デバイスサイズクラス

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

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上では、アプリがマルチタスク設定で実行されているときにサイズクラスが適用されます。

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

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

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

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

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

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

• テキストサイズの変更に備える
  　人々は、ほとんどのアプリが設定で別のテキストサイズを選択したときに反映されると考えています。一部のテキストサイズの変更に対応するには、レイアウトを調整する必要があります。アプリケーションでのテキストの使用方法の詳細については、「タイポグラフィ（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上でこれらの機能を隠すか無効にして、他の機能を使用させることを検討してください。

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

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

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

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

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

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

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

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

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

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

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

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

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