Windows Metro スタイルのデザインの仕方 @ The Microsoft conference 2012

グランドプリンスホテル新高輪でMicrosoft社のカンファレンスに行ってきました。Windows 8や次期Office / Office 365（クラウドで使える奴）などの紹介、技術的解説、実機での体験、サードパーティーの商品・サービス紹介などなど、盛りだくさんの内容でした。でも、ちょいと風邪気味で調子が悪かったのと、えらい盛況でセミナーも立ち見だったりしたのとで、早々に引き上げちゃったんです。そんな中で、Windows 8の新しいUIに関しての話が面白かったのでご紹介。

講師は”デベロッパー&プラットフォーム統括本部UX エバンジェリスト”という肩書きの春日井さん。技術的内容を分かり易く伝え、文字通り広めるのが”エバンジェリスト”の役割。さすが、そんな肩書きを持っているお方。話も面白く、興味深く、そして力強かったですよ。
パンフレットの説明書きによると、セミナーの概要は

Windows 8 では、これまでのマウスとキーボードによる操作を前提に設計された UI に加え、タッチ インターフェイスに最適化されたまったく新しい UI を搭載。この 2 つの UI をデバイスや利用シーンに応じて、切り替えて使用できます。本セッションでは、新しい UI のコンセプトやデザイン上の原則を解説。先行して公開されているアプリをサンプルとして取り上げながら、これから変わる、変わらなくてはならないアプリについてご説明します。

というもの。

なるほど、確かに同じ「ボタンを押す」という動作でも、マウスでカーソルを動かしてポチッとするのと、自分の指で触るのでは、そもそもボタンの大きさを変えないといけませんね。これまでのものでは指で押すには小さすぎます。そこでMicrosoftでは実験を重ね、指で押すには
　　　ボタンサイズ 7mm x 7mm （40pixel x 40pixel）
がよく、さらにボタンとボタンの間隔は 2mm （10pixel）離さないと押し間違えてしまうそうです。なるほどねぇ。
こんな感じの、Windows 8におけるUI構築マニュアル（Look&Feelのガイド）は、Microsoftのサイト、
　　　　　Metro スタイル アプリの構築方法を学ぶ
の中の、
　　　　　アプリのユーザー エクスペリエンスのデザイン
に詳しい解説が載っているとのこと。みなさん、参考にしましょう。というか、これに則ってプログラムをデザインしないと「ユニークで挑戦的だが、少々使いづらいアプリケーション」なんて嫌みを言われちゃうことになりそうです。

春日井さんのお話では、今回のデザインの基本的な考え方として「SWISS Design」なるものに依っているそうです。かのHelveticaに代表されるタイポグラフィが有名ですが、グリッドの補助線を引き、その線に合わせてオブジェクトを配置していくものだそうです。その考えを画面デザインに適用したもので、色んな大きさのタイルが並んでいるような画面を最近、見るようになりましたよね。あれです。
具体的には The Grid System なるメソッドで作っていくようで、新聞や雑誌の画面割りをイメージすればいいのかもしれません。実際の設計では画面デザイン用にPhotoshopのテンプレートが用意されていて、これで考えていけるとのこと。

もちろん、静的なデザインだけではなく、動きも重要。オブジェクトをタッチした時の反応の仕方や、ボタンを押した時の動き、スイングさせるやり方なんぞも大事。そうそう、複数の指で同時にタッチして操作するやり方も決めないといけないでしょう。そんなものも上記のサイトに色々書いてあります。

とまあ、こんな感じで、どんなアプリケーションでも似たような・同じUIで操作することができるようになるんですね。ユーザーとしては助かります。あるアプリケーションで操作を覚えたら、他のアプリケーションでもほとんど同じように操作ができるというのは重要です。
私自身はとっくの昔に現役プログラマーからリタイアしちゃってますが、いま頑張っている人には必須の知識でしょう。エンドユーザーとしても、どんな考え方の元にアプリケーションが作られているかを知れば、操作の習熟にもプラスになるでしょう。


Windows 8、なかなか面白そうですね。Vistaでげっそりして、７で普通に戻ったかと、そんな感じだったので、余り期待していなかったのですが、侮っちゃいかんですね、これは。各社から画面がくるっと回ったり、スライドしたり、とれたりしてタブレットにもなるノートパソコンが売り出されていますが、ちょっと興味が出てきました。機会があったら触ってみるかな。


Amazon.co.jp 【好評発売中】Microsoft Windows 8.1【最新版】

---

---

こちらはまだWindows 7のパソコンしか扱っていないかな。でも、Windows 8乗り換えパスも提供されているようです。それぞれのメーカーサイトで確かめてみてください。

グランドプリンスホテル新高輪

カンファレンスでしか行ったことがないんですよね。のんびりアーバン・ホテルライフしてみたいものです。

コメント 4

え！もう8ですか。あまりに早くてついて行けません。私は7どまりにします。
by JUNKO (2012-10-01 16:53) 

JUNKOさんへ：
タブレット、スマートフォンとパソコンと、双方を満足させるOSということで、なかなか面白そうですよ。でも、私は財布の中身がついて行けないので、パソコン買い換えはまだ先になりそうですが。
by ぶんじん (2012-10-01 21:34) 

私の勤務先で来年3月にパソコンを入れ替えるので、Windows8
が最有力候補だったのですが、先週の会議で、まだ不安定だろうと、７になることに決まりました。ちょっとがっかりです。
by TaekoLovesParis (2012-10-02 21:47) 

TaekoLovesParisさんへ：
企業だと安定性を求めますからね。まあ、無難な判断なのでしょう。
by ぶんじん (2012-10-03 20:48)