問題点ではどうすれば使いやすくなるの?まとめハンバーガーメニューってなんだろう?ハンバーガーメニューという名前を知らなくても一度は見たことがあるはずです。スマートフォン向けサイトで画面上部のヘッダー部分に3本の線が並んだアイコンが配置されているのを見たことがあると思います。あれがハンバーガーメニューです!別名ドロワーメニューとも呼ばれます。3本の線がパンでハンバーグを挟んでいるように見えることからそう呼ばれています。タップすることでメニュー一覧を開くことができます。ハンバーガーメニューの他にもスマートフォン向けのメニューがありますのでよく見かけるものをご紹介します。横にスクロールでき、タブの切替によってコンテンツの中身も切り替わるメニューです。メニュー項目が表示されているので内容が把握しやすいです。横にスクロールしないと見えない項目があるので注意が必要です。ヘッダー・フッターメニューメニュー項目が表示されているので、内容が把握しやすく、1タップで画面移動ができます。横並びのメニューのため、あまり多くを並べることができません。スマートフォン向けのメニュー=ハンバーガーメニュー?レスポンシブ対応などで、スマートフォン用のメニューといえばハンバーガーメニューとお考えの方もいらっしゃるかもしれません。利用者のことを考えてハンバーガーメニューを適用してもそれがユーザビリティ(使いやすさ)の低下に繋がる場合があります。そのようなことになってしまう可能性があるのでしょうか?今一度ハンバーガーメニューのメリット、デメリットについてみていきましょう。!レスポンシブ対応についてはこちらの記事をご覧ください。・コンテンツの表示エリアを大きく取ることができるパソコンに比べスマートフォンの画面が小さいので各コンテンツへのリンクをまとめて表示してしまうとメニューがスペースを圧迫し、メインコンテンツが見にくくなってしまいます。そのため少ないスペースでメニュー表示エリアを確保できるハンバーガーメニューが普及しています。・メニューのボタンだと認識しづらい多くのサイトが3本線アイコンを使用しているため、3本線=メニューバーという認識が浸透しています。スマートフォンを持ったばかりの人や不慣れな人にはそれがメニューだと認識できない可能性があります。スマートフォンの操作に慣れた人でも配色のせいで埋もれていたらそもそも存在に気付かれない危険性もあります。メニューだと気付かれないとそれはただの無意味な画像になってしまいます。・タップしてメニューを開くまで中身が分からない各コンテンツへのリンクが格納されているため、一度タップして開かないと中身が見えません。ハンバーガーメニューを経由して各ページにたどり着くのに計2タップが必要となり、めんどうに感じてしまいます。すれば使いやすくなるの?重要なのはユーザー目線です。リンクが2つ、3つぐらいなら、横並びでの表示でも問題ないでしょう。改善策として、メニューであることが伝わるように、3本線の下に「MENU」「メニュー」と表記する方法があります。アカチャンホンポGakken重要な項目は並べて表示し、比較的優先度の低い項目はハンバーガーメニューに収納してしまうやり方もあります。吉野家ACCEAこのようにコンテンツの数や優先度に応じてナビゲーションメニューを横並び表示にするかハンバーガーメニューに収納するかを使い分け、さらにアイコンのデザインを分かりやすくすることでユーザーに親切なサイト構造になります。ハンバーガーメニューをパソコン向けメニューバーに使用する場合、パソコンはスマートフォンに比べてディスプレイサイズが大きいです。パソコン向けメニューに画面端に配置されることが多いハンバーガーメニューにすると、使いづらくなる可能性が高くなるので注意が必要です。まとめ数多くの有名企業サイトが使用しているためスマートフォン向けのメニューにハンバーガーメニューを安易に使いがちです。大切なのはユーザーがサイトを利用した際にどれだけ親切で使いやすい構造であるかです。本当にそのサイトにハンバーガーメニューは相応しいか。必要な場合、アイコンはメニューボタンだと認識できるものか。今一度ユーザーの導線を考え、誰にとっても使いやすいサイト作りを目指しましょう。「本当にウェブサイトって必要?」とご不安に思われることが多々あるかと存じます。お気軽にお問い合わせください。9:00-18:00会社案内ダウンロード会社案内のPDFをご用意しております。お問い合わせをするメールフォームからのお問い合わせはこちらから。含め、お気軽にご相談下さい。ラーラぱどプラスiPhone修理.jpMAP。