成功しているWebデザインの重要な要素

  • 2012/04/27
  • このエントリーをはてなブックマークに追加

スポンサーリンク

ヘッダーメニューバー
まれにWebサイトを設計する上で、意外と軽視されがちというか、深く考えずにずらずらとコンテンツが横並びされるパーツ。それが『メニューバー』です。今朝色々と見て回っていたら、あぁ確かにと思った記事があったので、今回はメニューバーに焦点を当ててみようかと。
IT/Web業界に強い転職サイトGreen

メニューバーの2つの役割


Important Elements of a Successful Web Page Design
(成功したWebページデザインの重要な要素)

この記事をみてはっと昔を思い出した訳です。

10年前にさかのぼると、私も結構いい加減な仕事をしていた時期がありました。
というのも、私のWeb制作は全て独学であり、学校ではCADを教わったくらいで・・・。

WindowsPCを買ったのは18歳で、そこからネットにはまり、本屋をあさって学んだ訳です。そのころのネット接続といえば従量制だったので、ネットで気軽に調べるなんて事もできませんでしたから、本がまさに生命線でした。

Webサイトというのはコンテンツの集約です。ただそこにクライアントを挟むとコンテンツではないものまで作る事になります。ようするに、そのWebサイトが果たすべき役割に対して、ユーザーにとって邪魔になるようなコンテンツです。

実際に邪魔になるコンテンツは、ヘッダーの重要なパーツに入れるのではなく、フッターなどに追いやるのが賢明な判断です。コンテンツ量そのものが少ない場合は、サイドバーだけ生かしてメニューバーを消してしまうとかという方法もありますよね。

ただ、ヘッダーラインを占領するメニューバーには、メニューとしての機能のほかに、そのサイトがなんのサイトなのかを一瞬で伝える役割を持っています。

では、どうやってそのページを一瞬でどんなサイトであるかをユーザーに伝えて、ユーザーが的確にリンクをi判断して、リンクをクリックしてもらうのか、という課題について考えてみます。

失敗その1


これはもうやっちゃあかんなーって普通に考えればわかりますが、メニューバーにあるリンクと、サイドバーにあるリンクを同一の物を使ったケース。
なんせページの作成が8ページほどで、コンテンツ不足が否めない上に、クライアントからなんとしてもヘッダーとサイドバーを埋めてくれという無茶ぶりに断る事ができないペーペーだった頃、やっちゃいました。

これ、Webサイトを訪れるユーザーからしてみたら、めんどくさい事この上ないんですよね。
サイドバーはあくまでも、そのページからさらに詳細へ飛ぶときに利用するのがセオリーなので、サイト全体を包括するようなリンクを並べるのは、単にユーザーを迷子にさせる原因になります。

失敗その2


メニューバーの果たす役割の一つとして、そのサイトが何であるかが一瞬でわかるという重要な仕事をします。
上のリンクで紹介されていたものです。

designknock.com
designknock

seizedesign.com
seizedesign

両方とも、ほぼ同じデザインでは有るのですが、コンテンツを色で分けているのと、もう一点がメニューバーのキーワードで、そのブログの内容が一目で分かるというところです。

これらのメニューバーは、そのサイトがなんで有るかを示す役割もこなしています。
ここで紹介されているのはブログですが、Webサイトでも、自社のサービス、自社製品を紹介する事が最大の目的として運営している場合は、ユーザーにとって、そのサイトが何であるかを一瞬で理解してもらう事は、「ユーザーにとっての価値」につながります。

これらは全てコンテンツに対する一貫性を約束する事が重要です。

例えばイカ専門店で
イカそーめん、イカケーキ、いちご大福入りゲソ、挨拶
となるのは好ましく有りません。

ユーザーは、ここには製品が並んでいると考え、挨拶という製品があるのかと間違ってしまう可能性もあります。この場合、どんな製品なのかと期待したユーザーのがっかり感は凄まじいです。ユーザーを裏切ってはいけないという事ですね。

失敗その3


メニューバーが果たす役割が、上記のようにサイトの内容がわかるように設計するという事であれば、そのキーワードをいかにチョイスするかも重要になってきます。

美容化粧品→ピンとくる
美容ファンデーション→さらにピンとくるけど、その他のメニューも同レベルに細分化が必要になる
美容の家→?
美しくなる→ん・・・?

ユーザーに考えさせてしまうと、それだけで極端にクリック率が低下します。
例えばポップなサイトカラーを使用して
  • ファンデーションの部屋
  • 化粧水の館
  • シャンプーステーション
といった、メニューにかわいいアイコンをつけて表示しても、これで一目でそこに商品があるかどうかを判断する事ができません。もしかするとファンデーションの仕方を教えてくれるのかな?と、違う誤解を生む事もあります。

的確なキーワードを付けるだけで、ユーザーの離脱率も変わります。ユーザーはそのキーワードが自分に合っていないと判断した場合、次に自分に合うキーワードを、ページ内をスクロールして探そうとします。
しかし制作者は「探すならメニューはクリックされるだろう」と勝手に決めつけ、サイト内では別のコンテンツに力を入れてしまう事も多々あります。

ですから、いかにしてメニューをうまく、効率よくクリックしてもらえるようにするかを課題として考えなければいけないのです。

失敗その4


多くのWebデザイナーがメニューで失敗するとすれば、それはデザインに目がいきがちという事です。
あらゆるメニューのサンプルをみて、いろいろなデザインを勉強します。この事については全く間違ってはいないのですが、そこに書いてあるキーワードについては、全く無視して勉強する人が、大量にいます。

海外では色々なサイトのメニューをまとめた記事が定期的に出てきますが、本当にWeb屋が見るべきは、メニューの内容ではないかなと。どんなキーワードを使っているのか、果たして自分がそのサイトを利用したときに、そのメニューが役割を果たしてくれるのか。この辺に注目して学んでみると、また違った視点を持つ事が出きるんじゃないかなと思います。

機能しているサイト


これは上で紹介した記事で書かれていた事ですが、Appleが上げられていました。
apple.com
多少意訳しますと以下のように。

ストアでは全てのApple製品、提供している全ての付属品について詳細を選ぶ事ができる。iPodには、音楽愛好家のための、iPod、iPod touchに関しての詳細を得る事ができる。iPhoneでは最新の4Sのバージョンの詳細を得る事ができる。iPadでは、新しいiPadについての全てを取得し、サポートでは、アップル社のサポートを得る事ができる。
メニューバーがユーザーにとって理解する事が簡単であれば、ユーザーは何度でも訪れるでしょう。

本当にごく当たり前の説明といえばそれまでですが、確かに考える必要がなく求めているものへの情報にたどり着く事ができるんですよね、Appleのサイト。

ただし、これは全ての商品が売れている、知られているからこそできるわけです。
例えば今だあまり理解されていないようなバイオ燃料のような製品の場合は、製品名をメニューバーにのせても意味がありません。
この場合は、結局消費者の立場にたって、バイオ燃料を知る事がお得であるという部分から攻めたりします。

年間1万を節約できる燃料、といったキャッチコピーを考えたりする事の方が重要になったりするんですよね。このあたりは、そのサービス、製品に合わせて、そしてユーザーの視点に合わせて考えていく必要があります。

理解しやすい、わかりやすいメニューは、確かにユーザーをもう一度そのサイトへ足を運ぶきっかけとなります。
Webサイトを作成する時、もう一度だけメニューを見直してみてはいかがでしょうか。

それでは、また。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html