WordPressでFont Awesomeの三本線メニューをやめてみた

あの三本線だけのアイコンがメニューだと最初は誰が気付くでしょうか。三本線(=ハンバーガーメニュー)をやめよう、そういう動きが出始めています。それに大いに納得はしたものの、じゃ代わりにどうすればいいのって思って試行錯誤した末、自分でメニューアイコンを作って置き換えました。

ハンバーガーメニューをやめよう。

ABテストの結果、どのメニューが一番効果があったのか

ハンバーガーメニューに関するテストは2014年のABテストがすでに最終結果を出しています。最初のテストが“Mobile Menu AB Tested: Hamburger Not the Best Choice?”、そして最終版が“Hamburger vs Menu: The Final AB Test”です。

三本線だけのアイコンとMENU文字だけのアイコンでどちらがクリックされたかを調べたところ、MENUボタンはハンバーガーアイコンよりも20%以上もクリックされたそうです。

20160515w1

出典:Hamburger vs Menu: The Final AB Test

結論としては

メニューボタンは文字を枠線で囲ったシンプルなものが一番良いということになっています。

ちなみに三本線とメニューの文字と枠線が一緒にある画像もテストされていますが、三本線が入っていないほうがクリック率が高かったそうです。

それを踏まえてアイコンを作っていくと………

いままで三本線を置いていたところに代わりに置く画像

横長のものが置けない場合、仕方なく三本線を入れたものを使うことにして、一応2つ作りました。自分の個人のサイトだしフォントアイコン化はしなくていいだろう、と圧縮したPNGを使っています。

icon009light

icon100pxlight

これを、いままでハンバーガーメニューがあった場所に設置すればOKというわけです。

ABOUTこの記事をかいた人

Akila

FF14、Fate/Grand Order、ファルコムシリーズ、ペルソナシリーズなどをプレイしています。策士で毒舌で中性的な美少年と、魔法使いのお姫様たちが好きです。
FF14(Durandal鯖):Akila Septterian
同人活動・同人誌通販はこちら
★メッセージはtwitterからくださるとはやいです。