Skip to main content

細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。

iPhone5やiOS 6のリリースなど、アップルユーザーにとって目が離せない日が続いていますね。
iOS 6に関しては地図アプリが散々なもので正直ガッカリですが、UIは全体的に使いやすくなって、じっくり観察してみると細かすぎる変更点も健在でした。
大きな変更点に隠れた細かすぎる変更点たち、その涙ぐましささえ感じる進化をどうぞ!

■設定アイコン
iOS 5では歯車の形が尖っていましたが、iOS 6では角が丸くなってソフトなイメージになっています。
OSXの設定アイコンと同じになったのでBack to the macの方針がアイコンでも徹底されているようですね。

■時計アイコン
設定アイコンと同じ様に、iOS 5では時計針のシャープな印象でしたが、6では太さが一定になり、角張った印象になっています。
Apple製品がブラウン製品とよく似ているという事から考えると、ブラウン社のアラームクロックに、よりデザインが似てきていますね。

■ヘッダー
iOS 5では光沢感のある質感になっていましたが、iOS 6ではそれがなくなってマットな質感になり、さらにシャドウが追加されています。
iPhone 5の背面もマット加工がされていることから、ハードとソフト両方の質感を統一してきているということが分かります。

■アクションシートのボタン
ヘッダーと同じ様に、光沢のあったものが、iOS6では光沢感がなくなりマットな質感になっています。
個人的には光沢のある感じも好きでしたが、新しいボタンもグラデーションの感じが綺麗で良い感じですね。

■カメラアイコン
やや角張った印象のアイコンでしたが、iOS 6 ではより丸っこくなってかわいらしい感じのアイコンになっいます。より親しみやすさを重視して来ているということでしょうか。

■キーボードの角
iOS 5ではキーボード下部に角丸の処理が加えられていましたが、iOS6ではそれが無くなって直角になっています。
ジョブズ氏の伝記で、アップル製品で角丸が多いのはジョブズ氏が角丸にこだわっていたから、というエピソードがありましたが、もうその必要性が無くなった、ということでしょうか。

■メッセージアプリ
iOS 4からiOS 5に変わった際に追加されたハイライトの幅が2pxだったのに対し、iOS 6ではそれが1pxになって立体感が弱められています。
吹き出しの質感を維持しつつもより可読性が高くなるように改善されていますね。

■回転ロックアイコン
これも光沢の質感だったものに対し、非光沢のものになり、中のアイコン自体も少し大きくなっています。
設定アイコンと同じ背景を使用している事から、「設定」を意味するものであるという事が一貫して分かりやすくなっています。

■Spotligh検索の幅
iOS 5ではSpotligh検索バーの高さが58pxだったのに対し、iOS 6では56pxと幅がせまくなっています。
なるほど、iPhone 5がより薄くなったのに合わせて検索バーの幅もより薄くなったというわけですね。

■数字記号キーボードの幅
iOS 5ではハイライトの幅が2pxでフラットな形のデザインでしたが、iOS 6ではハイライトの幅が1pxと弱くなり、変わりにグラデーションの色味が強くなってすこし立体的に見える様になっています。

さらに、よくよく見てみると下記の図のように、キーボードのピッチや間隔も変更がされています。
それぞれの幅を広げて間隔を縮める事で、記号キーとしての一体感をだしてバランスがとれるように変更された、もしくは利用頻度の高いキーを単純に大きくして押しやすくした、ということでしょうか。

あまりにも細かすぎる変更点、いやはや、相変わらずのクオリティですね。

今回の変更をみると、Web2.0時代から続いて来た光沢感のあるデザインに対するカウンターの流れが大きくなりつつあるように思います。
実際にdribbbleでも常にトップ入りしているものは、クリーンで明るめのデザインが多いことから、光沢感のあるものは少し古くさく見えてしまう時がくるかもしれないですね。

多くの人に親しまれ、完成度の高いOSと言われていても、常に改良し続けていく。
インダストリアルデザインの研究で有名なヘンリー・ペトロスキーの言葉に通じるものを感じます。

「どんなものにも少しは改良の余地がある。だが世に完璧なものが存在しないのなら、完璧なデザイン変更だってありえないわけだ。この現実を知っていながら、私たちはなおも試みる」
–ヘンリー・ペトロスキー『使い勝手のデザイン学』


完成されていても、完璧ではない。
より美しく、より使いやすくなるように、
どんなに小さなことであろうとも積み重ねていくこと。
その大切さを改めて教えてくれます。


Popular posts from this blog

細かすぎて伝わりづらい!
iOS 5のデザイン変更点まとめ。

iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。 3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。 2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。 さて本題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので 前回のLion と同じようにまとめてみました。  細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。  1.アイコンバッジ  iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。 全体的に比較してみると、iOS 4のシャドウは浮いている感じがするので、明るくなったことで画面全体のトーンにまとまりが出たように感じます。 2.ボックスデザイン 設定画面などのボックスデザインが、iOS 4ではフラットなラインに対して、iOS 5ではシャドウとハイライトが追加されて立体的なデザインになっています。  iOS全体で同様の立体的なデザインが適用されているので、デザインの一貫性がより高まった感じがしますね。  3.メッセージのハイライト これは賛否両論ありそうですが、iOS 4ではメッセージの文字がプレーンなテキストだったのに対して、iOS 5ではハイライトが追加されてこれまた立体的なデザインになっています。 他にも吹き出しの背景色やシャドウが明るくなったことで、背景と文字のコントラストが高くなり、個人的には文字の可読性が高まって良くなったと思います。  5.回転ロックボタンの厚み iOS 4では回転ロックボタンのシャドウ距離が3pxだったのに対して、iOS 5ではシャドウ距離が4pxとなって、より立体的に見えるようになっています。 反対にミュージックアイコンのシャドウ距離は3pxで変わらずのままですので、1pxの違いをデザインすることで、回転ロックという 機能アイコン と、ミュージックを起動するという 起動アイコン の違いを表しているのではないかと

AvenirとFuturaに込められた、共通する1つの想い。『30 Essential Typefaces for a Lifetime』

30 Essential Typefaces for a Lifetimeが届きました。 渋谷のLIBROで見て欲しいなと思い、何となくamazonで調べてみたら海外の書店だと新品で半額以下だったので、書店にいながらもamazonで注文してしまいました。 アメリカからの発送でよほど過酷な旅をしてきたのか、新品にもかかわらずカバーがくたくたで、労をねぎらってあげたいぐらい疲れた本でした。まあ、半額以下だったのでよしとします。 本の内容は、世界中で多く使用されている主要な欧文書体の制作背景・主な用途・作品事例が様々なデザイナーのインタビューとともに掲載されています。 Avenir,DIN,Frutiger,Sabon,Times New Romanなどについてまとめられていて、様々な定番書体の背景を理解するのにとても参考になります。 和書だと欧文書体に関する本が限られてくるので、英語を身につけて洋書で知識を広げる事の大切さを痛感します。 この本で面白かった部分は小林章氏のAvenirついての話です。 ・「Avenir」は「Futura」より良いデザインを目指した書体(Futuraとはラテン語で「未来」の意味) ・Avenirはフランス語で「未来」を意味する AvenirはFuturaを出発点とし、共に未来を意味する書体でありながら、より良い未来への想いが込められた書体だということです。 書体の名前の由来を知る事で、また違った視点で関わり合う事が出来る。 知れば知るほど面白い世界ですね。

Appleのフォント「Myriad Pro」と「Myriad Pro Web」から読み取るWeb用フォントの秘密。

先日AdobeのCS5をインストールしたら、Macに始めから入っているフォントの「Myriad Pro」の他に「Myriad Pro Web」がインストールされていて「Web? 何か違うの?」と気になりだしたら止まらなかったので調べてみました。 Appleのコーポレートフォントである「Myriad」を解剖していくことでデザインの美しさの秘密に迫ると同時に、Webの冠をつけたフォントはどの様に改良されているのかに迫ってみたいと思います。 まず、始めに「Myriad」とはどんな書体なのでしょうか。Wikipediaで調べてみると… ミリアド (Myriad) は、サンセリフの欧文書体で、いくつかあるフルティガー体 (Frutiger) 模倣フォントの一つである。アップルやアドビシステムズがコーポレートフォントに採用している Apple、Adobeと、世界のITを牽引する企業が採用しているという事から、先進的なイメージを与えてくれるフォントだということが分かります。 では「Myriad」と「Myriad Web」は、具体的にどこが違うのか、はじめにアウトラインにしたものを重ねてみました。 可読性を高めるために、カウンターを広げたためか、全体的に横長になっている印象を受けます。 その中でも、特に違いが見られたのが大文字の「N」です。 左の「Myriad」のNは直線的に構成されているのに対して、右の「Myriad Web」は中心部が少し膨張気味になっています。 では、どのくらい違うのか、試しに直線を入れて見ると…。 こうして比較してみると、右の「Myriad Web」の方は斜線部に肉付けがされてることが分かります。 何故でしょうか、その理由に迫るために、スクリーン上で実際に多く表示されるであろうサイズへと徐々に縮小してみたいと思います。 視力検査ではありませんよー。 相対的に見てみると、左の「Myriad」は、だんだんと小さくなるにつれて中心部が少し頼りなさそうな感じになり、1番上のものと比較してみると違った印象が感じられます。 反面、右の「Myriad Web」の方は中心部に肉付けしているために、安定した感じがしますが、大きくなるに従って肉付けしている部分に違和感が感じられます。 あちらを立てればこちらが立