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