僕のタブバーコレクション

いろんなiOSアプリのタブバーのみを集めてみました！
いくつかパターンがあって面白い。デザインで個性が出ていて面白い。

パターン１：ソリッドアイコンとアウトラインアイコンが切り替わる

Twitter
ホームのアイコンが鳥の巣箱みたいで可愛い。プロフィールに飛ぶアイコン戻ってきて欲しい…

Facebook
ベルのアイコンが動くのめっちゃ可愛い（タブバーのアイコンで動くのあまり見たことないかも..?）

Instagram
自分のアイコン画像がそのままアイコンになってて良い感じ

LINE
バッジの色が２種類あるな〜。一番右はお財布アイコンなのかな?

WIX
social postがロケットなの面白い🚀

Starbucks
全部可愛い！！ソリッドになると少しデザインが変わるところも手が込んでいる！

Uber Eats
右から２番目ラベルがないと何かわからなそう

パターン２：ソリッドアイコンの色が切り替わる

Youtube
日本語ラベルがキツキツ。色が濃いい🔥。

note
わかりやすいアイコンたち。色かわいい。

ヘルスケア
ラベルありきな感じ?メディカルのアイコンが海外っぽい

クックパッド
タイムラインのアイコンが特徴的。右のMYキッチンと少し被りそうな気もする。

minne
スッキリしていて良い。カートのアイコンかわいい。

App Store
透けている。ゲームのくくりがタブバーにあるのすごい〜🚀

Tumblr
真ん中だけアクティブとは別に色がつけられてる。メインの機能だからかなあ。にっこり吹き出しかわいい。

Wordpress
wpのロゴがアイコンになってる。これもメイン機能は差別化されている。通知が一番右も珍しいかも?

パターン３：アウトラインアイコンの色が切り替わる

TimeTree
色だけでなくアンダーラインもアクティブだとつく。見た目で変わるから切り替わりがわかりやすいかも。

Airbnb
旅行がairbnbのロゴになってる。これもメインの機能に対する一種の差別化？

Netflix
ホームの形がちょっと独特。暗め。

CASH
一番右は「その他」とかじゃなくて「設定」なんですね〜。アイコンに個性ありつつ統一感あって良い。

Medium
ぷっくらしてる感じがかわいい。

以上タブバーコレクションでした！
このパターンのくくり方の他にも、

• ラベルがあるかないか
• メインの機能を他のアイコンと差別化しているか
• サービスのロゴをアイコンとして使用しているか

とかで色々カテゴライズできそう！

iOSのHuman Interface Guidelines によると

In general, solid icons tend to be clearer than outlined icons.
基本的にはアウトラインアイコンよりもソリッドアイコンの方が見やすい傾向にある。

Avoid toggling between two different icon designs, like a solid version and an outlined version.
アウトラインアイコンからソッリドアイコンへの切り替えのように異なるアイコンを使うのは避けましょう。

とあるので、パターン２の「ソリッドアイコンの色が切り替わる」をappleは推しているようですね〜。

アクセシビリティ的には、アウトラインアイコンからソッリドアイコンに切り替わる方が見た目的に変化がわかりやすいので良さそうですが、そもそもタブは画面の切り替えに使うので、アイコン自体で変化を目立たせる必要はそこまでない。なのでパターン2を推しているんですかね🤔

以上、僕のタブバーコレクションでした！