8つのアプリを題材にタブUIクイズと分析を軽くやってみた
どうも
@aymkbyshiです。
いきなりなのですが、TabUI(Bottom Navigation)に文字がないアプリに絞ってクイズを出してみたいと思います。
このただのアプリの下の部分ですが、本当に多種多様で、
①何個アイコンを置くのか
②文字はつけるのか、その文字は日本語？英語？
③同じ意味でもどのアイコンを置くのか
などUIデザイナーの判断で色々と変わってくるものです。
今回は文字がない&4.5個並びのアプリを8個出題、紹介します。
それぞれのタブバーがどのアプリなのかをクイズとして出したいと思いました。色でわかっちゃうので全部モノクロにした上で画像を貼りますね。
①
②
③
④
⑤
⑥
⑦
⑧
いつも使っているアプリも気にして見ていないともしかすると分からないかもしれません。
どうでしょう。
早速、解答にいきましょう。
【解答】
①Instagram
言わずと知れたInstagramです。
左から
ホーム、検索、投稿、通知、マイページ
通知のアイコンがハートなのがなかなかだと思います。極めてシンプルかつ分かりやすく最適なタブかと
左から
ホーム、友達リクエスト、マイページ、通知、その他
これは友達リクエストのアイコンが特徴的で分かった方も多い気がしまする。
Instagramでは一番右に置かれていたマイページがセンターに置かれているのは色々と考えることがありますね。
おそらくこれを見てくださっている方はTwitter経由の方が多いはずです。
左から
ホーム、検索、通知、メッセージ
Instagramではホームタブでの右上のボタンからメッセージに飛ぶのに対して、タブとしてアイコンを配置しているのが特徴ですかね。
通知はベルアイコンでFacebookと同じですね。
以上3つがジャイアントSNSでした。
ここからは少しマイナーなアプリも入ってくるかもです。
④Anyca
DeNAが運営する、カーシェアリングアプリAnyca
個人的にはこのサービスの誕生秘話が好きなのですが、今回はUIの記事なので置いておきます。
左から
検索、お気に入り、予定一覧、メッセージ、その他
予定一覧がセンターに来ていること、メッセージが吹き出しアイコンになっていること、その他が…なこと。特徴的ではありますが、そこまで大きな意味はないような気がします。それよりも一番左に検索アイコンが来ているのでAnycaはとにかく検索ベースであってほしいという運営側の想いがみられるなぁと思いました。
⑤CARTUNE
こちら、先日メルカリの子会社となったマイケルが運営する車×コミュニティアプリ、CARTUNEです。
左から
ホーム、検索、投稿、通知、マイページ（アプリ内ではマイガレージ）
こちらのアプリ、面白いのが並びがInstagramと完全に一致しているというところです。
違いは①通知アイコンがベルorハート②投稿の+を円が囲っているかor notですね。
参考にして作られたのかなぁという印象は受けました。
⑥Behance
こちら、分かった方はデザインに精通している方でしょう！
クリエイター向けSNS、Behanceです。
これも左から
ホーム、検索、投稿、通知&メッセージ、マイページ
と言うのであればInstagram型を採用しています。
個人的に感じるのはちょっと検索アイコンの丸が小さいかなぁってところですかね。
そうそう、なぜInstagram型と申し上げたかと言いますと、画面上に
こんなのがあるんですよね。これはもうストーリーズではないか！と思った次第です。
こちらはブックマークアプリのPocketです。
左から
マイリスト、発見、アクティビティ、マイページ
マイリストはホームアイコンの左横にあるのはアーカイブ、お気に入り、ハイライト、私と共有済み、というのに移動できるよ！ってことを示してくれています。こう見ると他のアプリとは少し違うところがありますね。
⑧アル
最後に持ってきましたのは、最近けんすうさんがリリースしました漫画情報サービス、アルです。
マンガ好きには最高なアプリらしく、人気がありそうです。
左から
ホーム、履歴、検索、通知、設定
すごいシンプルでまとまっている印象を受けました。
【まとめ】
独断と偏見でアプリを8つ選んでクイズにしましたが、共通しているのは
①ホームは一番左
②検索は虫めがねアイコン（他あるのか？）
③マイページは一番右（Facebookは特殊?）
の3点ですね。
一方で個人的に気になるのは、通知アイコンがほとんどがベルアイコンだったのに対して、Instagramだけハートだったことです。これに関しては非常に気になるので、意見があれば聞かせてくれると嬉しいです！
以上、UIタブクイズでした。
この記事が気に入ったらサポートをしてみませんか？