とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

スマホサイトナビゲーションはどうしてる?ハンバーガーメニュー問題

スマホサイトのハンバーガーメニュー問題
スマホサイトでよくみかける

ハンバーガーメニュー。

 

コンテンツ、メニューが多いサイトでは

ナビゲーションの配置が悩ましい。

デザインがむずかしい。

 

スマホの限られた幅のなかでナビゲーションを

どう設置するかで悩むことが多いと思います。

 

ハンバーガーメニューだらけ

ハンバーガーメニューだらけ

優れたスマートフォンサイトデザイン集 - iPhoneデザインボックスのスクリーンショット

 

もうどのサイトでも見かけるので、

ハンバーガーメニューは市民権を獲得して

誰にでも認知されているもの、とも言えなくないのかな。

 

多くのメニューをハンバーガーメニューで

展開するかたちは、

もっとも簡単な解決方法だとは思いますが、

ハンバーガーメニューはタップされないのでは

という疑惑もありますよね。

スマホのナビゲーションは本当にむずかしい。

 

スマホでもグローバルナビゲーションのように

メニュー展開しているサイトも多くあります。

 

フッタにグロナビを展開しているユニクロ

フッタにグロナビを展開しているユニクロ

 

このユニクロのようにいくつかの代表的な

ナビゲーションとハンバーガーメニューを

設置するのがひとつの解なのかなとも思います。

 

でもこれの正解は、サイトによって違いますね。

データ解析から答えを出す、というのが正解だと思います。

ハンバーガーメニューを設置して、

利用されているのか、データを解析してみる。

 

リテラシーが低いユーザが多いサイトでは

ハンバーガーメニューのアイコンの意味がわからずに、

タップされないかもしれません。

 

若者向けのサイトなどではハンバーガーメニューでも

スマホネイティブ世代だったら難なく使われるだろう

と予想できます。

 

まずやってみる、

だめだったら別の方法を考える

 

というのがWebサイトのデザインを

正解にもっていける一番の近道なので、

ナビゲーションに迷ったらデータ解析から

答えをだしましょう。

 

ハンバーガーメニューの議論は尽きませんが、

当然ですが鉄則や正解はない、というところですね。

参考サイト、まとめておきます。

 

uxmilk.jp

uxmilk.jp

ferret-plus.com

u-site.jp

coliss.com

photoshopvip.net

photoshopvip.net

webta

gigazine.net