Appleよりも正確に iOS 7のあるべき姿を描きだした新Evernote

このエントリーは、ひとつ前に書いた私見と妄想溢れる記事”iOS 7でAppleが目指したものはフラットデザインではない。“の続編になっている。
こちらを読む前に是非、前編をご一読頂きたい。
　
　
先の記事で
Appleが目指したのはフラットではなくスペイシャル・デザイン(空間的デザイン)なのではないか？
という仮説を立てた。

そして本家Appleがまだその思想を明確に落とし切れていないと思われる中、これからのiOS 7のデザインの布石となるであろう形を見せてくれたアプリがある。

それがiOS 7向けに刷新された新Evernoteだ。

Evernoteが描いてみせたスペイシャルデザイン

今回のアップデートに合わせて下の動画が公開されている。
この動画とともに手元にあるiPhoneで新しいEvernoteを触りながら読んでみてほしい。

　
動画の0:10辺りで『Appleの目指すデザインにインスピレーションを受け…』と語られていることから想像するに、恐らく彼らはiOS 7に提示された表面的な部分だけではなく『これからAppleが何をしようとしているのか？』を独自に解釈し、それをデザインへと落とし込むことに挑戦したのだろうと思う。

そして、その顕著な例がこのトップ画面に見て取れる。

この画面では、さりげなくも的確にスペイシャル・デザインが表現されている。

まず、一番奥にグリーンの背景があり、ユーザー名と各コンテンツ毎に分けられたレイヤーがその上に浮かぶ。
そして、ユーザーが最短距離でアクセスしたいであろう機能を揃えたカスタムツールバーは、それを促すように最も手前に配置されている。

私がこのデザインを目の当たりにした時、まさに前編で書いたスペイシャル・デザインが、そのとおりに具現化されていると感じた。

繊細な調整とアニメーションによって生み出される空間と一体感

その証拠に、この画面をスクロールしてみると中層にあるコンテンツレイヤー同士のマージンが伸縮する。
それはまさに、それぞれが独立したレイヤーであることを示すかのようだ。

また、標準のツールバーの体裁を捨て、独自のバーを採用したのにも必然性を感じる。画面幅いっぱいに拡がる標準のバーでは、その奥にあるレイヤーとの空間を上手く表現出来ないからだ。

そこで、カスタムツールバーを用い、奥行きを表現するために以下の手法が用いられている。

・バーの背景を明度の高い色にしつつ、背景をうっすらと透けさせる。
・奥にあるコンテンツレイヤーよりもバーの左右のマージン(余白)を小さくする。
・コンテンツレイヤーよりもバーの角丸の半径(R)を大きくする。

これらにより、従来多用されてきたドロップシャドウなどのエフェクトを使わずシンプルに見せつつも、より空間と遠近感を感じさせることを可能にしているのだ。
　
　
ノートブックやタグのレイヤーに関しては、それを選択するとさりげなくシームレスに手前に出てくるようなアニメーションが実行される。

さらに、コンテンツをスクロールしてもバーはカッチリと固定された状態になるのが一般的だが、このデザインでは、コンテンツレイヤーのスクロールにツールバーが引っ張られるようなレスポンスも加えられている。

この表現によって、それぞれが単にレイヤー分けされたバラバラのパーツではなく、すべての要素がZ軸で繋がったひとつの集合体であるかのようにイメージ出来るのだ。

ただ単純に疑似表現的なエフェクトを排して、２次元的なタイポグラフィを並べただけでは伝えられない世界観が確かにそこにある。
　
　
もちろん、このアプリ全体がすべてこのような表現でまとまれている訳ではないが、アプリを使い続けてもらうためにとても重要なトップ画面のデザインにこういった表現を採用したということは、Evernoteはこれからのデザインのあるべき姿を提示していると考えるに足る挑戦ではないだろうか？

iOS 7の登場によって、現状よりもよりユーザビリティにすぐれ、新しい感覚を生み出すためのデザインがこれからはどんどん増えていくだろう。
様々な試行錯誤がなされ、それは時にはユーザーを振り回すかも知れない。

しかし、その先にある未来への期待を抱かずにはいられないのだ。
　
　
また、自分自身もいち作り手として、そこに関わっていけるように邁進したいと思う。