この投稿は6年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2011 年 2 月 16 日 2,233日前)
3,127文字 (読了時間7分)

SPONSORED LINK

マウスオーバーによるドロップダウン
マウスオーバーによるドロップダウン

現在受託案件で細々と食いつなぎつつミニコ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. ドロップダウンを廃止する

Appleのナビゲーション
Appleのナビゲーション

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

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

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

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

Amazonは地味に挙動を変える
Amazonは地味に挙動を変える

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

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

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

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

WordPressの管理画面
WordPressの管理画面

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

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

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

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

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

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス [書籍]

著者Douglas Crockford

クリエーター水野 貴明

出版社オライリージャパン

出版日2008 年 12 月 22 日

商品カテゴリー大型本

ページ数198

ISBN4873113911

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2011 年 2 月 16 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

私にはポルノの定義はできないが、見ればわかる。

— ジャレド・ダイアモンド

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。