UI/UXとは何か?について書いてみた。

こんにちは！DESIGN SWITCHです。前回の記事では、そもそもデザインとは何かについてご紹介しました！

でも、”UI/UX”のそもそもの意味って何だろう？具体的な違いは何？と思う方もいるかもしれません。今回はデザインへの理解が深まった上で、UI/UXとはそもそも何なのか？についてお話していきたいと思います。

UI/UXって何？

皆さんは、”UI/UX”という言葉を耳にしたことがある方は多いのではないでしょうか？前回の記事でも少しだけお話ししたのですが、ここからはおさらいです。

UI/UXという言葉は、

◆UI=ユーザーインターフェース(User Interface)
◆UX=ユーザーエクスペリエンス(User eXperience)

の略語になります。

つまり、UI（ユーザーインターフェース）とはユーザー(ネットワークサービスを利用している人たち)とシステム（主にデバイス）の”境界面”を指します。

具体的には、Webサイト / スマホ / PC / タブレット / ATM / ゲーム機器などのデジタルデバイスの画面などが挙げられます。

一方、UX（ユーザーエクスペリエンス）とはサービスを通して得られる一連とした"体験の総称"です。

具体的には、あるユーザーがwebサイトを訪れてデザインが綺麗、情報がわかりやすいなどの感情を持つことや体験することです。

UXデザインではサービス企画からリリース直後の運用を含めた一連の工程を計画し実行します。その過程で画面(UI)を作成する場合が多く、UIデザインもUXデザインもユーザーに主軸を置いています。その観点において共通した目的を持つことから、UI/UXデザインと呼ばれるようになったと考えられます。

似たような言葉では、ユーザビリティという言葉もあります。
これは直訳すると「使いやすさ」（製品やサービス側の）という意味で、 正確には「使用性」という訳語になっています。

UXと対比させると、ユーザーが製品やサービスを利用した結果としてユーザー側に体験(UX)が生じます。

ユーザビリティは製品やサービス側の「使いやすさ」を示し、UXの質を高める要因の一部です。ですから、位置付けとしてはユーザ側のUXと製品やサービス側のユーザビリティと位置付けられます。

UI/UXデザインの流れ

では、UI/UXデザインはどのようにして作っていくのでしょうか。その過程の一例をご紹介します。

◆UXデザイン
１.目標・戦略の設定
まず最初に、サービスのプロジェクトを実施する背景となる理由を整理し、達成すべきゴールを明確にします。
これにより、デザインプロセスごとの実施するべきことが明確になりスムーズに進行できます。

２.ユーザ調査・分析
新規サービスの立ち上げでは、日常のユーザーの行動や体験を調査・分析し何を求めているのかを把握します。
既存サービスでは既存ユーザーの利用方法や行動を調査・分析しゴールの達成に繋がる機能などの改善をしていきます。

３.ユーザー体験の設計・機能や要件の洗い出し
ユーザーの価値や需要を元に、ユーザーが利用したいと思わせるシナリオを作っていきます。
UXデザインでよく用いられる”カスタマージャーニーマップ”を使用して、ユーザー体験のシナリオ（利用背景）を図式に起こしていきます。
また、図式化したシナリオを元に必要な機能や要件を洗い出し、定義します。

４.画面設計・プロトタイプの作成
シナリオから洗い出された機能や要件を元に画面ごとの流れの設計をして形にしていきます。
シナリオに紐づいた要件などを落とし込むことでより、ユーザー側に寄り添ったものとなっていきます。
時には、確認するために”プロトタイプ”という簡易的なサービスとなる形を作ることもあります。

５.評価
実際にサービスをユーザーに使用してもらい、その反応や意見を基にサービスのゴールを達成できるかを判断します。
もし、変更や改善点がある場合は必要なステップに戻り再スタートします。

◆UIデザイン (UXデザインの3~4の工程)
１.サービスコンセプトの理解
まずは、クライアントとのヒアリングなどでデザインするサービスのコンセプトや内容を把握することから始まります。

２.ペルソナ（ターゲット）の調査・分析
ユーザは異なるニーズを持っているため、ユーザーごとの調査やターゲットを絞って焦点をあてていきます。
なぜなら誰にでも使いやすいUIデザインは難しく、サービスを利用する特定のユーザーにとって使いやすいものが良いUIと考えるためです。

３.要素の洗い出しと画面や構造の設計
各画面から洗い出した情報や機能に優先順位付けをして、当てはめる１画面ごとの大枠となる画面設計（ワイヤーフレーム）をしていきます。優先順位付けはユーザーが最も求めている情報やサービスの情報を上位に持っていくとスムーズです。

４.デザインカンプの作成
全体的な画面設計が出来上がったら、モジュール（機能）を配置していきステップ３.の画面や構造の設計よりも詳細に組み立てていき完成イメージを明確にしていきます。

５.トーン＆マナーなどの（UI方針）ルール定義
デザインやコンテンツの雰囲気などを統一するため、カラーの配色や基本となるフォントサイズなどを統一していきます。これは、デザイナー間での認識の一致やクライアントとの認識のズレを防ぐことにも繋がります。
また、企業やサービスのブランディングにおいても大切な過程です。

６.UIデザイン
いよいよ、要素ごとの細かなデザインや体裁を整えていきます。デザイン制作会社によって仕様するソフトは異なりますが、私たちの会社では”Figma”というデザインツールを使用してデザインをしていきます。
時には、Adobeの”photoshop”、”illustrator”も使います。

UIとUXはなぜ一緒にされるのか。

UIとUXはそれぞれ意味が違うことがわかりましたね。
では、UI/UXは1単語として扱われることが多いですがなぜ【UI/UX】のように一緒にされることが多いのでしょう？

それは、UXデザインの中にUIデザインが含まれていてUXデザインとUIデザインは切り離せないものだからと考えています。

前述したようにUX/UIデザインの仕事の流れとしては、体験の流れを考えたのちに画面のデザインを行うのが一般的です。そのため、体験から画面設計までのデザインを一連の流れとして捉えられることが多いのです。

それに加え、UIデザインもUXデザインも"ユーザーのために"という共通した目的が含まれています。この点おいても一緒に扱われる原因なのではと考えられます。また、「UI」「UX」は言葉的にも似ているため、語呂的にも良いからという理由もあるのではないでしょうか。

まとめ

🔳　UI/UXデザインとは

UI＝ユーザーインターフェース（User Interface）
UX=ユーザーエクスペリエンス（User eXperience）

の略語。

”UI（ユーザーインターフェース）”とは、ユーザー(ネットワークサービスを利用している人たち)とシステム（主にデバイス）の”境界面”

”UX（ユーザーエクスペリエンス）”とは、サービスを通して得られる一連の”体験の総称”

🔳　UI/UXデザインができるまで

◆UXの場合（UI設計の前に行う）
１.目標・戦略の設定
２.ユーザ調査・分析
３.ユーザー体験の設計・機能や要件の洗い出し
４.画面設計・プロトタイプの作成
５.評価

◆UIの場合 (UXデザインの３~４の工程を詳細化した工程)
１.サービスコンセプトの理解
２.ペルソナ（ターゲット）の調査・分析
３.要素の洗い出しと画面や構造の設計
４.デザインカンプの作成
５.トーン＆マナーなどの（UI方針）ルール定義
６.UIデザイン

🔳　UIとUXはなぜ一緒にされるのか

理由はUX/UIデザインの仕事の流れの中で、体験の流れを考えたのちに画面のデザインを行うのが一般的であるため、体験から画面設計までのデザインを一連の流れとして捉えられることが多いためです。それに加え、UXデザインもUIデザインも"ユーザーのために"という共通した目的が含まれているからと考えられます。

皆さん、いかがでしたでしょうか？UI/UXについての知識が深くなったのではないでしょうか！次回は、UI/UXデザイナーについてご紹介します。お楽しみに！

🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。

ARCHECOの採用 | UX/UIデザイナー、戦略コンサルタント、インターンシップ

🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて

ARCHECO inc. | UX/UIデザイン、アプリ、WEB、新規事業