Taku

Taku

2021/09/08

デザインに関わる仕事をしている方など、「UIデザイン」、「UXデザイン」という言葉を耳にする機会が多いと思います。

では、UI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)では、具体的にどのような違いがあるのでしょうか。
UI/UXデザイナーのそれぞれの役割とはどのようなものなのか、具体例とともにご紹介していきます。

UIとUXの違いと、「UI/UXデザイン」とは?

一般的なWebサイトやアプリは勿論、製品やサービスを提供する上で欠かせなくなってきているのが、UI/UXデザインです。
この記事の読者の皆さんの中にも、この言葉を耳にしたことのある方はが結構多いのではないでしょうか。

なんとなく一緒にまとめて語られることが多いUIとUXですが…この2つの意味は大きく異なります。

UIとは「ユーザーインターフェース」の略で、ユーザーが見たり触れたりして接する部分のことを指します。

UX「ユーザーエクスペリエンス」の略で、ユーザーがサイトや製品、サービスなどを通じて得られる体験や経験のことです。

つまり、「UI/UXデザイン」と2つを1つにまとめて呼ぶときは、UIデザインとUXデザインの二つの要素を合わせたものということ。

このUIとUXの違いについて、分かりやすいように図書館を例にしてご説明します。

例えば、館内に設置されている端末から蔵書検索のシステムを使うとします。この蔵書検索の画面が、ユーザーインターフェース(UI)のひとつです。

インターフェースとは、接点や接触面という意味です。ユーザーが目にするものや触れる部分は、UIとみなすことができます。

一方、ユーザーエクスペリエンス(UX)は、もう少し広い意味での体験や経験を指します。
読みたい本があるとき、あなたが「図書館で探してみよう」と思い、実際に図書館を訪れ、蔵書検索のシステムを見つけます。そして、そこに著者名や書籍名を入力して検索した後、実際に棚に行って本を見つける。そして、その本をカウンターに持って行って、図書館利用者カードを見せて、本を借りる。

この一連の体験がユーザーエクスペリエンスです。

図書館の蔵書検索システムのUIデザインは、いかにスムーズにかつ正確に図書を見つけられるかを目的として作られています。

一方、UXデザインは、本を探しに図書館を訪れる利用者の満足度を高いものにするために、建物の内装、司書による相談などを含めた統合的な体験を設計するものです。

 

UI、UX、「UI/UXデザイン」の違いを具体例で解説

WebサイトやアプリのUI/UXデザインとは、どのようなものでしょうか。

例えばショッピング(通販)サイトでは、UI/UXデザインのクオリティがダイレクトに売り上げに関わります。なので、ショッピングサイトの運営陣は、常にユーザーの流れを計測&分析+データをもとに仮説を立て、画面遷移の最適化や顧客体験の向上を目標に、UIのアップデートやUXの改良を行っています。
このような場面では、UI/UXデザイナーが重要な役割を担っています。

ショッピングサイトでは、どんな人でも操作に迷わず、間違えることなく、安心して買い物ができるようなページ設計が必要になります。

写真は見やすいか、情報はきちんと整理されて見やすく表示されているか、文字の色やサイズは読みやすいか、ボタンは押しやすいかなどに注意しなければなりません。

これらは、UIデザインの領域です。
また、ページの見た目の部分のみがUIではありません。

目の不自由な方向けに音声読み上げ機能に対応したり、色の識別が苦手な方にも見やすい色や表示を整えたりすることも大切です。
さらに、スマートフォンやパソコン、スマートデバイスなど、さまざまなデバイスで閲覧できるようにすることも重要です。

UXデザインは、もう少し大きな視点で買い物の体験全体をデザインします。

単にショッピングサイトの使いやすさだけでなく、そこでの商品選びや購入体験が楽しく、安心できるもので、さらに心地よくワクワクするものであるかという視点から、ユーザーの体験を考えます。

例えば、商品選びから購入までの流れは分かりやすく、ストレスなく設計されているか。
もしも、購入の途中でユーザーが離脱している場合は、ページのUIを改善するだけでなく、カスタマーサポートを充実させたり、メールで通知を送ったりと、いろいろな手法を活用して、ユーザー体験を向上させるための施策を行います。

 

UI/UXデザイナーがすべきこととは?

ここからは、UI/UXデザイナーの心得についてご説明します。

UI、UXに共通して言えるのは、対象となるWebサイトやアプリ、製品、サービスについて、とことん知るべきだということです。
可能な限りあらゆるデータを集め、仮説を立て、解決策を導き出していきます。

その際に大切なのは、ユーザーの視点で考えるということです。どうすれば使いやすくなるか、心地よい体験をしてもらえるかについて、ユーザーの視点に立って考えることが大切です。

お客様の視点で考えるうえで、ユーザーの姿を的確に認識するために「ペルソナ」を作ってみるのもよいでしょう。ペルソナとは、その製品やサービスを利用する代表的な人物像のことです。

実際のユーザーデータをもとに、もっとも典型的で平均的な人物像をペルソナとすることもありますし、あるいは「こんな人に来てもらいたい」というターゲットユーザーとして架空の人物像を作ることもあります。具体的なユーザー像を設定することで、顧客体験のシナリオをつくりやすくなります。

また、ゴールを設定することも大切です。
どのくらい認知度を高めたいのか、ユーザーに来てもらいたいのか、売り上げをアップさせたいのか、あるいはリピーターのお得意さんを増やしたいのかなど、目標を立ててみると良いでしょう。

 

お問い合わせ・ご相談

動画制作に関してご質問がございましたら、お気軽にお問い合わせください。
ホームページを見ましたとお伝えいただけましたら、対応がスムーズに進みます。

    お名前必須

    企業名必須

    電話番号必須

    メールアドレス必須

    お問い合わせ内容
    (全角1000字以下)必須

    [pac_divi_table_of_contents title=”目次” allow_collapse_minimize=”off” included_headings=”on|on|on|on|on|on” exclude_headings_by_class=”on” active_link_highlight=”on” level_markers_1=”decimal” level_markers_3=”whole” level_markers_4=”whole” headings_overflow_1=”ellipsis” headings_overflow_2=”ellipsis” headings_overflow_3=”ellipsis” headings_overflow_4=”ellipsis” title_container_padding=”10px|10px|15px|10px|false|true” title_container_bg_color=”#FFFFFF” body_area_height=”600px” body_area_scroll_width=”2px” body_area_padding=”10px|10px|15px|10px|false|true” body_area_bg_color=”#282828″ body_area_text_link_color=”#FFFFFF” allow_collapse_minimize_phone=”on” allow_collapse_minimize_last_edited=”off|phone” disabled_on=”on|on|off” _builder_version=”4.27.2″ _module_preset=”default” title_font_font=”Zen Kaku Gothic New|500|||||||” title_text_color=”#0a0000″ heading_all_font=”Zen Kaku Gothic New|500|||||||” marker_all_text_color=”#FFFFFF” sticky_position=”top” sticky_offset_top=”20px” sticky_limit_bottom=”row” global_colors_info=”{}”][/pac_divi_table_of_contents][pac_divi_table_of_contents title=”目次” default_state=”closed” included_headings=”on|on|on|on|on|on” exclude_headings_by_class=”on” active_link_highlight=”on” level_markers_1=”decimal” level_markers_3=”whole” level_markers_4=”whole” headings_overflow_1=”ellipsis” headings_overflow_2=”ellipsis” headings_overflow_3=”ellipsis” headings_overflow_4=”ellipsis” title_container_padding=”10px|10px|15px|10px|false|true” title_container_bg_color=”#FFFFFF” open_icon_color=”#0a0a0a” close_icon_color=”#0a0a0a” body_area_height=”600px” body_area_scroll_width=”2px” body_area_padding=”10px|10px|15px|10px|false|true” body_area_bg_color=”#282828″ body_area_text_link_color=”#FFFFFF” allow_collapse_minimize_phone=”on” allow_collapse_minimize_last_edited=”off|phone” disabled_on=”off|off|on” _builder_version=”4.27.2″ _module_preset=”default” title_font_font=”Zen Kaku Gothic New|500|||||||” title_text_color=”#0a0000″ heading_all_font=”Zen Kaku Gothic New|500|||||||” marker_all_text_color=”#FFFFFF” sticky_position=”top” sticky_offset_top=”20px” sticky_limit_bottom=”row” global_colors_info=”{}”][/pac_divi_table_of_contents]
    お見積りやご相談・資料請求はすべて無料です。