成功しているWebデザインの重要な要素
2012年04月27日 公開
まれにWebサイトを設計する上で、意外と軽視されがちというか、深く考えずにずらずらとコンテンツが横並びされるパーツ。それが『メニューバー』です。今朝色々と見て回っていたら、あぁ確かにと思った記事があったので、今回はメニューバーに焦点を当ててみようかと。
メニューバーの２つの役割
Important Elements of a Successful Web Page Design
（成功したWebページデザインの重要な要素）
この記事をみてはっと昔を思い出した訳です。
10年前にさかのぼると、私も結構いい加減な仕事をしていた時期がありました。
というのも、私のWeb制作は全て独学であり、学校ではCADを教わったくらいで・・・。
WindowsPCを買ったのは18歳で、そこからネットにはまり、本屋をあさって学んだ訳です。そのころのネット接続といえば従量制だったので、ネットで気軽に調べるなんて事もできませんでしたから、本がまさに生命線でした。
Webサイトというのはコンテンツの集約です。ただそこにクライアントを挟むとコンテンツではないものまで作る事になります。ようするに、そのWebサイトが果たすべき役割に対して、ユーザーにとって邪魔になるようなコンテンツです。
実際に邪魔になるコンテンツは、ヘッダーの重要なパーツに入れるのではなく、フッターなどに追いやるのが賢明な判断です。コンテンツ量そのものが少ない場合は、サイドバーだけ生かしてメニューバーを消してしまうとかという方法もありますよね。
ただ、ヘッダーラインを占領するメニューバーには、メニューとしての機能のほかに、そのサイトがなんのサイトなのかを一瞬で伝える役割を持っています。
では、どうやってそのページを一瞬でどんなサイトであるかをユーザーに伝えて、ユーザーが的確にリンクをi判断して、リンクをクリックしてもらうのか、という課題について考えてみます。
失敗その１
これはもうやっちゃあかんなーって普通に考えればわかりますが、メニューバーにあるリンクと、サイドバーにあるリンクを同一の物を使ったケース。
なんせページの作成が8ページほどで、コンテンツ不足が否めない上に、クライアントからなんとしてもヘッダーとサイドバーを埋めてくれという無茶ぶりに断る事ができないペーペーだった頃、やっちゃいました。
これ、Webサイトを訪れるユーザーからしてみたら、めんどくさい事この上ないんですよね。
サイドバーはあくまでも、そのページからさらに詳細へ飛ぶときに利用するのがセオリーなので、サイト全体を包括するようなリンクを並べるのは、単にユーザーを迷子にさせる原因になります。
失敗その２
メニューバーの果たす役割の一つとして、そのサイトが何であるかが一瞬でわかるという重要な仕事をします。
上のリンクで紹介されていたものです。
designknock.com
seizedesign.com
両方とも、ほぼ同じデザインでは有るのですが、コンテンツを色で分けているのと、もう一点がメニューバーのキーワードで、そのブログの内容が一目で分かるというところです。
これらのメニューバーは、そのサイトがなんで有るかを示す役割もこなしています。
ここで紹介されているのはブログですが、Webサイトでも、自社のサービス、自社製品を紹介する事が最大の目的として運営している場合は、ユーザーにとって、そのサイトが何であるかを一瞬で理解してもらう事は、「ユーザーにとっての価値」につながります。
これらは全てコンテンツに対する一貫性を約束する事が重要です。
例えばイカ専門店で
イカそーめん、イカケーキ、いちご大福入りゲソ、挨拶
となるのは好ましく有りません。
ユーザーは、ここには製品が並んでいると考え、挨拶という製品があるのかと間違ってしまう可能性もあります。この場合、どんな製品なのかと期待したユーザーのがっかり感は凄まじいです。ユーザーを裏切ってはいけないという事ですね。
失敗その３
メニューバーが果たす役割が、上記のようにサイトの内容がわかるように設計するという事であれば、そのキーワードをいかにチョイスするかも重要になってきます。
美容化粧品→ピンとくる
美容ファンデーション→さらにピンとくるけど、その他のメニューも同レベルに細分化が必要になる
美容の家→？
美しくなる→ん・・・？
ユーザーに考えさせてしまうと、それだけで極端にクリック率が低下します。
例えばポップなサイトカラーを使用して
- ファンデーションの部屋
- 化粧水の館
- シャンプーステーション
的確なキーワードを付けるだけで、ユーザーの離脱率も変わります。ユーザーはそのキーワードが自分に合っていないと判断した場合、次に自分に合うキーワードを、ページ内をスクロールして探そうとします。
しかし制作者は「探すならメニューはクリックされるだろう」と勝手に決めつけ、サイト内では別のコンテンツに力を入れてしまう事も多々あります。
ですから、いかにしてメニューをうまく、効率よくクリックしてもらえるようにするかを課題として考えなければいけないのです。
失敗その４
多くのWebデザイナーがメニューで失敗するとすれば、それはデザインに目がいきがちという事です。
あらゆるメニューのサンプルをみて、いろいろなデザインを勉強します。この事については全く間違ってはいないのですが、そこに書いてあるキーワードについては、全く無視して勉強する人が、大量にいます。
海外では色々なサイトのメニューをまとめた記事が定期的に出てきますが、本当にWeb屋が見るべきは、メニューの内容ではないかなと。どんなキーワードを使っているのか、果たして自分がそのサイトを利用したときに、そのメニューが役割を果たしてくれるのか。この辺に注目して学んでみると、また違った視点を持つ事が出きるんじゃないかなと思います。
機能しているサイト
これは上で紹介した記事で書かれていた事ですが、Appleが上げられていました。
apple.com
多少意訳しますと以下のように。
本当にごく当たり前の説明といえばそれまでですが、確かに考える必要がなく求めているものへの情報にたどり着く事ができるんですよね、Appleのサイト。ストアでは全てのApple製品、提供している全ての付属品について詳細を選ぶ事ができる。iPodには、音楽愛好家のための、iPod、iPod touchに関しての詳細を得る事ができる。iPhoneでは最新の4Sのバージョンの詳細を得る事ができる。iPadでは、新しいiPadについての全てを取得し、サポートでは、アップル社のサポートを得る事ができる。
メニューバーがユーザーにとって理解する事が簡単であれば、ユーザーは何度でも訪れるでしょう。
ただし、これは全ての商品が売れている、知られているからこそできるわけです。
例えば今だあまり理解されていないようなバイオ燃料のような製品の場合は、製品名をメニューバーにのせても意味がありません。
この場合は、結局消費者の立場にたって、バイオ燃料を知る事がお得であるという部分から攻めたりします。
年間1万を節約できる燃料、といったキャッチコピーを考えたりする事の方が重要になったりするんですよね。このあたりは、そのサービス、製品に合わせて、そしてユーザーの視点に合わせて考えていく必要があります。
理解しやすい、わかりやすいメニューは、確かにユーザーをもう一度そのサイトへ足を運ぶきっかけとなります。
Webサイトを作成する時、もう一度だけメニューを見直してみてはいかがでしょうか。
それでは、また。