悪あがきプログラマー

悪あがきを続けていきたい技術と書評なブログです。トレタでiOSエンジニアやってます。

有名サービスのナビゲーションバーデザインはiOS7でどう変わったか?

企業やサービスにはイメージカラーというものがあります。それはBrand Assets(ブランド資産)で決まっていたりして、なかなか揺るがないものとなっています。

iPhoneアプリでは一番目立つナビゲーションバーにイメージカラーを持ってきているアプリが多く見られます。ただ、新しいiOS7ではフラットっぽいデザインだったり、ナビゲーションバーが半透明になったりしていて今までのデザインのままだと浮いてしまいます。

結局のところApple様に逆らうことは出来ず、どのサービスもナビゲーションバーをiOS7風なナビゲーションバーに変更しています。今回は有名ドコロのサービスでそれぞれどんな風に変わっているのかを見て行きたいと思います。

※ iOS6が動いている端末を持っていないので、iOS6のデザインについてはモバイルWebのデザインで代用しています。記憶ベースですがひと通り見た感じiOS6までのデザインと一致していると思うので問題ないかなと思います。

Twitter

iOS6(Web)

f:id:y_koh:20131130175406p:plain

コメント

グラデーションが無くなり、明るくスッキリした印象に成りました。
半透明ですがほとんどわからないレベルです。

Facebook

iOS6(Web)

f:id:y_koh:20131130182031p:plain

Guideline

Using Facebook Brand Assets
FB_MarketGuide_Light.pdf
PDFの6ページに目次があって40ページにcolorが載っているとのことなんですが、、38ページで終わってます。。

コメント

グラデーションが無くなっています。色味はそこまで変わってないかもしれません。トーンが少し落ち着いたくらいですかね。
半透明になっています。

Foursquare

iOS6(Web)

f:id:y_koh:20131130183403p:plain

コメント

Twitterかと勘違いするほどです。だいぶ明るい印象に成りました。
こちらは半透明ではないですね。

Evernote

iOS6(Web)

f:id:y_koh:20131130184304p:plain

コメント

以前はテクスチャを使ったリッチなデザインだったのですが、テクスチャもグラデーションもなくなっています。
半透明ではないです。

Instagram

iOS6(Web)

f:id:y_koh:20131130184809p:plain

コメント

こちらもグラデーションが無くなりました。色に関しては今回の中では一番濃いですね。
スクロールするとナビゲーションバー自体が消えてしまうので半透明かどうかはわかりませんでした。

Pinterest

iOS6(Web)

f:id:y_koh:20131130185245p:plain

コメント

今回の中ではちょっと違った形になっていて、ナビゲーションバーの色ではなくロゴに企業カラーを用いています。Pinterestは綺麗な写真をコンテンツとしているため、ナビゲーションバー自体を目立たせたくなかったのかもしれません。

ナビゲーションバーは半透明となっています。

ちなみに、じゃあInstagramはどうなるんだ?と思うかもしれませんが、こちらは先ほども書いたようにスクロールすると隠れてしまうのでタイムラインで一番上を見るタイミングでしか出てきません。また、他のタブにおいてナビゲーションバーに色は付いていません。

よって多少濃い色を使っていますが、コンテンツに与える影響はとても小さいものとなっています。逆に言うと、写真メインのコンテンツにおいてナビゲーションバーに目を引く色が付いていると邪魔になってしまうということですね。

まとめ

有名サービスを参考に見てきましたがいかがだったでしょうか。それぞれ色んな工夫が見られて面白いですね。個人的にはPinterestのナビゲーションバーがシンプルでいてデザイン性が感じられるので好きです。

あとInstagramでタイムラインの一番上にしかナビゲーションバーを出さないという工夫も良かったです。これはもしかしたら今開発しているアプリにも活かせるかもしれません。