フェンリル

Developer's Blog

Windows 8 の Metro UI のデザインや特長について書いてみる

こんにちは!デザイン担当の福島です。

相変わらず、Windows 8 のことについて調べるのが楽しい最近です。
前回は Metro UI の画面パターンや素材など調べたことを書いてみましたが、今回は実際に触ってみたり Metro デザインについてガイドラインを読んだり、コンセプトについて学んだりしておもしろい!と思った UI やデザインについて、いくつか書いてみたいと思います。

Authentically Digital “真にデジタル”

Metro デザインの楽しいところというのは、やっぱりあのグラデーション等を排除したパネルを用いたデザインです。 アップルの iPhone などを筆頭とした美しいグラフィカルなデザインとは対極なシンプルで案内板や標識のような Metro のデザイン。世界観の違いについては以下の中村勇吾さんのつぶやきがおもしろいです。

要するに、スクリーンを「プロダクトの延長の実平面」と捉えるか、「仮想的な空間を覗く窓」と捉えるかの違いで、どちらもそれぞれに、気持ち良い面、気持ち悪い面をもっている。
中村勇吾さんの「アップルのデザインに対する違和感」 – Togetter

Windows 8 の Metro デザインはまさに “「仮想的な空間を覗く窓」” 以前紹介した記事に書いていた通り「Authentically Digital “真にデジタル” な世界」ということでしょうか。

じゃあ、実際に真にデジタルってどういうことかというと本家の Metro スタイルの設計原則によると、

デジタル メディアの利点を最大限に活用します。物理的な境界を取り除いて、現実の世界より効率的で容易なエクスペリエンスを実現します。”真のデジタル化” とは、アプリが画面上のピクセルに過ぎないという事実を踏まえた上で、現実世界の限界を超えた色と画像を使ったデザインを作成することです。

つまりは、真にデジタルの世界では現実にあるような本を真似たりボタンらしく作るのは NG ということですね。 なかなか Apple や Android の逆を行っていて面白いです。

余計なものは見せない!

Metro はナビゲーションメニューとか境界線とかがありません。文字と余白を使ってダイナミックにレイアウトします。カテゴリーはブロックで横に並びます。 余計なナビゲーションがないためユーザーはコンテンツに集中することができます。基本的につねに全画面表示な感じのため、ウィンドウという概念がありません。

ない!のはいいけど、じゃあどうするの?というと、なんとセマンティック ズームといわれる動作で iPhone でいうところのピンチインすることで全体を俯瞰するように見ることができたりします。


通常時


セマンティック ズームすると全体がみれる

他の iPhone や Android アプリにあるようなアプリケーションバーもなく、これらのアクションはタップすることで表示します。


通常時


メニューを表示させる。

下や右のエリアをスワイプしてメニューを表示させます。 たしかに指一本で小さい場所をタップするよりかはジェスチャを使ってメニューを表示させて大きな領域をタップするのも誤動作することがないかなと思います。

タッチ操作

上記に書いたような操作はすべてタッチ操作でできます(マウスでもできる!)。 おもしろいな、と感じたところでいうと極力ホールドさせないで下になぞるようにスワイプすることで選択する動作です。ホールド選択しないってなんだかあたらしい!(気がする)

細かいガイドラインはこちら

にしても、タッチ言語とマウス言語の使い分けて常用していくような形のパソコンが今後出るんでしょうか。 というか、Windows 8 が入ったデスクトップパソコンが主流になるんでしょうか? どうなんでしょうね。今後が楽しみです。

まだまだおもしろい部分はたくさんありますが、今回はこのへんで!

ではでは Sleipnir 3 for Windows もよろしくお願い致します。

ソーシャルアカウント

Sleipnir の Facebook ページでは、ユーザーの方たちとのコミュニケーションや最新情報の投稿などを行なっています。よろしければいいね!してください!


フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

Facebook コメント

コメント

2012.11.27 の気になる記事 | UNDAKOVR Blog2012年11月28日 0:01

[...] Windows 8 の Metro UI のデザインや特長について書いてみる (フェンリル | デベロッパーズブログ) [...]

フラットデザインでもう泣かない!ために読んでおくべき記事とツール10傑! | あひる屋2013年06月24日 23:04

[...] Windows 8 の Metro UI のデザインや特長について書いてみる (フェンリル | デベロッパーズブログ) スレイプニルでお馴染みフェンリルさんのブログです。 かなり過去の記事ですが、今読んで [...]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。