こんにちは。Zaim で iOS エンジニアをしている @akatsuki174 です。

WWDC19（Apple の開発者向けカンファレンス）では SwiftUI や Xcode のさらなる進化など、開発者にとって大きな発表がてんこ盛りでした。同時にデザイン系のアップデートも多く見られ、デザイナーも見逃せないものとなっていました。そこでこの記事では主にデザイナー向けに、WWDC19 で変更があったデザイン、体験設計系のアップデートについて紹介したいと思います。

※ NDA の関係上、スクショ等は載せていません。動画にて確認してください。

ダークモード

つい最近 Android 界隈でもダークテーマが話題になっていましたが、Apple もダークモードという形で暗い色調のカラーパレットを採用したアプリデザインが、システムレベルでサポートされるようになりました。iOS 13 からは設定アプリから Light モード or Dark モードの設定ができるようになります。

セッションでは「In general, all of your apps should support dark mode.」と言っていたので、対応は必須ではありませんがした方がいいんだろうなという印象を受けました。

ダークモード対応を楽にするためには Semantic colors を使うと良さそうです。systemBackground, secondarySystemBackground などの名前が付いたカラーが標準で用意されており、その色を使用すると Light, Dark の切り替え時に自動でそのモードに合った色に変換してくれます。その他 systemRed などの色も用意されています（→ Human Interface Guideline - Color ）。同じ赤でも、それぞれのモードに最適化された赤色に自動で切り替えてくれます。もちろんシステムが用意した色ではなく、独自で色を設定することもできます。

ブラーエフェクトに関しても Thick, Regular(Default), Thin, UltraThin の 4 種類が用意されており、これを使えば自動で Light, Dark モードに適した色を表示することができます。

Human Interface Guidelines でも Dark Mode の章が追加されているので、ぜひ一読してみてください。要点としては以下の通りです。

・リリース前に Light, Dark それぞれで違和感ないかチェックしてね
・色はハードコードせず、Light, Dark それぞれに合った色を設定してね
・自分で色を設定する場合はコントラスト比が 7:1 になるようにしてね
・できる限り SF Symbols を使ってね
・場合によっては Light, Dark それぞれ専用の画像を用意してね
・ラベルにはシステム側で提供している色を使ってね

より詳しい情報は以下のセッション動画をご覧ください。

Implementing Dark Mode on iOS

SF Symbols

「標準」として使えるアイコンが増えました。その数 1,500 以上とのこと。しかも 9 種のウェイトと 3 種のスケールを自由に調節できるようになっています。Sketch でリソースを使いたい場合は Apple Design Resources からダウンロードしてください。Photoshop, XD 向けのものは今夏配布予定らしいです。

より詳しい情報は以下のセッション動画をご覧ください。

Introducing SF Symbols

モーダル

今までは全画面を覆う UI でしたが、iOS 13 からはカードっぽい UI がデフォルトになります。「追加」などの操作がある場合は別ですが、基本的にはモーダル部分のどこをスワイプダウンしてもモーダルを閉じられるようになり、片手操作がしやすくなりました。とはいえユーザビリティなどの観点で「閉じる/キャンセル」ボタンは用意しておくべきだとされています。

より詳しい情報は以下のセッション動画をご覧ください。

Modernizing Your UI for iOS 13

検索バー

実装構造が変更されたおかげで、テキストカラーやフォントの変更など、検索バーのカスタマイズが簡単になりました。

より詳しい情報は以下のセッション動画をご覧ください。

Modernizing Your UI for iOS 13

位置情報取得

今までは位置情報の取得を求めるダイアログには「常に」「App 使用中のみ」許可という選択肢しかありませんでしたが、iOS 13 からは「一度限り」許可の選択肢が増えました。直接 UI には関係ない話ですが、覚えておいて損はない情報だと思います。

より詳しい情報は以下のセッション動画をご覧ください。

Keynote

Contextual Menu

例えば写真アプリでは、今まで 3D タッチによってプレビューを表示、スワイプアップによって Contextual Menu を表示していましたが、iOS 13 からは長押しだけでプレビューとメニューを一気に表示することができるようになりました。

加えて、以下のこともできます。

・セパレータを使ったグルーピング
・アイコンの表示
・破壊的なアクションを赤色にする

より詳しい情報は以下のセッション動画をご覧ください。

Modernizing Your UI for iOS 13

最後に

今回はよりアクセシビリティやユーザビリティに配慮された方向に向かっているような印象を受けました。どんどん取り入れてより良いデザインにしていきたいですね。

いつもの

もう何も言わなくてもわかるはず。