≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。
●ハンバーガーメニューのデザインパターン
ハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から）
まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。
次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。
三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。
他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。
●アイコンだけ・文字付き・枠線付き、どれがいいのか？
さて、テストした結果ですが、実際のテストアイコンやサイトデザインは「Do Users Understand Mobile Menu Icons?」をご覧ください。以下のアイコンはイメージです。
さぁ皆さんは以下のどのメニューが一番クリックされたと思いますか？
三本線だけのメニュー・三本線の下に文字でメニュー・三本線を枠線で囲ったメニューです。
