UIデザイン(ユーザーインターフェース)パターンの基礎を学ぼう！

UIデザイン(ユーザーインターフェース)パターンとは、ユーザーにとっての使い勝手を良くするための型のことをいいます。このレッスンではUIデザイン(ユーザーインターフェース)パターンとは何か、そしてその代表的なパターンをいくつか取り上げていきます。

• タブ
• カルーセル
• アコーディオンメニュー
• プッシュ通知
• モーダルウィンドウ
• まとめ

サイト内タブ

タブとは画面の表示をページ遷移することなく切り替えるためのものです。

たとえば東京・大阪・北海道に店舗がある美容室という場合で例を見てみましょう。上記例では一覧ページにタブが設置されています。現在選択されているタブは東京都というタブです。東京のタブを選択している状態だと東京にある店舗一覧のみが表示されます。タブを北海道などに切り替えるとその土地の店舗一覧が表示されるという事ですね。

このタブというものは、設置しているページから動くことなくタブエリア内の表示のみが切り替わるというものです。ですので上記例で言うと、タブを切り替えても詳細ページやトップページに移動することはないという事です。

https://news.nifty.com

上記は「ニフティニュース」というサイトです。タブの切り替えでカテゴリごとのニュース一覧を見ることが出来ます。では「タブ」を使う際の注意点について確認していきましょう。

選択されていないタブ

選択されていないタブの情報は切り替えなければ見えないという事です。サイト内で特に重要であるコンテンツが、切り替えなければ見られないというのはユーザーの離脱を招く恐れがあります。ですので、最初から開いておくタブにはユーザーの興味を引く可能性の高いものを置きましょう。

タブのタイトル

タブタイトルです。冒頭のイメージ図でいえば、東京都などの地名の部分ですね。このタイトル部分は、どのような情報がそのタブ内にあるのかユーザーが簡単にわかるような文言にしましょう。

分かりやすさ

タブであると分かりやすいデザインを心がけることです。

上記例を見てみましょう。左は選択されているタブと、されていないタブで色が分けられています。それに対し右は全てのタブの色が同じです。これは簡単な例ですがこのように、一目でタブであると分かるデザインで設計しましょう。

カルーセルとは

カルーセルとは横方向にコンテンツがスライドしていく仕組みです。たとえば、以下の「エークラスミュージック株式会社」では複数の画像をカルーセルで表示しています。このように複数の大きな画像も、最小限の範囲しか使わず表示できます。

http://a-class-m.com/

以下は「GYAO!」という動画サイトです。作品のページへのバナーがカルーセルで表示されています。バナーもカルーセルで表示する事で、１つ１つのサイズを大きめにすることが出来ます。

https://gyao.yahoo.co.jp/

では、「カルーセル」を使う際の注意点を確認していきましょう。

全コンテンツ数と現在地

カルーセルで表示されるコンテンツはいくつあるのか、ユーザーに示す必要があるでしょう。先ほどの２つのサイトでもコンテンツの下に、小さな丸をコンテンツ数分設置しています。

これは、沢山のコンテンツを見てもらえるようにという目的があるかと思います。また、２枚目の画像をもう一度確認したいという時などは、全てのコンテンツの居場所が分かっている方が利便性が高いでしょう。

カルーセルでコンテンツをスライドさせる方法

カルーセルでコンテンツをスライドさせる方法は大きく２種類あります。１つは、自動でスライドさせる。もう１つは手動でクリックすることでスライドさせる方法です。手動の場合は、左右に矢印等のボタンを設置するとよいでしょう。

コンテンツの順番と数

コンテンツの数が多すぎると、すべてのコンテンツを確認するまで時間がかかります。そのため、表示される順番が後ろのものはユーザーに見てもらえる可能性は低くなってしまいます。ですので、重要なものからスライドを開始して数も抑えましょう。

アコーディオンメニューとは

アコーディオンは、コンテンツをタイトルごとに振り分けて、折りたたみ式に表示する方法です。

以下のイメージは「SEIYUドットコム」というネットスーパーのアコーディオンメニューです。タイトル部分をクリックすると、属するコンテンツへのリンクが表示されます。もう１度タイトルをクリックすることで、折りたたまれます。

https://www.the-seiyu.com/front/contents/top/ns/

また、以下は「ウィキペディア」です。PCから閲覧するとアコーディオンではありません。しかし、スマホからの閲覧だとアコーディオンメニューになっています。

PC表示のアコーディオンメニュー

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8

スマホ表示のアコーディオンメニュー

このように、コンテンツ量が多い場合はアコーディオンメニューがよく使われます。特にスマホは画面が小さいですよね。ですので、アコーディオンにすることで無駄なスクロールが不要になります。ユーザーが必要であるものだけ、展開し詳細を確認できます。では「アコーディオンメニュー」を使用する際の注意点を見てみましょう。

アコーディオンメニューを折り畳み式だと知らせる

一目で展開できるものだと分からなければ、ユーザーは目的のページへたどり着けません。明確にユーザーに示す必要があります。たとえば、タイトルに矢印などの記号を付ける方法です。

開いているときと、閉じているときで記号を変えると更に分かりやすくなります。また、最初から１つ展開しておくのもよいでしょう。

アコーディオンメニューを使う基準とは

アコーディオンはユーザーによって必要な情報が異なる場合に有用なものです。先ほどの「SEIYUドットコム」というネットスーパーを例に考えてみましょう。

ネットスーパーに訪れるユーザーはそれぞれ購入したい商品が異なりますね。あるユーザーは野菜を、あるユーザーはお菓子をという感じです。

この場合に、チョコレート・グミというような細かいカテゴリを表示させてしまうと、とても見ずらくなってしまいます。または、カテゴリ分けされたナビゲーションを１つずつページ遷移し進んでいくのも手間がかかります。

しかしアコーディオンは、閉じているタイトルをユーザーが全て展開して確認する可能性は高くないと思われます。仮にすべての情報を確認したいというユーザーが居たとしても、アコーディオンを１つずつ全て展開するのは不便ですね。

ですので、コンテンツの内容とユーザーの目的を見極めることが必要です。また、そのうえで使い勝手を考慮して判断していくことが大切です。

Webサイト内でのプッシュ通知

プッシュ通知はスマホアプリなどでよく使われています。アップデートやイベントなどをユーザーに知らせるために使用されます。また、アプリだけではなくWebサイトでも使用できます。以下は「ameba fresh!」というサイトのプッシュ通知です。

https://freshlive.tv/

これまでユーザーに新着情報などを知らせるには、メールマガジン等が使われてきました。しかし、メールマガジンを受け取るためにはアドレスなどの情報をフォームから送る必要があります。

手間がかかるので登録するユーザーは多くはないでしょう。それに対しプッシュ通知は１クリックで登録できます。ユーザーの手間が省けていますね。

モーダルウィンドウとは

モーダルウィンドウは、操作を行わなければページの操作が出来ないという小窓です。以下は「Google ドキュメント」というサイトです。

https://www.google.com/intl/ja_jp/docs/about/

作成したドキュメントの「名前の変更」を行おうとすると、以下のようなモーダルウィンドウが表示されます。

ページ遷移して以下のページに行くわけではありません。上記イメージのページに居たまま以下の小窓が表示される仕組みです。このモーダルウィンドウ内の「OK」か「キャンセル」のどちらかをクリックしないと、上記ページの一切の操作が出来ません。

モーダルウィンドウを使う基準

今いるページから移動し、何らかの操作を行い、元のページに戻るという事が想定される場合があるでしょう。上記「Google ドキュメント」でいえば、名前の変更を行った後はドキュメント一覧に戻ることが想定されます。

ドキュメントを開くにしても、削除を行うにしても１度一覧に戻る必要があるからです。この場合、名前の変更を一覧ページに居たままモーダルウィンドウ内で行った方が手間がかかりませんね。

しかし、モーダルウィンドウを使いすぎると逆に手間がかかってしまいます。必要のないウィンドウでもキャンセルをクリックしないとページ操作が行えないためです。コンテンツの内容や、ユーザーにとっての使い勝手を考えたうえで使いましょう。

まとめ

UIデザインパターンとは、ユーザにとっての使い勝手を良くするための型のことです。そして、タブとは画面の表示をページ遷移することなく切り替えるためのものです。

また、カルーセルとは横方向にコンテンツがスライドしていくものであり、アコーディオンは、コンテンツをタイトルごとに振り分けて、折りたたみ式に表示する方法です。

モーダルウィンドウは、操作を行わなければページの操作が出来ないという小窓のこと指します。