iOS, SwiftUI

PMとデザイナーが知るべきiOS 14 新機能Widgetのすべて

6月にWWDC20が発表され、次期iOS 14にはWidgetという新機能が登場することが判明しました。

QUESTOVE-SUPREME

Apple、iOS 14でiPhoneの体験を刷新より抜粋

この記事では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は3つのサイズを置くことができます。

アプリのアイコンの4個分のSmall, 8個分のmidum, そして16個分のlargeです。

small, medium, large, Design great widgets.wwdc20
天気アプリ Meet Widget.wwdc20

Widgetの目的

WWDC20の「Meet WidgetKit」ではWidgetの目的を次の3つで説明します。

  • Glanceable(ひと目でわかる)
  • Relevant(関連性)
  • Personalaized (パーソナライズ)

要約すると、「ちらっと見れ」て、「ユーザーに関連があるもの」で、「個人にカスタマイズ」された情報をユーザーに提供するのがWidgetの目的です。

Meet Widget.wwdc20

Glanceable

ユーザーがHome画面を見る時間は非常に短いので、ひと目で理解できる情報を提供するのが重要です。

Meet Widget.wwdc20

例えば、Apple純正カレンダーアプリは、次の予定がひと目で分かるデザインになっています。Neilさんと「Philz Coffee」でお茶をする予定ですね。
地図アプリでは「Philz Coffee」というコーヒーショップの到着時間が自動車で後2分ということがする理解できます。
天気アプリではサンフランシスコの天気が17°で晴れであることがわかります。

このようにひと目でアプリの情報を伝えることがWidgetをデザインする上で重要です。

Relevantとスマートスタック

Relevantは「関連性」という意味ですが、その効果をWWDC20の「Meet Widget」ではスマートスタックを使って説明しています。

スマートスタックはiOS 14で登場した複数のWidgetを格納できる機能です。

Design great widgets.wwdc20

ユーザーはフリックでWidgetを切り替えることができます。
また、システムもWidgetを自動で切り替え、ユーザーに最も関連する情報を提供します。

例えばあるユーザーの1日とスマートスタックの自動表示の変化をみてみます。

朝起きてiPhoneのHome画面を見るとスマートスタックは自動的に「天気アプリ」を表示します。

Design great widgets.wwdc20

車での出勤中は音楽をよく聞くので「ミュージック」アプリのWidgetが表示されます。

Design great widgets.wwdc20

夕方、仕事が終わって帰宅する時に「地図アプリ」Widgetが帰宅時間を教えてくれます。

Design great widgets.wwdc20

夜一日の終わりにはトップニュースのいくつかをキャッチアップします。
「ニュース」アプリのWidgetが表示されます。

Design great widgets.wwdc20

1日を通してその時間、時間によって一番ユーザーに関連のあるWidgetをシステムが自動で表示するのが分かります。

これは完全にシステムのみが判断しているわけではなく、アプリはシステムに対して時間と関連性を伝えることができます。
適切にアプリがユーザーの関連性を伝えることでベストなタイミングでユーザーが必要な情報をWidgetを通して伝えることができるのです。

Personalaized(パーソナライズ)

アプリの実装が必要ですが、Widgetをユーザーに合わせてカスタマイズすることができます。
カスタマイズできるWidgetはWidget部分をロングタップすることで編集モードになります。
例えば「天気アプリ」のWidgetは場所を指定することができます。

Meet Widget.wwdc20

これは「天気」アプリのWidgetを長押しすると編集モードを選択でき、Locationを「San Francisco」に変更しているキャプチャです。

このようにWidgetの設定をユーザーが変更できるようにアプリを実装することができます。

Widgetが表示される場所

Widgetが表示される場所は、iPhone, iPad, macOSです。
それぞれのプラットフォームによって表示される場所が異なります。

iPhoneでは今までToday画面が出ていた場所とHome画面の両方にWidgetを配置することができます。

Meet Widget.wwdc20

iPadではToday画面の領域(アプリアイコンの左側)にWidgetが表示されます。

Meet Widget.wwdc20

macOSでは通知センターにWidgetが表示されます。

Meet Widget.wwdc20

Widgetはミニアプリではない

ユーザーがWidgetに対してできるUI操作はできるのはシングルタップのみです。
スクロールやスイッチなどのUIコンポーネントを置くことはできません。

Widgetでできること

Widgetの追加

ユーザーはHome画面を長押しし、+ボタンでWidgetを追加できます。
+ボタンをタップすると利用可能なWidgetを一覧できるWidget Galleryが表示されます。

Meet Widget.wwdc20

Widget Galleryから目的のWidgetを選択すると、種類を選ぶことができます。

Meet Widget.wwdc20

追加したいWidgetの種類と大きさを選ぶとHome画面にWidgetが追加されます。

ユーザーは編集ができる

Personalaized(パーソナライズ)の項目でも説明したとおりWidgetが編集機能に対応しているなら、ユーザーはWidgetを編集することができます。
Widgetを長押ししてWidgetの設定を変えることができます。

ユーザは一つのアプリのWidgetを複数置ける

一つのアプリで複数のWidgetを置くことが可能です。
「天気」アプリで一つは「ロサンゼルス」、一つは「東京」と設定を変えて置くこともできます。

Design great widgets

ユーザーがWidgetをタップすると関連するページへ遷移する

Meet Widget.wwdc20

ユーザーがWidgetをタップするとアプリが起動します。
どこからタップされたのかを把握できるので、アプリ実装者はWidgetが表示されているものと関連したアプリ画面にユーザーを遷移させることができます。

「ミュージック」アプリではタップすると表示されているアルバムに遷移します。

Meet Widget.wwdc20

WidgetのリンクはSmallサイズではWidget全体で一つのみですが、Mediumサイズ、Largeサイズでは複数のリンクを配置することができます。

アプリは複数のWidgetをつくれる

種類の異なるWidgetをアプリは提供することができます。

例えば株アプリです。

Meet Widget.wwdc20

株アプリでは同じSmallサイズのWidgetでも種類が異なるものが用意されています。
一つは3つの銘柄の最新情報を伝えるもので、もう一つは一つの銘柄のチャートを表示するものです。

アプリが作れるWidgetの種類は一つだけとは限らないので、ユーザーに提供したい情報をWidgetごとにデザインすることができます。

アプリはWidgetサイズを3つまで作れる

先ほどお伝えしたとおりWidgetのサイズはSmall, Medium, Largeの3つあります。
Widgetサイズをどこまで対応するのかはアプリが決められます。
Small, Medium, Largeのうち一つだけ対応してもいいし、SmallとLargeの両方を対応してもよいです。

必ず3つ作らなければいけないわけではないので、アプリの特性に合わせてWidgetをデザインしましょう。

Apple純正アプリのWidget制作例

WWDC20のDesign great widgetsではAppleが純正アプリのWidgetをデザインする上で何を考えて設計したのかが語られました。
Widgetをデザインする上での参考になると思うので紹介します。

Widgetデザイン

WWDC20のDesign great widgetsではWidgetをどうデザインしていけばいいかのヒントが記されていました。
紹介します。

Widgetデザインの原則はユーザーがアプリを立ち上げるときにどんな情報とUXを何を期待するか考えることから始まります。

具体的には3つの指針があります。

  1. Personal(個人的なもの)
  2. Informational(情報的なもの)
  3. Contextual(文脈的なもの)
Design great widgets.wwdc20

カレンダーアプリのWidget作成背景

Design great widgets.wwdc20

カレンダーアプリではアプリと同じように、曜日と現在の日付が表示されます。
そのユーザーにとって一番重要である次の会議を表示しています。
複数イベントが登録されている場合でも一番重要なイベントを一つ表示するように設計しています。

Design great widgets.wwdc20

1日のイベントがすべて終わっても空白で表示するのではなく、明日の予定を表示するようにしています。

Design great widgets.wwdc20

友達の誕生日など特別なイベントがあった場合には優先的にそのイベントを表示させるようにします。

天気アプリのWidget作成背景

「天気」のWidgetでは通常ですと、都市名、現在の気温、現在の場所の1日の天気が表示されます。

Design great widgets.wwdc20

しかし、天候が荒れて強風、雷雨、雨が降り始めてしまった場合は表示が変わります。

Design great widgets.wwdc20

雨がどのくらいで止むのか、降水量は時間ごとにどうなっていくのかをひと目で見ることができます。
状況によってWidgetの表示を変える例として理解できます。

WidgetのUIデザイン

Widgetを設計するときには「アプリを起動したときにユーザーが探しているのはなんだろう?」と自問するとうまくいくとのこと。

天気アプリのWidgetデザイン

Design great widgets.wwdc20

アプリの背景やアイコンををWidgetにも適応しています。

ニュースアプリのWidgetデザイン

サムネイルとタイトルをWidgetにレイアウトしています。

Design great widgets.wwdc20

メモアプリのWidgetデザイン

メモアプリのアプリアイコンをWidgetのデザインモチーフにしています。

Design great widgets.wwdc20

ポッドキャストのWidgetデザイン

アプリアイコンの背景グラデーションをWidgetデザインに適応しています。

Design great widgets.wwdc20

UIガイド

LargeサイズのWidgetを作成するときにただSmallサイズのデザインを広げたデザインは避けましょう。

Design great widgets.wwdc20

変わりに情報を追加するようにします。

Design great widgets.wwdc20

SmallサイズのWidgetには最大4つまでの情報を入れるのがおすすめ。

Design great widgets.wwdc20

UIのパターンについて、Small, Medium, LargeそれぞれについてこのようなUIパターンが考えられるそうです。

デフォルトの16ポイントのマージンを守ってレイアウトをすると、他アプリのWidgetと並んでも統一した見た目にできます。

Design great widgets.wwdc20

Widgetの角の半径はデバイスサイズによって異なります。
Widgetのコンテンツの角丸はそれぞれのデバイスサイズに合わせる必要があります。
SwiftUIのContainerRelativeShapeを使うことで手動で計算しなくてもデバイスサイズにあった角丸をつけることができます。

逆に言うとデザイナーはポイント指定で角丸を設計してはいけないことになります。
Appleが提供したUIコンポーネント(ContainerRelativeShape)に合わせたほうがいいです。

ダークモードに対応をしましょう。

Design great widgets.wwdc20

システムに表示するデータがない場合のためのプレースホルダーを用意する必要もあります。

Design great widgets.wwdc20

アプリのアイコンは置く必要がありません。アプリ名もWidgetコンテンツ内に入れないようにしましょう。
Widgetの下に表示されているアプリ名の重複するからです。

ユーザーに支持をしたり話しかけるようなテキストは避けます。
伝える必要がある場合はグラフィカルな方法を考えましょう。

Design great widgets.wwdc20

時刻を表示する場合は「最終更新」や「最終チェック」などの言葉をいれるもの避けましょう。

Design great widgets.wwdc20

アプリを起動するだけのWidgetを置くのは避けましょう。
Widgetの内容が重要です。

1日に情報が変わるコンテンツを置きましょう。変化がないWidgetをユーザーはHome画面に置きたいとは思わないはずです。

自分のアプリの特性によってWidgetを設定可能にすべきか考えましょう。
状況に合わせて必要な情報を提供できるのがWidgetの強みですが、それが設定が必要かどうかはアプリによります。
天気アプリは場所を変えるためにWidgetを設定可能にするのは理にかなっていますが、Podcastアプリは最近聞いたコンテンツを表示するだけなので、Widgetの設定は必要ないです。

MediumとLargeは複数の場所にタップできるように実装が可能ですが、タップターゲットをたくさん定義しないように気をつけましょう。
ユーザーが混乱してしまいます。

ログインが必要な状況だったらその旨を伝えましょう。

情報を最新に保ちましょう。ユーザーに関連する情報を提供するために重要です。Widgetはリアルタイムに更新されるものではないのですが、適切な頻度で更新されるように実装することが必要です。

Widgetの説明は簡潔にしましょう。
例えば「地図」アプリでは、「ナビゲーション中に方向と乗車時間を提案します」と書かれています。

Meet Widget.wwdc20

参考

宣伝

SwiftUIでアプリを作り方を解説した「1人でアプリを作る人を支えるSwiftUI開発レシピ」がBOOTHで発売中です。
SwiftUIでアプリを作りたい方、ぜひチェックしてください!現状iOS 13向けの内容ですが、今後iOS 14にも対応する予定です。

https://personal-factory.booth.pm/items/1920812



Author image

About 佐藤 剛士

  • Japan Tokyo