Posted by Renu Devi
8 月 20 日

 

先日、Microsoft は新しい Office Web Apps を発表しました。私たちはこのアプリに新機能を追加し、パフォーマンスを改善しました。また、さまざまなブラウザーを使用して文書にどこからでもアクセスできる環境も引き続き提供しています。

今日は、皆さんに新たな次元の入力方法である「タッチ方式」をご紹介できるのを大変嬉しく思っています。Office Web Apps の表示および編集といった本格的な機能を、タッチ機能対応のタブレットやブラウザーで利用できるようになりました。Windows 8 の Internet Explorer や iOS の Mobile Safari なども使用できます。

 タッチ機能対応の Office Web Apps を設計するにあたり、私たちは次のような目標を達成することを目指しました。

  • タッチ対応の Office Web Apps をすぐにでも使用したいユーザーの期待に応える
  • 新しいユーザー インターフェイスの操作方法を学習する必要をなくす
  • タッチ方式とマウス/キーボード方式を簡単に切り替えて使えるようにする
  • 編集ツールなどの Office Web Apps の完全な機能を、タブレットやタッチ モニターなどのタッチ式デバイスで使えるようにする

ユーザー インターフェイスをタッチ対応にし、またタッチ入力に対応できるようする過程では、興味深い設計上の課題が浮かび上がってきました。この記事では、これらをどのように実現したかについてご説明します。

 

タッチ用フレームワークの開発

私たちは、サポートするプラットフォームと、Microsoft Office デスクトップ アプリケーション、Windows 8、および iOS のタッチ処理のガイドラインに適合する統合フレームワークを開発しました。また、ユーザーがタッチデバイスを使用するときに期待する使用環境とタッチ操作のバランスについても考慮しました。

プラットフォーム全体のユーザーによる操作性を考える際には、次の方針に基づきました。

  • タッチ入力だけによる快適なエンドツーエンドの操作性を実現する
    • タッチ デバイスでのシナリオや操作性を重視する
    • ユーザーが自信を持ってユーザー インターフェイスにタッチできるようにする
    • タッチ操作はシンプルで直感的に理解できるものにする
    • ブラウザーの機能を活用する
  • タッチ、マウス、キーボードを組み合わせて使用できる優れたエンドツーエンドの操作性を実現する
    • ユーザーがタッチ、マウス、キーボードを自在に切り替えてアプリケーションを使用できるようにする
    • アプリケーションがこの入力に対応できるようにする

では、これらの方針について、それぞれ詳しく見ていきましょう。

 

タッチに最適なシナリオと操作性

私はこの記事を数日間で書き上げ、何度か修正しました。多くの皆さんと同様、私は一日中自分の机に向かっていることはありません。また、子供のフェンシングの練習場にノート PC を持って行くこともありません。私はこの記事を職場のデスクトップで書き始め、文書を Skydrive にアップロードしてどこからでも使用できるようにした後、タブレットを使用して編集作業を続けました。

ユーザー調査によって得られた利用法や行動の傾向とパターンから、私たちは次の 2 つのシナリオを目標とすることができました。

1. 文書の読み込みや使用、プレゼンテーションやスプレッドシートの表示は高速で、軽快で、満足できるものにする

  • 情報を読むことと使用することは、タブレットを使用するほとんどのユーザーがよく行う行為です。
  • ユーザーは文書やプレゼンテーションに目を通し、その内容について同僚や友人と共有するコメントを書き込みます。
  • 自動車の購入に関する調査結果を OneNote Web App で取りまとめ、自動車の販売交渉の際にはタブレット上でいつでも利用できるようにしているユーザーもいます。

 2. 手軽に使用できる編集機能により、文書への追加、修正、変更を行う際の満足度を大きく高める

  • 私のような母親達は、学校の保護者会でスプレッドシートを使用して情報を共有しており、子供のスクール パーティーへのデザートの持ち込みを素早く伝達したいと考えます。
  • 学生達は、自分達が取り組んでいる論文を素早く修正し、プレゼンテーションを仕上げるための共同作業に取り組みたいと考えています。

 

自信をもってタッチ操作を行う

ユーザー インターフェイスを使用しているとき、目的でないコントロールにタッチしてしまうほどイライラすることはありません。意図するコントロールやユーザーインターフェイスの一部に確実にタッチできれば、アプリの信頼性が高まります。私たちは Office Web Apps を使用するときに、このような自信をユーザーに持っていただきたいと考えました。

マウスはユーザー インターフェイスとのやり取りを、正確かつ制御された方法で行えるツールです。物理的なキーボードと組み合わせて、自信を持って正確に挿入ポイントを指定し、選択を行い、ボタンをヒットし、コンテキストメニュー、ドロップダウン、他の UI を起動することができます。

これと比較すると、人の指ではあらゆる形状や大きさが表現されてしまいます。挿入ポイントを指定する動きはぎこちなく、ユーザーインターフェイスとのやり取りの制御は不正確です。

私たちの目標は、ユーザーがマウスを使用するときと同様に、ユーザー インターフェイスを大胆にタッチして、期待する結果が得られるようにすることでした。

タッチを容易にするには、対象物のサイズが関係します。リボン コントロールやコンテキストメニューなど、ユーザー インターフェイスの要素の多くが、Windows 8 や Microsoft Office で定義されている「タッチ可能」なサイズの制限を大きく下回っています。

新しい Office Web Apps では、このような要素をすべてタッチしやすいよう改善しました。UI の物理的なサイズを大きくすることと、実際の文書の内容の表示スペースをできる限り大きく取ることとのバランスは、慎重に検討しました。

 

ボタンが大きくなり、タッチしやすくなり、コントロール間の間隔が適切なものになっていることを、以下の図で確認してください。

 

 Excel Web App [ホーム] タブ

PowerPoint Web App [挿入] タブ

 OneNote Web App [ホーム] タブ

Word Web App のカラー ピッカー

 

シンプルで直感的に理解できるタッチ操作を使用する

私たちの大きな目標の 1 つは、練習したり記憶したりしなければならない複雑なジェスチャーではなく、シンプルで直感的に理解できるタッチ操作を採用して、ユーザーがタブレットで Office Web Apps をすぐに使えるようにすることでした。

操作に必要なのは、次の 5 つの動作だけです。

では、Office Web Apps でこれらの動作をどのように使用するかを見ていきましょう。

 

文書のスクロールとブラウジング

文書全体に素早く目を通したいときには、素早い移動の動作を示すスワイプまたはフリックを使用します。文書の内容が高速に流れるようにスクロールします。これを止めるにはタップ操作を行います。

Word Web App での全画面表示や編集表示での高速スクロールの実現には、ブラウザー本来の機能を活用しました。

PowerPoint Web App では、同じスワイプ動作でスライドを切り替えることができます。

 

ズーム インとズームアウト

2 本の指を同時に拡げる動作 (スプレッド) や、2 本の指でつまむような動作 (ピンチ) を使用して、ユーザーインターフェイスをズーム インしたり、ズーム アウトしたりすることができます。

 

入力

Office Web Apps の編集表示を 1 回タップすると挿入ポイントが設定され、入力を始めるためのキーボードが表示されます。 

 

Word Web App の挿入ポイント

挿入ポイントの形は、マウスとキーボードを使用するときのものとは異なることに注目してください。挿入ポイントを示す円形の「グリッパー」が表示され、これを掴んでドラッグすることで、選択を容易に行うことができます。

入力は編集作業の基盤であり、この操作性を高めることは重要な要素です。

 

挿入ポイントの配置

指は不正確な入力ツールであるため、ユーザーが意図する場所へ、いかに正確に挿入ポイントを配置するかを考える必要がありました。

ほとんどのユーザーは、単語の先頭または末尾を修正します。

そこで私たちは挿入ポイントの配置に「ブックエンド」方式を採用しました。

すでに入力されている単語が 1 回タップされたときには、最も近い端部 (単語の先頭または単語の末尾) を計算し、そこに挿入ポイントを配置します。同じ単語が再度タップされたときには、タッチが認識された正確な場所に挿入ポイントを再配置します。

 

選択

テキストやオブジェクトを選択することで、これらを動かしたり、書式を適用したり、あるいはその他の処理を実行することができます。これらの操作は、マウスおよびキーボードのCtrl キーや Shift キーを使って効率的に実行できます。これらのツールは対象を正確に指定できるためです。

タッチ環境では、挿入ポイントに表示される「グリッパー」がハンドルとして機能します。これを掴んでドラッグすることで、新たな選択をすることができます。また、グリッパーの両端を使用して選択した範囲を拡大縮小して、現在の選択範囲を変更することもできます。

 

Word Web App でグリッパーを使用してテキストを選択

 

 テーブルを挿入する場合に表の大きさをドラッグで選択

 

コンテキストに操作を適用

コンテキスト メニューを使用すると、特定のコンテキストに対して操作を迅速かつ容易に適用することができます。Office Web Apps でマウスを使用してコンテキスト メニューを使用することには、すでに慣れていらっしゃることでしょう。マウスの右クリックでは、次のようにメニューが表示されます。

 

Word Web App の編集表示でマウスの右クリックによって表示されるコンテキストメニュー

タッチ デバイスでは、選択したものをタップするだけで簡単にコンテキスト メニューが表示されるようにしました。コンテキストメニューから離れた場所をタップすると、メニューは消去されます。 

 

選択項目をタップするとコンテキスト メニューが表示される

 

コンテキスト メニューに表示されるコントロールには、タッチしやすいように十分な間隔が設けられていることに注目してください。

挿入ポイントでは、指でしばらくの間押し続けることでもコンテキスト メニューが表示されます。

Word Web App の全画面表示では、1 回のタップで行を選択できます。選択したものをさらにもう一度タップすると、コンテキストメニューが表示されます。 

 

Word Web App での選択とコンテキストメニュー

 

 

タッチ、マウス、キーボードを組み合わせて使用できる優れたエンドツーエンドの操作性を実現する

タブレットはタッチ、マウス、キーボード入力によって操作できます。

Windows 8 では、タッチ方式またはマウスとキーボード、あるいはこれら両方を組み合わせて Office Web Apps を使用することができます。iOS では、Office Web Apps にはタッチ方式による入力が最も優れています。

 

タッチ モード

Office Web Apps では、ユーザー インターフェイスを次のように区別できます。

  • 固定ユーザー インターフェイス

このユーザー インターフェイスは常に存在し、アプリケーションに表示されます。

たとえば、OneNote Web App のナビゲーションウィンドウやリボンが該当します。

  • コンテキスト ユーザー インターフェイス

このユーザー インターフェイスは、必要に応じて表示されたり、消去されたりします。

たとえば、コンテキスト メニューがこれに該当します。

タッチ デバイスをお使いのとき、Office Web Apps ではタッチモードの固定ユーザー インターフェイスがデフォルトで表示されます。[タッチ モード] ボタンを切り替えると、このモードをマウスを使用するユーザーインターフェイスに変更することができます。

[タッチ モード] ボタンは Office Web Apps の左上に表示されるクイック アクセス ツール バーにあり、タッチ モードと精密なマウス モードを交互に切り替えることができます。

 

[タッチ モード] ボタン - (オンの状態) タッチ対応のユーザーインターフェイスを表示

 

 

[タッチ モード] ボタンの部分を拡大

 

コンテキスト メニューはリボンによるポップアップおよびメニューであり、必要な場合にのみ表示されます。そして、これを起動したときの入力モード (タッチまたはマウス) に合わせて表示されます。

 

まとめ

Office Web Apps のプレビューを skydrive.com で、また Office 365 のプレビューを Windows 8 のタッチ デバイスや iPad の iOS で是非お試しください。

私たちはユーザーの皆さんの使用感をお聞きしたいと思っています。是非ご意見をお寄せください。アプリの右上角または [ファイル] メニューに [フィードバックの送信] というオプションがあります。

私たちは使用環境の改善作業を継続的に行っており、ユーザーの皆さんが気に入った点、気に入らない点などのご意見をお待ちしています。

 

Renu Devi
Office Web Apps 担当 Program Manager