ブログ

そのサイト、スマホの使い勝手どうでしょう?〜メニューボタン編〜

hamburger

今日は、エム・フィールド広島オフィスのかみーゆです。
スマホが普及してきたおかげでサイトの使い勝手(ユーザビリティ)も一昔前と変わってきたと最近しみじみ感じております。
そこで我々が常日ごろお客様の目線に立って、制作で気をつけていることをお話しします。

メニューボタンがわかりにくい!と思ったことありませんか?

スマフォではできるだけコンパクトにするため表示するための情報は最小限にしてあることが多いです。
そのため、メニューボタンをタップしてナビゲーションを表示するサイトも少なくないと思います。

hamburger01

実は、こういうメニューボタンを実装したサイトよく見かけませんか? 
いわゆる「ハンバーガーメニュー」といいますよね。

上下がバンズ(パン)、真ん中がハンバーグなどの具といったところでしょうか?

スマホのメニューボタンに上のようなデザインが多用され始めた頃、まだデザイン的に浸透しきっておらず「あの三本線なんなんだ?」という感じでした。

さらに激白しますと、実はとてもデザイン的に好きになれませんでした。

だいぶ浸透してきたとはいえ、今でもどの世代でも使いやすいというと正直「?」です。
うちの母親に見せたら間違いなく「この『三』てなにー?」と聞かれそうです笑

このメニューアイコンを使ったボタンは大抵グローバルナビといった全体の要となるメニューを出現させるためのとても重要な役割を担ってます。

ところがこのアイコンを使った世の中の多くのメニューボタンは、わかりにくさのあまりタップされずに一生を終えることもあると聞きます。しかもこのアイコンがわかりにくいせいで、メニューにたどり着けなかったユーザーが、サイトから離脱するという最悪の結果になることもあるそうです。

私たち制作側は少しでもユーザーに「これはメニューボタンなんだよ」ということがわかりやすいようにしてあげる必要性があります。
たとえば。。。。

マークの下に補足説明でmenuのラベル付け

必ずしもそのアイコンが世間に一般に浸透しているわけではありません。小さな文字でも構わないのでラベルを追加します。
これで、どの世代でもこのアイコンが何を示しているのかわかりやすくなりましたね!

hamburger02

ボーダーで囲むなどしてどこまでタップしたらいいのかをはっきりさせる

まだラベルをつけた程度だと、どこまでタップしていいかわからない、これはテキストなのかボタンなのかというのもまだわかりづらいです。

そこで、ボーダーで囲んだり色をつけて周りの色とのコントラストをつけてどこまでがボタンなのかを明確にしてあげると、わかりやすくなります。

hamburger03

何よりも肝心なのはタップできるサイズかどうか

iOS、Androidではボタンの最小サイズを48x48pxを推奨してます。
48x48pxだと一応かよわい女子の私の人差し指で少しはみ出す程度です。

男性だと人によっては最小サイズでもギリギリかなーと思います。

他のボタンとの距離を十分にとり誤操作がないようにする必要もありますね。
私なんかも家でゴロゴロしながらスマホでネットサーフィンしている時、タップなどの操作しにくいと感じると一旦離脱してしまうこともあります。

まとめ

今回はスマホサイトでのユーザーの使い勝手について、メニューボタンを例に挙げてみました。

ボタンが一目で「メニューボタン」とわかること、「タップしやすいサイズ」ということが肝になってきます。
サイト全体のデザインとのバランスもありますが、サイトを閲覧するのはお客様。
使い心地の良いサイトを提供できるよう心がけていきたいものです。

もしスマホサイトの離脱率が多いようなら、一度メニューボタンのデザインを見直してみませんか?

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. hirofuro-eyecatch-8 ヒロフロデザイン部『webデザインの情報交換会』4/1開催します…
  2. Hirofuro-logo-8 「広島フロントエンド勉強会Vol.8」開催レポート
  3. hanami3 オフィスでエア花見をしたよ
  4. news_study 第0回 Webデザイナー女子会「デザどき」に参加してきました。
  5. coaching コーチングの自己分析「ジョハリの窓」をチーム全員でやってみた
  6. Hirofuro-logo-8 「広島フロントエンド勉強会 Vol.9 & デザイン部 Vol.…
  7. Hirofuro-logo-8 広島フロントエンド勉強会 & 広島Unity勉強会 特…
  8. Hirofuro-logo-8 「広島フロントエンド勉強会Vol.6」開催レポート 〜CSS&豆…

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP