2014年07月07日19時00分デザイン

新Mac OS﹁Yosemite﹂のアイコンデザインはどのように変わったのか？

2014年6月3日に行われたWWDC14で最新Mac OSとなる﹁OS X Yosemite﹂が発表されました。ヴィジュアルのアップデートが行われたiOS 7に続いて、Yosemiteも曇りガラスっぽい質感のインターフェースや、新しいシステムフォントおよびアイコンなどヴィジュアル面が強化される予定です。そんな改良されたYosemiteのアイコンがどのように変化したのかが検証されています。 Inspecting Yosemite's Icons http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/ Yosemite以前のOS Xのアイコンデザインは、従来のガイドラインとヒューマンインタフェースガイドライン(HIG)の特徴を組み合わせたものでしたが、Yosemiteのシステムでは一貫してHIGに沿ったアイコンデザインに変更されます。Finder・設定アイコンはより美しくなり、SafariアイコンはiOS版よりも改善されたように見える一方で、計算機・Game Center・FaceTimeは一見すると失敗のように見えるとのこと。そんなアイコンの詳細な変更に時間をかけて注目することで、新しいYosemiteのシステムのヴィジュアル言語を理解しようとMartianCraftが試みています。 ◆ドック・アイコン 下の画像は上段にOS X Mavericks・下段にYosemiteの新しいドックアイコンを並べて比較したもの。3Dドックが2Dになり、アイコンは一新したものと微調整が加えられたものがありますが、全て変更されています。

◆アイコンの形とグリッド Beta版で発表されているアイコンの形には﹁丸﹂﹁四角﹂﹁傾いた長方形﹂の3種類のベースがあります。

これらのアイコンベースを1024×1024のサイズで、iOS 7のアイコンで使用されているグリッド(方眼)にかぶせてみるとピタリと一致しました。

アイコンアートを入れてみるとこんな感じで、グリッドのラインが見えるように少し縮小されています。iBooksのアイコンは正確にグリッドに沿って描かれており、システム環境設定の真ん中のギアはほぼほぼ完全に一致していますが、よく見るとグリッドの幅が少し狭いことがわかります。テキストエディットの上に置かれたペンも真ん中の2重の円に沿うように配置されています。

以前までのアイコンは3Dデザインに特化した配置のため、軸を回転して傾けると遠近法によって歪みが生じていましたが、Yosemiteアイコンは3Dデザインの﹁深さ﹂を必要としないため、そのままマイナス9度傾けるだけで完成します。

以下はiOS 7のグリッドフォームをYosemiteのアイコンに適応させたサンプル。

◆アイコンの形の分類体系 ﹁丸﹂はSafari・iBooks・Launchpad ・App Store・Time Machine・Music。

﹁四角﹂はFinder・システム環境設定・アクティビティモニタ・Mission Controlに使われており、画面シェアリングのアイコンはグリッドに沿っているもののマイナス9度傾いています。

﹁傾いた長方形﹂はメモ・テキストエディット・計算機・アドレス帳・辞書など、全てのアイコンの中で最も使われているベース。

◆ライト効果と素材 Yosemiteアイコンはメタルの質感を持つ素材が使われ、グレイ・スケールは取りやめられました。ハリウッド作品では、光が当たる部分は黄色・オレンジのような暖色、影の部分はブルー・鴨の羽色のような寒色のトーンを使うことが多いのですが、Yosemiteはこれに似た効果を使用。

以下はライト効果ありのアイコンと単なるグレイ・スケールのアイコンで比較したもの。Yosemiteのアイコンは上から寒色のライト、下から暖色のライトが当てられています。

Yosemiteアイコンはフラットデザインのアイコンが採用されていますが、どのように光を反射させるのかは以下の2つの球体を見るとよくわかります。左側の白い球体は右の球体のように周囲を反射する素材ではありませんが、それでも周囲の光を受けて影ができており、フラットデザインで実際にどのように影ができるのか、ということに参考にできるとのことです。