アプリケーションとマウスとタッチとメニューについて

WindowsのアプリケーションをとWebアプリケーションで、マウス操作がかなり違いますよね。最近ではiPadのようなタブレット端末対応も必須のような雰囲気で対応しなければいけない事が多すぎてたまりません。

それぞれのアプリケーションでの操作方法をちょっと整理してみました。

操作	Windows アプリケーション		Web アプリケーション
	マウス	タッチ	マウス	タッチ
シングルクリック	○	×	○	×
右クリック	○	×	×	×
ダブルクリック	○	×	△	×
ドラッグ	○	○	○	○
スクロール	○	○	○	○
タップ	×	○	×	○
ダブルタップ	×	○	×	○
長押し	×	○	×	○
スワイプ	×	○	×	○
ピンチ	×	○	×	○
フリック	×	○	×	○
hover, mouseover	○	×	○	×

○：使う、×：使わない、△：あまり使わない

ですが、×でも必ずできないということではありません。

さて、かなり適当になってしまいましたが、それぞれの操作をどう違和感無くリンクさせていくか。

シングルクリックとタップ、ダブルクリックとダブルタップ、ドラッグ、スクロールは問題ないでしょう。

マウスでもタッチでも操作方法が違うとはいえ直感的に使えているはずです。

スワイプとピンチについてはタッチパネル独特の操作ですので、重要な機能は割り当てないか、マウスでも出来る方法（メニューボタンなど）用意するとよいでしょう。

フリックについてもタッチパネル独特の操作ですが、マウス操作で行う場合マウスジェスチャー的な機能を実装すれば良いでしょう。面倒ですが。

残るはmouseover、hoverと右クリックと長押しなんですが、ここからがまだ長いんです。

まずはデザインのお話

とくにwebの場合、mouseover、hoverでボタンの色を変えるなどのUIを作っていることが非常に多いのですが、これがタッチ操作では出来ません。カーソル操作の視認性を上げるという意味やっていたデザインは、タッチパネル時代では、本当にデザインのみで対処しなければなりません。

MicrosoftがWindows8に搭載したModern UIのように、アプリケーションデザインを変えていかないといけません。

ここら辺も参考に　Designing UX for apps

そして機能のお話し

Windows（マウス）の場合、右クリックメニューというものを沢山使っていました。

web（マウス）の場合、右クリックが使えないので、hoverでツールチップを出したりメニューを表示させたりしました。

タッチの場合、なにかエレメントに対してメニューを出すとなると、残る操作は長押ししかないんですよね。iOSやAndroidでもそんな感じになってますね。

 じゃあどうすんのさ？

デザインのほうは、がんばってとしか言いようがない・・・。

 webアプリの場合、hoverと長押しでサブメニュー表示にしておくことにしました。

これでPCのマウス操作と、タブレットなどからのタッチ操作で機能が共有できます。

実際に実装する場合、Hammer.jsなどのスクリプトを使ってやるのが便利でしょう。 

通常のスクリプトとjQueryのプラグインとあります。

これを使えば、

• タップ
• ダブルタップ
• スワイプ
• 長押し
• ピンチ
• ドラッグ

のイベントが取得できるようになります。

使い方はwikiに載ってます。

長々と書きましたが、

web開発って、すごく便利になってきてはいるけれど、かなり効率悪いよね・・・。

という心の叫び。

jQueryのドーナツ本、CSSのホップ本、お勧めです。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~