メニューのUIデザイン
皆さん、こんにちは！
今回はUI・UXデザインについてです。
UI・UXデザインとは
まずは、UI・UXデザインとは何か簡単におさらいしましょう！
おさらい不要！な方は、メニューのUIデザインからご覧ください。
UIはユーザーインターフェースの略称で、ユーザーとの接点のことです。
デバイスのボタンやキーボードなどの物理的なものから、ディスプレイに表示されるボタンや画面もインターフェースに含まれます。
このインターフェースを使いやすくすることをUIデザインと呼びます。
UXはユーザーエクスペリエンスの略称で、ユーザーの体験のことです。
ユーザーがサービスを利用して、得られた体験や経験などのすべて指すものが、エクスペリエンスです。
ユーザーがサービスを通して得る体験や経験を設計することをUXデザインと呼びます。
メニューのUIデザイン
では、本題に入りましょう！
今回はバチャこみのメニューUIデザインについて考えていきます。
メニューを作る上で押さえておきたいポイント
まずは、メニューのUIデザインを考える上で重要なポイントを押さえておきましょう。
①サイトやアプリの操作を手助けする機能
②理想はメニューのみで機能をすべて把握できるようにする
メニューは、最初にユーザーが頼るナビゲーターの立ち位置です。
何の機能があるのか分かりにくく、ユーザーに探させてしまうデザインは避けたいですね。
メニューの改善
では、実際にバチャこみを例にして考えてみましょう！
本サイトのメニュー項目は以下です。
・トップページ
・新規登録
・ログイン
・店舗一覧
・3D版
※「ファシリテーターの方はこちら」はログインで統一するため、無くします。
トップページはロゴに紐づけるとして、メニューとして表示する数は4つとしましょう。
一般的な画面サイズ（1920×1080）でご覧いただく分には、すべての項目を出しても問題なさそうです。
上記の情報を踏まえて、デザイン変更してみましょう！
色々変わってしまっていて情報が多いのですが…
メニューにご注目ください！
すべての項目を画面上部に表示しました。
忘れちゃいけない！スマホの場合
メニューを考える上で忘れてはいけないのが、
スマートフォンの場合の表示の仕方です。
PCよりもスマートフォンでの閲覧傾向が高い今、スマートフォン版のデザインを考えることはとても重要ですね。
参照：【2022年】モバイル対PC市場シェア＆利用状況に関する統計
スマートフォンの場合はスペースが限られているので、メニューを隠すハンバーガーメニューが一般的です。
ハンバーガーメニューを採用しているサイトやアプリは多いので、
ユーザー側が既に「メニュー」だと認識している点も大きいですね。
特にメニューの項目数が多い場合は、採用されることが多いです。
今のままでも良いですが、変更するとしたらこうでしょうか？
ハンバーガーメニューのUIデザインでは、以下を意識するとより良くなると思います。
①メニューを開いた際の動きやアイコンの変更
②誤タップ防止に十分なスペースの確保
ハンバーガーメニュー以外に、もう1パターン考えてみましょう！
メニューが少ない場合、すべてを表示するデザインも有効です。
ユーザーの操作が少なく、一目見て分かることが強みです。
全体のデザインに影響がなければ、アイコンを追加するとより分かりやすいでしょう。
ここまで実例を見ていただきましたが、最後にもう一度、メニューを作る上でのポイントを押さえておきましょう！
①サイトやアプリの操作を手助けする機能
②理想はメニューのみで機能をすべて把握できるようにする
いかがでしたか？
世の中には良いデザインのサイトやアプリが溢れていますので、
まずは自分がユーザーとして経験をしていきたいですね。
次回も具体例を挙げながら、UI・UXデザインについてお話する予定です！
お楽しみに！