UIを向上させる、4つのWebコンテンツの表示方法（UIコンポーネント）
Webサイト、Webベージではたくさんの情報を掲載することもあります。
Webデザインでは、訪問ユーザーが自分の求めている情報を見つけやすくする、ユーザーにとっての使い勝手を良くする(ユーザーインターフェースを向上させる)ための型が使われています。
オーソドックスな4つの型について知り、UIを考慮したWebデザインに役立てましょう。
UIとは
「UI」はユーザーインターフェース（User Interface）の略で、ユーザーとサービスの接点を意味する言葉。Webデザインにおいては、ユーザーが何らかの操作を行う際の見た目や操作感、もしくはユーザーにとっての使いやすさを指す言葉としても使われています。
Webサイトには、見たいページに移動したり、フォームから申し込みをしたり、とユーザーに操作してもらう箇所も多くあります。
このためWebサイトのデザイン時には、ユーザーインタフェースが優れているか＝ユーザーにとって使い勝手の良いサイトか、を考える必要があります。
- 良いUIデザイン：スムーズに使える（目的が達成しやすい）
- 悪いUIデザイン：スムーズに使えない（目的が達成しづらい
Webデザインでユーザーインタフェース向上させるコンテンツ表示には、デザインシステムでUIコンポーネントと呼ばれる「型」が代表的です。
今回は代表的なUIコンポーネントの種類を4つ紹介します。
1.タブ(タブメニュー)
タブは画面の表示をページ遷移することなく切り替えるためのものです。
1画面に収まりきらない情報、あるいは同時に見せるべきではない複数の情報のまとまりを表示させる際に使用します。
「じゃらん」のサイトでも、タブが活用されています。
参考/画像元：https://www.jalan.net/
上図の特集部分では「イチオシ特集」のタブが選択されています。
お得なツアーを探している人であれば、隣の“お得情報”タブに切り替えることで表示されているバナーの内容が変わります。
このタブというものは、設置しているページから動くことなくタブエリア内の表示のみが切り替わるというもの。上記例で言うと、タブを切り替えても詳細ページやトップページに移動することはないという事です。
下図は「ニフティニュース」というサイトです。
タブの切り替えでカテゴリごとのニュース一覧を見ることが出来ます。
参考/画像元：https://news.nifty.com
タブ切り替えデザイン時の注意点
選択しているタブを明確にする
選択されていないタブの情報は、ユーザーがタブを切り替えない限り見ることはできません。つまり、最初の状態では見られない情報があるのです。
重要なコンテンツが見られないと、ユーザーの離脱を招く恐れがあります。
最初から開いておくタブには、ユーザーの興味を引く可能性の高いものを置いておく必要があるでしょう。
タブのタイトルと分かりやすさ
タブタイトル部分は、どのような情報がそのタブ内にあるのかユーザーが簡単にわかるような文言にしましょう。
また、タブであると分かりやすいデザインを心がける必要もあります。
下図の例を見てみましょう。
右は選択されているタブと、されていないタブで色が分けられています。
対して、左は全てのタブの色が同じです。
左図のタブは、タブである・見られる情報が変わるということがわかりにくいですね。ユーザーは「見たい情報がない」と思ってしまうかもしれません。
一目でタブであると分かるデザインで設計しましょう。
2.カルーセル/スライダー
カルーセルやスライダーと呼ばれる、横方向にコンテンツがスライドしていく仕組みもWebサイトではよく使われています。
たとえば、以下の「エークラスミュージック株式会社」では複数の画像をカルーセルで表示しています。このように複数の大きな画像も、最小限の範囲しか使わず表示できます。
参考/画像元：http://a-class-m.com/
以下は「GYAO!」という動画配信サイトです。
作品のページへのバナーがカルーセルで表示されています。バナーもカルーセルで表示する事で、１つ１つのサイズを大きめにすることが出来ます。
参考/画像元：https://gyao.yahoo.co.jp/
カルーセル/スライダーデザインの注意点
全コンテンツ数と現在地を示す
カルーセルで表示されるコンテンツはいくつあるのか、ユーザーに示す必要があるでしょう。先ほどの２つのサイトでもコンテンツの下に、小さな丸をコンテンツ数分設置しています。
これは、沢山のコンテンツを見てもらえるようにという目的があるかと思います。また、２枚目の画像をもう一度確認したいという時などは、全コンテンツ数、現在表示されているコンテンツがどれか分かっている方が利便性が高いでしょう。
コンテンツをスライドさせる方法
カルーセルでコンテンツをスライドさせる方法は大きく２種類あります。
１つは、自動でスライドさせる。
もう１つは手動でクリックすることでスライドさせる方法です。
手動の場合は、左右に矢印等のボタンを設置するとよいでしょう。
スライドさせるコンテンツの順番と数
コンテンツの数が多すぎると、すべてのコンテンツを確認するまで時間がかかります。そのため、表示される順番が後ろのものはユーザーに見てもらえる可能性は低くなってしまいます。
ですので、重要なものからスライドを開始して数も抑えましょう。
3.アコーディオン
アコーディオンは、コンテンツをタイトルごとに振り分けて、折りたたみ式に表示する方法です。
下図は「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シャツだけを見たいかもしれません。
この場合に、
レディースのシャツ>長袖やメンズのボトム>ショートパンツ
など細かいカテゴリまで全て表示させてしまうと、とても見ずらくなってしまいます。カテゴリ分けされたナビゲーションを１つずつページ遷移し進んでいくのも手間がかかります。
こうした場合にアコーディオンメニューは見たい部分だけを開いて確認することが出来るので、便利です。しかし、閉じているタイトルをユーザーが全て展開して確認する可能性は高くないでしょう。
仮にすべての情報を確認したいというユーザーが居たとしても、アコーディオンを１つずつ全て展開するのは不便ですね。
参考/画像元：https://www.gu-global.com/jp/ja/category/women/tops
上図は「GU」オンラインストアのスマートフォン表示です。
タブとアコーディオンパネルの両方が使われ、すべての商品を見たいユーザー向けに「すべて」という項目も用意されています。
このようにアコーディオンを使用する際には、コンテンツの内容とユーザーの目的を見極めることが必要です。また、そのうえで使い勝手を考慮して判断していくことが大切です。
4.モーダルウィンドウ
モーダルウィンドウとは、特定の操作を行ってもらうために表示する小窓（サブウィンドウ）です。表示されている操作を完了するかキャンセルしなければ、ページの操作が出来ない使用になっていますです。
以下は「Google ドキュメント」というサイトです。
作成したドキュメントの「名前の変更」を行おうとすると、以下のようなモーダルウィンドウが表示されます。
ページ遷移してこのページに行くわけではありません。
上記イメージのページに居たまま以下の小窓が表示される仕組みです。
モーダルウィンドウ設置の注意点
今いるページから移動し、何らかの操作を行い、元のページに戻る。
そういった動線の場合、モーダルウィンドウの設置は有効です。
上記「Google ドキュメント」でいえば、名前の変更を行った後はドキュメント一覧に戻ることが想定されます。この場合、名前の変更を一覧ページに居たままモーダルウィンドウ内で行った方が手間がかかりませんね。
しかし、モーダルウィンドウを使うデメリットもあります。
モーダルウィンドウが表示されているときは、ウィンドウ内での操作以外が出来ません。このため「うるさい」「面倒くさい」と思われてしまう場合もあるでしょう。
モーダルウィンドウの設置は、ユーザーの使い勝手が良くなるか・モーダルを挟んだほうが操作がしやすいかを考える必要があります。
まとめ
カルーセルやアコーディオンを使用することで、Webページをスッキリとコンパクトに仕上げることが出来ます。ユーザーも長～いコンテンツを目を凝らして眺めるよりも、情報を探しやすくなるでしょう。
ただし、デザインは見えていない情報があることが分かるようにしなくてはいけません。モーダルウィンドウを使う場合も、ユーザーがどんな作業を行うべきか・どうすれば元のページ操作に戻れるのかをわかるようにする必要があります。
UIコンポーネント類を使ったWebデザイン（コンテンツ表示）は、よく使われています。それだけ見やすさ・使いやすさの向上に役立つということ。
ですが、ユーザーが仕組みや操作方法を理解できなければ意味がありません。
ユーザーの気持ちを考えて、取り入れるようにしましょう。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月28日まで