2018年05月01日

デザイン探索

「スマートフォンのメニュー」について

皆さんこんにちは。
アシスタントクリエイターの村本です。

伝わるデザインついて、瞬時に判断していくための内容を書き綴ります。
デザインや、レイアウトについて試行錯誤する際の基盤となる内容です。

今回は「スマートフォンのメニュー」についてです。

■スライドメニュー
画面の左側(もしくは右側)からスライドして、上下いっぱいにメニューが表示されるタイプ。
スマートフォンの画面サイズでも、多くのメニューを配置することができます。
また、トップページをシンプルに作成することができ、最新の情報や、紹介したいコンテンツの範囲を大きく取ることができます。
注意点:
上下いっぱいにメニューが表示されるため、メニューの数が少ないと、下部に余白が生じます。その場合はドロップダウンメニューにするか、ヘッダーにメニューバーを設置することも検討した方が良さそうです。

■モーダルウィンドウ
一時的に画面いっぱいにメニューウィンドウを表示するタイプ。
メニュー操作に限定されるため、強く注目してもらうことができます。
注意点:
逆に言うとメニュー操作以外の行動が一時的にできなくなってしまいます。
初めて訪れるユーザーや、サイト全体を巡回したいユーザーには扱いづらいと感じるかもしれませんので留意しておく必要があります。

■スプリングボード
グリッド状にメニューアイコンを並べるタイプ。
コンテンツが探しやすく、操作に迷わずユーザーを誘導することができます。
ユーザーとしては見た目がキレイな印象です。
注意点:
メニューアイコンの配置がメインとなるため、トップ画面に最新情報や、紹介したいコンテンツを配置することが難しくなります。

■タブ型メニュー
画面上部のタブでメニューを切り替えるタイプ。
たくさんの情報を切り替える際に有効です。ページ遷移しないため、移動の易さもあります。
注意点:
メニューの数が多いと、選択するタブの範囲が狭くなり操作しづらくなります。

-まとめ-
携帯アプリだけでなく、Webサイトにおいてもモバイルファーストで設計することが多くなります。
ユーザーをキャッチするデザインも大事ですが、ユーザーが求めるコンテンツにスムーズに導くことが重要です。
どのメニューが一番良いとうことではなく、サイトに適したメニューを選択できるように考えましょう。