いくつかメジャーなアプリや Web ページを眺めて、ホームアイコンについてバリエーションを調査し、 SVG アイコンを習作した。

その1

家を家たらしめているものは屋根とドアである。と思っていたのだが、今回調べた限りだと屋根が壁より横に飛び出している形のものは意外と少数派だった。FontAwesome や Microsoft のデザインシステム Fluent UI のアイコンセットで、この飛び出した屋根が利用されていた。

やや写実的すぎて、スマホで利用するには抽象度が低いと考えられているのかもしれない。写実的というと、煙突をつけるケースもあった。

ハイライトカラーを入れるならやはり屋根かなと思う。

その2

長方形の上に三角形を乗せた形の五角形に、下部にドアの部分をくり抜いた形。今回調べた限りでは最も主流であった。

Material Icons, Instagram, Amazon ショッピングアプリ, Yahoo! JAPAN アプリなどが概ねこの形状のものを利用していた。ただし、後述するような亜種が多い。

ハイライトカラーを入れるところはドア部分しかない。

その3

その2のドアをアーチ状にしたもの。柔らかい雰囲気になるのと、ドアにハイライトを入れた際の可愛さが増す気がする。

その4

その2をシュッとさせたもの。正方形の領域にぴったり五角形を収めようとすると長方形がどうしても横長になってしまい、野暮ったく見える。この例では左右を余らせて長方形部分を正方形に近づけている。

また、線の角を丸めないことでシュッとした感を強くしてみた。個人的には鋭角なアイコンは触ると痛そうなので角は丸まっている方が好み。

その5

これもその2をシュッとさせたもの。ドア部分が線になっているのが面白い。よりミニマムなデザインと言える。LINE がこの形状だったほか、TikTok も同様にドア部分を線として表現していた。

その6

これは変わり種、というか Twitter の模倣。丸は窓なのかもしれないが、Twitter ということを考えるとこれは家でなく鳥小屋なのかもしれない。そう言えばと思って確認してみると、国産ドキュメントサービスの esa もホームアイコンには丸がついていた。やはり鳥小屋なのだろうか。

左右の壁を下に向けて狭めるのは TikTok もやっていて、最近のスマホのように十分な解像度がある場合は斜めの線が汚く見えることもないし、全体に丸っこい印象になるのでポップさが強くなる。

ラップアップ

ホームアイコンと形状が衝突しうるものは上矢印だろうと思われる。つまり、認知のしやすさに重きを置くと屋根よりドアが重要で、シンプルな形状にするならドアを強調することが重要であると言えそうだ。

屋根の角度、壁の角度、ドアの形状や角の丸さで全体の印象を変えることができるので、ブランドイメージにあったアイコンに調整したり、遊び心を入れる余地が大いにあるタイプのアイコンだと感じた。