開発者が知っておきたいMetroの“作法”：すべてをカバーするのは大変なことなのです（2/4 ページ）

[鈴木淳也（Junya Suzuki），ITmedia]

「touch-first」と「fast and fluid」

　タイルが並ぶMetroのUIは、タッチ操作を主軸に考えたデザインだ。これは「touch-first」というキーワードにも共通する。一方でMicrosoftでは、同じUIでキーボードやマウスなど、従来の操作体系もサポートするよう開発者に求めている。ただ、Metroではあくまでタッチ向けにUIをアレンジすることが求められている。

　その典型的な例が画面の上端と下端から出現するメニューだ。Windows 8では、画面上端または下端から中心部に向けて指をなぞると、そのアプリ固有のメニューが出現する。ここにはアイコンや（Internet Explorerの場合）サムネイルなどが並ぶことになるが、この配置にもタッチ操作を想定した仕掛けが必要というのがMicrosoftの考えだ。例えば、両手でタブレットPCを抱えた場合、タッチできる領域は主に親指が届く範囲に限定される。そのため、ここで出現するメニューのアイコンも、親指の可動域を中心に左右へばらして配置するがユーザーに優しいとMicrosoftは主張する。

　この主張が正しいかどうかは別にしても、ユーザーの利用シーンと“指の動き”まで想定したプログラミングが必要なのは確かなようだ。同様に、左右に分離したスプリット型のソフトウェアキーボードがWindows 8には標準で用意されているが、これも親指でのタイプを想定したものであることが分かる。デザイン的にもこれが最終版とは思わないが、何らかのフィードバックを受けて順次改良されていくことだろう。

「touch-first」を考えれば、従来のUIとは異なる概念が要求されることになる。従来のアプリケーションであれば、「ファイル」「ヘルプ」といったメニューは画面左上側から順番に左詰めで表示していたが、同様のメニュー構造をMetroスタイルで採ると、画面の上下から出現するメニュー一覧のアイコンが、左右いずれかに配置されることになる。ところがタブレットデバイスを両手で持って状態のタッチ操作を考えた場合、選択可能なメニューが中央にあると、タブレットデバイスを抱えたまま指でタッチできる範囲からは離れることになる（写真＝左）。そこで、よく使うメニューのアイコンを中心から左右に離して配置するのも有効なアイデアとなる（写真＝右）

Windows 8では多様なソフトウェアキーボードを用意するが（写真＝左）、その存在に疑問を感じたユーザーも多いかもしれない、左右に入力可能なキーが分かれている「スプリット型ソフトウェアキーボード」も、左右にある親指で操作することを想定して存在するといえる

　もう1つ重要なのが「fast and fluid」で、これはUIが素早くスムーズに動作することを訴えるキーワードだ。多少のレスポンスの遅さにも耐えられたCUIやGUIと違い、いまや幅広いユーザー層に使われているタッチスクリーン型のデバイスでは、指で行う操作への追従性や滑らかな動きが当然のように期待されてしまう。その期待にそぐわない“レスポンスの遅れ”はユーザーに大きなストレスを感じさせることになる。また、高速なレスポンスだけでなく、“思い通りに動かしている”という感覚も重要だ。無駄に見えるアニメーション効果も、ユーザーの操作によってどのように状況が変化したのかを把握するのに重要な意味を持つ。

Windows 8ならびにMetroスタイルでMicrosoftは「Fast and Fluid」もキーワードとして挙げている。端的にいえば「素早くなめらかに」ということで、レスポンスの高さとスムーズな動作をアニメーション効果とともにユーザーに体感させようということだ（写真＝左）。このグラフは、ユーザーは操作が直感的になればなるほど、そのレスポンスに対してシビアになることを示している。CUIやGUIでは多少の操作遅延に耐えられるが、タッチ操作では指の動きにマシンがついてこなければストレスを感じるようになる（写真＝中央）。右欄にある写真項目のスクロールで、アニメーション効果の“あり”と“なし”の場合にその動作を比較している。アニメーションなしで単純にグリッド上の写真を入れ替えて上下方向にスクロールさせた場合と、アニメーション効果をつけてスクロールさせた場合とで、ユーザーの“スクロール感覚”が異なってくる（写真＝右）