PWAの App Icon 作成でデザイナーが知ったこと
今回の記事では PWAの App Icon についてデザインを考える機会があったので、そこでわかったことを書きます。
あくまでデザイナーの視点で知っておくとよさそうなことなので、PWAの設定自体にあたるウェブアプリマニフェストなどの技術についてはあまり立ち入らず、最低限の技術仕様の知っておくべきことや気をつけることのまとめになります。
PWAとは、Progressive Web Appsの略で、ウェブサイトをネイティブアプリのように使えるようにする技術です。PWAを使うと、ウェブサイトをホーム画面に追加したり、オフラインでも動作したり、プッシュ通知を受け取ったりできます。
PWAの App Icon は、PWAをホーム画面に追加したときに表示されるアイコンのことです。
App Icon の設定
App Icon を表示するためには manifect.js で設定します。ここで画像ファイルのパスやサイズなどを指定します。
App Icon のデザインではこれらの基本的な設定とともに purpose が重要です。purpose には下記の3つの定義があります（英訳筆者）。
monochrome塗りつぶされたモノクロ アイコン。アイコン内のアルファデータのみが使用されます。画像の色情報は破棄され、アルファデータのみが使用されます。このアイコンは、ユーザーエージェントによって塗りつぶしのマスクのように使用されることがあります。
maskableこのアイコンの画像は、マスクとセーフゾーンに配慮される前提でデザインします、画像のセーフゾーン以外の部分は、ユーザーエージェントにより除外されたりマスク処理されます。
any（デフォルト）アイコンの表示は、ユーザーエージェント任意のコンテキストに委ねられます。
Web Application Manifest | 2.1 purpose member
ここでわかったのは、purpose のデフォルト値が any であるため、指定しないと、ユーザーエージェント任意の表示になります。
注意しなければならないのは、Android スマートフォンです。purpose: any では画像はアイコン内で縮小されて白背景の中で表示されます。
また monochrome については、Firefox のみのサポートになるとのことなので、この場では選択肢としていません。
Androidのこの仕様を考慮すると、スマートフォンのPWAに対応する場合、アプリケーションのブランドや印象を最大に伝えるには、App Iconを purpose: maskable で設定するべきでしょう。
今回の App Icon はマスカブルアイコンとして、アイコン画像をデザインします。
App Icon の作成
セーフゾーン
マスカブルアイコンのセーフエリアは、ユーザーエージェントに関係なくApp Iconがとして常に表示される範囲です。
セーフエリアは、アイコンの横幅の 40%を半径とする円形です。つまり、アイコンの外周から上下左右 約 10%分離れた円形の範囲までがセーフエリアです。外側の 10% はマスクでトリミングされることを念頭において、アイコン画像を検討するのが良さそうです。
アイコン画像自体の作成サイズについては、使用される最大サイズの 512px で作成しました。
効果的な App Icon 作成の考え方
App Iconは、画面上で限られたサイズで表示されます。
マスクやセーフゾーンを考慮した上で、印象的なものにするには簡潔なデザインにをつくる必要があります。
- シンプルでわかりやすいデザインにする
- アプリのテーマカラーやブランドカラーを使う
- テキストや細かいディテールは避ける
- マスクをアイコン画像では表現しない
完結でわかりやすいアイコンとしては、ブランドカラーとロゴの組み合わせが多くなりそうです。
書き出しについて、
PWAのApp Iconは、複数のサイズのPNG画像を用意する必要があります。
OSやデバイスによって表示されるアイコンのサイズが異なるためです。また、 manifect.js で設定によって必要なサイズも変わります。
そのため、今回は Figma のプラグインを使用しました。
PWA Icon App Exports を使って一括書き出し設定しています。
画像の書き出しを必要なサイズとファイル形式（PNG）とサイズに合わせたファイル名を一気に設定してくれるので大変便利でした。
https://www.figma.com/community/plugin/771341909571444129
アイコン画像の書き出し設定をしたら、あとはエンジニアに、 manifect.js でのアイコンの purpose: maskable 設定を伝えつつ、おまかせしました。
さいごに
以上が、PWA の App Icon についてアイコン作成で学んだことでした。
App Iconは、ネイティブアプリのアイコンともまた違った仕様のようなので、情報の把握には苦労しました。
PWA のApp Icon は、アプリケーションとしてユーザーにアプリの印象や機能を伝える重要な要素です。 App Iconの画像を作る際には、仕様やコツを抑えて、シンプルでわかりやすいデザインにしましょう。
参考
