Apple Watch Series 7の紹介

こんにちは Deena Khattabです Apple Design Teamの デザイナーです 後ほど 同僚のJenniferと Matthewも参加します Apple Watch Series 7の デザインプロセスについて お話ししますが その前に新機能を簡単に 説明しておきたいと思います Apple Watch Series 7には 2つの新しいサイズがあります 41mmと45mmです 両方とも 従来よりも大きな アクティブコンテンツエリアを 備えています 41mmは176×215ポイント 45mmは198×242ポイントです Apple Watch Series 7の ディスプレイはエッジに向かってカーブしており 繊細なラップアラウンド効果を 生み出しています 画面周りのベゼルは これまでになく薄く 目立ちません さらに 従来のデバイスよりも 画面の隅の丸みの半径が 大きくなっています こうしたハードウェアの 主な違いを踏まえた上で 3つのデザイン原則に基づいて UIが構築されています Apple Watch Series 7は史上最大 のコンテンツエリアを備えています スペースを最大限に活用して UI要素を大きくし 使いやすさを向上させました タイポグラフィと色を詳細に検討し Watch Appの階層性を明確にしました Apple Watchは必ず 軽量かつ 一目でわかるデザインになっています ナビゲーションや画面の案内も 一目でどこにいるかわかるような 表示となるようにしました 要約すると Apple Watch Series 7向けのAppは より大きく より鮮明で より見やすい ものでなければなりません 次のセクションでは Jennが デベロッパがどのように 新しくなったUI要素を使って これらのデザイン原則をAppで 実現できるかを説明します Jennifer Patton：ありがとう Deena まず レイアウトの余白について説明します 画面の隅がカーブしているので コンテンツはより中心に寄せて表示し 隅に収まるようにしなければなりません ステータスバーの上下の幅は広くなり 画面下部のスクロールクリアランスの 余白も増えました また アクティブな表示領域とハードウェア筐体 の間のベゼルが小さくなったことで ディスプレイの端に近い部分まで コンテンツを表示できるようになりました Apple Watch Series 7は レイアウトの余白を十分に取り コンテンツに余裕を持たせています

Matthew Koonce： ありがとう Jennifer こんにちは Matthewです 株価Appを例に取って watchOSでの余白の効果的な 活用方法を説明します まず すでに適用されている 余白を取ってみましょう ご覧のように このレイアウトには いくつかの問題があります 詳しく見てみましょう 1つ目の問題は 現在の株価の テキストがディスプレイの端に 近すぎることです Apple Watch Series 7の ラップアラウンドディスプレイでは これは問題になります 2つ目に ナスダックの文字が ディスプレイの隅で切れてしまっています 最後に ナビゲーションバーの先端に揃えて テキストを配置できていません それでは SwiftUIコードを使って これらの問題を解決する方法を 見てみましょう これは その株価Appのレイアウト に関するスニペットです シンプルなVStackです まず.scenePadding修飾子を使って 現在の価格表示のレイアウトを 調整しましょう この修飾子は システム定義 のパディングを適用して レイアウトに余白を作ります するとこのように 現在の価格表示における レイアウトの問題が解決します 同じ.scenePadding修飾子を 下のナスダックのテキストにも 使ってみましょう

ここでもレイアウトの問題が解決し 本来の配置に戻りました なお 1日チャートには 修飾子を適用しませんでした このように ディスプレイの端まで表示しても まったく問題ないコンテンツもあります .scenePadding修飾子は ディスプレイの端で歪んだり途切れたり するテキストコンテンツにのみ 使用してください Jennifer：今年のwatchOSでは 大きなタイトルが導入されたことで Appはより見やすくなり 構成を捉えやすく App内の階層はより明確になりました テーブルビューをスクロールすると iOSに表示されるような 大きなタイトルが表示されます スクロールすると タイトルが ステータスバーに切り替わります ルートレベルとサブビューには 大きなタイトルが表示されます 設定Appで見ると 大きな タイトルを使用することで App内のどの部分が表示されて いるのかがよくわかります タイマーなどの スクロールしない固定ビューでは ビューのタイトルをコンテンツエリアに表示して ステータスバーには表示しないようにしたり 不要であればタイトルを一切表示 しないようにしたりすることで ビューのタイトルを 戻るボタンのナビゲーションから 切り離すようにしました また この世界時計の詳細画面のように タイトルをステータスバーに 表示するのが最適な 固定ビューもあります 大きなタイトルは Series 7の大きなアクティブコンテンツ エリアを受けた変更点ですが 従来の40mmや44mmの デバイスでも適切に動作します Matthew：SwiftUIを使えば Appで大きなタイトルを簡単に設定できます watchOS 8のデフォルトでは ナビゲーションのタイトルは すべて大きく Appのアクセントカラーで 彩られています 特定のビューで大きなタイトル を表示したくない場合は .navigationBarTitleDisplayMode 修飾子を使用できます この修飾子を適用すると 階層内の後続のビューは 上層のビューの表示モードを継承します

Jennifer：色は画面の案内や 情報の階層化を助け Appの個性を伝えるためのものです このマインドフルネスAppでは ティール色がAppのブランディングや Appでの体験の特徴を引き立てます ティール色をAppのキーカラーにして 囲み内の背景色をグレイにすることで より落ち着いた印象にしています Watchではリスト表示する Appが一般的です メールAppを例にすると 背景を青にすることにより 表示されているのはメールAppで ナビゲーションパターンが似ている 別のAppではないことがわかります このヒントAppでは 鮮やかな黄色が ワークアウトAppなどの カルーセルナビゲーションを使う その他のAppと視覚的に区別し すべてのプラットフォームにおける ヒントAppのユーザー体験の 一貫性を高めています Matthew：Appのアクセントカラーは アセットカタログで設定できます ここで色を設定すると 自動的に すべてのナビゲーションバーで 設定した色が使用されます アクセントカラーの設定方法について詳しくは デベロッパ向けドキュメントを参照してください 加えて .accentColor 修飾子を使用すれば SwiftUI内でも簡単に そのアクセントカラーを使用できます メールAppでは listItemTintに Appのアクセントカラーを30%の 不透明度で設定しています Jennifer：Apple Watch Series 7のデザインでは ボタンやその形状にも注目しました 現在のボタンの仕組みは このようになっています スクロールビューに表示される 丸みを帯びた長方形のボタンと スクロールしない固定ビュー にのみ表示される 固定ボタンのセットがあります 固定ボタンは画面下部に固定され 画面の形状に合うように デザインされています Series 7では スクロールビューと 固定ビューのそれぞれのボタンの 基本的なシステムをさらに発展させました サブボタンの配色をシンプルにし 横並び型のボタンは のど飴を2つに割ったような形から カプセル型ボタンの並列表示に変更しています アップデートされたAppの ボタンをいくつか紹介します 左側のアラームAppには プライマリスクロールボタン 右側のUIPickerViewには 横並び型のボタンが使われています それでは この固定ボタンの 形状を詳しく見ていきましょう Series 7のボタンの形状には 細心の注意が払われました これはシンプルなカプセル型ボタンを 使用したものです 下部のボタンの平らな面が ディスプレイの曲面との間に 緊張感を生んでいます そして これが新しくなったボタンの形です もう一度見てみましょう 微妙な変化ですが ディスプレイの形状から ボタンの形状を導き出すことで 画面の下部に 固定されたボタンが Watchのハードウェアと 調和するようになりました このアップデートされたボタンはSeries 7 以前のデバイスにも適用されます ボタンの高さは変わらないので 既存のUIにこの新しいボタンを適用しても レイアウトの変更は必要ありません Matthew：SwiftUIの すべてのボタンは 新しいApple Watch Series 7 仕様にアップデートされました ほとんどの場合 このアップデートは自動的に行われ App上での変更は必要ありません とはいえ いくつかのポイントを 押さえておくことが大切です この「キャンセル」ボタンのような ボタンを定義する際 SwiftUIはデフォルトの修飾子 をいくつか適用します watchOSのボタンは デフォルトで borderedボタンスタイルと 自動のborder形状を使用しています 自動のborder形状とは 状況に合わせて 形状が変化することです スクロールビュー以外は カプセル形状です 例えば こうした「キャンセル」や 「開始」ボタンです スクロールビューでは ボタンは丸み を帯びた長方形の形をしています 例えば この「アラームを追加」ボタンです また 「bordered prominent」 というボタンスタイルもあります このスタイルは Appのアクセントカラー をボタンに適用するもので アラームAppで取り入れられています これにより ボタンがより強調され 瞬時に目を引くものになります

Deena：次に タイポグラフィのアップデート について説明します Series 7はSeries 6と同じ デフォルトの文字サイズを採用していて 40mmと41mmはラージ 44mmと45mmはエクストララージです その結果 従来のデバイスよりも 文字数が増えました

加えて 大きい文字サイズを3段階に増やし アクセシビリティの向上を図りました このメールAppは デフォルトの文字サイズ であるエクストララージになっています そしてこれが新しい AX1 AX2 AX3です また Watchで大きな文字で表示したい ユーザーのために Smart Type Suggestionsを 導入しました iPhoneが設定フローで 大きな文字 の設定になっていることを特定すると 新しいWatchで同様の文字サイズを 提案できるようになりました この機能により Watchで最初からお好みの 文字サイズを使用できます タイポグラフィに重点を置きつつも テキストラベルをSF Symbolsで 補完することをお勧めします メールAppや電話Appのように リスト表示のナビゲーション になっているAppでは Appのアクセントカラーで輪郭を取った シンボルを使用しましょう これにより クロスプラットフォームの 一貫性とアクセシビリティを提供できます シンボルのスタイルや色は 可能な限りプラットフォーム間で 統一しましょう SF Symbolsについて 詳しくはこちらの WWDC21のセッションを視聴してください 次にApple Watch Series 7で 新しくなった キーボードとテキスト入力機能を紹介します アクティブな画面領域が大きくなったため フルキーボードが搭載されました このWatch専用に設計されたキーボードでは キー間に境界線はありません これにより 誤タップしてしまうことを心配せずに スワイプ入力できます 入力スペースを最大限に確保するため キーボードから「delete」キーを取って テキストフィールドに配置しました さらに このキーボードでは パスワードや2ファクタ認証など 特定のユースケースに合わせて 自動入力のタイプをカスタマイズできます キーボード対応に加えて テキスト入力の機能も向上させました 左右のアクセサリは SF Symbolsを使って カスタマイズできます タップしやすいように 両方のシンボルにはAppのアクセント カラーを使用することをお勧めします 入力フィールドのプレースホルダー テキストや推奨リストのタイトルには 描写的な表現を使用してください キーボードとテキスト入力の詳細や Appでの最適な活用方法 については こちらの WWDC21のセッションを視聴してください シーンのパディング 自動ボタン形状 階層型ナビゲーションを使って 新しくなったディスプレイの可能性を 最大限に引き出す方法を紹介しました Apple Watch Series 7の デザインプロセスについて詳しくは 「watchOS 8の新機能」と 「SwiftUIの新機能」を参照してください