WEBデザイナーはUI/UXについても勉強しよう
UI/UXとは
UI/UXと一括りにされがちですが、UIとUXは同じものではありません。
まず、それぞれの意味について理解しましょう。
UI（ユーザーインターフェース）とは、ユーザーとコンピューターの間で情報をやり取りするための接点や入力装置を意味します。
具体的には、ウェブサービスやアプリケーションなどのユーザーが直接触れるデザイン要素や操作方法がUIです。
UIはキャラクターユーザーインターフェース（CUI）とグラフィカルユーザーインターフェース（GUI）に分けられます。
CUIはキーボードで文字を入力することで操作を行うもので、GUIはマウスといったポインティングデバイスで操作するという違いがあります。
一方、UX（ユーザーエクスペリエンス）とは、ユーザーがある製品やサービスを通じて得る体験や印象のことを指します。
具体的には、ユーザーが商品やサービスを利用する際に感じる使いやすさ、満足感、効率性などのことです。
例えば対応が丁寧であったり、フォントが読みやすかったりといったものがUXになります。
つまり、使い勝手の良さや印象の良さなど、サービスを利用するうえでユーザーが感じたことがすべてUXとして認識されます。
UXはIT分野だけではなく、さまざまな分野で重要視される概念です。そのため、UXの観点を大切にすることはWEBデザイナーにも大切なのです。
UIとUXの関係性とは
UIとUXがどうして一括りにされてしまうのかというと、お互いが影響するからです。例えばUXを高めるには、分かりやすい操作しやすいUIが必要で、使いにくいUIだとUXの評価も下がってしまいます。
一括りにされてしまうのは、良いUXのためには良いUIが不可欠であり、その深い関係性のため、境界が曖昧だからと考えられます。
UIが良ければ良いUXが得られるわけではありません。操作がしやすいWEBサイトであっても、サイトのコンテンツに魅力がなければ優れたUXにはつながらないためです。
UI/UXが求められる理由とは
UIやUXが重要視される背景は、商品やサービスを利用したユーザーの満足度に大きく関わるためです。
ユーザーの目的に合わせた使いやすいUIの商品やサービスであれば、UXは向上します。UXが向上すると、その商品やサービスを「また使いたい」となり、利用率がアップするわけです。
また、IoTの普及もあげられます。
IoTとは「Internet of Things」の略で、モノをインターネットに接続することで遠隔で操れるようになります。
IoT製品を簡単に扱えるようになるため、わかりやすいUIが求められるのです。
良いUI/UXとは
良いUI/UXとは、見た目の印象だけでは測れません。
パソコンやスマートフォンの画面上のUIを例にすると、
・誰でも同じように機能を認識して操作できる
・クリックやタップがしやすい
・情報量が多すぎない
などが挙げられます。
サービスを提供する側が「おしゃれでスタイリッシュ」なデザインで作った場合でも、ユーザーが使いにくいと感じた場合、良いUI/UXとはいえません。
具体的にどのような層がユーザーなのか、ターゲットを絞り込む必要があります。
また、情報量が多すぎないほうが良いのは、WEBページの閲覧には「Fの法則」と呼ばれるものがあり、ユーザーの目は左上から右下に向かって視線を動かす傾向にあります。
この視線の動きに合わせて情報量を調節することで、視線がスムーズになり、動きを邪魔しません。ユーザーも見やすく感じるページになるはずです。
UI/UXのデザインのポイント
UI/UXデザインとは、UIを通して得られるユーザーの体験をデザインすることです。
ユーザーに選ばれる製品やサービスを作るためには優れたUIデザインが必要ですが、このUIデザインでユーザーがどのようにすれば使いやすいのかを考えながら設計して、UI/UXデザインが実現します。
ゴールを明確にする
「どのようなユーザーにどうなってほしいのか」というゴールが曖昧だと、サイト設計も中途半端になってしまいます。まずはゴールを明確にしましょう。
とくにECサイトでは、直接売り上げにかかわる重要なポイントです。
細かくペルソナを設定することで、サイトのデザインや配色、フォントの大きさなど、方向性も決めやすくなります。
また、商品の購入なのか、資料請求なのか、体験なのかなど、どのようなアクションを起こしてほしいのか明確でないとボタン設計もできなくなります。
ユーザーの視点に立つ
どうすれば使いやすくなるかについて、ユーザー視点で考えることが大切です。ユーザーが使用する場面をできるだけ想定し、実際にそれらを利用する場面に近づけることが最も重要になるでしょう。
そこで、ユーザーの視点を考えるうえで、ユーザーの姿を的確に認識するためにペルソナを作ります。ペルソナとは、その製品やサービスを利用する人物像のことです。
実際のデータをもとに典型的かつ平均的な人物像をペルソナにすることや、使ってほしい・来てほしいというターゲットユーザーをペルソナとする場合もあります。
具体的なユーザー像を作ることで、顧客体験のシナリオが作りやすくなります。
デザイナーはデザインの部分で革新性やオリジナリティを求めがちですが、自己満足ではなくユーザー視点に立つことが、より良いサービスを作るうえで重要なことなのです。
デザインの4原則を意識する
UIをデザインするうえで、近接、整列、対比、反復の4つを意識することが大切です。
近接は関連する情報を近い位置に配置することです。これにより、ユーザーは多くの情報を得られやすくなります。
しかし、近接だけだとユーザーが求めている情報を得やすい状態にはなりません。
それぞれの要素で情報の配置を決めて、整列することが大事になります。整列することで、ユーザーは求めている情報を得やすくなり、良いUXになります。
対比を意識することも大切です。対比はフォントの大きさや色付けすることで情報が明確になり、ユーザーも情報を理解しやすくなります。
近接、整列で決めたレイアウトを他のUIにも適用させ、そのレイアウトを反復させることで、ユーザーの混乱が避けられやすくなるのです。
UI/UXデザイナーとWEBデザイナーの違いとは
WEBデザインがビジュアルデザインを担当し、UIデザイナーは機能の美しさを実現する担当です。
WEBデザイナーの場合、サイトのデザインに関するすべてを行い、凝ったビジュアルの制作も行います。
一方、UIデザイナーはサイトの設計を重視し、シンプルでユーザーフレンドリーなサイトデザインを行うのが一般的です。
そのため、UIデザインはWEBデザインの一分野として考えていいでしょう。あまり境界を意識する必要はなく、WEBデザイナーもUIを重視しなければなりません。
Googleが提唱するCore Web Vitalsについて
UXはSEOにおける検索順位に影響を与えています。
Googleは、WEB上におけるユーザー体験の質向上を目指して「ウェブバイタル」という指標を提唱しました。
また、Googleはウェブバイタルの中でもとくに重要な要素を「Core Web Vitals（コアウェブバイタル）」として2020年5月に発表しました。
Largest Contentful Paint （LCP）
LCPとはWEBページの読み込み時間を表す指標のひとつで、ページ内のメインコンテンツが読み込まれるまでの時間のことです。
LCPが2.5秒未満だと良好、2.5～4秒未満は要改善、4秒以上は遅すぎと判定され、ページの価値に影響されます。
First Input Delay （FID）
FIDとはユーザーがボタンやリンクを押した際、一時的な読み込み処理中で無反応になった後、再び反応できるまでの時間のことです。
0.1秒未満で良好、0.1～0.3秒は要注意、0.3秒以上だと遅すぎるという判定です。
Cumulative Layout Shift （CLS）
CLSとはページ読み込み中にレイアウトがズレる現象を表した指標です。例えば、WEBページの閲覧中、ページ内のテキストが先に表示し、時間差で画像が表示されることがあります。
その際、後から表示される画像に押し出される形で、下方にあるページの一部が押し下げられることを数値化したものです。
この数値が0.1未満なら良好、0.1～2.5未満は要改善、2.5以上だとズレが大きいとなります。
これらのコアウェブバイタルは、今後Googleの検索順位を決める大事な指標となるので、この機会に理解しておきましょう。
あわせて目の不自由な人向けに音声読み上げ機能に対応し、パソコンやスマートフォンなどさまざまなデバイスに対応するのもおすすめです。
総合的にユーザーファーストな設計がUXを高め、SEO対策につながります。
まとめ
UIとはユーザーインターフェースのことで、WEBサービスやアプリケーションなどにおいてユーザーの目に触れるすべてを指します。
UXとはユーザーエクスペリエンスのことで、ユーザーが商品やサービスを通じて得られる体験のことです。使ってみて良かっただけではなく、使いやすさという品質に関することもUXに含まれます。
UI/UXが重視されるのは、ユーザーの満足度に大きくかかわり、サービスや商品の利用率に大きくかかわるためです。
良いUI/UXとはユーザーが直感的に操作しやすいもので、マニュアルを見なくても操作方法がわかり、欲しい情報にアクセスできるものが当てはまります。
WEBデザイナーとしてもUI/UXとは重要な要素なので、意味や目的を理解し、デザイン制作に活かしていきましょう。