[ #WWDC2013 ]iOS 7、フラットデザインというより「奥行き」のデザインである

2013.06.11 11:10
  • このエントリーをはてなブックマークに追加

20130611_ios7f01.jpgのサムネール画像


今日、アップルはジョニー・アイブによって完全にリデザインされたモバイルソフトウェアを発表しました。

数ヶ月間にわたる推測、数週間にわたる噂の末、ついにその答えが明らかに。それは次元と質感のiOSの未来、これを歓迎したいと思います。

新しいiOSのデザインは、1980年代の白黒のOSのスーザン・ケアによるデザインの再誕を彷彿とさせます。この記事では「フラットデザイン」を禁句として書き進めていきますよ。

今日お披露目となったiOS 7は、ジョニー・アイブ曰く「新しいタイプの奥行き表現」。 iOS 7 のネオンカラー・パステルカラーのポップなスキームに、アイコン、アプリ、ホームスクリーンは、レイヤーとディメンショナリティ(次元性)に溢れています。そして全く新しいタイプのアニメーション。例えば新しい天気のアイコンのような、加速度計によって計算された、視差効果(Parallax Effect)を使った奥行き表現もそうです。

ジョニー・アイブは(iOSの初心者ユーザーに分かりやすかっただろう)細部までリッチなデザイン、スキューモーフィック(Skeuomorphic)のデザインを排除し、新しい複雑な方向へ踏み切ったのです。Windows 8みたい...と思っしまった方。ちょっと待って。もっと詳しく見ていきましょう。


20130611_ios7f02.gif


周囲の環境に敏感なユーザーインターフェース


今日の発表の中の大きなポイントは、アプリやアイコンがもの凄くシンプルになったことですね。そしてそのシンプルさの中に、新しいUIは、外部の環境条件に複雑に適応しています。新しいシステムの中で、最も大きく、また最もエレガントな要素はその「感度」です。

例えばiOS 7 は、ジョニー・アイブの言葉の「新しいタイプの奥行き表現」を実現するべく、加速度計を利用してスクリーンに視差効果が用いられています。

またデバイス内蔵の露出計で、新しいアイコンや背景の光量が自動調整されることで、読みやすさが改善されました。元々のiOSの機能として備わっていた、環境条件に合わせて自動で明るさを調整する機能に近いのではないでしょうか。

他にも「感度」について何かありますかって? コントロールパネルの文字と線の色が、自分のホームスクリーンの画像に合わせて変化することもそうですね。


20130611_ios7f03.gif


レイヤーと奥行き


アイコンとアプリのディテールは、極めてシンプルになったと同時に、「視覚生態系」はかなり複雑になりました。

それぞれのアイコンやボタンやバーが、より開放的になりました。

(アイブが好きな)「Helvetica Neue Ultra Light」フォントがスクリーンに直接現れるのですが、シンプルさを象徴するかのような空間に文字が流れるこのインターフェースは、今まで文字がボタンの中に収まっていたデザインに慣れていた従来のiOSユーザーにとっては、非常に大きな視覚的な変化です。

スクリーンそのものは、複数の画像効果が層となっています。軸測投影ビューの中で、爽やかでクリアーな背景は中間レイヤーの基礎として機能しています。エレガントでぼやけたパネルはコントロールセンターの背景として利用されています。若干Googleっぽいところはありますね。


20130611_ios7f04.jpg


タイプフェイス(書体)


「Helvetica Neue Ultra Light」フォントにセイハロー。

「Helvetica Neue」フォントはオリジナルのHelveticaが登場して約30年後にデザインされたもので、ウェイトの階調差異が修整され、混乱がみられた特徴が統一されて、すべてのウェイトと字幅が1つのファミリーとして連係できるようにデザインされました。

1983年、Helveticaのフォントを扱うLinotype社はデジタル時代に適したタイポグラフィ技術を委託されます。幅が標準化され、カーブが再描画され、デジタル表示に合わせて句読点も調整されました。

「Helvetica Neue」の派生型のUltra Lightは、コンピューターの幕開け時代のクラシックタイプフェイスのうちの1つです。iOSのためのタイプフェイス「Helvetica Neue」は、エレガントで整然とした美しさを感じさせます。

しかしながら Ultra Lightフォントの利用によってリスクも生じると思います。分量が増えるとUltra Lightフォントは読みづらくなり、フレームや背景が無ければiOSの文字は、弱すぎて脆い感じになってしまいそうです。

少しぼやけたような背景の上に乗る場合は美しいのでしょうが、ユーザーによって派手で鮮明なタイプの背景を選べば問題になりそうです。


20130611_ios7f05.jpg


アプリアイコン


新しいアイコンは(我々が想像していたとおり)旧アイコンのグラデーションと反射のデザイン要素がほぼ無くなっています。

アイコンのセットが可愛らしく見えるように形状もアップデートされていますね。レインボーのパレットに、ブラックアンドホワイトの背景。ロックスクリーンのぼやけた何層にもなった背景の上にワイヤーフレーム風のアイコンセットがのっています。

アイコンも、今回の新しいタイプフェイスのように、1930年代(その後1970年代)看板やタイポグラフィデザインの黄金時代のものを利用しています。

当時のオットー・ノイラートというオーストリアのデザイナーはアイソタイプと呼ばれるピクトグラムの視覚言語を開発しました。彼の言語は活版印刷のシンボルを使用し、伝統的な言語の壁を超越することが意図されていました。このiOS 7のアイコンでは何が成されているのでしょうか。

オリジナルのiOS アイコンは丸みを帯びたエッジやピクトグラム調のシンプルなアイコン。その過去の産物をリアルな描写と混合させています。シンプル化されたアイコンに現実世界の視覚要素を無くすことによって、アップルはピクトグラムとアイソタイプの原点回帰を図っているのです。

これによって、アイブがアップルのデザイン言語とリッチなピクトグラムデザインの歴史を統合させようとしていることが読み取れます。


20130611_ios7f07.jpg


ティム・クックとジョナサン・アイブは超シンプルでブラックアンドホワイトなiOS 7を発表、これはよりシンプルに物事を伝えるためのものです。

シンプルにするだけではありません。時代遅れな色とディテールを取り去り、新しく複雑なユーザーインターフェースに置き換える大手術をやってのけました。

Androidと似ているビジュアル要素が無いとはいえませんし、Windows Phoneのソリューションに似ている要素が無いとも言えません。しかしティム・クックのプレゼンで引用した顧客忠誠度と利用率によってもたらされたiOSの問題と解決方法はユニークです。システム全体を見直すことより、新しいタイプのビジュアルを取り入れました。

これまでのiOSが45歳の初心者向けに作られたものなら、iOS 7は10代20代向けにデザインされているように見えます。

アイブのイントロダクションの中で、このようなことを言っていました。

「デザインとは、何かが見せるためだけの手段ではありません。それは全て、とても多くの異なるレベルで実際に動くものです。最終的には、もちろん、デザインは私たちの経験を定義づけるものです。深遠で永続的な美しさはシンプルさと明快さと効率性の中にあると思います。そしてそれらは複雑さの中に秩序をもたらします。」

秩序とはいつもシンプルさの中にあるわけではない、複雑な中に存在するのです。

最後に訳者余談として、日本語以外の欧文フォントはどう見えるのか、とても気になりますけどね...。


KELSEY CAMPBELL(原文/mayumine)

↓ ↓ ↓ まとめ記事はこちらから ↓ ↓ ↓
130611_wwdc_banner.jpg
[ #WWDC2013 ]ぜーんぶここでどうぞ! アップルの発表は、ここだけ読めば全部わかるまとめ!

  • このエントリーをはてなブックマークに追加
  • (Simフリー) 海外版 iPhone5 ブラック 64G
  • アップル