Skip to main content

細かすぎて伝わりづらい!Mountain LionのUI変更点まとめ。

Mountain Lionが発売されて約1週間。iCloudとの統合も強化されてさらに使いやすくなった感じですね。
個人的にはリマインダーが追加されたおかげでTodo管理が一元化できそうなところが嬉しいです。

さて、UIの大きな変更点としては、通知センターが追加されて、Lion発表時にあったiOSの機能をMacに還元する「Back to the Mac」のコンセプトが着実に進んでいる印象ですね。
今回もよくよく目を凝らしてみると細かい部分でも変更点がありました。
華々しい新機能に隠れた細かな変更点たちをどうぞご覧あれ。

■Finderのフッター
Lionの時点でFinderのツールバー部分にノイズのテクスチャが追加されていましたが、フッターの部分には追加されておらず、今回の変更でFinderのフレーム全体にノイズのテクスチャが追加されています。
この変更でFinderのデザインにより統一感が出た感じになりましたね。


■環境設定のディスプレイアイコン
Lionではグレーのフレームでしたが、Mountain Lionでは現行ディスプレイのデザインに合わせてブラックのフレームになっています。なるほど、あたらしいOSには新しいディスプレイを買って揃えなさい、というわけですね。


■ターミナルアイコン
Lionではノイズのアルミの質感に近いようなデザインでしたが、Mountain Lionではノイズが無くなってフレームの形もよりシャープな印象になっています。
あまりに微妙すぎるので、これはもうデザイナーのそのときの「気分」でしか説明できないような気もしますね。

■Keynoteアイコン
Moutain Lionの発表と同時にiLifeやiWorkのアプリケーションもアップデートされましたが、その中でkeynoteアイコンの四半期表示も「Q4 2009」から「Q4 2012」に変更になっています。
文書の行数も違う事から、テキストも変更されているようですが、残念ながらこれ以上拡大できないので読む事ができないので謎なままです。

■Dockの角度
Dockのデザインが変更になったことは多くの方がお気づきになったかと思います。さらに2つをよく見比べてみるとそれに合わせてゴミ箱アイコン、スタックフォルダーの角度も変わっていることが分かります。
この変更の理由についてはOS X Human Interface Guidelinesに記されている下記の図がとても参考になります。
Using Perspective and Texture to Reflect Reality
Dockの角度にあわせてアイコンの角度も変えることによって、現実における見え方を反映したデザインを忠実におこない、より自然で直感的に分かりやすいデザインになっているというわけですね。

今回はUIのエレメントでは目立った変更点はありませんでしたが、keynoteアイコンのように見えない部分までこだわる遊び心を感じさせるところはさすがのApple。
拡大して見ないと分からないレベルの変更点を見ると、ジョブズ氏亡き今もまだ完璧にこだわる理念は息づいているようですね。

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分なのかという

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

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」の方は中心部に肉付けしているために、安定した感じがしますが、大きくなるに従って肉付けしている部分に違和感が感じられます。 あちらを立てればこちらが立