そろそろ Metro Design について考えてみよう

どうやら「Metro UI」が「Modarn UI」に切り替わってきているので、ワタクシとしてははれて Metro Design について再考してみようということで、少し書き下し。

東京メトロ UI | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/2907

なところで書きましたが…って書いてないか。Community Open Day 2012 だったか直前の.NETラボ勉強会でちらっと話しましたが「Metro UI」もとのコンセプトは地下鉄の標識デザインの「Metro」です。なので、Subway UI でもよいし、Tube UI でも良かったのですが、Metro UI ということになった模様です。この Metro UI

2010年10月のブログ｜Japanese Dee//Party and Bullshit// より拝借

や、東京メトロの標識を見ると分かりますが、「単色に白抜き文字」あるいは「単色に黒文字」が普通です。文字に白を使うか黒を使うかは、背景に使われる色の明度により決まるわけです。東京メトロの路線図をみると、表示されている線の色と路線で使われているマークの色が共通になっています。

また、色自体は「白っぽいパステルカラー」ではなく「原色でもなく」、東京メトロの少し明度の高い淡い色を使って統一されています。ニューヨークの地下鉄の場合はビビッドめな色を使っていますが、すくなくとも全体のカラーは統一されているわけです。

さて、当時の Metro UI では盛んに「タイリング」が協調されていましたが（多分、Modarn UI もそうなると思いますが）、元ネタの Metro Design を見るとわかるように、特にタイリングを気にしているわけではありません。いや、格子状の配置を気にしてはいるものの、それはグリッドシステムを使っているデザインパターンがあります。

道路標識をあらためて見ると分かりますが、縦横の補助線を入れると確かにグリッド（格子状）になっています。ただし、デザインの本を読むと分かるのですが、文字によっては横幅を調節しないと、「きちんと格子状に見えない」という調節が必要になります。つまり、単純に格子状に文字を配置したからといって、文字が格子状に見えない。だから、左右の空白を調節して格子状でなくすることによって、格子状に見えるようにする。という矛盾を抱えています。

これを、Microsoft 社が出す、デザインガイドラインに当てはめると「文字や図形のマージンを固定値に取る」ことによって「格子状に配置する」ことを目指していますが、実際作ってみると「格子状には見えない」という現象が発生するのです。そうなると、美しいデザインするためには、あえて「格子状に配置をしない」という工夫が必要なわけです。ジレンマですね（苦笑）。

格子状（グリッド）の問題についてはさておき、おそらく Microsoft 社としては Metro UI の裏の指針を以下のようにすべきだったと思っています。

• 格子状の配置は、解像度やディスプレイサイズが異なる環境において、高速に再配置が可能である。
• Metro UI 風のアイコンやサムネール画像は、高速に描画するために重要である。
• Apple の 3D デザインと、意匠特許の面で将来的に争わずに済む。

の３点です。

■グリッドの配置は、高速に再配置が可能

格子状に画像や文章を配置すると、ブラウザの文章の配置のように再配置が非常に高速にできます。CSS の margin や padding のように外側と内側の空白をあらかじめ準備しておくことによって、位置が変わっても計算が楽です。もちろん、スプライン曲線に文字を沿わせるなどのデザインテクニックもあるのですが、機械的に「綺麗に見えるような配置」をするためには、grid にしてしまう方がコーディングもスピードも楽なのです。

そのあたりのデザインを省力化するためにグリッドの配置は必要、ということですね。これは Mordarn UI にも当てはまることです。ただし、先の「格子状の配置のジレンマ」で示したように、格子状に配置したからといって「美しいデザイン」になるとは限らないので、そのあたり、デザインとしては一歩も二歩もダサいデザインになってしまいます。逆に言えば、他の modarn application と差別化するためには、「格子状に配置しているように見えるけれども、実は格子状ではない」というタイポグラフィのデザインテクニックを使うと良いでしょう。

■アイコンやサムネール画像を単色化する

かつて Aero と言う「半透明な」ウィンドウスタイルを Microsoft 社は「美しい」ものとしていましたが、現在は Mordan UI の単色のアイコンを「美しい」と言っています。「美しい」の定義はさておき、Apple が使う 3D & グラス処理は確かに「美しい」アイコンを作りますし、作業に適したアイコンとなっています。モノクロ時代の Classic Apple も良いのですが、まあ「クリエイティブ」な感じがすることは確かです。

この 3D とグラス処理、角が丸い処理のために Apple の画像処理は非常にコストをかけています。おそらく、計算で行っているのではなくて内部的にいくつかのパターンを持つという荒業をしているような気がしますが、まぁ、高速に動きます。すごいです。実は、スライドや回転については、一見「高速」に動いているように見えますが、実は違います。このあたりは、「高速に見える」ことを重視している Apple らしいです。

さて、Microsoft 社の Windows の場合は、Apple ほど高速には動きません。これは技術力の問題ではなくて、Apple の場合は、iPhone などのハードウェアに特化したコードを書けばよいのですが、Microsoft の場合は、各社の画像ボードの性能に依存するという問題があるためです。このため、非力なボードを使っていたり、グラフィックボードのドライバーがいまいちだったりすると、このグラス処理を高速におこなうことができません。

そこで、ひとつの方法として、アイコンやサムネール画像を「単色」あるいは「減色」してしまうことで低機能なグラフィックボードであっても高速に表示ができます。グラス処理や 3D 動作、角がまるい処理も外してしまえば、どんどん高速になるはずです。また、色を減らせば画像サイズも減るわけですから、インターネット上から直接ダウンロードしたり HDD から読み込んだりするスピードも速くなる（実際は、大量な小さなファイルは遅くなるのですが）可能性があります。画像をメモリ上に置いてもサイズが小さくなりますね。

という訳で、単色パターンにすると Windows のスタートメニューやアプリメニューなどの動作が早くなるハズなのです。が、まぁ、実際は XAML の描画ルーチンが駄目なまま（おそらくGDI+のままかと）なので、全然高速ではありませんがね。

■アイコンの意匠問題を避ける

アイコンの 3D 化はフルカラー表示、グラス表示を続けると、おそらく Apple と Microsoft のアイコンは非常に似通ってしまいます。Android のアイコンを見て分かる通り、極めて iPhone のアイコンに似ています（似せているというもあるけど）。また、Linux の Desktop アプリも Windows アイコンに似てますよね（これも似せているというもあるけど）。

アイコンや画像の意匠に関しては、デザイナの問題もありますが、OS を提供する側としては「Apple のデザインに似る」というのは避けたいところです。Window システム自体が Apple の真似なんだからどうでもよかろう、MS-DOS 自体が Unix の真似なんだから、今更。という感も無くもないのですが、だんだんとパイが固定になっている OS 業界で「意匠」に引っ掛かるのは避けたいところなのです。

となれば、Apple が提唱する 3D & グラス路線、とは真っ向から対立する「単色アイコン & グリッド配置」をキャンペーン化してしまえばよいのです。デザインの路線としては、「Metro Design」があるので、これが「実に読みやすい、コンテンツ主導のデザインである」と宣伝すればよいわけです。まあ、けばけばしい看板よりは、コンテンツが読みやすいでしょうが、

Apple の 3D & グラス路線も別に「コンテンツを侵害している」訳ではないんですけどね。むしろ、Windows XP のおもちゃのようなデザイン/色彩感覚が、創造力をげんなりさせていた訳で、Visual Studio のツールバーのアイコン表示はやっとこさ VS 2008 あたりで完成されたかと思いきや（ぱっとみて、どの機能か分かる位「道具化」している）、VS 2012 になって単色系アイコンになり「道具」を取り去られた感じなんですけどね。Visual Studio のリソースを切り替えるツールでも作りますか（真面目に）。

それはともかく、3D & グラス路線を目指さなくなったので、アイコンデザインとしては Apple と意匠戦争にはならなくなります。また「これが Microsoft 社が提供する次世代のデザインだ」と定義することで、自分がトップに立てる（自分で土俵を作ったからね、当たり前）というおまけもついてきます。一応、Modarn UI の前哨戦としては成功しているみたいですね。Google アナリシスの UI も Modarn UI 風にカラーが変わっていましたから。github は、だいぶ前に追随したし。

そんな訳で、Metro UI についてぼちぼちと裏側を推測してみましたが、じゃあ本来の Metro Desgin の場合はどうなるのか？っていうのは、また後日。