「UI/UXという言葉をよく耳にするけど、どういうものなのだろう？」と疑問に感じていませんか？
UI/UXの定義は広く曖昧なので、しっかり理解できていない方も多いことでしょう。
この記事では、UI/UXの概要や身近な例、UI/UXデザイナーの仕事について、初心者向けにわかりやすく解説していきます。
UI/UXデザインの勉強方法もご紹介しますので、Webデザイナーからさらにスキルアップ・キャリアアップしたいと思っている方は、ぜひ参考にしてください！
まずUI/UXの違いを理解しよう！
UIは「User Interface（ユーザーインターフェース）」の略で、製品やサービスとユーザーが接する部分、つまり見た目や操作性に関する部分を指します。
UIには以下のようなものがあります。
- 物理的なもの：パソコンやスマートフォン、タブレットなどのデバイス
- デジタル上のもの：Webサイトやアプリケーションの画面デザイン（ボタンや画像の配置など）
一方、UXは「User Experience（ユーザーエクスペリエンス）」の略で、UIを通じてユーザーが得る総合的な体験を指します。
UXには以下のような要素が含まれます。
- 使いやすさ
- 楽しさ
- 満足度
- 感動や心の動き
つまり、UIはUXを構成する一部分であり、密接に関わっているのです。
ここからは、UIUXの概念をより理解しやすくするため、身近な製品やサービスを例に挙げて解説します。
Netflix（動画配信サービス）のUI/UX
動画配信サービスのNetflixを、UIの観点で見てみましょう。
- 映画館のスクリーンを思わせる没入感のあるデザイン
- 黒を基調とした背景で装飾がシンプル
- スクロールで次々と作品が表示されるレイアウト
ドラマや映画などの映像作品を多く提供しているサービスだからこそ、コンテンツに集中できるような工夫がされていることがわかります。
UXの観点では、次のような特徴があります。
- ユーザーの好みに合わせたコンテンツのカスタマイズ推奨
- ストリーミング再生によるスムーズな視聴体験
- プレビュー機能による効果的な作品紹介
自分の好みに合った作品が次々と出てくるうえに、プレビュー画面で少しお試しで視聴できるので、思わずコンテンツを見続けてしまいますよね。
このように、NetflixはUI/UXともに工夫が凝らされているサービスといえます。
洗濯機のUI/UX
最近の家電は、UI/UXが意識されていたものが多く販売されています。
例えば、洗濯機のUIはタッチ式の操作パネルがあり、操作方法がシンプルで分かりやすいデザインになっています。
ボタンレスで掃除もしやすく、フラットで見た目も美しい洗濯機が多い傾向です。
UXの観点で見ると、夜遅くの使用時に「お疲れ様です」と表示されるような、時間帯に応じたメッセージ表示によって、ユーザーの気持ちに寄り添った心温まる体験が提供されています。
このように、洗濯機もUI/UXの観点を意識して開発されていることがわかります。
UI/UXデザイナーの仕事とその魅力
UI/UXデザイナーは、主にアプリやWebサイトの情報設計からデザイン作成までを担当する仕事です。
専門的なスキルと多くの作業量を必要とするため、単価が高い傾向にあります。
例えば、ECサイトやアプリなどでは、「新規登録」「チュートリアル」「ホーム画面」など、さまざまな画面を設計する必要があります。
また、新規ユーザーと既存ユーザーで表示を変えるなど、ユーザーに応じた出し分けも考慮しなければなりません。
このように幅広い知識や経験が必要となるため、UI/UXデザイナーの仕事は高単価になりやすいのです。
UXデザインまでできるようになると、単価は月収40万円以上、時給にすると4,000円以上は狙えるでしょう。（参考：「レバテッククリエイター」UI・UXデザイナーの求人・案件一覧より）
ユーザーから直接反応を得られることは、大きなモチベーションになります。
UI/UXを勉強するためのポイント
UI/UXを学ぶためには次の2つが重要です。
- デザインの基礎を押さえる
- ユーザー理解を深める
順に解説します。
1：デザインの基礎を押さえる
まず欠かせないのは、デザインの基礎を押さえることです。
配色やレイアウト、タイポグラフィーなどはUI/UXでも必要不可欠な知識・スキルです。
本やYouTube動画、教材などでデザインの基礎をしっかり学び、実践を通してしっかりと身につけましょう。
2：ユーザー理解を深める
UI/UXデザインでは、ユーザーの行動や考えを理解することが重要です。
そのため、カスタマージャーニーやユーザーストーリーマップなどを用いて、ユーザー理解を深める作業が必要です。
カスタマージャーニーとは、ユーザーが製品やサービスを知ってから購入に至るまでの行動プロセスを可視化したものです。
例えば、時計を購入する場合は以下のような流れを時系列で整理します。
1. 購入のきっかけ
2. 情報収集（オンライン、店舗など）
3. 比較検討
4. 購入決定
5. 実際の購入行動（オンライン or 店舗）
ユーザーストーリーマップは、各段階でユーザーが行うタスクや目的を具体化したものです。
例えば、時計を購入する場合だと、次のようなものが挙げられます。
・Webサイトで商品情報を確認する
・SNSで口コミを調べる
・店舗で実物を確認する
カスタマージャーニーやユーザーストーリーマップの作成は、「フレームワークに沿った考察」「競合分析」「ユーザーインタビューの実施」などで進めていきます。
しかし、基本的な思考法や概念を学ぶだけでも実務で役立つスキルとなるので、ぜひ覚えておいてください！
まとめ：身近な商品・サービスをUI/UXの観点で見てみよう
UI/UXデザイナーは、見た目のデザインスキルだけでなく、ユーザーや事業・サービスの理解など、幅広い知識を必要とする仕事です。
難易度が高いと感じがちですが、身近な商品やサービスでUI/UX的な視点で観察すると、新たな気付きや学びにつながるでしょう。
UI/UXデザイナーを目指す方はもちろん、そうでない方も、ぜひUI/UXを意識して身の回りの商品やサービスに目を配ってみてください！
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。