優れたウィジェットをデザインする

こんにちは WWDCへようこそ “優れたウィジェットの設計” マックです 同僚のクリスチャンも後ほど登場します 私たちはAppleのヒューマンインタフェース デザインチームに所属しています 今日は皆さんが作るApp.のための ウィジェットのデザイン方法を説明します その前に新しくなった機能を見ていきましょう

iOS 14ではウィジェットの エクスペリエンスを一新しました 基礎となる部分には 全く新しい美しいビジュアルと パワフルな新機能が追加されました ウィジェットに表示する情報は これまで以上に 最新でコンテキストに応じた内容を選択でき ユーザはドラッグ＆ドロップするだけで 直観的かつフレキシブルに ウィジェットを直接編集できます

何よりエキサイティングなのは これらの新しいウィジェットが ホーム画面に直接 追加できるようになったことです これにより全く新しいウィジェット体験を ユーザに提供できます 同様に皆さんがウィジェットをデザインする際の アプローチも 全く新しいものになります もう１つの新しい機能はスマートスタックです 一ヶ所に複数のウィジェットを追加でき その中でウィジェットを素早く切り替えられます しかしスマートスタックの真のパワフルさは 使い方に応じて表示内容を 動的に変えてくれることにあります スマートスタックは ユーザの挙動やコンテキストに応じて 自動的にその時に 最適なウィジェットを表示します 指で操作する前に 欲しい情報がすでに表示されているのです

例えば私は朝起きると 今日の天気を調べます 通勤時には新しいお気に入りの音楽を聴きます 午後になると 頻繁に渋滞情報をチェックして 家に着くのにどれぐらいかかりそうか調べます 夜になると 今日の最新トップニュースなどをチェックします これはあくまで私の ウィジェットスタックの例ですが スマートスタックのウィジェットとその挙動は 個々のユーザのデバイスの使い方や 求めている情報の内容によって一人一人違います ここまで駆け足で新しい機能を説明しましたが 皆さんの作るウィジェットを このように様々な形で ユーザが操作することを覚えておいてください この後それぞれのデザインプロセスに関連する いくつかの機能をさらに詳しく説明します ウィジェットをデザインする際に 大切なプロセスが２つあります アイデアとクリエイションです

最初のセクションでは 理解を深めていただくため いくつか基本的なコンセプトを説明します さらにプロセスのこのステップで考慮すべき 新しい機能をいくつか説明します まずデザインの原則について 新しいウィジェットシステムでは コンテンツが全てです 最高のウィジェットを作るには どんな情報や体験のために ユーザがそのApp.を使い続けるのか 理解しておく必要があります アイデアを練る際に重視すべき ３つの大切な原則があります それは パーソナル化情報提供コンテキストです 人はパーソナル化されたものを求めます その方がApp.やそこでの体験に より深い心のつながりを感じられるからです ウィジェットはユーザのデバイスの 様々なソースから 最上位の情報の概要を 分かりやすく表示してくれます 欲しい情報がトップに表示されたら App.内で繰り返し行うアクションが省略できます

人は一日中デバイスを持ち歩いており ユーザの状況を知らせるシグナルは 大量に発信されています コンテキストは必要な時に 必要な情報を表示するのに役立ち ベストなタイミングで より良い体験を提供してくれます 魔法のように次のニーズと ステップを予知してくれるのです ではウィジェットをデザインするとき これらの原則はどのように アイデアや決定に影響してくるのでしょうか

カレンダーではApp.のアイコンのように 今日の日付と曜日が表示されます App.に登録された内容から 次の会議やイベントの情報が 最重要情報としてトップに表示されます 開始時間やイベントの場所がひと目で分かり App.を開いて情報を探す手間が省けます イベントが多く忙しい時は 関連性の低い情報を非表示にし 各イベントの最重要情報を1つだけ 優先表示します 一日がほぼ終わりもうイベントがない場合 空白のウィジェットを表示する代わりに 可能であれば 明日の予定を表示します これは今現在のコンテキストだけでなく 考慮する範囲を 時間 日 週にまで拡大した良い例です さらにパーソナル化した例は ユーザが住む国の祝日情報です このように特別な祝日の リマインダーが表示されます 友達の誕生日は プレゼントマーク付きでトップ表示されます このようにホーム画面から直接 誕生日の友達とのつながりを感じられます

フォトウィジェットは ウィジェットがどこまで パーソナル化できるかを示す良い例です 人は最新の写真よりも 最高の写真がトップ表示された方が 嬉しいと感じることが分かりました フォトメモリーだけでなくフィーチャされた 写真もトップに表示します 過去の年の今日の写真を表示するのも コンテキスト活用の一例です

天気ウィジェットでは今いる場所の都市名と 現在の気温最低‣最高気温 その日の天気の推移を 表示します 天気はウィジェットは コンテキスト活用の非常にいい例です 強風雷などの固有の気象情報や 雨が降るのかいつ降るのかが表示され 雨が降る時はコンテキストに応じて 次の１時間の予報を 徐々に細かいレベルにし 土砂降りになる時間や止む時間を 分レベルまで表示します

地図では現在地や周りにあるものを 確認できて便利です これは空間認識に基づいて構築されており 車でどこかに出かけた時は 車を停めた場所が表示されます 予定されたイベントがある時は その場所までの所要時間が表示されます 地図のコンテキストを利用してどの道を走るか 途中に何があるのかも表示してくれます 外出時は何時ごろ家に到着するかも表示されます このようにウィジェットは非常に 動的で多くの情報を与えてくれます そしてコンテキストの活用で よりパーソナル化された エクスペリエンスを提供し ユーザのニーズに応えてくれます

さらにウィジェットを ユーザが編集できる機能も加わりました これはアイデアのステップの 重要なコンセプトです これにより１つのウィジェットに含めたい 情報の量が 変わってくるためです では天気ウィジェットの 編集方法を見ていきましょう iOS 14では編集モードで ウィジェットがApp.のようにブルブルと震えます そこでウィジェットをタップすると回転し 編集可能な項目が表示されます この天気ウィジェットでは 天気を知りたいロケーションを変更できます デフォルトではユーザの現在地が表示されるので ウィジェットを追加した後 何もする必要はありません ロケーションのフィールドをタップすると 天気を知りたいお気に入りの場所が全部表示され 他のロケーションを調べることもできます 表示するロケーションを東京に変えてみます

ウィジェットが回転し 東京の天気と情報が表示されました しかし本当にすごいのは iOS 14では好きなだけウィジェットを追加でき それぞれを編集して 異なる情報を表示できることです では２つ目の天気ウィジェットを追加して サンフランシスコの天気を表示させてみましょう

この機能の素晴らしい点は 複雑なウィジェットのレイアウトを作って １つのウィジェットの中で様々な情報を 組み合わせるのではなく ユーザ自身がApp.から得たい情報の量を決め 複数のウィジェットを追加編集して 見たい情報だけ表示することができる点です ２つの都市を隣同士に並べることができました iOSの新しいウィジェットの 大半でこのような編集ができ 様々なリマインダーリストや 株価 メモ 世界の時刻などが表示できて便利です

これはあくまで主要ユースケースの一例ですが 他にもいろいろあります ユーザが皆さんのウィジェットの ユーティリティや柔軟性を 最大活用するために何ができるのか 是非考えてみてください

もう１つアイデアのプロセスでは 複数のウィジェットを提供するかどうか 決定する必要があります

株価のウィジェットでは ２種類のアイデアを考えました ウォッチリストの情報がひと目でわかる コンパクトな概要を表示するウィジェットと 特定の１銘柄の より詳しい情報を追跡するウィジェットを 別のウィジェットとして追加できる機能です 先ほど都市を追加した 天気ウィジェットと同じコンセプトです iOS 14では他にもいくつか複数の ウィジェットが利用できるApp.があります Newsでは特定分野の トップニュースをフォローできます メモではお気に入りのメモにピン付けしたり 共有メモフォルダを追加したりできます

ここまでウィジェットのアイデアを練る上で 重要な原則と 考慮すべき項目を見てきました 次のパートではこれらのアイデアを どのようにウィジェットに落とし込み 皆さんのApp.の内容をエレガントで 一貫した形で表現するかについて クリスチャンが説明します ありがとうマック こんにちはクリスチャンです ここからはウィジェットの作り方を説明します 早速詳しく見ていきましょう クリエイションのパートには ３つの要素があります 1つ目はサイズとインタラクションです 新しいシステムでは３種類のサイズで ウィジェットをデザインできます スモール ミディアム ラージです

スモールサイズは 情報量を制限してApp.の一番役立つコンテンツを 小さなサイズで表示できるようにしました スモールウィジェットのタップ対象は１つのみで タップするとウィジェットに表示された コンテンツのリンク先にジャンプします リンク先は皆さんのApp.の 構造によって決まります 例を見てみましょう

スモールのカレンダーウィジェットです このウィジェットは 常に次の予定を表示しているため 私たちはApp.のDayビューの中の 最新イベントにジャンプするのが 最も適切だと考えました このウィジェットをタップすると Dayビューが最新イベントまでスクロールされ それ以降の予定がひと目でわかります

Newsのスモールウィジェットでは ユーザが興味を持ちそうなニュースを プレビュー表示しており タップするだけでApp.内のニュース記事に ジャンプできます

ミディアムとラージのウィジェットは おなじみの形で どちらもより多くのコンテンツを 入れることができタップ対象も複数です

ミディアムとラージのウィジェットで コンテンツをタップすると ウィジェット上に表示されたコンテンツの リンク先に飛ぶことができます これはNewsの例です どちらかの記事をタップすると タップした方のニュースへ直接ジャンプします

ウィジェットシステムには ３通りのタップ方法があります 「フィル」スタイルは １つのコンテンツのリンク先に ジャンプする時に用います スモールウィジェットはタップ対象が １つのためすべて「フィル」スタイルを使います

「セル」スタイルは独自の形をした ウィジェットから コンテンツを１つ選ぶ場合に用います ファイルウィジェットがその一例です

「コンテンツ」スタイルは ウィジェット内にないコンテンツを 選ぶ場合に適しています

次はコンテンツと個性です 皆さんのウィジェットを活かすために 最も大事なことは その内容です ウィジェットをデザインする時は コンテンツと個性を同時に考えてください “ユーザは私のApp.に 何を求めているのだろう？” と自問してみてください そしてユーザにとってあなたのApp.のどの情報が 有益なのかはっきりと見極めます コンテンツと個性を同時に考えた例を 見ていきましょう 私たちがウィジェットセットをデザインする際 App.の外観を利用して個性を表現しました 天気のウィジェットには App.でおなじみの天気の絵の背景と アイコンを使用しました Newsの場合ニュース記事で使用される 画像からインスピレーションを得ました カレンダーでは次のイベントにフォーカスした シンプルな外観と慣れ親しんだ赤い色から インスピレーションを得ました また自身のApp.のアイコンから インスピレーションを得る方法もあります メモではアイコンの ノートパッドの画像を採用しました ポッドキャストはアイコンの紫のグラデーション ヒントではアイコンの黄色の グラデーションを採用しました ウィジェット内のコンテンツの レイアウトについては 私たちがウィジェットセットをデザインした際 ２通りのパターンを見つけました 1つ目は３つのサイズ全部に 拡張できるレイアウトです 天気ではサイズ毎に表示できる情報を 追加しました

２つ目はサイズ毎に全く異なるレイアウトです 例えばNewsでは スモールウィジェットはスペース全体を使って リッチコンテンツを優先表示します ミディアムウィジェットではより多くの ニュース記事が表示できるようにしました

皆さんが各サイズをデザインする際 小さいウィジェットをそのまま拡大して 大きなウィジェットにしないでください どのような情報を扱っているかを考え 各サイズに最適な内容にしてください

ラージサイズの スクリーンタイムウィジェットでは 表示したい有益な情報がたくさんあり スペースも増えたため チャートを大きくし カテゴリとApp.の詳細も追加しました 大きなウィジェットに入れる情報がない場合は 特定のサイズだけでもOKです すべてのサイズを使う必要はありません もしこの例のように スモールウィジェットにサマリー情報を入れる アイデアを思い付いた場合 スモールウィジェットに入れる情報は ４つまでにすることをお勧めします

ではウィジェットのパターンを 詳しく見ていきましょう

私たちがウィジェットをデザインした時 いくつかの共通レイアウトパターンが 浮上しました これはスモール ミディアム ラージ共通で 単一アイテムを組み合わせより高密度で 複数アイテムをサマリー表示するレイアウトです アイデアを試すときはこのように すでに成功したパターンから始めるのも 良い方法でしょう

皆さんが自身のカスタムレイアウトを デザインするときは 他のウィジェットと並んだときに 統一感が取れるよう すべてのサイズでデフォルトの16ptの レイアウトマージンを取ってください

円形や差し込み図などの図形を入れる時は すべてのサイズでさらに小さい 11ptのマージンを取ってください ウィジェットの端近くに図形の角がくる場合は ウィジェットの角丸と 同心状になるようにしてください ウィジェットの角丸は デバイスのサイズによって異なるため ウィジェットの角丸と同心状の図形を ウィジェットに挿入できる SwiftUIコンテナを提供します これを使えば手動で 角丸の値を指定しなくて済みます

フォントはSF pro またはSF MonoやSF Pro Roundedなど San Francisco系のフォントを 使用してください ウィジェットでブランドや個性を表現するのに カスタムフォントを使いたい場合は 他のウィジェットと並んだ時に自然に見えるよう 工夫してください

ウィジェットはライトモードとダークモードの 両方で見栄えが良くなるようにしてください カレンダーではApp.同様ウィジェット全体が ライトモードとダークモード用の 外観に切り替わります ポッドキャストでは 背景全体がグラデーションなので どちらのモードにも対応できます メモでは黄色と白の はっきりした色の組み合わせなので ダークモードではApp.同様 メモの内容部分をダークモード対応にしました

すべてのウィジェットにはシステムがウィジェットの データを表示できない時に表示される プレースホルダーが必要です この状態で基礎となる図のエレメントを示して レイアウト上でテキスト情報が表示される場所を 確保しておきます

このようにシステムがプレースホルダーから 適切なデータに切り替えると レイアウトや色を変えることなく この静的エレメントが コンテンツに置き換わります

では最後に ウィジェットをデザインする際の 重要なヒントをいくつかお伝えします

ウィジェット内でロゴを使えるのは この例のように様々なコンテンツの情報を 集約するタイプのApp.だけです

この取り扱いをウィジェット間で統一するため ロゴは必ず右上角に配置してください ワードマークはこの場所やウィジェット内の どの場所でも使用しないでください

またウィジェットにApp.の アイコンを入れないでください さらにウィジェットに App.名を入れないでください ホーム画面でウィジェットの下に 表示されるApp.名と 重複するためです

ユーザへの指示や問いかけに テキストを使わないでください 何かを伝える必要がある時は グラフィックで表してください ウィジェット上に時系列情報を表示する際は 「最終更新時間」や「最終チェック時間」等の 言葉を使わないでください

ここまでどこからアイデアをスタートするか App.の一番役立つ情報をどうトップ表示するか それをどう実現するかについて 詳しく説明いたしました このiOS14の新しいウィジェットシステムで 皆さんがどんなエクスペリエンスを 生み出してくれるのかワクワクしています