UIデザインパターンと呼ばれる、ユーザーにとっての使い勝手を良くする（ユーザーインターフェースを向上させる）型があります。
このレッスンではその代表的なUIデザインパターンをいくつか取り上げていきます。
UIデザインパターンについて学び、ユーザーインターフェースをしっかりと考慮したWebデザインを作っていきましょう。
サイト内タブ
タブは画面の表示をページ遷移することなく切り替えるためのものです。
1画面に収まりきらない情報、あるいは同時に見せるべきではない複数の情報のまとまりを表示させる際に使用します。
例として「じゃらん」サイトを見てみましょう。下図の特集部分では「イチオシ特集」のタブが選択されています。
お得なツアーを探している人であれば、隣の“お得情報”タブに切り替えることで表示されているバナーの内容が変わります。
このタブというものは、設置しているページから動くことなくタブエリア内の表示のみが切り替わるというものです。ですので上記例で言うと、タブを切り替えても詳細ページやトップページに移動することはないという事です。
上記は「ニフティニュース」というサイトです。タブの切り替えでカテゴリごとのニュース一覧を見ることが出来ます。
では「タブ」を使う際の注意点について確認していきましょう。
選択されていないタブ
選択されていないタブの情報は切り替えなければ見えないという事です。サイト内で特に重要であるコンテンツが、切り替えなければ見られないというのはユーザーの離脱を招く恐れがあります。ですので、最初から開いておくタブにはユーザーの興味を引く可能性の高いものを置きましょう。
タブのタイトル
タブタイトルです。冒頭のイメージ図でいえば、東京都などの地名の部分ですね。このタイトル部分は、どのような情報がそのタブ内にあるのかユーザーが簡単にわかるような文言にしましょう。
分かりやすさ
タブであると分かりやすいデザインを心がけることです。
上記例を見てみましょう。右は選択されているタブと、されていないタブで色が分けられています。それに対し左は全てのタブの色が同じです。これは簡単な例ですがこのように、一目でタブであると分かるデザインで設計しましょう。
カルーセルとは
カルーセルとは横方向にコンテンツがスライドしていく仕組みです。
たとえば、以下の「エークラスミュージック株式会社」では複数の画像をカルーセルで表示しています。
このように複数の大きな画像も、最小限の範囲しか使わず表示できます。
以下は「GYAO!」という動画サイトです。作品のページへのバナーがカルーセルで表示されています。バナーもカルーセルで表示する事で、１つ１つのサイズを大きめにすることが出来ます。
では、「カルーセル」を使う際の注意点を確認していきましょう。
全コンテンツ数と現在地
カルーセルで表示されるコンテンツはいくつあるのか、ユーザーに示す必要があるでしょう。先ほどの２つのサイトでもコンテンツの下に、小さな丸をコンテンツ数分設置しています。
これは、沢山のコンテンツを見てもらえるようにという目的があるかと思います。また、２枚目の画像をもう一度確認したいという時などは、全コンテンツ数、現在表示されているコンテンツがどれか分かっている方が利便性が高いでしょう。
コンテンツをスライドさせる方法
カルーセルでコンテンツをスライドさせる方法は大きく２種類あります。１つは、自動でスライドさせる。もう１つは手動でクリックすることでスライドさせる方法です。手動の場合は、左右に矢印等のボタンを設置するとよいでしょう。
コンテンツの順番と数
コンテンツの数が多すぎると、すべてのコンテンツを確認するまで時間がかかります。そのため、表示される順番が後ろのものはユーザーに見てもらえる可能性は低くなってしまいます。ですので、重要なものからスライドを開始して数も抑えましょう。
アコーディオンメニューとは
アコーディオンは、コンテンツをタイトルごとに振り分けて、折りたたみ式に表示する方法です。
下図は「GU公式オンラインストア」で使われているアコーディオンメニューです。親カテゴリー名をクリックすると、属する子カテゴリーが表示されます。もう１度カテゴリー名をクリックすることで、折りたたまれます。
また、以下は「ウィキペディア」です。
こちらはコンテンツがブロックごとにアコーディオンに収納されています。PCから閲覧するとアコーディオンが開いた状態、スマホからの閲覧だとアコーディオンが閉じた状態で表示されますね。
PC表示のアコーディオン
スマホ表示のアコーディオン
https://ja.m.wikipedia.org/wiki/%E3%83%AB%E3%83%8D%E3%82%B5%E3%83%B3%E3%82%B9
このように、コンテンツ量が多い場合はアコーディオンがよく使われます。
特にスマホは画面が小さいですよね。ですので、アコーディオンにすることで無駄なスクロールが不要になります。ユーザーが必要であるものだけ、展開し詳細を確認できます。
では「アコーディオン」を使用する際の注意点を見てみましょう。
アコーディオン(折り畳み式)だと知らせる
一目で展開できるものだと分からなければ、ユーザーは目的のページへたどり着けません。明確にユーザーに示す必要があります。たとえば、タイトルに矢印などの記号を付ける方法です。
開いているときと、閉じているときで記号を変えると更に分かりやすくなります。また、最初から１つ展開しておくのもよいでしょう。
アコーディオンメニューを使う基準とは
アコーディオンはユーザーによって必要な情報が異なる場合に有用なものです。
先ほどの「GU」オンラインストアを例に考えてみましょう。
訪れるユーザーはそれぞれ購入したい商品が異なりますね。あるユーザーはレディース服のみを、あるユーザーはキッズTシャツだけを見たいかもしれません。
この場合に、レディースのシャツ>長袖やメンズのボトム>ショートパンツなど細かいカテゴリまで全て表示させてしまうと、とても見ずらくなってしまいます。または、カテゴリ分けされたナビゲーションを１つずつページ遷移し進んでいくのも手間がかかります。
こうした場合にアコーディオンメニューは見たい部分だけを開いて確認することが出来るので、便利です。
しかし、閉じているタイトルをユーザーが全て展開して確認する可能性は高くないと思われます。仮にすべての情報を確認したいというユーザーが居たとしても、アコーディオンを１つずつ全て展開するのは不便ですね。
上図は「GU」オンラインストアのスマートフォン表示です。
タブとアコーディオンパネルの両方が使われ、すべての商品を見たいユーザー向けに「すべて」という項目も用意されています。
このようにアコーディオンを使用する際には、コンテンツの内容とユーザーの目的を見極めることが必要です。
そのうえで使い勝手を考慮して判断していくことが大切です。
Webサイト内でのプッシュ通知
プッシュ通知はスマホアプリなどでよく使われています。アップデートやイベントなどをユーザーに知らせるために使用されます。
また、アプリだけではなくWebサイトでも使用できます。
楽天などプッシュ通知をマーケティングに活用しているサイトもあります。
これまでユーザーに新着情報などを知らせるには、メールマガジン等が使われてきました。
しかし、メールマガジンを受け取るためにはアドレスなどの情報をフォームから送る必要があります。
手間がかかるので登録するユーザーは多くはないでしょう。
それに対しプッシュ通知は１クリックで登録できます。ユーザーの手間が省けていますね。
モーダルウィンドウとは
モーダルウィンドウは、操作を行わなければページの操作が出来ないという小窓です。
以下は「Google ドキュメント」のサイトです。
作成したドキュメントの「名前の変更」を行おうとすると、以下のようなモーダルウィンドウが表示されます。
ページ遷移してこのページに行くわけではありません。
上記イメージのページに居たまま以下の小窓が表示される仕組みです。
このモーダルウィンドウ内の「OK」か「キャンセル」のどちらかをクリックしないと、上記ページの一切の操作が出来ません。
モーダルウィンドウを使う基準
今いるページから移動し、何らかの操作を行い、元のページに戻るという事が想定される場合があるでしょう。
上記「Google ドキュメント」でいえば、名前の変更を行った後はドキュメント一覧に戻ることが想定されます。
ドキュメントを開くにしても、削除を行うにしても１度一覧に戻る必要があるからです。この場合、名前の変更を一覧ページに居たままモーダルウィンドウ内で行った方が手間がかかりませんね。
しかし、モーダルウィンドウを使いすぎると逆に手間がかかってしまいます。必要のないウィンドウでもキャンセルをクリックしないとページ操作が行えないためです。コンテンツの内容や、ユーザーにとっての使い勝手を考えたうえで使いましょう。
◆実習：フロントページを修正する
前回作成したフロントページのレイアウトを、カルーセルを取り入れたものに修正してみましょう。
修正したいのは下記、写真３枚を表示する予定の【キッズスペース完備で安心】部分です。
この状態だと、どことなく収まりが悪いですよね。
ここを、時間経過で画像が切り替わっていくレイアウトに変更します。
テキストは画像の上に配置することにしました。
かなりスッキリしたのではないでしょうか。
下の「おすすめヘアスタイル」との間隔が空きすぎてしまうので、同じくらいの余白になるように調整したら完成です。
まとめ
UIデザインパターンとは、ユーザにとっての使い勝手を良くするための型のことです。そして、タブとは画面の表示をページ遷移することなく切り替えるためのものです。
また、カルーセルとは横方向にコンテンツがスライドしていくものであり、アコーディオンは、コンテンツをタイトルごとに振り分けて、折りたたみ式に表示する方法です。
モーダルウィンドウは、操作を行わなければページの操作が出来ないという小窓のこと指します。