ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
watchOS 10について
Apple Watchのデビュー以来最大とも言える変化について確認し、リデザインされたユーザーインターフェイスやスマートスタックについて紹介します。レイアウト、ナビゲーションやスタイルについての理解を深め、AppleデザイナーがどのようにwatchOS 10のデザインにアプローチしたのかを確認しながら、これらをApple Watchアプリに応用させる方法を学びましょう。
関連する章
- 1:40 - Design principles of watchOS 10
- 2:49 - Layout system of controls, labels and content
- 3:36 - Background colors and content
- 4:28 - Materials
- 5:03 - Navigation patterns
- 9:02 - Wrap up
リソース
関連ビデオ
WWDC23
-
ダウンロード
♪ ♪
こんにちは Taylorです Apple Design Teamのデザイナーです 8年前に登場して以来の最大の変化となる watchOS 10をご紹介でき嬉しく思います ここではwatchOS 10の新機能について Apple Design Teamによる アプリとシステムへのアプローチや これらのデザインパターンを どうアプリ作成に取り込むことができるのか についてお話しします では始めましょう 2014年にApple Watchが 最もパーソナルな製品として登場しました 常に側にあり身につけるデバイスです それを理解した上で ケース素材やバンドそして文字盤など 独自のスタイルを作り出せるよう Apple Watchをデザインしました
Apple Watch Ultraの登場で Apple Watchは地球のどんな極限状況下でも 使用可能になりました 小さいディスプレイや 限られた入力方法 そして短い操作時間など ユニークな制限があるため 新しいインタラクションの方法が 必要になりました Digital Crownがその例です またアプリのデザインも 一目で把握でき アクション可能で レスポンシブという点にフォーカスしました それ以来 Apple Watchは進化しました ディスプレイはより大きく明るくなり ケースの丸みと一体化しています またセルラー通信やヘルスケアセンサー 常時表示ディスプレイや フル機能のアプリなど Apple Watchの可能性が さらに広がりました watchOS 10では この最新で明るいディスプレイと 一貫性のあるハードウェアをフルに活用し 新しいユーザインターフェイスを ご紹介します watchOS 10ではDigital Crownで その時に応じたウィジェットを インテリジェントに文字盤に 呼び出すことができます ホーム画面を簡単にナビゲーションできます Digital Crownを操作することで アプリのまとまりを上下に移動できます またサイドボタンを一度押すと コントロールセンターが 二度押すとウォレットが どこからでも開きます そして視認性と明瞭さ コントロールとナビゲーションの 一貫性を念頭に すべてのアプリをリデザインしました 明快なデザイン概念を基にした 厳密で整然とした watchOS 10のデザインプロセスは みなさんのアプリのデザインにも 適用できます Apple Watchのアプリは ユーザーへの有用性に 焦点を当て特化されるべきです 画面はひと目での視認性と 短時間のインタラクションに 最適なデザインであるべきです そしてコントロールとナビゲーションは 明快で一貫性があるべきです 初代Apple Watchに比べ Apple Watch Series 8と Apple Watch Ultraには 大きく丸みのある画面があります 私どものアプリにおける ナビゲーションの一貫性と 視認性増加のため 各アプリに情報を提供する 新しいレイアウトに対する アプローチに取り組みました この新システムは画面の形に基づき サイズやコントロール そしてラベルとコンテンツの配置を定義し レイアウトに一貫性を持たせ コントロールを明快かつ人間工学的にします 様々なコンテンツに対応するため 3つの基本レイアウトをデザインしました DialとInfographicとListです どのレイアウトも watchOS 10がサポートする 異なるApple Watchのサイズに 自動的に対応するようデザインされています またwatchOS 10のアプリは バックグラウンドを利用して 更なる情報を伝えることもできます 世界時計での時間の情報や 天気の現在の状況 そして株価の上下などがあります 例えば アクティビティでは ムーブ・エクササイズ・スタンドの アクティビティリングの Infographicビューで バックグラウンドカラーが リングカラーにマッチしています バックグラウンドカラーを利用することで ナビゲーションの手助けや 使用中のアプリの認識に役立ちます バックグラウンドのコンテンツは ビジュアルだけでなく 更なる利便性を提供する サポート役であるべきです バックグラウンドのコンテンツには シンプルなカラーやグラデーション また更なる情報を伝える 精巧なアニメーションがあります アプリの利用者が どこにいるかを認識できるカラーを 使用するよう考慮してください
さらにwatchOS 10ではシステムを通して 新しいマテリアルの適用を導入しています 明瞭で機能的なレイヤが 半透明性により階層を作り出し ユーザーがシステムやアプリ内の どこにいるかの把握に役立ちます これらの新しいマテリアルは スペースを最大限に活かし コンテンツがスクロールされても ステータスバーのような システム要素が読みやすさを保ちます さらにセマンティックシステムカラーを 鮮やかなマテリアルの上で使用すると コントラストが自動的に調節されます watchOS 10ではさらに 新しい ナビゲーションパターンが導入されます バーティカルページネーション ソースリスト そして改良された階層型ナビゲーションです より簡単に一貫してナビゲーション可能な アプリの作成の手助けになります Digital Crownは このような小さいデバイスで 画面を指で遮ることなく ナビゲーションできるようデザインされた ユニークな入力メカニズムです watchOS 10ではこれを使って アプリにナビゲーションし アプリ内もナビゲーションできます メールのようなリストビューでは Digital Crownを回して 受信ボックス内のリストやメッセージを 上下にスクロールできます 幾つものタブがあるアプリでは 新しいナビゲーションパターンの バーティカルページネーションがあります アクティビティでは Digital Crownを使って アクティビティリングの概要画面と ムーブ・エクササイズ・スタンドの 各インフォグラッフィックビューを 移動することができます バーティカルページネーションは アプリ内で幾つもの情報を 個々に閲覧できる素晴らしい方法です ページインジケータが Digital Crownの横に表示され どんなバックグラウンドでも見えるよう デザインされています 時として要素が幾つものページに 存在することがあります アクティビティリングや ストップウォッチのダイアルがそうです ページ間の要素をスムーズに アニメーションし スケールや位置 情報密度を調節することで 各ページで同じ要素を繰り返し 表示することを避けられます このオブジェクトの永続性により フル画面の情報をナビゲーションする上で ユーザーに視覚的なアンカーを 提供することができるのです 通常 各ページのコンテンツは 1画面の高さに収めるべきです それにより各ページに 明快かつ明瞭な目的を与え より視認性の高いデザインを達成できます しかし画面の高さを超えたコンテンツを 表示する必要がある場合もあります その例が2ページを持つメッセージです ピンで固定したチャットと それ以外のものを含むページがあります 最初のページは高さが固定で 最高9つのチャットが表示されます もう一つはスクロールビューで ページがアクティブになると 上下にスクロールできます 連絡先では コンタクトカードの最初のページに 詳細を示した写真と よく使われるアクションが表示され 2ページ目はスクロールビューで あまり使われない連絡先の詳細が 表示されます スクロールビューの使用は思慮深く行い 可能であれば高さ固定ページのあとに 配置するようにしましょう バーティカルページネーションを Apple Watchでの使用は難しい 水平方向のページネーションの代わりに 使用します Digital Crownをリストやページの ナビゲーションに使用しない場合でも アプリ内のデータを調べ進めるのに 最適のツールとなります 世界時計では Digital Crownを回すことで その場所の時間を早められ 現在時との違いを比較することができます 世界時計はwatchOS 10の Split Viewで 新しいナビゲーションパターンの ソースリストを使用しています ソースリストを使用するアプリでは 同じタイプの情報を含んだ 幾つものエンティティの 詳細ビューをナビゲーションできます これらのアプリは詳細ビューを開き 左上のソースリストボタンから エンティティを切り替えることができます 世界時計の各地のリストがその例です 階層型ナビゲーションも 引き続きサポートされていますが 2レベルのソースリストデザインか 明瞭なバーティカルページで コンテンツを表示できない場合のみに 使用することをお勧めします 設定や メールが 階層型ナビゲーションに相応しい アプリの例です watchOS 10では 階層型ナビゲーションに対し 新しいアニメーションが適用され どのビューにいるのか ユーザーがナビゲーションする上で 明確になるようにしています 素晴らしいwatchOS 10アプリは フォーカスされたものであり 情報を簡潔に伝え 視認性と簡潔なインタラクションのために 最適化されたものです それらをデザインするためには アプリの目的に焦点を当て特化させ 標準のナビベーションパターンを利用し ナビゲーションを簡潔にし 必要最小限の画面数で 情報を簡潔に伝達することが重要です そして標準的なレイアウトとコントロール ラベルサイズとシステムカラー マテリアルを使用しましょう さらにwatchOS 10での アプリのデザインについて確認される場合は "watchOS 10に向けた アプリのデザインと構築"と "watchOS 10に向けたアプリの アップデート"をご確認ください またウィジェットとSmart Stackに関する セッションもあります watchOS 10はDesign Teamと Engineeringの 大勢の人々のコラボレーションと 教練による努力の賜物ですが 始まりにすぎません みなさんがどのようなアプリを作り出すか 楽しみにしています ♪ ♪
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。