ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
スペースを活用！メガメニューを使用した国内参考サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っている猫が私の近くに寄り沿って来なくなり、猫肌恋しい今日この頃です。 さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。 ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト（特に国内サイト）が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか？ かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
