UI/UX
UI/UXとは何ですか？
“「このサイトは使いやすい！」”
“「このサイトは使いにくい。必要な情報にたどり着けない。」
インターネットを日常的に利用している人なら、おそらくこのような経験をしたことがあるでしょう。.
どうすればユーザーに自社サイトが良いサイトだと感じてもらえるのか？UIとUXは、この問いを解決するために不可欠な概念です。.
UIとUXは、互いに相反するものでも、補完し合うものでもありません。質の高いUXを実現するには、ユーザー心理を理解したユーザー中心のUIが不可欠です。.
サイトの目的とコンテンツを向上させることに加えて、UIを活用してサイトをより使いやすくすることも重要です。UIとUXは相乗効果を発揮するものとして捉えるべきです。.
UIとUXの関係
UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の間には深い関係があります。ユーザーとの接点となるUIは、ユーザーエクスペリエンス全体を表すUXに含まれるため、UIはUXに含まれる概念と言えます。.
UI/UXが頻繁に設定される理由は、UIがUXを向上させる重要な要素だからです。UIに多くの欠点があると、ユーザーは良い印象を持ちません。そのため、フォントなど、機能に直接関係しない領域にも取り組み、ユーザーの印象を改善する必要があります。ただし、UIだけに注目しても必ずしもUXが向上するとは限りません。UIはUXを向上させる要素の一つに過ぎず、UIだけに注目してもすぐにUXが向上するわけではありません。まず、UXを向上させるために、ユーザーにどのような感情を呼び起こすべきかを考えることが重要です。.
UIについて
UI（ユーザーインターフェース）とは、一般的に、ユーザーと製品またはサービスとの間のすべての接点を指し、通信方法や接続方法も含まれます。ユーザーとは、主にWebサービス、アプリケーション、またはソフトウェアを使用する人のことです。.
ウェブサイトにおけるUIとは、サイトの外観や操作感を指します。レイアウトや使用されている画像だけでなく、テキストのフォント、メニューやボタンの操作性、そしてユーザーが目にするすべての要素や操作する要素が含まれます。.
UI要素の例
グローバルナビゲーションメニュー
これは通常、画面上のどこかに常時表示され、画面遷移に関係なく常に表示されます。ここは厳選された主要コンテンツへのリンクが集約されている部分であるため、サイト訪問者はここを起点として目的のコンテンツを探します。.
ページネーション
ページネーションとは、長いテキストやコンテンツを投稿する際に、読み込み速度、読みやすさ、操作性を向上させるためにページを分割できる機能のことです。.
サイトの構造上、各ページへのリンクはサイトの下部に配置されています。.
カルーセル／スライドショー
これは、複数の画像やその他のコンテンツをスライド表示できる機能です。.
ウェブページが表示される際、最初に表示される領域内で水平方向にスライドする様子がよく見られる。.
アコーディオン
アコーディオンは、項目をクリックまたはタップすることでコンテンツ部分を開閉するUI要素です。アコーディオンを使用することで、必要に応じて情報を表示したり非表示にしたりできます。.
パン粉
最上位レベルから順に並べられたリンク一覧。これにより、ユーザーがサイト内のどこにいるのかを視覚的に簡単に把握できます。.
タブ
タブは、複数のメニューに記事やその他の情報を並べて表示するための切り替え方法です。タブは表示や動作が予測しやすいため、情報の全体像を把握するのに役立ちます。.
ツールチップ
ツールチップとは、特定の要素にマウスカーソルを合わせたときに補足情報を表示するUI要素です。サイト内のボタンやアイコンの機能に関する補足情報を提供したり、テキスト中の専門用語に関する補足情報や注釈を提供したりするために使用されます。.
モーダルウィンドウ
これは、元の画面の上に別のウィンドウとして表示され、ユーザーが操作するまで閉じることができない画面です。ページ遷移時やボタンクリック時などに表示されることが多く、ユーザーに少なくとも一度は認識されるという利点があります。.
UXについて
UX（ユーザーエクスペリエンス）とは、ユーザーが製品やサービスから得る体験のことです。ウェブサイトの場合、UXはサービスの質、例えば応答の丁寧さ、製品の品質、フォントの読みやすさなどを指します。言い換えれば、ユーザーがサービスを利用する際に感じるあらゆる要素がUXとして認識されます。.
例えば、あるウェブサイトを訪れたとしましょう。そのサイトのUI（デザイン、フォント、配色、余白など）が見やすく使いやすいものであれば、そのウェブサイトについてどう感じるでしょうか？
UI（デザイン、フォント、余白など）が見やすく使いやすいものであれば、ウェブサイトを訪れた際にどのような印象を受けるでしょうか？デザインが美しいと感じるでしょう。.
フォントは読みやすい。.
どの情報がどこにあるのかが分かりやすい。.
ページの読み込みが速く、使いやすい。.
これらはUXの印象です。.
ユーザーエクスペリエンスの側面
UXデザインとは、サービスや製品を通じたユーザーの顧客体験のあらゆる側面を設計することを意味します。.
顧客体験とは、ユーザーがサービスや製品を認識した時点から、購入、使用、そして再び使用したい、あるいは良い製品だったと感じるまでのプロセス全体を指します。.
UXデザインは、製品やサービスの企画・開発の場面でよく使われる用語で、ウェブ制作、アプリケーション開発、システム開発などに重点が置かれていますが、将来的にはUXがより重視されるようになるでしょう。.
ユーザーエクスペリエンスを構成する5つの段階
UXを考える際には、ウェブサイトを訪れたユーザーが「楽しさと快適さ」を体験できるようにするために、考慮すべき重要な概念がいくつかあります。.
ユーザーエクスペリエンスに影響を与える要素は、5つの段階に分類できる。.
戦略
ユーザーのニーズ
ウェブサイトの目的
範囲
カスタマージャーニーマップ
構造
インタラクションデザイン
情報アーキテクチャ
スケルトン
インターフェースデザイン
ナビゲーションデザイン
情報デザイン
表面
ユーザーの視点
デザインの統一性
配色
SEOにおけるUX
UXはSEOランキングにも影響を与えます。実際、UXを改善した後に検索ランキングが向上した事例は数多くあり、UXの改善はSEOを向上させるための非常に重要な方法の一つです。.
さらに、Googleは2021年6月にページエクスペリエンスアップデートを実施し、ランキング要因に「コアウェブバイタル」を段階的に追加していく予定です。.
Googleは2021年6月にページエクスペリエンスアップデートも開始し、これによりCore Web Vitalsがランキング要因に段階的に追加される予定です。.
※Core Web Vitalsは、Googleがウェブサイトの健全性をチェックする際に指標として使用する主要な要素です。Core Web Vitalsには、以下の3つの要素があります。.
LCP（Largest Contentful Paint：最大コンテンツ描画時間）とは、サイトページの読み込み開始から、ビューポート内に最大の画像またはテキストブロックが表示されるまでの時間のことです。.
FID（First Input Delay）とは、ユーザーがサイトを操作した際に、サイトが応答するまでにかかる時間のことです。サイトの操作とは主に、「リンクボタンのクリック」「テキストフォームへの入力」「検索ウィンドウの操作」といった動作を指します。簡単に言えば、サイトの応答性です。.
CLS（累積レイアウトシフト）は、サイトのレイアウトがどれだけずれているかを判断する方法です。例えば、予期せぬ広告が表示されると、ユーザーに予期せぬストレスを与えるはずです。これは、ユーザーがサイトを快適に閲覧できるかどうかを確認するための指標です。.