タッチスクリーン時代のドロップダウンメニュー考察

現在受託案件で細々と食いつなぎつつミニコme!開発という絶望街道まっしぐらで気分が塞ぎがちなので、先ほど考えたことを書きます。

一つのWebサイトでどれだけ多くの閲覧環境に対応するかというのはWeb制作業界人がこぞって悩んでいるところだと思いますが、今日はグローバルナビゲーションとドロップダウンメニューについて考えてみます。

iPadのみに対応するということ

「閲覧環境が様々」とはいえ、無限のパターンに対応するのは現実的ではないなので、基本的に想定されているのはざっくりわけて以下の四つだと思います。

1. PC
2. タブレット型PC
3. スマートフォン
4. ガラケー

今回はiPadに代表されるような、「タッチスクリーンを持ったタブレット型PC」に限定して話を進めます。マウスVSタッチスクリーンというわけです。

スマートフォンはスマートフォンで、「画面解像度」という大きな違いがあるので、UI設計の段階から考えていかなければならないと思います。ガラケーはいわずもがな。ガラケーとスマートフォンは多少のコストをかけてでも専用のViewを作って対処すべしと僕は考えています。

さて、iPadは画面解像度が結構高く、960px幅で作られたWebサイトならそのまま表示できます。本文サイズが12pxとかでなければ、ストレスなく閲覧できるでしょう。あとはFlashを使わないとかですかね。

「何もしなくてもタブレット型PCには対応できる」し、別言すれば、「特別なことをしなくてもPCと同じWebサイトを見られる」のがタブレット型なわけです。ただ唯一異なる点が、ホバーアクションがないという点です。

ホバーアクション不在のUI

ホバーアクションというのは、マウスがある特定の要素に乗っかっることですね。Javascriptならmouseoverイベントがありますし、CSSでも疑似クラスとして:hoverがサポートされています。

ただし、これはマウスの存在を前提としているため、地点Aから地点Bまで移動するのに必ずしも軌跡を描かないタッチスクリーンの場合はあんまり役に立ちません。ホバーした瞬間にはクリックしている可能性が高いです。

ちょっと話はずれますが、「タブレット型PCに対応する」という前提の元では、たとえばCSSのリンク装飾についても一考の余地ありですね。

まれにインラインリンクのアンダーラインをつけないで:hoverで凝ってみせるデザイナーさんがいますが、これはタッチスクリーンの場合あんまりよろしくないと思います。確実に「これは押せる！」というデザイン（下線がついてる）にした方がよいでしょう。ここら辺はApple デブセンのiOS ヒューマンインターフェースガイドとかに書いてあるかもしれません。（うろ覚え）

他にも個人的に好きじゃない例を挙げると、はてなダイアリーのキーワードリンク機能ですかね。はてなダイアリーははてなキーワードに登録されている言葉がブログ記事中に存在すると自動でリンクを張る機能を持ってるんですが、iPadやiPhoneで読んでいるときに間違って踏んでしまうことが多いです。これも「スクロールはマウスホイールで行う」ことを暗黙裡に前提としている設計のせいかな、と。

要するに、タッチスクリーンはマウスと違って、「ポインタが画面を動き回ることはないが、クリックされることは多い」ということになりますね。

タッチスクリーンの鬼門、グローバルナビゲーション＋ドロップダウン

で、本題です。グローバルナビゲーションをドロップダウンにするというのはよくやる人もいると思います。WordPressのテーマ等でもそのようになっているものは多いです。ただこれ、iPadだと下層メニューの表示ができないんですね。ホバーがないからです。

「フッターにもリンクがある」などの代替手段があれば致命的なことにはならないとは思いますが、そもそもグローバルナビゲーションはそのサイトにとってもっとも重要な要素をまとめたものですので、そのリンクへ移動できないというのは考えものです。では、「PCサイトをiPadにも対応する」ためにはどうすればいいのかという案を3つ挙げてみます。

1. ドロップダウンを廃止する

そういやそもそもiPadの製造元であるAppleはどうなってんのかとサイトを見てみたら、そもそもドロップダウンなんか使ってないですね。これはAppleらしいです。

グローバルナビをクリックするとカテゴリーのページへ移動し、サブナビゲーションが表示されます。Mac, iPhone, iPodという強力なブランドを持つAppleならではとも言えますが、サイトの構造をしっかりわけるのがデザイン上でも有効になるパターンですね。

あと、後述しますが、ドロップダウンを自分で作れない人（Javascriptの知識がない人）はこのアプローチを検討してみるとよいかと思います。

2. タッチスクリーンの場合だけドロップダウンの挙動を変える

これはAmazonが採用しているアプローチなのですが、AmazonはiPadで見た場合、左にあるサイドメニューがホバーアクションではなく、タッチで開くようになります。Javascriptが得意な方はこれでもいいと思います。

ただし、Amazonのサイドバーのプライマリーボタンは元々リンクになってないですね。PCで閲覧した場合、「本・漫画・雑誌」をクリックしてもなにも起きません。ホバーすることで展開される下層メニューである「本」「洋書」「漫画」「雑誌」「古本」をクリックしないと下層に移動しません。これは「ナビゲーションのトップレベルはページへのリンクではない」ことが条件となります。

したがって、「トップレベルもページであり、下層もページ」というパターンには対応できないんですね。要するに、下のようなのは駄目ってことです。

3. ドロップダウンじゃなくて、Explorer風にする

こういうメニューをなんと呼ぶのか知りませんが、WordPressの管理画面にあるようなやつだとどっちがきても大丈夫です。

ボタンもあって、リンクでもあるというデザインですね。CSS的にちょっとめんどくさいですが、まあいいものを作ろうと思ったらこれぐらいはしょうがないんですかね。

ドロップダウンメニュー考察まとめ

というわけでつらつら書きましたが、要するに「モバイルコンピューティングの時代、ホバーアクションはおまけにすぎない」ってことです。マウスもキーボードと同じで機械に身体を従わせるようなところがあるので、時代に合わせて身体を作り替えていくニュータイプ向けWebサイトならともかく、一般ユーザーに広く使ってもらうためには人間の素直な身体をベースにした方がよさそうですね。

もともとこの記事を書いた発端は、ミニコme用に買ったWordPressテーマが件のドロップダウンだったからイラついたっていうだけなんですけど。