Skip to main content

細かすぎて伝わりづらい!
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の違いをデザインすることで、回転ロックという機能アイコンと、ミュージックを起動するという起動アイコンの違いを表しているのではないかと思います。


 5.ホームアイコンの間隔

 iOS 4ではアイコンの間隔が38pxの等間隔だったのに対して、iOS 5では中心だけが40pxと広くなっています。

はて、なぜ真ん中だけ広くなっているのでしょうか…。

バランスをとる為に錯視の調整をしているのか、はたまた真ん中が広い方が人間工学的に操作しやすいのか…。
色々考えながら、両サイドの間隔も測ってみたところ、iOS 4では左34pxの右36pxになっており、画面全体が実は2px左寄りになっていました。

といっても、言葉では伝わりづらいと思いますので、分かりやすいようにより詳細な図にしてみました。

このことから考えてみると、iOS 5ではセンターから2pxアイコンを動かすことで、このズレを調整して全体がより安定して見えるようにしたのではないでしょうか。
これまでは左寄りだったことから、左手操作の人にとってほんのちょっと使いやすかったというわけですが、これからは右手操作の人にも優しいデザインになったということですね。


他にもボタンの位置が微妙に調整されているとことがあったりして、ブラッシュアップの上をいくポリッシュアップでデザインを全体的にピッカピカに磨き上げていますね。
パッと見どころか、拡大してさらに目を凝らさないと分からないぐらいまで微調整されていて、本当に極限まで完成度が高められています。

デザインが非常に優れているといわれ、評価が高いiOSですが、それに満足することなく改善していく、このデザインへのこだわりを感じて、エイブラハム・マズローの以下のような言葉を思い出しました。

何もすることがないという状況はあり得ない。
我々はすでに踏み出しているのだ。
我々には、能力があり、才能があり、
方向が決まっており、使命があり、神からの呼びかけがある。
―エイブラハム・マズロー

決して立ち止まることなく常に最高のものを追い求め、創り出すこと。
そうすることで「納得」を超えた「感動」が生まれる。
ものを創るときの姿勢として、とても大切なことを教えてくれます。


Popular posts from this blog

午前9時41分、Appleが止めた時間の謎。

ついにiPhone 4Sが発表されました。 日本からは2キャリアから出ることになり、乗り換えるのか、そのままなのか、これまで電波の弱さに悩まされてきたユーザーにとっては悩みどころですね。  さて、あまり変わり映えのしないiPhone 4Sですが、よくよく見てみると、ひとつ気になることが…。 スクリーンショットの時間が、なんとも中途半端な9時41分になっています。 キリの良い9:40でもなく、イベントの開始時間である10:00でもなく、なぜこんな中途半端な時間なのでしょうか。 気になったので過去の製品画像をみてみると…。 なんと全てが「9:41 AM」で統一されています。 ここまで中途半端な時間で一貫しているということは何か意味があるのかもしれないですね。 ジョブズもしくはMac誕生の時間なのか、Appleにとって何かしらのメモリアルな時間なのでしょうか? 気になって海外のApple系ブログを色々と探索していたら、 TUAWの記事 に、Secret Labsの開発者ジョン マニングが、アップルストアにいたスコット・フォーストール(Apple上級副社長)に時間の意味を質問したという内容の記事がありました。 それによると、 プレゼンテーションでプロダクトを大きくお披露目する時間を、約40分で発生するようにkeynoteをデザインし、スクリーンに映し出されたときに観客の時計とズレがないようにしていた らしいのですが、ピッタリ予定通りに行かない事を見越して数分追加した時間なのだそうです。 この40分に対し、スコットは 「secret magic time」 と名付けていたそうです。 実際にiPhoneが初めて発表された2007年のMacWorldをみてみたところ、プレゼンが開始されてちょうど40分頃にiPhoneのスクリーンが初めて公開されています。 つまり、時間が統一されている理由は、 iPhoneのスクリーンが世界に向けて初めて公開されると予測した時間で、合理的な理由がありつつも、Appleにとって記念すべき時間でもあるからということ ですね。 さて、無事解決したかと思われますが、ここで新たな疑問がでてきます。 その「secret magic time」はなぜ40分なのかという

作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。

ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄なやりとりが発生してしまっていたことも少なくないと思います。 しかし! このFireworksプラグイン「SPECCTR」さえあれば、そんな面倒臭さや心配ごとのすべてから解放されます。 前置きはこのぐらいにして、実際の使い方をみながらその便利さをご紹介したいと思います。 1.はじめの準備 インストールはかんたん。 SPECCTRのサイト からプラグインをダウンロードしてダブルクリックすると、Adobe Extention Managerが立ち上がって自動的にインストールされます。 2.いざ実践! オブジェクトのプロパティを書き出す プロパティを調べたいオブジェクトを選択してボタンをクリックすると… あら不思議! 自動的にプロパティを調べて自動シェイプとして書き出してくれているではありませんか! 3.サイズを書き出す これもかんたん。調べたいオブジェクトを選択してボタンを押すだけ。 4.スペースの書き出し これまたかんたん。表示したいオブジェクト2つを同時選択してボタンを押すだけ。 正直なところ、これまで紹介した機能はSPECCTRが無くても大きな差は出ないかもしれませんが、 ボタンをポチッと押すだけでレイアウトの間隔を一覧にできようになる、 これこそがSPECCTRを使うべき