デザインに関する仕事をしていると必ず耳にする「UI」
今回はWebデザインに関するUIにフォーカスして解説します。
駆け出しのデザイナーさんにも是非見て頂きたい内容です！

それではどうぞ！

UIとは

UIはUser Interface（ユーザーインターフェース）の略です。
UIはUX（ユーザーエクスペリエンス）の中に含まれています。
UXはサービスやモノに関するユーザーの体験・感情をさします。それに対し、UIはそのユーザーとサービスやモノをつなぐ接点となっています。

具体的なUIの例

Webデザインであれば、以下のようにユーザーと接点をもつすべてのものがUIにあたります。

上記は一例なので、Webデザインでは多くのUIがあります。
UIは、視覚的な情報のみではなく、操作性も重視されています。
サービスを快適に利用してもらうためにはUIは必要不可欠といえるでしょう。

WebデザインのUIを考える際に気を付けるポイント

Webサイトを快適に利用してもらうために、Webデザイナーはどんなことを気を付けるべきでしょうか。
大きく分けて3つのポイントを紹介します。

ユーザーに考えさせない

「考えさせない」ことはUIにおいてとても大事なポイントです。
説明などなくてもユーザーが直感的に操作できるデザインが優れたUIと言われています。
皆さんはわざわざ使いにくいサイトに長く滞在せず、他のサイトを探しに行きますよね！
では逆に考えさせてしまうデザインはどんなデザインでしょうか。

ユーザーに考えさせてしまうデザイン例

例えばお問い合わせフォームにこんなボタンがあったとき
ユーザーは瞬時に次へのアクションを起こすことができません。
このUIの問題点をあげてみました。

ボタンがどちらも同じ色、サイズ

2つのボタンはどちらも異なる操作のはずなのに、同じ見た目では瞬時に違いを理解することができません。

一般的に「次へ」のアクションボタンは右に、「戻る」のボタンは左にくる

ユーザーのアクションにはある程度「こうなるだろう」という考えが含まれています。
例えば、右にあるボタンを見ると「次に進むだろう」とユーザーは捉えます。
逆に左のボタンは「前に戻るだろう」と考えます。
ブラウザバックの矢印も、「戻る」が左で「進む」が右にきていますよね。

この問題点を改善したUIを見てみましょう。

ターゲットを明確に

誰でも使いやすいUIというのは存在しません。
ターゲットに合ったUIを検討することがとても重要です。
ターゲットといっても「10代女性」という簡単な分け方ではぼや～っとしたターゲット像しか浮かばず、UIを設計する際に意味がありません。

普段どんなことをしているのか、どんな考えを持っているのか、よく使うアプリはなにか…など、特定の1人が思い浮かぶくらいまでターゲット像を詰めていくことが大事です。

詳しいターゲット・ペルソナの設計方法についてはBRISKの以下のブログをチェックしてみてください。

何となくターゲットを決めていませんか？WEB制作においてのペルソナマーケティングの重要性

情報を整理する

以下のWebサイトは情報が整理されておらず、すべての要素が同じように並んでいるため、どの画像とテキストがセットになっているのかユーザーは理解できません。

情報は同じもの同士まとめてあげるとユーザーは直感的に理解できます。
今回の場合は、背景をつけて、要素同士の上下余白を広くしてみました。

Webデザインで使われるUIパーツについて考えてみる

実際にWebサイトでよく使われているUIパーツを例にして解説していきます。

ボタン

WebデザインのUIで一番多く使われていて重要なのはやはりボタンです。
ボタンを検討する際は以下の3つが重要になります。

1つずつ解説していきます。

押せるかどうかが分かる

押してもらわないと意味がないボタンにとって押せるかどうかは重要です。
下のボタンだとどちらが押せるように見えるでしょうか。
左のボタンはなんだか見出しにも見えますね。
ボタンの押せる感を出すためには影を付けたり、矢印をつけて遷移を促すのが効果的です。

押すことによって何が起こるのか分かる

ボタンの中のラベルテキストはクリックするために重要です。
ユーザーはボタンを押すためにクリックというアクションを起こす必要があります。
そのアクションを起こす時に、もしも押してどうなるか分からないボタンだったら押すのをやめてしまうかもしれません。
ボタンのラベルを考える際の基本的なポイントとしては、以下3つです。

押したいと思わせる

ユーザーにボタンを押そうと思ってもらえるようにするためには工夫が必要です。
例としていくつか紹介します。

ひとこと文言を入れてユーザーの背中を押す

ボタンの中や、ボタンのすぐ上にユーザーの背中を押すようなひとことを掲載することが効果的とされています。

このような文字は「マイクロコピー」と呼ばれているので是非調べてみてください。

ホバー効果をつけてクリックできることを伝える

ボタンにホバー効果をつけることでマウスオーバーしたときに変化がつきクリックできるボタンだというアピールすることができます。
BRISKのブログではコピペで簡単にホバーアニメーションをつける記事もありますので是非参考にしてみてくださいね。

【コピペでOK】CSSのホバーアニメーションまとめ（デモ・サンプルコード付き）

画像

画像もWebデザインのUIには必須と言えますね。
例えばコーポレートサイトであれば、会社の雰囲気を伝えたり、分かりにくい文章を図（画像）にして簡単にして伝える方法はよく使われています。

そこで今回は画像を使ったレイアウトについて解説します。
テキストと画像を横に並べるとして、画像を右に置こうか、左に置こうか迷ったことはありませんか。
実は右に置くか左に置くかで画像の重要度は変わってきます。

画像左、テキスト右の場合

ユーザーは左から右に視線を動かしてコンテンツを見ています。

そのため、画像が左にくるということはテキストより先に目に入るということになり、画像の重要度がアップします。
意味を持たせたい画像を置く場合は画像を左に持ってくると良いでしょう。

例）ブログのアイキャッチとタイトル
BRISK＞ブログ：https://b-risk.jp/blog/

画像右、テキスト左の場合

この場合は、テキストが先にくるので画像の重要度は下がります。

テキストの補足的な意味で画像を置く場合、右側に配置しましょう。

例）ニュースのタイトルと補足画像
Googleニュース＞ローカルニュース：https://news.google.com/home?hl=ja&gl=JP&ceid=JP:ja

ただ、これは画像だけではなくどのコンテンツでも言えることですし、「絶対にこうしなければいけない」という決まりはありません。
コンテンツの並びは何を一番に見せたいのかを明確にして意図をもって設計することが重要です。

スライダー（レンジ入力欄）

スライダーは、「ぴったりその数値を指定したい」という場合には不向きですが、「だいだいこのあたりの数値にしたい」という場合に向いているUIです。

例）範囲選択　物件の家賃検索
　　数値の調整　音量調整、動画・音楽のシークバー

インジケーター

インジケーターのUIはスライダーと似ていますが、ユーザー側では操作ができないバーです。
主に数値の増減を表すときに使われることが多いです。

例）バッテリーの減り

フォーム

フォームもお問い合わせ機能がついているWebサイトでは必須のUIです。
ユーザーが迷わないように、入力しやすいようにしっかりとUIの検討が必要になります。

エラー文は分かりやすく

フォームでは、入力ミスがあるとエラー文が表示されるようになっています。
そのエラー文も大事なUIの要素です。

△の例では、「エラーです」と表示されているだけなので、どのようなエラーでどう解消すればよいのかユーザーに伝わりません。
○の例では、「8文字以上のパスワードを設定してください」という指示があるので、ユーザーは8文字以下で設定してしまっていたとすぐに気づくことができます。

プレースホルダーはあくまで入力の補助

プレースホルダーには入力に必要な情報をなるべく載せないようにしましょう。
ユーザーが入力しようとするとそのテキストが消えてしまうためです。

あくまで補助的なテキストであればプレースホルダー内に入れたままでOKです。
入力に必要な条件などは、入力欄の外に出してテキストで置いてあげるのが親切です。

ツールチップですっきりと

入力に不要な補足説明は省き、ツールチップ化することをおすすめします。
ツールチップとは、画面上でアイコンや文字にマウスオーバーしたときに表示される補足情報（ヒント）のことです。
ツールチップを利用することで、画面内の情報が最低限になり、すっきりとまとまって見えるようになります。

上記の参考を見てみると、左側は補足のテキストが多く読みにくさを感じます。
右側はツールチップを使用しているので、補足情報と入力に必要な情報が分かれており入力がしやすいですね。

メニュー

続いてはメニューです。
Webサイトで使われているメニューは数多くあります。
その中でもよく使われる2点を紹介します。

ハンバーガーメニュー

ハンバーガーメニューは3本線のメニューで、クリックすると隠れている情報が表示されるメニューのことです。
3本線が具を挟んでいるハンバーガーに見えることから名前がついています。

多くのWebサイトで使われているメニューで、最近は2本線にしたり少し変わった形にするオシャレなハンバーガーメニューも増えています。
デメリットもメリットもあるので、そこをしっかりと理解することが必要です。

スマホ時の操作性やメニューだと気づきにくい点から、様々な議論がされています。
ターゲットや目的に合わせて本当に必要なものなのかどうか検討して取り入れるようにしましょう。

メガメニュー

メガメニューは、ECサイトなど階層が深くなっているサイトで使われることが多くあります。
主にパソコンサイズのWebサイトで使われています。
参考1：プーマ公式オンラインストア

参考2：トレイダーズホールディングス株式会社

デメリット、メリットは以下です。

情報量が多い場合はメガメニューを取り入れることをおすすめします。

会員登録・ログイン

よく使われる会員登録とログインのUI。
ポイントを押さえながら解説していきます。

会員登録をすることで何ができるのか分かるようにする

会員登録については、まずはここが重要です。
なぜ会員登録が必要なのか、会員登録するとどうなるのかを示してあげるようにしましょう。
例えば、ECサイトですと会員登録をすればお気に入りの機能が使えたりなどメイン機能の解放などがあげられます。

会員登録画面とログイン画面を簡単に切り替えできるようにする

もし会員登録がしたかったのにログインの画面に入ってしまったとき、すぐに会員登録画面に遷移することができないととても不便でストレスを感じますよね。
会員登録画面とログイン画面はタブなどで簡単に1タップで切り替えできるようにしておくことをおすすめします。
テキストリンクで切り替えできる例もありますね。

SNSや既存のサービスでログインできるソーシャルログインを導入する

会員登録・ログインをする際にすべての情報を入力するのはかなり億劫に感じますよね。
そんな時にソーシャルログインができるようにしておくと、情報を入力したりIDやパスワードを作成する必要がないので、ハードルがぐっと下がります。
よく使われているソーシャルログインは以下です。

カルーセル（スライダー）

カルーセルは、Webサイトでもよく利用されているUIパーツですよね。
そんなカルーセルですが、賛否両論があることをご存じでしょうか。
まずはデメリットとメリットを紹介します。

Instagramの投稿表示のUIも同じカルーセルのデザインになっています。
2023年7月にリリースされたThreadsというSNSも同じようなカルーセルです。
ユーザーは自分が興味のある内容のカルーセルであればスクロールをして内容を見る、興味がなければ見ようとしない。ということが分かります。

そのため、必ず見てほしい情報はカルーセルにせず、すべて見える形で配置することをおすすめします。
ユーザーの興味を引けるようなコンテンツや必ず見なくてもよいコンテンツであれば、カルーセル表示にしてスペースを削減するのがおすすめです。

ユーザーを楽しませる（退屈させない）工夫

Uユーザーを迷わせない他に、離脱させないよう、楽しませるという工夫も必要です。
よく使われている方法を3つほどご紹介します。

待ち時間を短く感じさせるには

Webサイトでは画像が多かったり、データが重くなるとどうしても表示が遅れてしまったりすることがありますよね。
そんなときただの真っ白な画面が表示されているとユーザーはとてもストレスを感じてしまいます。
ストレスを軽減させて心理的に待ち時間を短く感じてもらえるような方法を2点紹介します！

ローディング

一番よく使われている方法はローディング画面を表示することです。
ローディングにはいくつか種類があります。

プログレスインジケーター

プログレスインジケーターには、いくつか種類があります。

具体的な数値は表示しない
参考：Art for Well-being

具体的にどのくらいローディングにかかるか数値を表示
参考：株式会社風工学研究所

使い分け方としては、待ち時間が少ない場合（4秒以内）は、数値を表示しないローディングが良いです。
長い時間待たせてしまう場合は詳細が分からないままだとユーザーはとてもストレスを感じるので、5秒以上かかるようであれば具体的な数字を出してあげることをおすすめします。

ロゴを表示

次はロゴを表示させる方法です。
ロゴはブランド・会社の顔といっても過言ではないので表示させることでそのブランドを印象付けする狙いがあります。

参考：株式会社heart relation

参考：ココグルメ

オリジナルのローディング

オリジナルのローディングはサイトによって個性が出るので探してみると結構面白いものもあります。
中には、下の参考画像、右のサイトのように、ローディングではなくサイトへの導入に見えるようなコンテンツを置いているサイトもあります。

参考：ユニアム

参考：牛乳石鹸共進社株式会社

どちらもスっとサイトに入っていきやすいローディングになっているので待っている時間が短く感じられます。

スケルトンスクリーン

スケルトンスクリーンというのはローディングの際に、コンテンツの骨組みのみが表示されるものです。
近年よく使われているのを見かけるようになりました。
以下は、インスタグラムとYoutubeの例です。

スケルトンスクリーンを導入することによって、ユーザーはその画面にどんなコンテンツが現れるのか予想できるようになるため、待ち時間が長くても心理的には短く感じられます。

また、スケルトンスクリーンは簡単に実装できるみたいなので今後機会があれば実装してみたいと思います。
スケルトンスクリーン（ローディング）をJavaScriptとCSSのみで実装

操作に対する反応を

操作に対して反応があることでユーザーはより楽しく、スムーズに操作することができます。
例えば押しても全く反応がないボタンと、押すと色が変わるボタンがあったらどうでしょうか。
押しても全く反応がないボタンは裏側では押せているかもしれませんが表側しか見えていないユーザーは「これって押せているのかな？」と不安を抱きます。
押すと色が変われば「押せている！」とユーザーは安心することができます。

操作に対する反応で分かりやすい例はX（旧：Twitter）のいいねボタンです。
X（旧：Twitter）のいいねボタンはタップするとハートがはじけるようなアニメーションが入ります。
操作に対して反応が返ってくることでユーザーを楽しい気持ちにさせることができます。

状態の変化を分かりやすく

皆さんはこちらのボタンを見て、現在どんな状態になっているかわかりますでしょうか。

以下の2パターンにわかれると思います。
「ONのボタンになっているから現在はONの状態」
「ONのボタンになっているから現在はOFFの状態」

2つに分かれてしまうとどちらかのユーザーが操作を誤ってしまうことになります。
このような状態の変化を表したい場合はトグルボタンを使いましょう。
これであれば、現在の状態がONであることが一目で伝わります。

大手企業のUIを分析してみる

ここまで色々なUIを紹介しました。
大手企業のアプリやサイトのUIデザインはどうなっているでしょうか。
細かいところまで入念に設計されたUIからはたくさんの工夫が感じられるので一緒に見てみましょう！

日本企業のアプリのUI分析

まずは日本企業のアプリから見ていきましょう。

ホットペッパービューティー

ホットペッパービューティーは、美容室やネイルサロン、エステなどの美容系サロン探し・予約サイトです。
CMなどでも放送されているので知っている方が多いと思います。
筆者もよく利用させてもらっています(笑)
ホットペッパービューティーの使いやすいところを上げていきます。

• トップ

  全て同じレベルのボタンにするのではなく、予約数が多いであろうヘア、そしてネイル・まつげのボタンを大きくしているのが使いやすい点だと感じました。
  また、このサイトでできることを簡潔にキャッチコピーで載せているのも情報量がちょうど良いと感じました。

• 今日、明日、直近の休日をすぐに選べる

  美容室などは「すぐに予約をしたい！」という場合がありますよね。
  そんなときにいちいちカレンダーから日程を選ぶのではなく、このようにワンクリックで日付を指定できるのはとてもユーザーのことを考えて設計されていると感じます。

• 空席のある時刻が表示される

  検索した日にちに行きたい人にとっては何時に予約の枠が空いているのかがサロン選びをする際に重視するポイントになると思います。
  そのポイントをしっかりとらえているのが使いやすさを生み出しているのだと思います。
  ただし、この時刻の部分をクリックしても予約に進むことはできないので、ここから予約ができたら便利だなと思いますね！

PayPay

PayPayは、QRコード決済サービスです。
2023年10月4日時点でユーザー数が6,000万人を突破し、約2人に1人がPayPayを利用していることとなります。
それだけ多くのユーザーが利用しているPayPayのUIを見ていきましょう。

• トップ

  PayPayのトップは、
  支払いのバーコード・機能一覧・キャンペーンのバナー・クーポンなどが並んでいます。
  どこか別のページを見なくとも一度にすべてのメイン機能が見れるので迷うことがありません。
  それぞれのアイコンも見やすいですね。

• 決済

  決済画面には決済に必要な機能のみがまとめられています。
  この画面を見せればスマホ操作が苦手な方でも簡単に決済することができます。

• 効率的な送金

  使いやすいと感じたところは、友達との個別チャット画面で、数字を入力するとその金額を簡単に送金できるところです。
  例えば友達とご飯に行って一括で支払ってもらったときに「あとでPayPayで送るね！」というやり取りをしたことがないでしょうか。
  より早く相手に送金することができ、ユーザーにとって効率的です。

海外企業のアプリのUI分析

筆者が使いやすいと感じた海外のアプリ例も1つ紹介します。

Booking.com

Booking.comは、オランダに本社を置く、宿泊予約が予約できるオンライン旅行会社です。

• 検索がすっきりしている

  トップページの検索では入力しやすい項目が表示されているためパパっと入力することができます。
  また、観光目的の旅行ではない場合は、出張・ビジネスでの利用にチェックを入れることでビジネスホテルが検索結果で優先的に表示されるようです。

• ローディング画面で工夫がされている

  検索時のローディング画面では、「ぴったりの宿泊施設を探しています」というふうに表示することでユーザーのストレスが軽減されています。
  また、その下に「バケーションレンタルのリスティングも数百万件」と表示することで待ち時間にBooking.comの強みをユーザーに見せることもできています。

• 検索結果画面での細かい絞り込み

  この画面では簡単にワンクリックでキャンセル無料や朝食付きなど絞り込みができる機能があります。
  また、表示されている金額で予約可能な部屋がいくつ残っているのか出すことによって、ユーザーの判断を早める狙いがあると思いました。

• 周辺施設の紹介

  宿泊施設詳細の画面では、観光向けに周辺施設の紹介がされています。レジャー施設だけではなく、交通手段（公共交通機関・最寄りの空港）、飲食全般（レストラン・カフェ・バー・スーパー）などが掲載されているのも、初めてその場所に訪れる人にとってはあると便利な情報だと思います。

UIの参考を探せるおすすめサイト

普段から色々なUIに触れることによってデザインの引き出しを多く持つことができます。
そこで筆者がよく利用しているサービスを紹介させていただきます。

UI Pocket

UI Pocketは、アプリの画面キャプチャを見ることができるサイトです。
サイドバーの検索ボックスにアプリ名を入れると、そのアプリの項目が表示されます。
クリックすると流れごとに画面キャプチャが一覧表示されます。

例えば先ほど紹介したPayPay（UI Pocketへのリンク）ですとこのように登録画面から表示がされます。

お気に入り機能（コレクション）もあるので、参考UI探しにピッタリのサイトです。
アプリカテゴリも細かく分かれているので目的別に探すことができます。
是非参考にしてみてください。

mobbin

mobbinは海外のサービスですが、サイトの内容はUI Pocketとほとんど同じで、アプリのフローごとに見ることができます。

海外のアプリを見ることはなかなか難しいと思うので、こういったサイトを見ておくと流行が掴みやすいのでおすすめです。
会員登録をしないとすべて見ることができませんが、Googleログインが利用できるのでハードルは低めです。

検索方法としては、フィルター機能からの検索や、端末（iOS／Android）が選択できたりするのでより限定的に調べることが可能です。

まとめ

いかがでしたでしょうか。
かなりボリューミーな内容になったのですが最後までお付き合い頂きありがとうございます。
デザインには正解がないので、このブログ内で紹介したことがすべて正しいとは限りません。
ユーザーのことを考えて、そのサービスのターゲットに合ったUIを突き詰めていくことが大切ですね！
また、自分がユーザー側の気持ちに立つことも大切です。
作り手側にいると忘れがちですが、自分もユーザーの1人ですので、客観的に考えてみると使いにくいな、という部分が見つかると思います。

デザイナーの方には以下の記事もおすすめです！
是非合わせてチェックしてみてくださいね。

カード型UIの参考とデザインのポイントまとめ

【売れる！】ECサイトのデザインとUI/UXを考慮した設計