ブログにハンバーガーメニューは絶対に必要ないと思う単純な理由
さて、数日前から僕のブログに存在している謎の古代兵器を守る正体不明の球体兵器ブリオンこと、「ハンバーガーメニュー」。今回はこいつの深い業と、クリック率の関係を探っていきながら、改善案を模索していこうと思います。
どっちかっていうとサンドイッチメニュー感あるな
うるせえブログに余談挟むなって言ってんだろ
クリックされないにも程があると噂のハンバーガーメニュー
きっかけになったのは上の記事。僕の大好きなブリオンことハンバーガーメニューは、想像以上に業の深い生物だったらしい。
上記の2記事を要約するとこんな感じだ。
ハンバーガーメニューは使われない。三本線からは、"情報の匂い"がしない。
誰もそのメニューを押すことによって得られるものが分からないからだ。ハンバーガーメニューを実装するのであれば、普通にグローバルメニューを実装した方が良い。
実際そうなのか？検証してみた
ことPC版に関しては、間違いなくそうだと確信している。まず僕本人が使わないというのもあるが、私見すぎると思ったので実際に検証した。
検証したのは、WIRED、BuzzFeed、GIZMODO、Gigazine、All about、NAVERまとめの7つのメディア。選考理由はサルワカさんの記事で人気メディアとして取り上げられて居た為。結果として、ハンバーガーメニューをPC版に採用しているのはWIREDのみということが分かった。
スマホ版には必要かも？
しかし、スマホ版になると、ハンバーガーメニューの使用率はグンと上がる。
先ほどはWIREDのみが採用していたハンバーガーメニューだが、スマホ版になると、NAVERまとめ、All about、GIZMIDOの3メディアが加わるという結果になった。7分の1から7分の4になったという事実から、スマホ版に実装する分には良いのかもしれない。
ブログにハンバーガーメニューは必要なのか
https://dribbble.com/shots/1633262-Hamburger
有志によって"no more humburger icons"のフレーズとともに、過激なアニメーションまで製作されている。
さて、僕はブロガーだ。記事タイトルにもある通り、今回の記事はブログに焦点を絞っている。記事タイトルにも書いてあるが、ハンバーガーメニューはブログには必要ない。
まず、ブログの直帰率は滅茶苦茶良くても70%、直帰率80%ならいいじゃない！みたいな世界だ。90%なんて普通だし、別に悪い数字ではないと思う。そんな世界で、ただでさえ"使われない"と言われているハンバーガーメニューを実装するメリットはほぼない。
表示すべきものは殆どない
カテゴリーはブログの一番最初に表示すべきだと思っている。グローバルメニューは最初から見える。わざわざよくもわからない三本線に隠す必要はない。
キュレーションサイト等は別かもしれない。多くの人によって運営されるキュレーションサイトは、当然カテゴリーが増えていく。そういったサイトは、カテゴリーをグローバルメニューに積みすぎるとあまりにも見栄えが悪いし、逆に見づらくなる。
だが、ブログはどうだろうか。わざわざよく分からない三本線にカテゴリーを隠す必要はあるだろうか。
実際僕は使っている
こんだけ酷評しておいて難だが、みなさんお気付きの通り僕は使っている。ただ、一般的なハンバーガーメニューに少々工夫を加えている。
きっかけになったのはこちらの、ろくぜうどんさん(id:rokuzeudon)のブログ。
見てわかる！！！目立つ奴やん！！！！
というわけでサイトの核となる色を使って目立たせることに。さらにMENUの文字を追加。んでもって追尾させる。最近だとグローバルメニューをそのまま追尾させる人をよく見かけますが、全くもって使わない、しかも邪魔という理由で除外。強いて使いたい人がいるなら…という思いで実装しました。
使われないことを承知で実装するなら良いと思う
本気で使って欲しいのであれば、ハンバーガーメニューの実装は"無意味"に終わると思います。ただ、"使われない"ぐらいの気持ちで実装する分にはいいんじゃないのかな？と思うわけです。
んでもって、使ってくれる人がいればラッキーぐらいの感覚。私見も混じりますが、実際使うことってほとんどないんですよね。使ってる人まじでブロガーとデザイナーだけな気がする。
ハンバーガーメニューのクリック率をあげるカスタマイズ
とは言っても、ハンバーガーメニューのクリック率を上げたい！というのであれば、こちらの記事が参考になります。
- MENUの文字は必須
- 枠で囲むと尚良い
- 言ってもクリック率は低い
あくまで最後の、言ってもクリック率は低いは抑えて欲しい。
その上で行うべきカスタマイズは、枠を付けて、MENUという文字を追加するということ。もしあなたのブログがただの三本線のハンバーガーメニューを実装していたとすれば、今すぐ直しましょう。
というかできればハンバーガーメニューを取っ払いましょう。
改善案1：スライド式のグローバルメニューの実装
http://hitsuzi.hatenablog.com/entry/2017/05/05/204703
一番堅実な方法かなと思います。殆どのブログはこれで事足りるでしょう。
他にもこんな記事を見つけました。ぜひ参考に。
改善案2：ハンバーガーメニュー＋グローバルメニュー
先ほど言った通り、ただハンバーガーメニューのみを実装するのではなく、グローバルメニューを一緒に実装するのもおすすめです。ちなみに僕のブログはこのカスタマイズです。
改善案3：ハンバーガーメニューを改善
先ほど述べた通りですが、これは奥の手です。デザイナー的にはミニマルにしたいところでしょうが、グッとこらえて、MENUの文字を実装し、枠で囲いましょう。なんなら僕のブログみたいに目立たせましょう。
こちらの記事が参考になります。
オススメのリファレンス
天下の？サルワカさんによるハンバーガーメニュー。横からグッと引っ張られるように出てくるハンバーガーメニューです。
素敵なアニメーションを多く実装されているサイト。僕もこちらのサイトを参考に作りましたが、結構上級者向けかも。色々微調整が必要です。
こちらはもっと簡単。コピペだけで全然大丈夫ですね。
まとめ
正直使われないだろうハンバーガーメニュー。僕みたいなデザイン好きな人間が実装する分にはいいと思いますが、もし、コンテンツ重視や！！！とか読み手のことが第一や！！！という方がいれば、再考の価値があるのではないでしょうか。
ちなみに僕が右上にハンバーガーメニューを実装しているのはデザイン的に良くね？7割、もしかしたらクリックしてくれるかも3割です。
