センサー
Windows
設計

Ultrabook™ デバイスおよびタッチ対応デスクトップ・アプリケーションの設計

同カテゴリーの次の記事

ナチュラル・ユーザー・インターフェイス (NUI) API を利用したデスクトップ向けアプリケーションの開発

この記事は、インテル® デベロッパー・ゾーンに掲載されている「Designing for Ultrabook™ Devices and Touch-enabled Desktop Applications」の日本語参考訳です。

Windows* 8 とインテルの Ultrabook™ のようなタッチ対応コンピューターの登場により、アプリケーションやソフトウェアを新しい方法で操作できるようになりました。これまでタッチは、専用のソフトウェアを必要とする特定デバイスに限定されていましたが、最近では多数のメーカーがこの新しい入力方法に対応したデバイスを製造しています。

Ultrabook™ はタッチだけでなく、ラップトップ形式のキーボードとトラックパッドも備えており、従来の使用法にも対応しています。そのため、ユーザーはこれまでのようにキーボードを使用することも、タッチ操作で入力することもできます。

スマートフォンとタブレットの普及に伴い、タッチの能力と制限事項を考慮した設計が求められています。この記事では、タッチがユーザー・インターフェイスの設計へ与える影響について考察し、インタラクションと優れたユーザー体験を促進するソフトウェア開発のガイドラインを紹介します。

タッチ

タッチ入力自体は新しいものではありません。最初のタッチベースのアプリケーションは 1990 年代前半に登場しましたが、主要なデバイスで採用できる手頃な価格になったのは最近のことです。タッチ対応アプリケーションの開発は以前はめずらしかったものの、最近のスマートフォンはほとんどタッチベースであり、ユーザーもそれを受け入れています。タッチベースの最初のシステムとして新たに構築された Windows* 8 は、タブレット、デスクトップ、またはラップトップに関係なく、さらに多くのデバイスで搭載されることが予想されます。

ユーザーは、Ultrabook™ のタッチスクリーンを自然な形で使用することができるでしょう。スクリーン上のボタンは、タップするだけで、マウスでクリックしたときと同じように動作します。同様に、ピンチしてズームイン/ズームアウトしたり、タッチしてドラッグすることでコンテンツをパンしたり、ジェスチャーに対しても想定どおりの反応が得られるでしょう。

タッチは、機能豊富なマシンに新たな可能性をもたらします。

タッチ可能かどうか

ユーザーは入力方法の 1 つとしてタッチを利用できる場合もあれば、デバイスのキーボードが使用できなかったり、デバイスにキーボードがないためタッチしか利用できない場合もあります。マウスでポイントしてコマンドやアクションを表示するような、マウスの動作に依存するアプリケーションは、タッチでは利用することができません。タッチでも利用できるようにするには、コントロールをタッチに適した大きさにし、想定される使用法に応じて適切な位置に配置する必要があります。

タッチ向けの設計では、ビジネスにおける重要性と費用対効果 (ROI) のバランスを考慮して、どれだけの時間とリソースを費やすべきかを決定しなければなりません。例えば、顧客向けアプリケーションのほうが、少数のユーザーが使用する社内アプリケーションよりも ROI が高くなる傾向にあります (ただし、ビジネスにとって重要な社内アプリケーションの場合はこの限りではありません)。

Microsoft* は、次のようなタッチ対応アプリケーションのカテゴリーをいくつか定義しています。

  • タッチ可能: コントロールは、タッチのみの環境で適切に機能するのに十分な大きさ (これは、最低 23×23 ピクセル (6mm) と言われています) であり、誤って選択しないようにコントロールとコントロールの間には十分な間隔をとります。アプリケーションは、スクロール可能な領域を移動できるように、またホバーを使用しなくても済むように、フリックやパンのようなシステム・ジェスチャーを認識します。
  • タッチ対応: 使用頻度の最も高いコントロールは 40×40 ピクセル (10mm) 以上で、関連するジェスチャー (ピニング、ピンチ、ズーム、回転) をサポートします。基本的なマルチタッチ操作が実装されており、想定どおりに動作します。
  • タッチに最適化されている: 無駄を最小限に抑えて、ユーザー体験を最大化するようにコンテンツが見直されています。タスクは、画面のタッチしやすい位置に配置されたコントロールを使用して実行します。インターフェイスでは、慣性や弾みのような高レベルの対話特性を使用します。

既存のアプリケーションをこの新しい環境へ移植する場合、少なくともタッチのみの環境でアプリケーションが動作するようにタッチ可能にすべきです。どれだけの投資が適切かを判断するため、タッチ向けにオペレーティング・システムの設計を見直した際に決められた方針と、デスクトップへの適用方法を見てみましょう。

タッチの設計方針

2011 年の Build カンファレンスで、Windows* 8 の設計者は、タッチをファースト・クラス・オブジェクトにするフレームワーク開発において実際に彼らが採用した次のような方針について述べました。

自然で直感的: タッチ入力では、ユーザーが画面をタッチしてオブジェクトやコントロールを選択および操作します。つまり、エンドユーザーは特別なトレーニングを受けなくてもアプリケーションを利用することができます。例えば、Ultrabook™ の優れた機能の 1 つは、タッチパスワードを作成し、それを使用してログインできることです。これは、個人設定が可能なだけでなく、他の認証モードよりも迅速かつ安全です。

直接的で魅力的: コントロールにタッチすることで、インターフェイスの別の領域にあるものではなく、そのコントロールを直接操作し、ユーザーにフィードバック (サウンドやバイブレーションを含む) を返します。慣性や弾みのような特性は、現実に即した、よりリアルな体験を実現します。

例えば、画面を横切るようにコントロールをフリックするとイメージが動き、最終的に摩擦と慣性により静止します。コントロールを画面上の動作対象外の領域へ移動したり、サポートされていない動作が行われると、コントロールは少し移動しますが、すぐに元の位置に戻ります。

可搬性と一貫性: アプリケーションは業界標準に準拠し、一貫性のある方法でジェスチャーを実装すべきです。ジェスチャーと操作は、異なるアプリケーションでも同じように動作しなければなりません。例えば、ピンチ・ジェスチャーはズームアウト (コントロールを小さくする)/ズームイン (コントロールを大きくする) し、タッチしてドラッグするとパン操作を実行します。新しいカスタム・ジェスチャーを作成する際、システムに同じ動作のジェスチャーがある場合は、新たに作成する必要があるかどうかをよく検討すべきです。

非侵入型: タッチに対応するコントロールは、簡単にアクセスでき、インターフェイスの設計に論理的に合致していなければなりません。操作により、タスクの完了が不明瞭になったり、妨げられたりしてはなりません。

(上段左から) 長押しによる情報の表示 / タップによるプライマリ操作 / スライドによるパン / スワイプによる選択、コマンド、移動
(下段左から) ピンチとストレッチによるズーム / 指を違う方向に動かすことによる回転 / 端からのスワイプによるアプリコマンドの表示 / 端からのスワイプによるシステムコマンドの表示

出典: Building Windows 8 ブログ – タッチ・ハードウェアと Windows* 8

タッチの制限

タッチではピンポイントで正確に選択することはできないため、コントロールのサイズと間隔を十分に大きくする必要があります。また、アクションやタスクの完了がホバー (マウスオーバーなど) に依存するコントロールを使用すべきではありません。タッチには、次のような制限事項があります。

  • マウスやポインターは特定のピクセルを選択できるほど正確に対象を指定できますが、タッチはそうではありません。ユーザーが選択できるように、タッチターゲットは十分に大きく、他のコントロールとの間に十分な間隔が必要です。例えば、画面にテキストを手入力する場合、画面に触れている部分を確認することはできません。この場合、ほかのテキスト入力モードを使用したほうが効率的でしょう。

  • 画面上に大きなコントロールを配置し、オプションのキーボードを表示すると、コンテンツを表示できる領域が小さくなります。
  • ホバーが利用できない場合は、ホバーに依存するコントロールを見直す必要があります。
  • テキスト、入力、選択の扱いがより難しくなります。
  • オンスクリーン・キーボードはコンテンツが利用できる領域を減らします。

  • タッチには寛容性がなければなりません。ユーザーが誤って画面に触れたときに、回復不可能な破壊的動作を行うべきではありません。

タッチは自然な方法で簡単にアプリケーションを操作できるようにするもので、利用可能な唯一の入力デバイスであることもあれば、複数ある中の 1 つであることもあります。タッチおよびジェスチャー・イベントは OS によりマウスイベントに変換されるため、マウスをサポートしているアプリケーションはタッチ対応アプリケーションに変換しやすいものの、アプリケーションがキーボードやマウスの利用可否に依存することはできません。

タッチターゲットのサイズ

入力手段であるタッチについて最初に気付かされることの 1 つは、選択デバイス、つまり人間の指はマウスポインターやペンよりも大きいということです。指の大きさは、子供が約 8mm、プロのスポーツ選手では 18mm 以上にもなります。平均は 11mm ～ 15mm の範囲です。

ガイダンス

タッチのターゲットサイズは、タッチ可能な大きさ、最低 23×23 ピクセル (約 6mm) でなければなりません。スピン・コントロール (9×15 ピクセル) のような一部のコントロールは小さすぎてタッチできないため、別の方法で表現します。

コントロール間の間隔も広くとったほうが良いでしょう。リンクや選択肢が近すぎると、ユーザーが誤って別のオプションをクリックする可能性が高くなります。コントロール間の間隔はできるだけ広くすることを推奨します。

可

良

ツールバーアイコンのデフォルトのサイズ (16×16 ピクセル) ではタッチするのが困難なため、より大きなアイコンを使用し、選択しやすいようにアイコン間の間隔を広くすべきです。可能であれば、間隔は 5 ピクセル以上にすると良いでしょう。さらに、ツールバーに含めるコントロールの種類 (ドロップダウン・リストやテキストボックスなど) を考慮して、適切に動作する大きさにします。

タッチのみのデバイスでは、メニューのコマンド間の間隔が狭くなりがちです。デフォルトの間隔は 7 ピクセルですが、これに 4 ピクセル追加するとメニューを操作しやすくなります。OS のネイティブ機能を利用することで、操作の一貫性を保持し、アプリケーションの実装にかかる労力を軽減することができます。

これらのガイドラインに沿うのが難しい場合は、リボンの利用を検討してください。リボンは Microsoft* Office 2007 で登場したタッチ・フレンドリーなコントロールで、ボタンサイズと構成を選択できるため、複雑な状況にも対応できます。例えば、Windows* Explorer は標準のリボンを利用して、ファイルのコピーや名前変更のようなよく使用されるコマンドはすぐに見つけられるようにし、あまり頻繁に使用されないコマンドは直感的に簡単な方法でアクセスできるようにしています。下のスクリーンショットから、最もよく使用されるコマンドには大きなアイコンが設定されていることが分かります。

リボンは折りたたむ (最小化する) こともできます。そのため、必要ないときは非表示にすることができます。ユーザーが必要に応じて簡単に見つけて操作できるように、ボタン、チェックボックス、コンボボックス、その他のコマンドをリボンに追加できます。

局所性 – コントロールの配置

これまで開発者は、ハードウェアの制限に対してアプリケーションが対応しなければならず、利用するレイアウトの数を制限してきました。標準の横長の向き (1024×768 画面サイズ) でコントロールを配置するだけで、ほとんどの場合アプリケーションは問題なく動作しました。タブレットと Ultrabook™ は簡単に向きを変えられるため、コントロールのレイアウトを固定すると、画面上でタッチしやすい領域とそうでない領域がでてきます。また、タブレット向けのコントロールの配置は、ラップトップには適していないことがあります。

このような場合は、アダプティブ・レイアウトを使用すると良いでしょう。XAML などのマークアップ言語で作成されたアプリケーションは、レイアウトコンテナーを使用して、コントロールを常にユーザーに近い位置に配置することができます。物理キーボードなど利用可能な入力デバイスを検出し、最適なレイアウトを判断して、アプリケーションが動作するデバイスに適応できるようにします。よく使用するコントロールは、配置とそのイメージを区別しやすくすると良いでしょう。例えば、ユーザーが保存をタップするつもりが、誤って削除やキャンセルをタップしないようにする必要があります。

複数のレイアウトの設計

設計者は、ユーザーの実行環境に対してソフトウェアが適応できるようにする必要があります。つまり、ソフトウェアが適切に動作することを保証するため、(解像度ごとにすべての入力方法によるテストも含め) 各解像度をテストしなければなりません。

これは、テストシナリオの数を増やしますが、異なる操作モードを認識することで、ユーザーが期待する使用方法にソフトウェアが対応できるかどうかが分かります。

システム・コントロールとジェスチャー

Windows* 8 では、特定の機能や動作にアクセスする共通の場所として、画面の余白がオペレーティング・システムによって使用されます。例えば、画面の右端からスワイプするとチャームが表示され、左端からスワイプするとアクティブなアプリケーションが表示されます。これらのシステム・ジェスチャーの近くにコントロールを配置することは避けるべきです。

  • チャーム – 画面の右端からスワイプすると Windows* 8 でサポートされている検索、共有、スタート、デバイス、設定を含む標準の機能が表示されます。
  • アプリケーション・スタック – 画面の左端からスワイプするとアクティブなアプリケーションのサムネイルが表示され、アプリケーションを切り替えることができます。
  • アプリケーション・バー – 画面の上または下端からスワイプすると、アクティブなアプリケーション用のコマンドを含むアプリケーション・バーが表示されます。ただし、デスクトップ・モードの場合、デスクトップがアクティブなためアプリケーション・バーは表示されません。

応答性

動作を実装する場合、アプリケーションが瞬時に応答するようにすべきです。アプリケーションからの応答が遅いと、ユーザーはアプリケーションがジェスチャーや操作を認識していないのではないかと考えます。タッチは直接的かつ魅力的であるべきです。そのため、動作を実装する際、複雑な処理はできるだけバックグラウンドにオフロードします。

膨大な時間や処理が必要な複雑なアニメーションは、別のスレッドで実行することを推奨します。また、アニメーションの最後に詳細なレンダリングを行うようにします。

コンテンツ

コントロール・サイズを大きくし、コントロール間の間隔を広くすれば、当然 1 つの画面に表示できるコンテンツ領域は狭まります。これは必ずしも悪いことではありません。これにより、特定の操作における主要なデータを見極められます。あまり重要ではない細部を排除したり、またそれらを別の画面に移動してスムーズなナビゲーションを提供することで、必要なものだけを画面に表示し、アプリケーションの使いやすさを向上できます。

シンプルなことは良いことです。ここで大事なのは、アプリケーションの目的を維持するには何が重要かを識別することです。それぞれの状況でユーザーが画面上で必要とするものを決定できることで、コンテンツに優先度を付けることができます。場合によっては、現在選択されているコントロールのコンテキストから、それぞれの状況で表示すべきものとそうでないものを判断するのに役立ちます。

まとめ

多くの Windows* 7 アプリケーションは Windows* 8 でも動作しますが、すべての機能が完全に動作するとは限りません。ホバーやピクセル単位での正確なポイントおよび選択に依存するアプリケーションをタッチ入力のみのデバイスで使用する場合、タッチを考慮して設計と統合を見直す必要があります。

アプリケーションにより異なりますが、どれほどの投資が適切かをよく考えて決定すべきです。最低でも、タッチ入力のみの環境をサポートできるように、適切なサイズのコントロールを使用してアプリケーションをタッチ可能にします。インターフェイスは、タッチの原則であるコントロールのサイズ、間隔、配置を考慮し、不要なものを除外したクリーンなものにします。

最後に、タッチは優れた入力方法ですが、Ultrabook™ ではタッチのほかにもキーボードとマウスを利用できます。「できるからといってそうすべきではない」という格言のとおり、タッチが最適な場合はタッチを使用し、ほかの入力方法のほうが適している場合はそれらを使用すべきです。アプリケーションを設計する場合は、フォームファクターと使用パターンを考慮してコンテンツを配置します。これに関しては、参考になるビデオと記事をご覧ください (「参考文献」を参照)。

タッチ対応の Ultrabook™ は、ラップトップの使用法を変える優れたデバイスです。新しい機能の利点を活用し、タッチ対応のアプリケーションを開発する方法を模索してください。

参考文献

この記事を執筆するため、次の情報を参考にしました。

コンパイラーの最適化に関する詳細は、最適化に関する注意事項を参照してください。

関連記事