こんにちは。
スマホファーストの時代をむかえ、Webサイトをどのようなデバイスからも、いかにストレスなく閲覧してもらうことができるかということについて、僕たちは深く考え、さまざま配慮しなければならなくなっています。
Webサイトの閲覧、つまり「見る」ということにおいて、スマートフォンがデスクトップやラップトップとおおきく異なっているのは、スクリーンのサイズです。iPhoneにも6 Plusが登場し、スクリーンサイズは徐々におおきくなっているとはいえ、かぎられたスクリーンサイズのなかで、Webサイトをどう「見せる」かということは重要なポイントです。とりわけ、ナビゲーションのあつかいには、これまで以上に配慮が必要になってくるでしょう。
僕は、スマートフォンで見られることを視野にいれた場合、ナビゲーションはシンプルでじゃまにならないことがだいじだと考えています。その意味で、タテにならんでスクリーンを占領してしまうグローバルナビゲーションはおすすめできません。
Webサイトの性格によってはマルチレベル・ナビゲーションを採用しなければならない場合もあることを考えると、やはりプルダウンタイプ(変則的にスライドタイプ)のナビゲーションのなかから選定するということになるのではないかと思います。
ということで、僕からは、2種類のナビゲーションを紹介させていただきます。
1)Drop-Down Navigation(リンク)
HTMLとCSSによるプルダウンタイプのシンプルなナビゲーションです。フラットデザインを採用していますので、Bootstrapをベースにした Webサイトとも相性がいいと思います。
2)jQuery.mmenu(リンク)
プラグインを読み込んで使用するスライドタイプのナビゲーションです。これは、ふだんスマートフォンを使い慣れているユーザーを対象とした Webサイトにむいていると思います。また、スマートフォンのスクリーンサイズになっても、つねに右サイドに画面の一部が見えるように設計されていますので、ユーザーが今どこにいるのか迷うこともありません。
いずれにしても、ナビゲーションにはこれを使わなければいけないということではなく、Webサイトのデザインや特性などを考え合わせて、いちばんフィットするナビゲーションを選定していけばよいのではないかと僕は考えています。
MAYAKOさんも、さまざまなナビゲーションを(A/Bテスト的にチーム内などで)試してみて、よりよいものを選定していけばよいのではないでしょうか。
【提案的なおまけ】
じっさい、僕たちがスマートフォンを操作(とくにタッチ)するとき、どこにナビゲーションがあると便利なのかを考えてみると、新たなアイデアがうかんできます。
じつは、片手で操作する場合などは、キーボードの位置がそうであるように、スクリーンの半分より下にタッチするものが現れたほうがいいということがあります。
それをふまえると、下にナビゲーションがあるというのもアリなのではないでしょうか。僕は、今後はそうした人間工学的なことに配慮がされているナビゲーションの設計がとても重要になってくるのではないかと考えています。
ちなみに、こちら(リンク)は、そうしたことを実験的に検証しているサイトです。よろしければ、ごらんください。
以上、関係のないことも書かせていただきましたが、ご参考いただければ幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/25 23:31