• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2018年5月01日(火曜日)  (村本 友梨)

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

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

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


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

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

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

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

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


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