Developer's Blog

Windows の新しいデザイン!Metro UI の参考になるサイトまとめ

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

Windows 8 Consumer Preview が発表されましたね!Windows Phone 7 でも使われている Metro UI が採用されてタッチパネルを意識したつくりになっています。Nokia で Windows 8 のタブレットがでるとかでないとか

Windows 8 の新ロゴも発表されて Windows デザインの流れもどんどん変化していきそうです。たのしみですね。

そこで今回は Metro デザインについてデザイナーが押さえておくとよさそうな情報やテンプレートをまとめてみました!わたし個人ではまだデザインしたことがないので、個人的なメモ程度ですが。。何か他にもいい情報があれば教えてください。

そもそも Windows 8 ってなに?

年内には正式版がリリースされるという Windows 8 、Developer Preview の記事でちょっと古いですが、以下がわかりやすいです。

徹底解剖 Windows 8 新機能 ピックアップ“10”
クセのある操作! 快速挙動! 動画あり! ──Windows 8速攻レビュー

デザインガイドライン

Metro スタイル アプリのユーザー エクスペリエンス (UX) の設計パターン
まずは公式!

Windows Phone 7 向け UI デザイン/操作ガイド(PDF)
Windows 8 ではないですが、先に Metro UI が採用されている Windows Phone 7 のガイドも参考になります。

デザインの原則
ちょっと話はずれて Windows 7 のドキュメントですがデザインの原則はソフトウェアを設計する段階で意識しておきたい項目です。
UX のデザインの原則項目コンセプトを減らして、信頼を高めるなんて、肝に銘じておきたいところです。

Windows ユーザー エクスペリエンス ガイドライン(PDF)
上記項目も含まれている 7 のガイドラインですが、 Windows のソフトウェアを作る上で Windows のユーザーエクスペリエンスについて理解するには全体を通してドキュメントを読んでみるといいかもしれません。全 959 P というボリュームですが、自ら

この例は、Windows® XP のエラー メッセージですが、最も完成度の低いものの 1 つといえます。(P356)

とか失敗例も書かれていたりして参考になります。

テンプレート

実際の画面パターンをみたい!できれば PSD データで!ということで探してみました。
※ライセンスは各ページ確認をお願いします。


ダウンロード
まずは公式!多くのパターンが入っていて大変ためになります。


Full Windows 8 GUI Theme set (psd)
Windows 8 style iconst
このサイトのテンプレートもすごくたくさんパターンがあるのでレイアウトやサイズなどすごくためになります。パスも残っていたりしてよく作りこみがされています。

Windows Phone 7 デザイナーのためのチートシート
Windows Phone 7 の UI デザインに使えるテンプレート20個
Windows Phone 7 であれば探せば結構テンプレートが出てきます。すべてななふぉさん。

などなど、Windows 8 正式版!実際に自分の PC で動かすのが楽しみです!Sleipnir 3 for Windows も Metro 対応するんでしょうか!?そのあたりも楽しみですね(^o^)!

ソーシャルアカウント


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

Copyright © 2019 Fenrir Inc. All rights reserved.