Apple Watchのスマートスタック向けウィジェットのデザイン

♪ ♪

Apple Design Team のデザイナー Edです watchOS 10のApple Watch上の スマートスタックをご紹介します アプリコンテンツを 文字盤上で ダイナミックに提供する 新たな方法です このセッションでは スマートスタックの機能および ウィジェットをどのように 表示するかを 有用性を最大限にしながら ビジュアルの一貫性を保つ watchOSのデザイン言語を紹介します 長年 Apple Watchの 最も優れた点の1つは 一目で情報を提供することだと 認識してきました シンプルに手首を 上げるだけでよいのです これは ウェイファインダー モジュラー インフォグラフなど 複雑な機能がある文字盤で 特に便利です これらの文字盤では 天気や次の予定など 必要な情報すべてを 一瞬で見ることができます 文字盤に求めるのは 単なる実用性を超えたものでもあります ウォッチは時間を知らせるものであり 同時に個人的な表現でもあります 他の多くのデジタル製品と異なるのは Apple Watchは お気に入りのファッションであることです だからこそApple Watchは 複雑さを無くして スタイルを楽しめるさまざまな 文字盤のコレクションを提供して それぞれのアイデンティティや好みを 完全に表現しています Apple Watchのスマートスタックは これらのユースケースを サポートおよび 補完するようにデザインされました 複雑な設定がない文字盤でも 必要な情報にアクセスできます 機能が豊富で 実用的な文字盤のユーザーは 一目でより多くの情報を 得ることができます どの文字盤も デジタルクラウンを回すだけで 一目でわかるウィジェットが インテリジェントに整列された スタックとして 画面上に表示されます 関連性に基づいた順序付けに加え スマートスタックはウィジェットを 手動で追加 削除し 上部に固定する機能も提供します スマートスタックは必要に応じて 動的にも固定にもできます これらの特徴的な動作を念頭に置いて アプリのウィジェットが 関連性に基づいた順序付けをしたり ピンを活用して最も役立つビューに すばやくアクセスできるようにします スマートスタックの機能を 理解したところで 内部のウィジェットデザインの方法 をお伝えします レイアウト 色 アイコン セッションの操作および 関連性の力を活用する方法 についても説明します それではレイアウトから始めましょう ウィジェットのデザインには 視覚的な一貫性が鍵となり スムーズで予測可能な リーディング体験を提供します 本に例えると ページ毎に異なる場所や 異なるスタイル 異なる大きさで書かれていたら 困りますよね スムーズなリーディング体験のために 6つのデザインレイアウトを作成しました アプリのウィジェットのフォーマットとして 使用できるものです テキストスタイルクラスを使用すると 適切な文字サイズ 太さ 余白 を確保できます 主にテキストベースの情報を 配信するコンテンツでは 3行のテキストレイアウト をお勧めします ニュースはこのレイアウトで 見出しと記事の抜粋を配信しています コンテンツがグループやコレクション の一部である場合 2つ目のレイアウトを使用して コンテンツを色分けできます カレンダーはこのレイアウトで 行ごとにカラーコードを使用しています グラフィックに 補助テキストを追加する場合 2つのレイアウトがあります 1つは統合型のバーゲージを備え もう1つは統合型の円形 グラフィックを備えています オーディオブックのウィジェットは バーゲージのレイアウトで どのページを読んでいるのか 把握できます アクティビティのウィジェットは 円形グラフィックレイアウトを使用し リングを確認してすぐに 理解が得られます テキスト情報を加えて カロリー エクササイズ時間 スタンド時間などを より詳細に把握できます 主に数値的なコンテンツまたは 一目でわかるコンテンツとして 1つの単語を使用する場合 大きなテキストレイアウトを使用します このレイアウトは カレンダーのウィジェットに使用したり アプリ内で固有の状態を 示すためにも使用します 「高」「低」などのキーワードや 数値などです 時間の経過を伴う データの場合 グラフ用のレイアウトを 利用します ウィジェットをデザインするときは 一目でわかるように 必要なものだけを表示します ひと目で確認できる情報に費やすのは 最大でも10秒程度です

これらのレイアウトを使用するには オンライン上の Apple Design Resource を参照してください この時点でグラフィック的に ユニークなレイアウトの方が 合理的な場合があることに 注意してください すべてのコンテンツが同じではないので フォーマット方法も同じではありません たとえば 私が欲しいウィジェットは コーヒーを何杯飲んだかを 追跡するウィジェットです そしてカフェインが切れる 時間を伝えてくれるものです これは標準レイアウトでは 難しいかもしれません ここではアプリにとって より意味のある 独自のレイアウトを 検討するオプションがあります ですが規則性と 読みやすさのために テキストクラスをお勧めします これらは推奨される 標準レイアウトで アプリに最適なウィジェットを デザインする際の参考になります

レイアウトに関する 最後の注意点です コンボウィジェットはスマートスタックに デフォルトで組み込まれ ユーザーが選択した 3つの円形テンプレートを サポートする独自の レイアウトを備えています これは円形のアプリランチャーに最適で 豊富なデータを 提供するのに優れています 気温 UVI AQI の3つを確認するよう 3つをセットにして 機能させると良いでしょう 暑い夏の日に最適です 個人的なお気に入りは 家族の各メンバーを登録し 誰とでもすぐに 連絡できるようにすることです これらがアプリのウィジェットの フォーマット化に向けたスタートをきる 良い例となるでしょう 標準レイアウトを使用するか オーダーメイドのものを使用するか またはコンビネーションウィジェットで 考え抜いた円型のセットを表示するか ウィジェットのレイアウトは 一貫性と見やすさが重要ですが 認識可能で 特徴的なことも重要です ここで色彩と アイコンに移ります

文字盤色に基づいて 色合いは決まりますが スマートスタックのウィジェットは 文字盤のスタイルに従っていません これによりデザイナーやデベロッパは ウィジェットをより認識しやすくし スタイルをアプリに近づけるよう 柔軟に対応できます デフォルトで すべてのウィジェットは 暗い背景に 白いテキストが表示されます しかし デザイナーやデベロッパには アプリの認識が容易で 情報を伝えやすい 背景色をお勧めします たとえば天気のウィジェットは 変化する気候を伝えるため ダイナミックな色合いを使います 株価のウィジェットは パフォーマンスによって赤か緑で表示したり オーディオブックのウィジェットでは 本の表紙をアウトフォーカスして アンビエントなトーンにしています 色付きの背景に加え アプリの機能を表す アイコンを利用して さらにウィジェットを区別し コンテンツの内容を表現できます たとえばウィジェットの前に SFSymbolを追加して コンテンツの種類を わかりやすくしています SFSymbolを使用しない場合は テキストとうまく連動する ベクターアイコンをお勧めします ウィジェットのより広範な 視覚的言語を補完してくれます 鮮やかな背景を選択しても 説明的なアイコンを配置しても ウィジェットを アプリのエクスペリエンスへの 特徴的で独特なウィンドウ にする方法を考えてください 次にセッションについて話しましょう まず セッションとは何でしょうか セッションは開始と終了が明確な アプリ内の行動時間です 音楽再生や タイマーのカウントダウン ストップウォッチの実行 進行中のワークの追跡時間などです スマートスタックの重要な機能は システムが生成する セッション制御ウィジェットです これらはセッションの進行中に スマートスタックの上部に 自動的に表示される特別なウィジェットです たとえば音楽再生を開始すると システムはそのいずれかを生成します 音楽のウィジェットや ワークアウトのウィジェットなど セッションに関連するウィジェット をデザインするときは セッションにつなげたり セッション後に役立つコンテンツを 提供することをお勧めします これによりセッション制御 ウィジェットを補完できます たとえば再生する 音楽トラックを提案したり 今日予定されている ワークアウトを表示するなどです これらのエクスペリエンスに 焦点を当てると セッション制御ウィジェットの 冗長な機能が削減されるほかにも 音楽を別の曲に変更したり 新しいタイマーを開始するなど セッション中でも ウィジェットが有効になります スマートスタックは最も関連性の高い ウィジェットが最上位に表示されるよう ウィジェットを インテリジェントに順序付けします ここでは この機能を デザインする方法に焦点を当てます

ウィジェットに含まれる コンテンツをデザインするとき ウィジェットをスタック内で どう優先すべきかを 考慮することが重要です 考慮すべき5つの場面です 日時が目前に迫っているとき ある場所に到着したとき ヘッドフォンが検出されたとき 起床したとき または就寝したとき ワークアウトを開始 または終了したとき そのうちのいくつかについて 話しましょう カレンダーのウィジェットは 時刻と日付を利用して 1時間以内に起こる イベントの関連性を高めて スタックの一番上に持ってきます リマインダーアプリは位置情報を使用して 最も関連性の高いコンテンツを ウィジェットに追加し スタック内の順序に優先順位を付けます GPSで特定した場所 自宅 職場 学校など GPSの必要がない場所 どちらも使用できます オーディオブックアプリは ヘッドフォンが接続されると応答し ウィジェットをいつスタックの 一番上に優先させるかを決定します お気に入りの本を聴くには AirPodsを耳に入れて Digital Crownを回すだけです アクティビティのウィジェットは アクティブなワークアウトから スタック内の順序に 優先順位を付けます その後Crownを回し リング上にその結果を 確認することができます

ウィジェットとの関連性を活用して 何ができるか 理解していただければ幸いです アプリがこれらのシグナルを より慎重に利用するほど スタックはより賢くなります Apple Watchの スマートスタックは人々がウォッチ上で アプリを操作する主要な方法 になると私たちは考えています アプリをどのように表示するのか 時間をかけて考えてください 構築を開始する準備ができたら ぜひ Code-Alongセッションを チェックしてみてください 「Apple Watchのスマートスタック向け ウィジェットの構築」 すぐに実行できます ご視聴いただき ありがとうございます スマートスタックでみなさんのウィジェット を見るのを楽しみにしています