ブログ

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

hamburger

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

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

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

hamburger01

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

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

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

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

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

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

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

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

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

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

hamburger02

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

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

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

hamburger03

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

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

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

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

まとめ

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

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

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

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

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

関連記事

  1. オープン記念のイラスト サンタさんからクリスマスプレゼントが届いたよ
  2. color-code_play02 RGBを脳内調合して札を取れ!「COLOR CODEかるた」で遊…
  3. perspective_tips_10 イラレの遠近グリッドで3D風のイラストを描く方法「車編」
  4. japanese-flower-tutorial-title-8 Illustratorチュートリアル 和風「ねじり梅」の描き方
  5. How-to-make-ribbon-in-Illustrator-8 【初心者向け】イラレでリボン作成 ワープで簡単変形!
  6. mitene566ec83f-5ffe-402c-b7ff-dd34677a2c6b 広島で最先端のアートに触れる「チームラボアイランド」へ行ってきま…
  7. blog_twitter 東京と地方はどっちが仕事しやすい?
  8. Google-auto-mail-return-8 Googleフォームの自動返信機能を追加する(前編)

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP