PWAのホーム画面アイコンは何を設定すればいい？name・short_name・iconsの役割

PWAをホーム画面に追加すると、普通のWebページとは少し違った存在になります。

ホーム画面にはアイコンが置かれ、その下には名前が表示されます。

では、その名前やアイコンは何を見て決まっているのでしょうか。

Web App Manifestには name、short_name、icons という設定があります。

どれも基本的な項目ですが、実際にPWAを作り始めると「nameとshort_nameは何が違う？」「iconsは1枚でいい？」「Androidでアイコンが小さく見えるのはなぜ？」といった疑問が出てきます。

今回は、PWAのホーム画面で特に目に見えやすいこの3つの項目を中心に整理します。

まずは最小構成を見てみる

例えば、Web App Manifestを次のように設定したとします。

{
  "name": "OJapp Image Compressor",
  "short_name": "Compressor",
  "start_url": ".",
  "display": "standalone",
  "icons": [
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

この中でホーム画面上の見た目に大きく関係するのが、

• name
• short_name
• icons

です。

start_url や display もPWAの動作には重要ですが、今回は「ホーム画面で何に見えるか」に絞って見ていきます。

nameはPWAの正式な名前

name は、そのWebアプリの名前を指定する項目です。

"name": "OJapp Image Compressor"

アプリ名を表示できる場所では、この値が使われる候補になります。

ここで大事なのは、WebサイトのtitleとPWAのnameは別に設定できるということです。

例えばHTML側が、

<title>画像をWebPに圧縮する無料ツール | OJapp</title>

だったとしても、Manifestでは、

"name": "Image Compressor"

のように、ホーム画面で使うアプリ名として別の名前を持たせられます。

検索結果で分かりやすいページタイトルと、ホーム画面で分かりやすいアプリ名は、必ずしも同じである必要はありません。

OJapp Tips｜合わせて読みたい
PWAのホーム画面起動をアクセス解析する方法｜UTMだけでは分からない再訪を計測 の解説が役に立ちます。

short_nameは短い表示名として使われる

short_name は、その名前の通り短いアプリ名です。

"name": "OJapp Image Compressor",
"short_name": "Compressor"

ホーム画面のように表示スペースが限られている場所では、長い名前をそのまま表示すると途中で切れてしまいます。

そこで短い名前として short_name を用意できます。

例えば、

name: OJapp Image Compression Tool
short_name: Compressor

のようにしておけば、正式な名前を残しながら短い表示にも対応できます。

ただし、OSやブラウザによって実際にどの名前がどこで使われるかは完全に同じではありません。

そのため、short_name は「必ずホーム画面にこの文字列が出る」と考えるより、限られた表示領域のために用意する短い名前と考えるのが分かりやすいです。

iconsはホーム画面で最も目立つ部分

icons ではPWAで使うアイコン画像を指定します。

"icons": [
  {
    "src": "/icon-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  }
]

ホーム画面では文字より先にアイコンが目に入るので、PWAの見た目を考える上ではかなり重要な設定です。

src は画像の場所、sizes は画像サイズ、type は画像形式、purpose はアイコンをどの用途で使うかを示します。

PWAの基本的なManifest項目については、PWAに必要なmanifest.jsonの基本｜iPhoneとAndroidで効く項目を実験ベースで解説でもまとめています。

Androidではmaskableを意識した方がいい

PWA LABでアイコンを何度も試していて、特に面倒だったのがAndroid側のアイコン表示です。

Androidでは端末やランチャーによって、丸や角丸などホーム画面のアイコン形状に合わせて表示されます。

そこで使われるのが maskable です。

{
  "src": "/icon-maskable-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

maskable用の画像は、OS側で切り抜かれることを前提に重要なデザインを安全領域へ収めて作ります。

ここを考えずに普通の正方形画像をそのままmaskableとして扱うと、ロゴが大きく切れたり、逆にアイコンが不自然に小さく見えたりすることがあります。

anyとmaskableは別々に用意する方法が分かりやすい

例えばManifestでは、次のように2種類を登録できます。

"icons": [
  {
    "src": "/icon-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/icon-maskable-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

any は通常のアイコンとして使える画像。

maskable はマスクされる表示を想定した画像。

それぞれの目的に合わせた画像を用意しておけば、1枚の画像に複数の役割を無理に持たせるより調整しやすくなります。

実際、PWA LABではアイコン設定だけで何時間も試すことになりました。

PWAアイコンは any maskable だけでは足りない？AndroidとiPhoneで崩れる理由では、このあたりの実機検証を詳しく書いています。

アイコンはサイト共通でなくてもいい

従来のPWAでは、サイトのロゴをそのままアプリアイコンにする設計がよく使われます。

サイト全体を1つのアプリとして扱うなら、それは自然です。

でもページ単位でホーム画面へ置く場合は話が変わります。

例えば、同じサイトの中に、

• 画像圧縮ツール
• タイマー
• 予約ページ
• 商品ページ

があったとします。

全部が同じサイトロゴだと、ホーム画面を見た時に何を開くアイコンなのか分かりにくくなります。

それなら、

画像圧縮 → 画像のアイコン
タイマー → 時計のアイコン
予約 → カレンダーのアイコン
商品 → 商品画像

のように、ページの意味に合わせてアイコンを変えることもできます。

これは私が1P1A（One Page. One App.）で重視している考え方のひとつです。

nameもページごとに変えると意味が出てくる

アイコンをページごとに変えるなら、名前も同じ考え方ができます。

例えばサイト名が「OJapp」だったとしても、すべてのホーム画面アイコンを「OJapp」にする必要はありません。

画像圧縮
5分タイマー
予約
商品名

のように、ユーザーがホーム画面を見ただけで目的を理解できる名前にできます。

Webサイトではページごとに <title> が違うのが普通です。

同じように、ページ単位でアプリとして扱うなら、Manifestの name や icons もページごとに変えるという発想が自然に出てきます。

アイコンは「飾り」ではなく次回アクセスのUIになる

ホーム画面アイコンを単なるブランド画像として考えると、サイトロゴを置けば終わりです。

でもホーム画面からの再訪を考えると、アイコンの役割は少し変わります。

ユーザーは次に使いたいものを、ホーム画面のアイコンから探します。

つまり、

アイコンを見る
↓
目的を認識する
↓
タップする
↓
目的のページが開く

というUIになります。

前の記事、PWAをホーム画面に追加するメリットは？「再訪」から考える本当の価値でも触れたように、ホーム画面は再訪の入口です。

その入口で最初に見るものがアイコンと名前です。

そう考えると、name、short_name、icons は単なるManifestの設定項目ではなく、再訪のためのUI設計とも言えます。

まずは「見ただけで何を開くか分かる」を目指す

PWAアイコンを作る時、最初から細かいデザインルールを考えすぎる必要はないと思います。

まず確認したいのはシンプルです。

• アイコンを見て何のページか分かるか
• ホーム画面で名前が長すぎないか
• 小さく表示しても重要な部分が見えるか
• Androidで切り抜かれても崩れないか
• 実機のホーム画面で違和感がないか

Manifestを書いただけでは、最終的な見た目までは分かりません。

特にアイコンはOSによる差が出やすいので、最後は実機でホーム画面へ追加して確認するのが確実です。

name・short_name・iconsはホーム画面への入口を作る設定

name はアプリの名前。

short_name は限られた場所で使うための短い名前。

icons はユーザーがホーム画面で最初に認識する画像です。

どれもManifestの基本項目ですが、ホーム画面からの再訪を考えると重要度が変わって見えてきます。

サイト名をそのまま設定するだけでもPWAは作れます。

でも「このアイコンを押したら何が開くのか」まで考えて名前と画像を決めると、ホーム画面はもっと使いやすくなります。

PWAのアイコンは、サイトのロゴを置く場所ではなく、次にそのページへ戻るための入口。

私はそんな感覚で設計するのが分かりやすいと思っています。