私たちは多くのフォーラムで Windows 8 のデモを行ってきましたが、そのほとんどで、横長の表示 (ワイドスクリーン) を使用していました。プロジェクターを使うことが多く、その場合は横向きの方が見やすいというのが主な理由です。もう一つの理由は、多くの初期のデバイス (//build/ で Windows Developer Preview と共に発表された Samsung タブレットなど) がワイドスクリーンであるためです。新しいスナップ機能を使って、アプリケーションを横に並べて表示する用途にはワイドスクリーンでの横向きが最適です。すばやく滑らかに画面を回転できるようにし、縦向きを好むユーザーの方にもすばらしいエクスペリエンスを味わっていただくために、膨大な量の作業を行ってきました。これからご説明しますが、この背景には、どのような要因によって好みの向きが決まるかについて研究した結果が大きく影響しています。どちらの向きでも優れた動作をするアプリケーションを構築するためのツールを開発者に提供するために、Visual Studio ツールおよび Expression ツールにさえも取り組みました。Windows 8 の横向き画面および縦向き画面に関するこの投稿は、ユーザー エクスペリエンス チームの David Washington が執筆しました。彼は、//build/ で APP-207T セッション (英語) も担当しました。--Steven

Windows 8 PC はまったく新しい種類のデバイスで、小型のタッチ操作のみのタブレットからノート PC やデスクトップ PC まで、多岐にわたります。Windows 8 の刷新にあたり、私たちはフォーム ファクターや画面の向きにかかわらず最高のエクスペリエンスを提供できる設計を目指しました。タブレット デバイスは人間工学的な柔軟性を備えているため、表示するコンテンツに合わせて、どちらでも持ちやすい向きに持つことができます。

タブレットの優れた点の一つは、手の中に収まるパーソナルなデバイスであることです。日曜日の新聞を読んだり結婚式の写真を見るときに、手の中に収めてタッチ操作ができると、タブレットに対して感情的なつながりを感じる人も多いと思います。デジタルの時代では、ユーザーにとって最も大切なものの多くがデバイスに保存されています。このため Windows 8 では、デバイスをどのような向きに持っても対応できるようなエクスペリエンスを提供したいと考えました。

Windows 8 でさまざまなフォーム ファクターにおけるエンド ツー エンドのエクスペリエンスを設計するにあたって、私たちは次のような原則を設定しました。

  • 小さい画面、ワイドスクリーン、ノート PC、デスクトップ PC など、すべてのフォーム ファクターに対応する。
  • マルチ タスクや全画面表示のビデオで、ワイドスクリーンの利点を活用する。
  • ユーザーにとって最も快適な方法でデバイスを持ち、操作することができる。
  • 開発者は、さまざまなフォーム ファクターで、あらゆる表示や向きで実行できる 1 つのアプリを簡単に作成できる。

私たちはかなりの時間数をかけて、ユーザーがマイクロソフトのユーザビリティ ラボおよび自宅において、どのようにタブレット デバイスを使用するかについて観察しました。観察対象には、既にタブレットを使い慣れているユーザーも、初めて使うユーザーも含め、実験の後も何か月かにわたって彼らと連絡を取り合いました。実験では、デバイスの持ち方、体の姿勢、手の動き、さまざまなアプリの操作、デバイスの置き方、および向きについて調べました。得られた結果は非常に多様なもので、私たちはユーザーが体の向きやデバイスの向きを決めるときの要因は何かを調べるために、被験者に質問しました。その結果、手の大きさや親指が届く距離などの人体測定的要因、操作の繰り返しや疲労などの人間工学的要因、ハードウェア ボタンへのアクセシビリティなどのハードウェア的要因、タブレットを使用している場所 (台所、寝室、居間など) の環境的要因、立ったままか、ソファに座った状態か、机に向かっているかなどの身体的要因がかかわっていることがわかりました。これらの要因が複雑に絡み合い、その結果、姿勢、デバイスの持ち方、デバイスの向きがかなり頻繁に変わることが判明しました。つまり、デバイスの持ち方は 1 つだけではなく、ユーザーはデバイスを使ってそのとき行っている動作に合わせて、快適な姿勢や向きを自然に求めるものなのです。

ソファにすわりながら、縦長でタブレットを使用する人

当初私たちは、デバイスを横向きで使うか縦向きで使うかを左右するのは、主に個人的な好みだと思っていました。しかし、観察の結果、どの被験者もデバイスを回転させて使っており、デバイスや UI がそれに合わせて動作することを期待していました。驚きだったのは、ユーザーがデバイスや好みのアプリに慣れ親しんでくると、デバイスを回転させるかどうかに最も影響するのは、画面に表示しているコンテンツの種類だということでした。横向きでのコンテンツの表示やエクスペリエンスが快適に感じられれば、ユーザーは自然にアプリを横長で使用し、縦向きでのコンテンツの表示やエクスペリエンスが快適に感じられれば、アプリを縦長で使用しました。たとえば、ほとんどの人は、映画を観る際は黒い帯なしで表示できる横向きの全画面表示を好み、長い記事や Web ページを読む場合はスクロールの回数が少なくて済む縦向きで表示します。人々の好みは、アプリがすばらしいエクスペリエンスを提供する向きをそれぞれが判断することによって決まります。Windows 8 は "横向きメイン" なのか "縦向きメイン" なのかという質問やフィードバックをいただきましたが、私たちの考えは、縦向きも横向きも両方とも重要であり、いずれの向きでもすばらしいエクスペリエンスは実現できるというものです。特定の姿勢や向きに最適化するのではなく、デバイスをどのように持っても有効で、アプリとコンテンツに最適な設計と感じられるようなエクスペリエンスを目指しました。

横向きおよび縦向きに関する目標として、私たちは以下の項目を掲げました。

  • タスクまたは人間工学的な姿勢に合わせて、タブレットの表示を簡単に回転できる。
  • すばやく滑らかに Windows の表示を回転することができる。
  • Windows のシステムおよびアプリが予想どおりに回転し、ユーザーが制御できる。
  • 開発者は、高品質で意識的な横向きおよび縦向きのレイアウトを、提供したいエクスペリエンスに応じて容易に構築できる。

横長表示での Windows

//build/ カンファレンスで Windows 8 のユーザー インターフェイスをお見せした際、横向きでの表示がほとんどだったのはなぜかと、何人かの方に質問されました。Windows 8 は、すべての PC を刷新するものであって、タブレット用だけのものではありません。Windows 8 は何億ものノート PC およびデスクトップ PC (Windows 7 用に設計されたものも、Windows 8 用に新しく設計されるものも含め) で実行されることになりますが、これらの多くは、現在も今後も、横向き専用のデバイスとなるはずです。また、横向きおよびワイドスクリーンでは、マルチ タスク エクスペリエンス (スナップ機能によって、2 つのアプリを横に並べる) や、レターボックス表示を行わない全画面でのビデオ再生が可能です。(また、私たちが行っている大規模なデモンストレーションの多くでは、プロジェクターを使って巨大スクリーンに映像を表示するため横向きの方が適しているという経緯もあります)。

Windows 8 は、どの向きでも人間工学的に快適なエクスペリエンスを得られるよう、設計されています。タブレットを横向きに使う場合、両手で持って親指で画面をタッチする方法が快適だということがわかりました。このため、エクスペリエンスの大部分が、親指で簡単にアクセスできるように設計されています。また、システムを水平方向のスクロールに最適化し、横長でも縦長でも、動作が速く滑らかに感じられるようにしました。

横長表示で、スナップ機能によって Stocks アプリの横に並べられた AllThingsD アプリ

縦長の表示での Windows

Windows は、縦長表示でも優れた動作を発揮できるよう設計されています。私たちは、Web ブラウザーでニュースを読んだり、肖像写真を見たり、電子メール メッセージの長いリストをスクロールする場合などのシナリオを幅広く研究し、そこから学んだことをデザインに取り入れ、どの向きでもシームレスに動作するシステムを設計しました。キーボード、ファイル ピッカー、チャームなどのシステム エクスペリエンスは、縦向き、横向きのどちらでもスムーズに操作できるように調整されています。目指したのは、横長から縦長に切り替えても、使い方を学び直す必要はなく、そのまま同じように操作できるシステムです。

3:4、10:16、および 9:16 の縦長の Stocks アプリ

回転

私たちの目標の一つは、横向きと縦向きの回転の切り替えをすばやく滑らかにすることであったため、Windows のさまざまなチームが協力して、加速度センサー ハードウェアから、グラフィックス スタック、アプリに至るまで、この切り替えをスムーズにする作業に全力で取り組みました。

横向きと縦向きの切り替えの重要な要素として、アニメーションがあります。アニメーションは、2 つのレイアウトのスムーズな切り替えを演出します。迅速で応答性に優れた使用感を実現しつつ、切り替えに不快感がないよう十分な滑らかさを確保する必要があるため、アニメーションのタイミングは重要です。この調整を行うのは、Windows 7 および Windows 8 でスムーズなアニメーションを実現するための基礎となっている、デスクトップ ウィンドウ マネージャー (DWM) です。

タイムライン上に、加速度センサーの動作開始、デバイスの横向きへの回転完了、加速度センサーの安定 (100 ミリ秒)、タイムライン完了 (500 ミリ秒) が示されている

画面の自動回転が過敏に反応するのは非常に煩わしいものですので、回転の挙動の安定性と予測可能性をできる限り確保できるよう、努力を続けています。意図しない回転を防ぐため、システムは加速度センサーが安定するまで待機してから回転を開始します。また、ユーザーが回転のエクスペリエンスを制御して、不要な回転を防げるようにしたいと考え、"重力を無視" して表示の向きを保つことができる、ハードウェア方向のロック機能を用意しました。

回転のロックとロック解除のコマンド

さまざまな画面

開発者の視点から見た、さまざまな画面サイズへの Windows 8 の対応については、今後の投稿で詳しくご紹介しますが、ここでは横方向と縦方向という観点で画面サイズについて少しお話ししましょう。Windows 8 は、ほぼ正方形の 4:3 から 16:9 のワイドスクリーンまで、さまざまな縦横比、画面サイズ、および解像度の PC で実行されます。私たちが提供するスケーリング (拡大縮小) プラットフォームでは、Windows とアプリはこのような多様な画面にシームレスに適応してコンテンツの再フローを行い、スペースを有効に利用することができます。このようなデバイスの多くは、縦向きでも横向きでもどちらでも使用できます。この選択肢の多様性は、Windows に独自のものと言えます。ニーズと使い方に最も適したデバイスと向きを、ユーザー自身が選ぶことができるのです。

4:3、16:10、および 16:9 の横長

Windows 8 Metro スタイル アプリを実行できる最小限の解像度は 1024x768 です。このサイズは、Web での使用のために設計された標準的なサイズであり、Windows ユーザーのほとんど (98.8%) がこのサイズまたはこれ以上の解像度を使用していることから選択されました (以下のグラフを参照)。

Windows 7 ユーザーのおよそ 42% が 1366x768 の画面解像度を使用。その他の解像度の使用はいずれも 12% 以下。1024x600 および 1280x720 はデスクトップ アプリのみをサポートするが、それ以外の解像度はすべての Windows 8 アプリをサポートする。

アプリの最小限の解像度を指定することは重要です。これによってすべての開発者が、デバイスごとに対応を細分化することなく、アプリの最小のメイン ビューを設計することができるためです。またこの指定により、実際にユーザーが使用した際に、画面のサイズが小さいためにアプリのレイアウトが崩れるというケースを防ぐことができます。

スナップ機能を使ったマルチ タスクを含め、Windows 8 のすべての機能をサポートする解像度は 1366x768 です。この解像度が選ばれたのは、1024x768 (Web での使用のために設計された標準サイズ) のメイン アプリの横に、320 ピクセルのスナップされたアプリ (これは多くの携帯電話用レイアウトに使用されるサイズでもあります) が並んだときの幅にちょうど合うためです。

これらの制限は、ランタイム時に強制的に適用されます。従来と異なり、回避する方法は用意していません。この指定の趣旨が、Metro スタイル アプリを規定の解像度でフルに機能するよう設計してもらうことにあるためです。Developer Preview では、ダウンロード サイトに記載するだけにとどまり、実行時の警告は表示されませんでしたが、ベータではもちろんこの点にも対応する予定です。600x800 の仮想マシンや 1024x600 ネットブックを利用しているユーザーの方にはご不便をおかけし、申し訳なく思っています。なお、1024x600 のマシンの使用率は非常に低くなっており、ロー エンドの画面解像度も、スナップ機能なしで Metro スタイル アプリを実行できる 1280x800 に移行してきています。この解像度もフルに機能を発揮できる解像度とは到底言えませんが、今後新しい PC が市場に登場してくるにつれ、高解像度画面への移行はさらに進むものと期待しています。

開発者の視点から見た回転

Windows 8 では、エクスペリエンスの主役となるのはアプリです。そこで私たちは、横向きおよび縦向きの両方の表示をできるだけ簡単に開発者が開発できるよう、力を注ぎました。他のプラットフォームと同様に、開発者は自身のアプリの向き、およびエクスペリエンスをどのようにその向きに合わせるかを選択することができます。今日、市場に出ている PC のほとんどをノート PC とデスクトップ PC が占めるため、多くの開発者は横向きのビューを提供することになると思いますが、アプリのエクスペリエンスが横向きと縦向きの両方に対応していれば、レイアウトの作業を上乗せするだけで縦向きの表示もサポートすることができます。

スナップ機能やさまざまな画面サイズに対応するアプリを構築するのと同じテクニックで、縦向きのエクスペリエンスを簡単に構築することができます。HTML5 の開発者の場合は CSS メディア クエリによってレイアウト スタイルをシステムの向きにバインドすることができ、XAML の開発者の場合は ViewState イベントに対応してレイアウトを変化させます。HTML でも XAML でも、プラットフォームが提供する適応制御とテンプレートは、すべて縦向きと横向きの両方に対応しています。また、切り替えのアニメーションはシステムによって自動的に処理されるため、開発者が余分な手間を強いられることはありません。どちらかの方向が最適なコンテンツがアプリに含まれている場合、開発者は向きを指定することができ、システムは指定された向きにアプリを維持します (対応デバイスの場合)。

開発者がアプリをテストするときに、タブレット デバイスを使用できなくても、Visual Studio 11 および Expression Blend を使用することにより、アプリを縦長/横長、さまざまな画面サイズと縦横比でテストすることができます。

Visual Studio 11 Simulator の横向き表示と縦向き表示

Windows 8 では、好みに合ったデバイスを選び、最も快適な方法で手に取れば、その体勢に合わせて最適なエクスペリエンスが提供されます。またアプリ開発の面では、最小限の作業を行うだけで、ワイドスクリーンを活用したマルチタスクに対応しつつ、縦向きでも美しい表示を実現することができます。

以下は、横向きから縦向きへの切り替え動作を示すショート ビデオです。


ビデオをダウンロードしてお好みのメディア プレーヤーで再生することができます:
高画質 MP4 | 低画質 MP4

ぜひ、ご自身でお試しください。

お読みいただき、ありがとうございました。
David