PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて
6月にWWDC20が発表され、次期iOS 14にはWidgetという新機能が登場することが判明しました。
この記事ではWidgetのUI/UXをまとめます。
PMとデザイナーが「Widgetを自プロダクトに導入する」にあたって、「Widgetがどういうものなのか」を理解するためにこの記事が役に立つでしょう。
記事の内容はUI/UXに絞っているため技術的な観点からの言及は少ないです。
予めご了承ください。
免責
8月10日現在、WidgetについてはApple Beta Software Programにあたるため、スクリーンショットを独自でとることはNDAの観点から避けなければいけません。
この記事ではAppleの公式サイト、WWDCのVideoからキャプチャーを利用いたします。
引用と判別ができるよう、キャプチャーを取得したもとのキャプションをつけて解説をいたします。
Widgetとは何か？
簡潔にWidgetの機能をまとめると 「アプリを立ち上げなくてもアプリコンテンツをみれる場所」 になります。
一般にユーザーは一日に90回ホーム画面にアクセスしているそうです。アプリは立ち上げなくてもHome画面にはアクセスするユーザーに対して、積極的にユーザーがアプリを立ち上げなくともアプリコンテンツを提供できるものがWidgetになります。
WidgetはiOS 10から登場した「Today」Extensionに置き換わるものになります。
Widgetは３つのサイズを置くことができます。
アプリのアイコンの４個分のSmall, 8個分のmidum, そして16個分のlargeです。
Widgetの目的
WWDC20の「Meet WidgetKit」ではWidgetの目的を次の３つで説明します。
- Glanceable(ひと目でわかる）
- Relevant（関連性）
- Personalaized （パーソナライズ）
要約すると、「ちらっと見れ」て、「ユーザーに関連があるもの」で、「個人にカスタマイズ」された情報をユーザーに提供するのがWidgetの目的です。
Glanceable
ユーザーがHome画面を見る時間は非常に短いので、ひと目で理解できる情報を提供するのが重要です。
例えば、Apple純正カレンダーアプリは、次の予定がひと目で分かるデザインになっています。Neilさんと「Philz Coffee」でお茶をする予定ですね。
地図アプリでは「Philz Coffee」というコーヒーショップの到着時間が自動車で後2分ということがする理解できます。
天気アプリではサンフランシスコの天気が17°で晴れであることがわかります。
このようにひと目でアプリの情報を伝えることがWidgetをデザインする上で重要です。
Relevantとスマートスタック
Relevantは「関連性」という意味ですが、その効果をWWDC20の「Meet Widget」ではスマートスタックを使って説明しています。
スマートスタックはiOS 14で登場した複数のWidgetを格納できる機能です。
ユーザーはフリックでWidgetを切り替えることができます。
また、システムもWidgetを自動で切り替え、ユーザーに最も関連する情報を提供します。
例えばあるユーザーの１日とスマートスタックの自動表示の変化をみてみます。
朝起きてiPhoneのHome画面を見るとスマートスタックは自動的に「天気アプリ」を表示します。
車での出勤中は音楽をよく聞くので「ミュージック」アプリのWidgetが表示されます。
夕方、仕事が終わって帰宅する時に「地図アプリ」Widgetが帰宅時間を教えてくれます。
夜一日の終わりにはトップニュースのいくつかをキャッチアップします。
「ニュース」アプリのWidgetが表示されます。
１日を通してその時間、時間によって一番ユーザーに関連のあるWidgetをシステムが自動で表示するのが分かります。
これは完全にシステムのみが判断しているわけではなく、アプリはシステムに対して時間と関連性を伝えることができます。
適切にアプリがユーザーの関連性を伝えることでベストなタイミングでユーザーが必要な情報をWidgetを通して伝えることができるのです。
Personalaized（パーソナライズ）
アプリの実装が必要ですが、Widgetをユーザーに合わせてカスタマイズすることができます。
カスタマイズできるWidgetはWidget部分をロングタップすることで編集モードになります。
例えば「天気アプリ」のWidgetは場所を指定することができます。
これは「天気」アプリのWidgetを長押しすると編集モードを選択でき、Locationを「San Francisco」に変更しているキャプチャです。
このようにWidgetの設定をユーザーが変更できるようにアプリを実装することができます。
Widgetが表示される場所
Widgetが表示される場所は、iPhone, iPad, macOSです。
それぞれのプラットフォームによって表示される場所が異なります。
iPhoneでは今までToday画面が出ていた場所とHome画面の両方にWidgetを配置することができます。
iPadではToday画面の領域（アプリアイコンの左側）にWidgetが表示されます。
macOSでは通知センターにWidgetが表示されます。
Widgetはミニアプリではない
ユーザーがWidgetに対してできるUI操作はできるのはシングルタップのみです。
スクロールやスイッチなどのUIコンポーネントを置くことはできません。
Widgetでできること
Widgetの追加
ユーザーはHome画面を長押しし、+ボタンでWidgetを追加できます。
+ボタンをタップすると利用可能なWidgetを一覧できるWidget Galleryが表示されます。
Widget Galleryから目的のWidgetを選択すると、種類を選ぶことができます。
追加したいWidgetの種類と大きさを選ぶとHome画面にWidgetが追加されます。
ユーザーは編集ができる
Personalaized（パーソナライズ）の項目でも説明したとおりWidgetが編集機能に対応しているなら、ユーザーはWidgetを編集することができます。
Widgetを長押ししてWidgetの設定を変えることができます。
ユーザは一つのアプリのWidgetを複数置ける
一つのアプリで複数のWidgetを置くことが可能です。
「天気」アプリで一つは「ロサンゼルス」、一つは「東京」と設定を変えて置くこともできます。
ユーザーがWidgetをタップすると関連するページへ遷移する
ユーザーがWidgetをタップするとアプリが起動します。
どこからタップされたのかを把握できるので、アプリ実装者はWidgetが表示されているものと関連したアプリ画面にユーザーを遷移させることができます。
「ミュージック」アプリではタップすると表示されているアルバムに遷移します。
WidgetのリンクはSmallサイズではWidget全体で一つのみですが、Mediumサイズ、Largeサイズでは複数のリンクを配置することができます。
アプリは複数のWidgetをつくれる
種類の異なるWidgetをアプリは提供することができます。
例えば株アプリです。
株アプリでは同じSmallサイズのWidgetでも種類が異なるものが用意されています。
一つは３つの銘柄の最新情報を伝えるもので、もう一つは一つの銘柄のチャートを表示するものです。
アプリが作れるWidgetの種類は一つだけとは限らないので、ユーザーに提供したい情報をWidgetごとにデザインすることができます。
アプリはWidgetサイズを３つまで作れる
先ほどお伝えしたとおりWidgetのサイズはSmall, Medium, Largeの３つあります。
Widgetサイズをどこまで対応するのかはアプリが決められます。
Small, Medium, Largeのうち一つだけ対応してもいいし、SmallとLargeの両方を対応してもよいです。
必ず３つ作らなければいけないわけではないので、アプリの特性に合わせてWidgetをデザインしましょう。
Apple純正アプリのWidget制作例
WWDC20のDesign great widgetsではAppleが純正アプリのWidgetをデザインする上で何を考えて設計したのかが語られました。
Widgetをデザインする上での参考になると思うので紹介します。
Widgetデザイン
WWDC20のDesign great widgetsではWidgetをどうデザインしていけばいいかのヒントが記されていました。
紹介します。
Widgetデザインの原則はユーザーがアプリを立ち上げるときにどんな情報とUXを何を期待するか考えることから始まります。
具体的には３つの指針があります。
- Personal(個人的なもの）
- Informational(情報的なもの）
- Contextual(文脈的なもの）
カレンダーアプリのWidget作成背景
カレンダーアプリではアプリと同じように、曜日と現在の日付が表示されます。
そのユーザーにとって一番重要である次の会議を表示しています。
複数イベントが登録されている場合でも一番重要なイベントを一つ表示するように設計しています。
１日のイベントがすべて終わっても空白で表示するのではなく、明日の予定を表示するようにしています。
友達の誕生日など特別なイベントがあった場合には優先的にそのイベントを表示させるようにします。
天気アプリのWidget作成背景
「天気」のWidgetでは通常ですと、都市名、現在の気温、現在の場所の１日の天気が表示されます。
しかし、天候が荒れて強風、雷雨、雨が降り始めてしまった場合は表示が変わります。
雨がどのくらいで止むのか、降水量は時間ごとにどうなっていくのかをひと目で見ることができます。
状況によってWidgetの表示を変える例として理解できます。
WidgetのUIデザイン
Widgetを設計するときには「アプリを起動したときにユーザーが探しているのはなんだろう？」と自問するとうまくいくとのこと。
天気アプリのWidgetデザイン
アプリの背景やアイコンををWidgetにも適応しています。
ニュースアプリのWidgetデザイン
サムネイルとタイトルをWidgetにレイアウトしています。
メモアプリのWidgetデザイン
メモアプリのアプリアイコンをWidgetのデザインモチーフにしています。
ポッドキャストのWidgetデザイン
アプリアイコンの背景グラデーションをWidgetデザインに適応しています。
UIガイド
LargeサイズのWidgetを作成するときにただSmallサイズのデザインを広げたデザインは避けましょう。
変わりに情報を追加するようにします。
SmallサイズのWidgetには最大４つまでの情報を入れるのがおすすめ。
UIのパターンについて、Small, Medium, LargeそれぞれについてこのようなUIパターンが考えられるそうです。
デフォルトの16ポイントのマージンを守ってレイアウトをすると、他アプリのWidgetと並んでも統一した見た目にできます。
Widgetの角の半径はデバイスサイズによって異なります。
Widgetのコンテンツの角丸はそれぞれのデバイスサイズに合わせる必要があります。
SwiftUIのContainerRelativeShapeを使うことで手動で計算しなくてもデバイスサイズにあった角丸をつけることができます。
逆に言うとデザイナーはポイント指定で角丸を設計してはいけないことになります。
Appleが提供したUIコンポーネント（ContainerRelativeShape）に合わせたほうがいいです。
ダークモードに対応をしましょう。
システムに表示するデータがない場合のためのプレースホルダーを用意する必要もあります。
アプリのアイコンは置く必要がありません。アプリ名もWidgetコンテンツ内に入れないようにしましょう。
Widgetの下に表示されているアプリ名の重複するからです。
ユーザーに支持をしたり話しかけるようなテキストは避けます。
伝える必要がある場合はグラフィカルな方法を考えましょう。
時刻を表示する場合は「最終更新」や「最終チェック」などの言葉をいれるもの避けましょう。
アプリを起動するだけのWidgetを置くのは避けましょう。
Widgetの内容が重要です。
１日に情報が変わるコンテンツを置きましょう。変化がないWidgetをユーザーはHome画面に置きたいとは思わないはずです。
自分のアプリの特性によってWidgetを設定可能にすべきか考えましょう。
状況に合わせて必要な情報を提供できるのがWidgetの強みですが、それが設定が必要かどうかはアプリによります。
天気アプリは場所を変えるためにWidgetを設定可能にするのは理にかなっていますが、Podcastアプリは最近聞いたコンテンツを表示するだけなので、Widgetの設定は必要ないです。
MediumとLargeは複数の場所にタップできるように実装が可能ですが、タップターゲットをたくさん定義しないように気をつけましょう。
ユーザーが混乱してしまいます。
ログインが必要な状況だったらその旨を伝えましょう。
情報を最新に保ちましょう。ユーザーに関連する情報を提供するために重要です。Widgetはリアルタイムに更新されるものではないのですが、適切な頻度で更新されるように実装することが必要です。
Widgetの説明は簡潔にしましょう。
例えば「地図」アプリでは、「ナビゲーション中に方向と乗車時間を提案します」と書かれています。
参考
- Meet WidgetKit - WWDC 2020 - Videos
- Design great widgets - WWDC 2020 - Videos
- Widgets - System Capabilities - iOS - Human Interface Guidelines
宣伝
インプレスR&D社より、「1人でアプリを作る人を支えるSwiftUI開発レシピ」発売中です。
「SwiftUIでアプリを作る！」をコンセプトにSwiftUI自体の解説とそれを組み合わせた豊富なサンプルアプリでどんな風にアプリ実装すればいいかが理解できる本となっています。
iOS 14対応、Widgetの作成も一章まるまるハンズオンで解説しています。
SwiftUIを学びたい方、ぜひこちらのリンクをチェックしてください！