members

members

アプリのウィジェットデザインを考えてみた<前編>

Tweet

アプリのウィジェットデザインを考えてみた

 

皆さん、ウィジェットというものをご存知でしょうか?

ウィジェットとは、スマートフォンで表示設定をすると
アプリを起動しなくても、情報の一部を確認したり操作したりすることができる
とても便利な機能です。

すべてのアプリで実装されているわけではありませんが、
うまく使えば利用頻度の高い情報に簡単にアクセスできるようになります。

私はAndroidユーザーで、メモやカレンダーアプリのウィジェットを普段からよく利用しています。
でも、いざ制作する目線から改めてウィジェットをみると
iOSとAndroidでの違いや、システム上考慮するべきポイントの発見がありました。
今回はその4つのポイントを、以下の項目で前編/後編に分けてご紹介したいと思います。

< 目次 >
アプリのウィジェットデザインを考えてみた< 前編 >
1、iOSとAndroidでの違い
2、カラーとダークモード対応
3、前編のまとめ

< 関連記事 >
アプリのウィジェットデザインを考えてみた< 後編 >(近日公開予定)
– 4、フォントサイズとアクセシビリティ
– 5、表示領域のサイズ
– 6、後編のまとめ

 

1、iOSとAndroidでの違い

まず、同じ「ウィジェット」でも
iOSとAndroidでは表示場所や操作が大きく異なります。

iOS

iOSでのウィジェットは、ホームやロック画面をスワイプすると現れる
< 今日の表示 >画面に表示されます。
アプリごとの情報が、1カラムの縦積みに並んでいて、
ユーザーは画面下部の編集ボタンから
どのアプリのウィジェットを表示するか選んで
追加/削除が可能です。

iOSでは定められた枠と体裁の中に情報が入るようになっています。

chapter01_iOS

Android OS

一方、Androidでのウィジェットは、アプリアイコンのように
ホーム画面の好きな場所に配置できます。

ホーム画面の長押しでアクセスできるウィジェット一覧や
アプリを長押しして表示される設定項目から
ウィジェットを追加することができます。
(※デバイスやバージョンによって異なる場合があります)

さらにアプリ側でウィジェットのサイズ展開をしていれば、
ユーザーが自分にあった情報量・サイズを選択して配置することができます。

iOSと比べるとかなり自由度の高い使い方が想定されます。

chapter01_Android

この仕様の違いを見ても、iOSとAndroidで制約や自由度に差があることがわかります。

 

これはウィジェットに限らずですが
デザインを検討する対象の仕様をしっかり理解すると、出来ることと出来ないことや
特に検討するべきポイントが見えてきます。 
事前に仕様をよく調べ、理解してデザインを検討することの重要さを改めて実感しました。

この項のポイントをまとめると以下のようになります。

< ポイント >

iOS:
固定の画面に表示される。
一律の枠と体裁の中に情報が入る。

Andorid:
ホーム画面の任意の場所に配置される。
情報量やサイズを選択して配置が可能で、自由度が高い。

 

2、カラーとダークモード対応

ウィジェットで使う色は、アプリの世界観に合わせて独自にカラー指定をすることもできますが、
iOS・Android共にダークモード(ダークテーマ)が導入されているため
外観モードを切り替えた場合の検討が必要です。

iOS

iOSでは、ダークモードに対応したカラーセットが提供されていて、
そのシステムカラーでは一つの色指定に対して
ライトモードの時とダークモードの時、両方の色が定義されていました。

chapter02_iOScolor

これらを活用することで、外観モードを切り替えた場合にも可視性が損なわれない、
ユーザーの設定に柔軟に適応するカラー定義をすることができそうです。

また、iOSではダークモードの他に色の指定で気をつける点として
ウィジェットの背景仕様があります。

iOSのウィジェットの背景は半透過でぼかしが入っており
ウィジェットのさらに背景にあるホーム画像の色の影響を受けます。
そのためウィジェットで表示するテキストやグラフの色は、
ホーム画像の色によって可視性が損なわれないか確認しながら検討する必要があります。

chapter02_iOScolor2

Android OS

Androidでは、色指定として
単一の箇所に適用する”スタイル”と、アプリやアクティビティ全体に適用する”テーマ”があります。

スタイルは一つの外観を指定するもので、カラーの属性も指定できます。

それに対してテーマは、スタイルの一種ですが
Primary(主要なカラー)、Secondary(2次カラー)、Background(背景)など
役割ごとに色を定義していて、該当するスタイル属性全体に適用されます。
アプリではそれぞれの色の値を、アプリのカラーに合わせて
デフォルトからカスタマイズすることができます。

通常時のテーマと合わせてダークテーマのカラーセットを定義しておくことで
外観モードの切り替えに対応できます。

chapter02_Androidcolor

 

< ポイント >

iOS:
ライトモード/ダークモードの両方を定義したカラーセットが公式に提供されている。
背景に透過とぼかしが入るため、ホーム画像の色の影響を考慮してカラーを指定する必要がある。

Andorid:
アプリやアクティビティ全体に適用する”テーマ”の指定がある。
通常時と合わせてダークテーマのカラーセットを定義しておくと外観モードの切り替えに対応できる。

 

3、前編のまとめ

前編では、ウィジェットのiOSとAndroidの仕様の違いとそれに伴う検討箇所、
またカラー指定の際の注意したい点のお話をご紹介しました。

ここまでのポイントを簡単にまとめます。

< iOSとAndroidでの違い >

iOS:
固定の画面にウィジェットが表示されます。
一律の枠と体裁の中に情報をデザインします。

Andorid:
ホーム画面の任意の場所にウィジェットが配置されます。
自由度が高い使われ方をする想定で、サポートする情報やサイズ展開を含めて考えましょう。

< カラーとダークモード対応 >

iOS:
公式に提供されているダークモード対応のカラーセットを活用しましょう。
背景に透過とぼかしが入るため、ホーム画像の色の影響に注意。

Andorid:
通常時のテーマと合わせてダークテーマのカラーセットを定義しておきましょう。

アプリやウィジェットを作る・運用する時の考えや視点のひとつとして、お役に立てばと思います。

 

ちなみに、一項目でiOSとAndroidの違いをご紹介しましたが
iOSもこの秋登場するiOS 14では
Android同様ウィジェットをホーム画面に配置・表示サイズの選択が可能になると発表がありました。
二つの「ウィジェット」は、今後はより近い仕様のものになっていくようです。

後編ではフォントサイズとアクセシビリティ、表示領域のサイズについて見ていきましょう。

よろしければ是非、続いて後編もご覧ください。

 

< 関連記事 >
アプリのウィジェットデザインを考えてみた< 後編 >(近日公開予定)
– 4、フォントサイズとアクセシビリティ
– 5、表示領域のサイズ
– 6、まとめ

 


コラム執筆

鴫原里衣

2016年入社
第1ビジネスユニットアカウントサービス第13ユニット所属
デザイナー、日々勉強中!

カテゴリ: UI/UX
2020年09月11日