ホーム > Microsoft > Windows 8 を紹介してみる。

Windows 8 を紹介してみる。

 

最近、大学やお客様先に行く際に、Microsoftのタブレットこと、Surfaceを持って行っていろいろ見せびらかしたりしていましたが、ガジェット好きな方々はSurface本体に食いつくものの、意外にも Windows 8 そのものが初体験という方も多く、 Windows 8 の説明をすることも多々な感じでした。

「全然違うねー。どこをどう触ればいいの?」って感じの感想が多く、自分もいろいろしゃべりながら、「そもそも Windows 8 の特徴を説明するのには、何を話せば良いのだっけ?特に非ITの人には、何から伝えればいいのか・・」とちょっとぐるぐると考え込んだりして。

そこで、何回かに分けて、これら Windows 8 ネタでレビューを書いてみようかと思います。たまには Microsoft MVP っぽいものも書かなきゃね・・。

とはいえ自分はゴリゴリの開発者でもないので、開発周りは他の方に任せることにして、画面より、デザイン寄りの部分で行ってみたいと思います。というわけで今回のお題はこちら。

 

Windows 8 の画面デザインについて

 

画面のデザイン部分を見て行ってみましょう。そもそも、タッチ向けOSとして登場したこともあり、今回の Windows 8で変わったのは、何よりも画面です。上の方の写真でも載せてありますが、下記が、Windows 8の基本的な画面となります。ちなみにこれは比較的解像度の大きな画面です。

WS000020

Windows 95 から今に至るまで15年以上もの間、デスクトップ+タスクバーという画面に慣らされてきたこともあり、この画面に面食らう人は多いかと思います。とはいえ、これが Windows 8 の新しいスタート画面であり、従来のスタートボタンに代わり、ここから様々なアプリケーションを呼び出します。

タイルを敷き詰めたようなこの画面は、以前はメトロと呼ばれていましたが、新たにWindows 8 スタイル という名前になっています。一つ一つの四角がそのまま「タイル」という名前で、それぞれのアプリはここから起動します。で、実はこれは日本ではごく少数しか登場していませんが、Windows Phone スマホと共通のスタイルとなっています。

なお、もちろんスタート画面のこの色や背景イメージは変更可能です。とはいえ、選択できる色は、やはり渋めな感じです。ビジュアルデザイン云々は好みもあるかと思いますので、他の画面展開も含め、ここではあまり細かには取り扱いません。それよりも、このスタート画面の裏側にある思想を考えて行ってみましょう。

WS000021

 

これまでのビビッドな青系や透明+立体バリバリでビデオカード泣かせの画面からすると、この落ち着いた色調と、平面+真四角+ソリッドな質感で構成された画面は、非常に新鮮に感じさせます。アイコンも、従来のアプリケーションのアイコンはそのままですが、新しいアプリケーションのものは、単色のタイルに白で、非常にくっきりと描かれます。実は、Windows 8 スタイル においては、この「くっきり」「かっちり」がデザインの要となっています。その特徴をざっと書き出しますと、これまでのデスクトップOSやアプリケーション画面と比べて、以下のような違いがあります。

WS000016

・若干の隙間を開けて敷き詰められた四角いタイル。

・単色+白のみのアイコン表示。

・半透明やグラデーションは使わない。境界線はくっきり。

・アイコンでメインとなるアクションを伝える。テキストは補助情報。

 

そもそも、デスクトップOSにテカテカ・ゴテゴテの流れを生み出したのは、何よりも Windows 95、98からXP、Vistaときた Windows 自身のような気もしますが、ここへ来ての大きな転換は、やはりタッチ操作、そしてモバイル化という部分が大きいでしょう。もちろん、今までのデザインの延長線上でそのままタッチ対応、モバイル化という路線もあったかと思いますが「タッチにも対応したOS」「モバイルにも対応したOS」ではなく、「タッチOS」「モバイルOS」を名乗るうえでは下記の2つの考え方が大きくあるかと思います。

 

アイコンメタファーからの脱出

これまで長らく使われてきた、丸っこいアイコンをポインティングすることで、それが示すアプリやデータファイルをトリガーするというGUIの基本的なメタファーは、テキストベースで命令を打ち込むCUIに比べ、コンピューターをより直感的に扱えるようにする点で大きな革新でした。ゼロックスのパロアルト研究所を発祥として Mac OS も Windows OS もこのアイコンモデルを採用し続けててきたこともあり、今ではデスクトップ+アイコンというのは、パソコンとしては当たり前のユーザーインターフェースとして親しまれています。そして、最近では、iOSやAndoroid OSでも、このアイコンモデルでアプリを起動するようになっています。

WS000022

とはいえ、アイコンを押せば何かが始まるというのが当たり前になっている一方で、このアイコンというのは本当にタッチで操作するUIとして妥当か?というのが、このタイルのそもそもの始まりです。モバイルとタッチ操作を考えると、従来のマウスカーソルによるポインティングと異なり、ユーザーは必ずしも意図した場所をポイントできません。実際、マウス操作では、頑張れば10ピクセル程度の誤差で、意図した1点を瞬時に指し示し、クリックすることが出来るでしょう。アプリケーションウインドウの肩にある終了ボタンがその代表的な例です。Windowsでは右上の×ボタン、Macでは左肩の赤ボタンは、マウスカーソルがあるからこそ、こんな小さな領域でも、簡単にポインティングできるのです。それに対して、指で誤差なく、アイコンに対して細やかなポインティングは結構難しいです。移動中に使うようなデバイスであればなおさらです。

WS000023

そこでタイルでは、アイコンではなくタイルを敷き詰め、そのタイル内のどこかをタッチすれば、そのアプリが起動されるようになっています。誤差があったとしても、点をポインティングするのに比べ、平面の領域内をポインティングするという操作が容易であるのは、言うまでもありません。タッチOSを考えた時に、UI への解として出したのが、このタイルなのです。

WS000017

とはいえ、「iPhoneやAndroidスマホで、アイコンでも問題なく操作できているよ」という話もあるかと思います。はい、自分もそちらでも使うことはできています。実はiPhoneやAndroidでは、アイコンが描画されている領域の外側もタッチ操作に反応するようにすることで、このアイコンとタッチ操作の操作の誤差を解消しようとしています。これも一つの手ではありますが、Windows 8 では「描画領域とタッチできる領域は一致する」という考え方に基づき、タイルではこういった描画領域とタッチ領域をあえてずらすような形にはしていません。「どちらでも問題ないのでは?」と感じるかもおしれませんが、昨今のUIは、紙やノート等のメタファーなど、タッチ操作になることで、より実物らしさ、現物を直接触っている感覚を提供することを目指しています。見えている形・大きさと、触れることのできる形・大きさが一致しているものと異なるもの、現実のオブジェクトに近いのは果たしてどちらでしょうか。

 

さくさく動いて滑らかに描画

最近ではモバイルのチップも2コア4コアとCPUも格段に進化してきています。グラフィック処理も、高速なチップが担当することで、従来では考えられなかったくらいにスムーズに映像の再生や画像の表示ができるようになっています。とはいえ、今の主流はそれらを大電流でパワフルに回すことよりも、必要に応じて電力を落とすことで、電池の持ち時間を増やすような形となってきています。つまり、グラフィック表現に割くリソースも、減ってきているといえます(とはいっても、進化のペースも早いので、高速化も進んでいますが)

その一方で、ユーザーがUIに求めるものは、より高度化してきています。従来はサクサクなんて表現をしていましたが、最近は単に高速に動くだけではなくて、描画の緻密な滑らかさも含めてぬるぬるという表現をするようになってきています。このぬるぬるが重要です。どんなに高速に応答したとしても、秒間15フレーム程度の表示では、ユーザーはかくかくと感じてしまいます。動きは速いのに、それらが全部描写されるのではなくまるでコマ落ちしているように感じますので、全体的な評価として、質や作りの粗さを感じてしまうことになります。

これらの両立を考えた時に、このシンプルなタイル表現がぴったりだと言えます。モノカラーの塗りつぶしと、ホワイトの形状表現とするだけで、描画に負荷がかからず、ぬるぬると動くことになります。これは、デスクトップOSよりもむしろ、 Windows 8 のタブレットデバイスで、大きなアドバンテージになります。この辺の事情を汲みつつ、新たなクールさを提供しようとした結果が、このタイル、そして Windows 8 スタイルだと言えます。

 

 

 

今回はとりあえずデザインの考え方の1点深掘りな感じでしたが、この後何回かに分けて、操作方法なども紹介していきたいと思います。

カテゴリー:Microsoft タグ: ,
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。