ハンバーガーメニュー関連の記事一覧



タイトル落ち。CSS Nite新潟版での鷹野さんのネタですが。


「ごうどう」で変換すると、ハンバーガーメニューのような「≡」に変換されるというものです。



Wikipediaで「合同記号」のページを見ていたら、合同記号には一番上の線がチルダ(~)になっているものもあるのですね。

20150611-合同記号-01

画像出典:合同記号(Wikipedia)


記事の続きを読む




20150609-ハンバーガーメニューのABテスト-00

スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。



●ハンバーガーメニューのデザインパターン

ハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から)

まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。

20150609-ハンバーガーメニューのABテスト-01


次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。

20150609-ハンバーガーメニューのABテスト-02


三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。

20150609-ハンバーガーメニューのABテスト-03


他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。



●アイコンだけ・文字付き・枠線付き、どれがいいのか?

さて、テストした結果ですが、実際のテストアイコンやサイトデザインは「Do Users Understand Mobile Menu Icons?」をご覧ください。以下のアイコンはイメージです。


さぁ皆さんは以下のどのメニューが一番クリックされたと思いますか?

三本線だけのメニュー・三本線の下に文字でメニュー・三本線を枠線で囲ったメニューです。

20150609-ハンバーガーメニューのABテスト-04 20150609-ハンバーガーメニューのABテスト-05 20150609-ハンバーガーメニューのABテスト-06

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索