スマホメニューのデザインについて少しばかり考えてみた
2017年2月5日 コーディング
あけましておめでとうございます。
2016年度、ほぼ記事を書いていなかったWriter.Gです。
いつぶりの記事更新になるのか自分でもよくわかりませんが、2017年はなんとか頑張って書きたいと思います。
あ、先月会社辞めて独立しました。
日々勉強しないと生き残っていけない世界だと思うので、しっかりと勉強します。そのアウトプットがブログ記事という形になればベスト。
頑張ります。
そもそもなんでメニューって必要なんだろうか
スマホメニューのデザイン
「なんとなく」
になってませんか？
僕はスマホメニューのデザインは毎回ほぼ一緒です。右上にバーガーボタンを設置、クリックでドロップダウンするというメニューのソースコードをコピーして使いまわしていました。
サイトごとに大差ないスマホメニューは、特に深く考えたことが無い人がほとんどなのではないでしょう。僕のように毎回同じレイアウトのものを使いまわしてる人も多いはず。
ただ、細かく見ていくとちょっとした違いはあります。この機会に”なにが最適か”について考えてみると良いのかも？
ユーザーを目的のコンテンツへ導く
まずサイトに訪れた人には、そのサイトを利用して達成したい”目的”があります。
「アクセス情報をみたい」
「問い合わせをしたい」
「自分好みの商品を検索したい」
それらの目的を達成するために、ユーザーを導いてあげる役割を持つのがメニューです。
逆に目的のページまでなかなか辿り着けなければ大きなストレスを感じますし、サイトから離脱する原因にもなります。スマホの限られた画面スペースだからこそ、削ぎ落した要素の中で使い勝手の良さを実現することは実は難しい事です。。
サイトの全体像を把握できる
「メニュー」というのはサイトに訪れた人にまず、どういったページ構成であるかを伝えます。全体像を把握することができれば、自分が求めている情報にたどり着く方法の見当がつくこととなります。
次に、上記の目的を達成するために、スマホメニューにはどのような種類があるのか見てみましょう。
メニュー表示の3種類
まず、メニューの表示について、3パターンに分類。
アコーディオン（ドロップダウン）
ドロワー（横スライド）
モーダルウィンドウ
他にも特徴的なメニューや、厳密には違うパターンのスマホメニューはあるのですが、だいたいはこの3パターンに分類できるかと思います。
様々なスマホサイトを見ていると圧倒的にドロップダウン型が多いですね。次いでドロワー。その次がモーダルでした。
モーダルは少数派ですが、アニメーションが凝ってたり作りこんだサイトに採用されているケースが多いように感じました。
「メニューがどこからでてくるか」というのは、ユーザビリティー上とくに差は生まれないと考えています。上からだろうと横からだろうとフワッと現れようと表示されるメニューは同じならば。
ただユーザーは常にたくさんのサイトに触れてサイト回遊の作法を無意識のうちに日々学習しています。
そのため僕は、”多数派”を選ぶことが、直観的に操作できてユーザーにとってストレスが小さいと考えています。そのため現状だと、多数派のドロップダウンを選択するのがベターなのではないでしょうか。
メニュー「ボタン」について
そんな大きく変わる部分ではないですが、よくよく見比べると微妙な違いがあります。
ユーザーが直観的に且つストレスフリーに操作できるようにするためには、こんな細部への考慮も無駄ではないはずです。
ハンバーガーボタン
文字ボタン
ハンバーガー+文字
アイコン
参考：リボンブラ｜ワコール
ハンバーガーボタンが良くない説
上記のようにいくつかあるスマホメニューの表記。
この中でも圧倒的に多いタイプ3本線の「ハンバーガーメニュー」が実は良くないという説があります。
実際にいくつかのメニューパターンでABテストをおこない、「クリック率が低い」という結果も出ているのです。それはなぜなのか。
参考：ハンバーガーメニューのデザイン問題が決着！ABテスト7パターン結果
今ではだいぶスマホでのメニューとして認知されたこのボタンですが、まだまだこの3本線を「メニューだ」と認識することができないユーザーがいるからだと思われます。僕らにとって当たり前でも、それが当たり前でない人もいるのです。
ユーザーがストレスなく操作できるスマホデザインというのは、直観的に要素の意味を理解することができることが必須条件です。
日常からスマホサイトを回遊していない人にとって、”直観的に”ハンバーガーボタンを「メニュー」だと認識できないのであれば、そこにストレスが生まれます。迷ってしまっては、そこはクリックされません。
現状では「メニュー」などと文字を添えてあげることで、ユーザーの理解度とノンストレスな操作に役立つようです。
個人的に好きなサイト
自分の好き嫌いなのではありますが、色々なスマホサイトを見ながら、個人的に気に入ったスマホメニューを紹介します。
株式会社グッドライフ
http://goodlife-inc.co.jp/
ひとつひとつのアニメーションが気持ちいいです。
ドロップダウンで降りてくるのは一般的ですが、動きに強弱がついている所謂イージングが程よい。
ドロップダウンが降りきった後に、リストメニューが反発するように下から上に跳ね上がるところ。ハンバーガーボタンが×に変わり、メニューを閉じるときに一度捻りながら元に戻る感じとか、いちいちお洒落です。
二子玉インターナショナルスクール（NIS）
http://nicotama-is.org/
ボタン自体はハンバーガーメニュー。
ただ押した後に背景が動くのは独特。ロゴと背景が動き、イージングで良い感じに収まるメニュー画面は、素敵です。
まとめ
こう見てみても、スマホメニューには大差は無いです。
アニメーションなどでしか違いは作れないでしょうし、ユーザーを困惑させないためにも一般的な形に習って実装した方が良いと思います。
ただ、細かい部分を見てみると、ボタンが3本線だったり文字だったりの違いがあり、その僅かな違いでクリック率が大きく変わるといったデータも出てきています。
スマホ対応はPCほど確立していません。スマホ自体の歴史が浅いからです。
ただ、今後スマホがインターネット閲覧のスタンダードとなる時代であることから、スマホ画面をいかに研究して作りこめるかが重要なこととなってくるはずです。
スマホデザインについて、細かい点であっても考察を積み重ねていきたいと改めて思いました。
