iOSのデザインに関する最新情報

(音楽) (拍手) iOS 13を使用したAppの デザインとビルドの方法には― 細かな変更がありますが それは意義深いものです ダークモードは 配色 画像 テキストの扱いに― 新しいアプローチを もたらします 新しいカード型シートで― モーダルプレゼンテーションが 変わるだけでなく― 操作方法も変わります 新しいコンテキストの メニューを使用すると― コンテキスト関連の機能に 容易に素早くアクセスできます ３つのトピック全体の 基礎となるのがダークモードです 昨年macOSのダークモードを 発表し― 人気が出ました 写真と動画のAppには昔から ダークインターフェイスがあります 写真や動画が鮮やかに 見えるからです ダークUIは暗い照明環境に 適しています 暗いスクリーンと 周囲の暗さとの間で― 目を調整しやすくなります 機能面だけが理由ではありません 個人的な好みで 暗いインターフェイスを― 選ぶ場合もあります

iOSのダークモードは完全に 黒いバックグラウンドを使用します テキストなどの表示される要素が 最大限に引き立ちます 黒色バックグラウンドはベゼルと シームレスに溶け合い― UIとハードウェアが統合し 広くなったように感じさせます 全てのAppがダークモードを サポートすべきです Appの利用者がデバイス自体を ダークモードに設定している場合― Appも変更されると考えます ダークモードのサポートには― iOSデザインシステムの 更新が含まれます iOS 13用に 完全にオーバーホールしました 説明しましょう デザインシステムは基本的に パーツのセットです 配色 フォント グリフのように― 論理的に一貫したルールで 共に機能します 論理的で… 失礼 一貫したデザインシステムでは Appの習得と使用が容易になります iOSデザインシステムとして 統合することで― より使いやすく 分かりやすいAppになります 全詳細に入る前に― キーとなるデザインの 目的を説明します チームの取り組みの 指針となったものです 最初に重要なのは― iOSが使いやすく 直感的であることです iOSデザインシステムは 一新されましたが 最終的にはiOSのままだと分かります 内部での一貫性を さらに追及しました すべての内蔵アプリケーションが 調和するよう再設計しました 本日説明する全コンポーネントを 使用しています また新しいデザインシステムに 配色オプションの範囲を設けました 情報階層を明確にすることで― 最も重要な要素を 最も際立たせます 重要でない要素は控えめにします 別の目的で対等な アクセシビリティも追加しました 新システムでは ボールドのテキストと― コントラストを上げるモードを 完全にサポートします 最後に新デザインシステムを シンプルに― すっきりさせ 実行しやすくしました では詳細の説明に移ります 配色から始めましょう 全てのアプリケーションに バックグラウンドがあります ほとんどのアプリケーションに テキストとグリフがあります セパレータやグルーピング ボックスがあり― コンテンツを系統立てる アプリケーションもあります この配色を説明する場合― その値を使って 無理なく説明できます テキストは黒色 バックグラウンドは白色などです インターフェイスは より複雑になるため― カラーパレットが拡大されます これは問題にはなりません ただし分割画面表示を サポートしたい場合― 互いに同期し 管理するために― 配色の設定が同時に ２セットできます ここで抽象的な方法で配色を 考えることに役立ちます ここでセマンティックカラーを 説明します セマンティックカラーというのは 値そのものではなく― 色の目的のことです セマンティックカラーは表示そのもの から抽出されるため― 動的に両モードで動作します バックグラウンドはダークモードの 黒とライトモードの白になります

ライトモードとダークモードの 配色を別に用意するのではなく― UI要素にシステムパレットの セマンティックカラーを適用します ライトモードとダークモードから 画面表示が自動的に適用されます とても便利です iOS 13にはセマンティックカラーの パレットがあり使用できます 色の多くには第１ 第２ 第３ 第４の値が付いてます 情報の階層を示すために これらのバリアントが利用されます ラベルの色はバックグラウンドと 最もコントラストが強いため― 強調され注意をひきつけます タイトルのような 第１の要素で使用すべきです サブタイトルは第２ プレースホルダは第３ 無効にされたテキストは第４です 同じ基本原理をバックグラウンドの 配色にも適用します システムバックグラウンドは第１で 各モードは白色と黒色になります 第２と第３の システムバックグラウンドで― 情報の階層を色で構成できます 同時にグループテーブルビューの バックグラウンドカラーもあります 注意深く見ると― ライトモードとダークモードの間で 単に色が逆になるのではありません テーブルの行のバックグラウンドは どちらも明るくなっています 両モードの類似点を探しながら 適切なコントラストのために― カラーパレットの選択を 同時にします ダークモード用の デザインをする場合― 明るさは落とせると 考えると役立ちます

新しいシステムパレットには 塗りつぶしとセパレータの色があります 塗りつぶしの全色と セパレータの一部は半透明です 多様なバックグラウンドカラーに対し コントラストがはっきりします 新しいパレットには６段階の 完全不透明なグレーがあります 透明な色では不十分な場合に 使用できる色です 例えば交差するグリッド線を 引く場合― 半透明な色が重なると 目の錯覚を引き起こします 要素が重なる場合 実際には単色が有用で― 無効や破壊が見えなくなります 基本的にはシステム内の全てに これらの色を使用します アプリケーションでの 使用も勧めます それでは開始しましょう まずはApple Design Resourcesの カラーパレットと― Human Interface Guidelinesを 確認します 詳細については 後ほど説明します 従来通りパステルカラーを 提供します アプリケーションの パステルカラーとして使用できます パステルカラーは動的です つまりモードによって バリアントがあります それぞれのパステルカラーによって 高コントラストのバリアントがあり コントラストが強まった時 アクセシビリティが有効になります パステルカラーはダークモードで 明るくライトモードで暗くなります では自分のパステルカラーを 選択する場合― 両モードでよく見える色を 選択してください ライトモードで良いと思える色は ダークモードでは― 逆に合わないかもしれません 両モードで合いそうな色に 見えても― オンラインコントラスト計算機で 色を確認するべきです パステルカラーは 動的であるため― それぞれのモードでは わずかに違った色になります それらの色を選択する場合4.5から １以上のコントラスト比にします

コントラストが強いとAppへの アクセスと使いやすさが増します システムパレットが基本的に ニーズの多くを網羅します もちろん自分の配色も 定義する必要があります ユーザが選択できるラベルの色や ステータスのインジケータです パステルカラーであれば どの色も動的になります 色がバックグラウンドに影響されて 認識されるならば― 調整したいと思うでしょう 両モードで似て見える色の値を 保持するためか― 十分なコントラストがあるか 確認するためにです

ここまでライトモードと ダークモードの話をしました お気づきかもしれませんが 少々単純化し過ぎています 実際の背景色には ベースと前面表示があります 名前が示すように この背景色は 階層化されたインターフェイスです ２つのライトインターフェイスが 階層化されている場合― 視覚的な区切りを生成するのは ドロップシャドウのみです ダークインターフェイスでは ドロップシャドウはやや効果が薄いです

システム背景色で― 背景のAppかインターフェイスでは 暗い値かベースの値を使用します 表面のAppかインターフェイスでは 明るい値か前面表示の値を使用します 例として連絡先アプリケーションを 取り上げます 書き込まれる場合 色値のベースセットを使用します 同じインターフェイスが電話Appの モーダル表示に使用される場合― 前面表示バックグラウンドカラーを 使用します もう少し複雑な例を見ましょう iPadで起動しているメールです 背景色のベースセットを使用して メールを書き込んでいます 連絡先を読み込むと― バックグラウンドカラーの 前面表示セットで表示されます

連絡先が明るい外観で― メールよりも表面側で表示されます

メールとのマルチタスク中に 連絡先を並べて表示する場合は― 両方とも背景色の前面表示セットで 表示されます 中間のセパレータで コントラストを付けられます ２つのアプリケーションが 一体となったままです メールでEメールを書く場合 シートが表示されます 前面表示の背景色を使用して このツールを呼び出します メールのメインアプリケーションUIは 少々暗いです モーダル表示では重なる層を呼び出し 背後のコンテンツを暗くして― ドロップシャドウを強調するからです

Appを前面表示する場合に 背景色を変更するため― 使用する暗い色のほうに注意します システムパレットであっても― コントラストがうまく出ない 可能性があります 前面表示状態の場合は常に デザインを確認する必要があります

半不透明な塗りつぶしと セパレータの色が最も重要です ベースと前面表示の背景の間で 丁寧に適用されます ではマテリアルの説明に移ります マテリアルはiOS 13で見直され 改善されました 半透明の範囲で選択できる マテリアルは４つあります 厚型 標準 薄型 超薄型です デザインされたマテリアルは― 各種背景コンテキストに対して 正常に動作します 外観はいずれのモードにせよ 動的に変化します 背景と どの程度分けるか どの程度が最適かに応じて― マテリアルを選択できます デフォルトマテリアルは標準で ほとんどの状況で正常に動作します このマテリアルに対して表示する コンテンツに― もう少しコントラストが必要な場合 厚いマテリアルを使用できます おそらく単純なコンテンツを含む 軽いインタラクションでは― 薄型や超薄型を使用すると 良いでしょう どのマテリアルがAppに合うかは 内部にあるコンテンツによります そう言えば― ライトとダークのマテリアルには ラベル 塗りつぶし セパレータの― 色のバイブランシーセットが あります バイブランシーは iOSのプラットフォームを 通して使用される視覚的効果です システムマテリアルを 使用する場合は― 一般的に単色よりも バイブランシーを使用します なぜなら 背景のコンテキストによるからです 単色は本当にあいまいで 非常に見にくいことがあります バイブランシーならば背景によらず コントラストが保たれます iOS用の視覚的デザインシステムの アップデートには― コントロールとバーへの 変更が含まれます

形状や配色などの視覚的属性は 内部で一貫性を保つために さらにアライメントを実行されます コントロールは セマンティックカラーで描写され― 両モード間で見事に適用されます UIKitコントロールを使う場合 無料で全機能を使用できます UIKitで提供されている物を 再作成する場合― カスタムコントロールを 使用したいかもしれず… 何と言ったらいいのか いや止めましょう (笑い声) (拍手)

UIKitが提供する物を 再作成すると― とても時間がかかり 難しい割には利点が少ないものです もちろんカスタムコントロールは 頻繁に必要になります UIKitが必要な物を全て 提供するとは限りません 例えばUIKitには 評価インジケータがありません カスタムコントロールの作成時には システムパレットを使用するため― それぞれのモードごとに 配色する必要はありません

ナビゲーションバーも 更新されました デフォルトで背景とシャドウのない 大きなタイトルが書かれています これによってタイトルはラベルの コンテンツにシームレス接続します

コンテンツをスクロールする場合 背景とシャドウが鮮明になります タイトルとナビゲーションのバーが この視覚処理で正常に動作します しかしデフォルトの ナビゲーションバーも使用できます 例えば設定アプリケーションで― 主ビューのナビゲーションバーでは 大きなタイトルのみを使用します 標準ナビゲーションバーは マッチするように定型化されています シームレスナビゲーションバーは すばらしいですが 常に適切ではありません 背景が完全に透明なため バーの下が丸見えだからです ずっと表示されますが 見た目が良くないため― ここでは扱いません 多くの制御とナビゲーションバーを 使うインターフェイスがあると― シャドウで見やすくなった 描写を使用できます では次に移る前に― ダークモードに関する機能を もう１つ説明します

iOSはテーブルの行やツールバーの シンボルを常に提供してきました 暗い背景で表示する場合― これまでのシンボルのセットでは 不十分でした 厚みがないように見えました このデザインシステムの 全シンボルを再デザインしました 多くの方が知っているように 本当にクールです 全グリフをSFシンボルで 使用できるようにしました SFシンボルには 1500以上の記号があります 新しいグリフだけではありません グリフを考えデザインする 完全に新しい方法を示しています 名前が示すようにSFシンボルは サンフランシスコの― 視覚的特徴でデザインされています iOSや他のAppleプラットフォームで 使用するシステムフォントです 実際に打ち出されるので テキスト行中に表示できます テキストの位置を合わせるために ベースライン値を含みます SFシンボルは コンテキストのサイズに応じて サイズの様々な バリアントを提供します 全シンボルに ９つのウェイトがあります ベクトルベースであるため 動的なタイプで使用する場合― テキストと共に縮小拡大できます

複数のウェイトを提案することで― ボールドテキストが有効な場合 SFシンボルが太くなります アプリケーションの デザインカンプでは― 新しいSFシンボルのAppを使用して シンボルを検索できます 使用したいシンボルを コピーし― デザインカンプに移動して テキスト層にペーストします 更新されたSketch用iOS Apple Design Resourcesには― 設定済みのためシンボルで動作します 例えばタブバーのシンボルを一時的に 退避するには それを選択して― インスペクタに移動し ボタンの優先度にペーストします 数カ月間 この機能を使用してきて― 本当に革新的だと言えます 提供するシンボルは1500個なので 十分でない場合― SVGでテンプレートを作成できます IllustratorやSketchに入り 自分のデザインを変更します 説明した利点を全て得られます 本当にクールです では― モーダルプレゼンテーションに 移ります モーダルプレゼンテーションは シートとも呼ばれます スクリーンを上に滑らせるためです このアニメーションでは モード間の移動や― アプリケーションの新しい形式への 移動を示しています iOS 13を使用すると― カードのような外観になった シートがシステム中で使用されます このスタイルが デフォルトになりました このスタイルの利点は背後の物が ちらりと見えることです 別のUIがあることに気づいて― 別のタスクや背後にあるAppの モードに対応できます フルスクリーンモーダルシートでは 前のタスクを忘れることがあります

カード型モーダルシートなら スクリーンの下にスワイプできます これはナビゲーションバーを タップするより簡単です スワイプして元に戻る場合― 引き下げて片手の操作で 画面を切り替えます 大画面のデバイスでは特に便利です スクロールと一緒に使えるのかと 思うかもしれません コンテンツ領域で スクロールする場合― スワイプダウンによって 上部にスクロールします その状態でスワイプし続けると モーダルプレゼンテーションが できません ただし いつでも カードの上端から引き下げられます 縦方向のスワイプを使用する コンテンツ領域での制御などで― このジェスチャでは問題がある場合 避けることもできます モーダルプレゼンテーション自身が 要求する― 必須事項がある場合も避けられます 例えばキャンセルか 追加をする必要があるとします 引き下げる場合は はねて戻ります

モーダルコンテキストを離れる前に 決定する必要があるとします 終了のジェスチャを避けて シートを表示し― どのように進行したいか 尋ねることができます 実際にとても便利です 今 説明した内容によって 今後モーダルカードでボタンが― 不要になるわけではありません ボタンはモーダルを クローズする時に必要です アクセシビリティに関しても 使用します この動作に詳しくないか 知りたくない人もいるでしょう コンテンツ領域がスクロールダウン されている時は ボタンの方が便利です 同様にスクリーン上部で否定と 肯定のアクションがあると― モーダルプレゼンテーション内で アクションの選択を迫られます 取るべきアクションです 新しいカード型はとても素晴らしく iOSのデフォルトになっています しかし常に適切というわけでは ありません 写真の編集やスクリーンショットに 印をつける場合には― スクリーンスペースを最大化し 視覚的に不要な物を最小化します この場合フルスクリーン表示の オプションを使用します モーダルプレゼンテーションに ついて もう１点あります モーダルは切り替え用モードです アニメーションがいいという理由で 使用しないでください モーダルシートを使用する良い例は カレンダーです カレンダーには 主なモードが２つあります イベントのグリッドや リストでの表示と― イベントの作成や編集です カレンダーを表示すると 内部の全イベントをスキャンします そして詳細表示するイベントを 選択します 表示モードであるため子ビューを 使用して詳細を表示します 提案される名前として子が 親ビューの拡張になります 子ビューは親ビューで開始された タスクかワークフローに― 続いている必要があります イベントを作成か編集する場合 モーダルシート信号を送信し― 別の新しいワークフローに 切り替えます ではiOSデザインの 最後のトピックです コンテクスチュアルメニューです

数年前の3D Touch発表に際して “Peek”と“Pop”を追加しました PeekとPopは主にコンテンツの 大きなプレビューを行います 利用できる場合 プレビュー上部の スワイプで動作します コンテクスチュアルメニューが 物を少しだけ移動し― 動作がフォーカスされます 動作はすぐに反映されます コンテクスチュアルメニューも 全デバイスで動作します PeekとPopは 3D Touch対応の場合 動作します つまり全てのiPadと 一部のiPhoneでは利用できません コンテクスチュアルメニューは 3D Touchではより速く表示されますが 他のタッチデバイスでは タップとホールドで得られます コンテクスチュアルメニューは ２つのパートで構成されています アイテム上で作成される コマンドメニューと― その影響を受けるアイテムの オプションプレビューです プレビューはそのアイテムの リマインダになります コンテクスチュアルメニューの外観は デバイスのサイズや方向性によります iPhoneではポートレートモードで プレビューと電話がスタックします iPadではコマンドが ３つ以下の場合に発生します またはメニューとプレビューが 並んで表示されます コンテクスチュアルメニューを オブジェクト上に直接か― できる限り近づけて表示します

macOSの コンテクスチュアルメニューでは メニューコマンド順を選択できます よく使用するコマンドを上にすると アクセスしやすくなります そうしないならばコマンドを グループ化し関連づけます カット コピー ペーストは 互いに近いことは納得できます またセパレータを使用して視覚的に 別のグループを作成できます iOSのコンテクスチュアルメニューは 階層的です つまりオプションの一部で第２の サブメニューを作成できます iOSのコンテクスチュアルメニューにも グリフがあります 検索が早くなり― 赤いラベルを付けることで 破壊的動作を警告できます

メニューをアプリケーションの 全オブジェクトに追加してください macOSについて説明します アプリケーションのオブジェクト 全てにメニューを追加したいでしょう １つのオブジェクトで実行可能な アクションを知るといいでしょう コンテクスチュアルメニューを iOS Appに追加すると― 全Appでサポートされていると 大勢が期待します 皆さんのアプリケーションも 含めてです コンテクスチュアルメニューについての 最後の話です この動作は主なインターフェイスの 他の場所でも利用できるべきです コンテクスチュアルメニューは 効果的で便利ですが 利用を躊躇する方もいるでしょう

今日ご紹介した機能を 開発に生かしてください 新モーダルプレゼンテーションと 新コンテクスチュアルメニューです 詳細はこちらを参照してください developer.apple.com/design 更新されたSFフォント SFシンボルのアプリケーション― 更新されたSketch用iOS Design Resourcesがあります Adobe PhotoshopとAdobe XDの リソースは今夏後半に発表されます こちらも― 詳細はApple Human Interface Guidelinesを確認して下さい 本日 紹介分は全て網羅しています ありがとうございました (拍手)