こんにちはこんにちは、2 日目の WWDC 速報レポートです。

2 日目は WWDC 会場に併設してある物販に並ぶところから始まりました。WWDC Store で T シャツを数枚購入しました。一着 30$ 程度です。3 時間ほど（！）待機列に並んで購入できました。

待機中セッションがはじまってしまったのですが、その間も WWDC のアプリまたはウェブサイトからライブ配信を見ることができました。このライブ配信は会場外、むしろ日本からでも見ることができるはずです。会場に来ていない方も、まだ 3 日ありますので、興味のあるセッションがあればリアルタイムで見てみると楽しいかもしれません。

→ WWDC19 ライブ配信

---

というわけで「〇〇の視点 WWDC の速報レポートシリーズ」 2 日目は＜UI Designer＞編です。

1. iOS Developer の視点 - WWDC19 で注目したい新しいテクノロジー
2. UI Designer の視点 - これからの iOS アプリの UI デザイン ← 今回
3. Apple のヘルスケア関連新サービスと、WWDC の健康アクティビティ、アメリカのヘルスケア産業
4. DevRel の視点 - 会場運営における UX/UI デザインの工夫、エンジニアがグッとくる Apple の魔法
5. Frontend Engineer の視点 - Safari と WebKit の進化ほか

WWDC はデザインセッションも盛りだくさんです。今回はプライバシーやアクティビティなど非常に大事なところからはじまり、新しい iOS のフィーチャーの話、iPad や macOS でのデザインなど幅広く開かれていました。注目したいポイントとしては以下のところでした。

• SF Symbols
• フォント周辺
• Dark Mode
• Modal Presentations
• SwiftUI

順番に見ていきます。

アプリで使用可能なシンボルセットが公開されました。San Francisco システムフォントと親和性の高いシンボルセットです。（アプリ内のボタンやツールバー、アラートなど様々な場所で使われるアイコンセットです）

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

• San Francisco システムフォントと同じウェイトシリーズが用意（Ultralight / Thin / Light / Regular / Medium / Semibold / Bold / Heavy / Black）
• 同じポイントサイズで Small / Medium / Large の 3 スケールがある（テキストベースラインを調整するための 3 スケール）
• 定義されているシンボルは、画像の切り出し作業などが不要。その名前とウェイトとスケールを Xcode に持っていけば実装可能（プログラマーにそれを伝える）
• カスタムシンボルを作るには:
  • SF Symbols アプリから「Export Custom Symbol Template...」から SVG ファイル（テンプレートファイル）をエクスポート、中身を Sketch か Illustrator で編集し、ファイル名を変更したのち、Xcode の Assets.xcassets へそのテンプレートファイルをドラッグ＆ドロップするとそれを Xcode プロジェクトの中で使うことができるようになる。

アプリの UI デザイン / グラフィックをオリジナリティの高いものにしている場合あまり恩恵が得られませんが（特にゲームや、没入感の高い世界観が築かれたアプリ、または San Francisco システムフォントを使っていないアプリの場合など）、スタンダードな UI デザインのアプリの場合は、アプリ内アイコンは全てこの SF Symbols ベースに置き換えてしまうことを検討してもいいかなと思いました。UI デザインはデザインシステムを用いて利用者が慣れているマナーに整えておくことで、学習コストを 0 にすることができるからです。

今後も対応プラットフォームが増えていくことを考えると、SF Symbols ベースのテンプレートファイルでアイコンを作るようにしておくと良さそうです。

New York という新しいフォントが追加されました。セリフの美しいフォントです。

https://developer.apple.com/fonts/

なんと 1983 年 Macintosh 向けにデザインされたフォントとのこと。New York (typeface) - Wikipedia。iBooks などのアプリで利用されるようです。

メジャーなフォントベンダーの Adobe、DynaComware、Monotype、モリサワ などのフォントが App Store 経由で利用可能になるようです。

カスタムフォントについて、June 6 at 9:00 a.m. PDT（日本時間： 6/7 午前 1 時）に WWDC19 ライブ配信される「Font Management and Text Scaling」というセッションがあるのでここで詳しい説明がされそうです。

macOS Mojave で搭載された Dark Mode が iOS にもやってきました。

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

• 配色は Opacity を変化させて、プライマリー、セカンダリー、ターシャリー、クォータナリカラーぐらいまで考えておくと良い
• それぞれ、プライマリー＝タイトル、セカンダリー＝サブタイトル、ターシャリー＝プレイスホルダー、クォータナリー＝ディセイブルテキスト
• Human Interface Guideline に、 TintColor 、System Grey などの定義が追加
  • System Grey はスライダーバーのノブなどは透過されるとまずいので
• その他配色はアクセシビリティを考え 4.6:1 / 7.94:1 コントラスト比以上にしておくとよい

Dark Mode に対応していないので★1です！！とはさすがにならないと思うのですが、普段使いしているアプリが自分だったら Dark Mode に対応してくれるといいなと思うように、早いうちに開発スプリントにねじ込んで対応したいフィーチャーですね。iOS13 のローンチと同時に対応できていると Dark Mode と同じようにクールだと思います。

最初 Keynote で聞いた時は iOS13 にカード型の UI コンポーネントが追加された、という解釈でしたが、英語が不慣れなので少し勘違いしていたようです。モーダルスクリーンが進化するということでした。

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

• モーダルスクリーンは、下にスワイプするとモーダルビューをキャンセルできるシート型のコンポーネントに進化した
• 今までモーダルビューとして作っていたものも iOS13 ではこのカード型に自動的に置き換えられて表示される
• アクセシビリティの理由でクローズボタンは引き続き用意する必要がある
• 定義：モーダルビューは「状態を変更するために使用するために表示する」
  • Read 情報を見る View は、普通の画面で表示する
  • Create / Edit する View は、フルスクリーンモーダルまたはアラートビュー、シートで表示する

モーダルスクリーンの表示が変わったというのが正しい解釈のようですね。最近の UI デザインのトレンドとなっているハーフモーダル（スクリーンの途中で止められる系のコンポーネント）ではありませんでした。iOS Developer 的にいうと別の ViewController からモーダルスクリーンを present (Modally) するという感じで実装しているものは iOS13 から自動的にこれになるようです。

Read は普通の画面で、Create / Edit はモーダルで、という話から、モーダルビューの使用用途がさらに明確に定義された感もあるので、一度全部読んだことがある UI Designer も今一度 HIG の読み込みをしてみると良さそうです。

Storyboard や Interface Builder を操作してエンジニアが作った UI の実装を手直ししたいと思ったことがある UI Designer は多くいると思います。

画面のレイアウト・デザインはこれからこのツールを使った方法に変わっていくので、以下のサイトでチュートリアルを進めておくと良いかもしれません。

https://developer.apple.com/xcode/swiftui/

• iOS13 から使用可能な SwiftUI
• コードで画面は「宣言的に書く」感じになっていきそう
• いままでより圧倒的に少ないコードで画面のレイアウトが作れるようになった
• Xcode でビルドしなくてもエディタ画面の横で常にプレビューが表示されていて学習コストがひたすら低い

この手の話をすると、エンジニアはデザイナーにデザイン部分のコードを書いてもらってという話が議論されたりして、私的には基本的にはそういうのをやりたいデザイナーはあまりいないと思いますが（そもそも自動化や効率化すべきところを人月コストで行う課題解決はエンジニアとしてどうなんだろうという 過激意見）、希少種である「コードも書くデザイナー」にとってはこのポイントは抑えておいてそんはないと思います。

Sketch や、Adobe XD を使用してデザインをする様子が度々写っていました。特に Sketch が利用されるデモが非常に多かったです。

Apple のデザイナーもこれらのツールを使っており、これらのツールに対応したリソースが配布されています。

https://developer.apple.com/design/resources/

---

今年は内容も面白いですが、グラフィックデザイン周りも面白い年だと感じました。「開発者向けカンファレンスらしさ」を感じました。

というのも WWDC19 のロゴ（本記事のカバー画像）や、各種サイン（上の写真）は大部分で Xcode や Terminal の標準フォント「SF Mono」が使用されています。（SF Mono 自体は 2016 年の WWDC ごろが初出となるようです。）

前回は San Francisco フォントがフィーチャーされた年でしたが、今回は SF Mono がフィーチャーされていたのでグッとくるところがありました。

明日朝はランニングイベントがあるようなのでチャレンジしますが、無理せず生きて帰ろうと思います。チャレンジされる方一緒に走りましょうー。

6/14 (金)、iOS de KANPAI! (WWDC 2019 報告会) で同僚と一緒に登壇します。良かったらお越しくださいませ〜。