有名サービスのナビゲーションバーデザインはiOS7でどう変わったか?
企業やサービスにはイメージカラーというものがあります。それはBrand Assets(ブランド資産)で決まっていたりして、なかなか揺るがないものとなっています。
iPhoneアプリでは一番目立つナビゲーションバーにイメージカラーを持ってきているアプリが多く見られます。ただ、新しいiOS7ではフラットっぽいデザインだったり、ナビゲーションバーが半透明になったりしていて今までのデザインのままだと浮いてしまいます。
結局のところApple様に逆らうことは出来ず、どのサービスもナビゲーションバーをiOS7風なナビゲーションバーに変更しています。今回は有名ドコロのサービスでそれぞれどんな風に変わっているのかを見て行きたいと思います。
※ iOS6が動いている端末を持っていないので、iOS6のデザインについてはモバイルWebのデザインで代用しています。記憶ベースですがひと通り見た感じiOS6までのデザインと一致していると思うので問題ないかなと思います。
iOS6(Web)
Guideline
Using Facebook Brand Assets
FB_MarketGuide_Light.pdf
PDFの6ページに目次があって40ページにcolorが載っているとのことなんですが、、38ページで終わってます。。
コメント
グラデーションが無くなっています。色味はそこまで変わってないかもしれません。トーンが少し落ち着いたくらいですかね。
半透明になっています。
iOS6(Web)
コメント
こちらもグラデーションが無くなりました。色に関しては今回の中では一番濃いですね。
スクロールするとナビゲーションバー自体が消えてしまうので半透明かどうかはわかりませんでした。
iOS6(Web)
コメント
今回の中ではちょっと違った形になっていて、ナビゲーションバーの色ではなくロゴに企業カラーを用いています。Pinterestは綺麗な写真をコンテンツとしているため、ナビゲーションバー自体を目立たせたくなかったのかもしれません。
ナビゲーションバーは半透明となっています。
ちなみに、じゃあInstagramはどうなるんだ?と思うかもしれませんが、こちらは先ほども書いたようにスクロールすると隠れてしまうのでタイムラインで一番上を見るタイミングでしか出てきません。また、他のタブにおいてナビゲーションバーに色は付いていません。
よって多少濃い色を使っていますが、コンテンツに与える影響はとても小さいものとなっています。逆に言うと、写真メインのコンテンツにおいてナビゲーションバーに目を引く色が付いていると邪魔になってしまうということですね。
まとめ
有名サービスを参考に見てきましたがいかがだったでしょうか。それぞれ色んな工夫が見られて面白いですね。個人的にはPinterestのナビゲーションバーがシンプルでいてデザイン性が感じられるので好きです。
あとInstagramでタイムラインの一番上にしかナビゲーションバーを出さないという工夫も良かったです。これはもしかしたら今開発しているアプリにも活かせるかもしれません。