インターネットビジネス最新情報ポータル IBNIP

UIUXとは?違いや特徴を初心者Webデザイナーにわかりやすく解説!

Webデザイナーの求人には様々な職種がありますが、近年注目度の高い職種がUI/UXデザイナーです。UI/UX はWebデザインを進める上で欠かせないスキルで、今やWeb制作において必須といえます。

UIとUXは名前が似ているため混同されがちです。初心者Webデザイナーの中には、UIとUXの違いがよくわからないという方もいるのではないでしょうか。

今更聞けないUIとUXの違いや特徴、Webデザイナーの仕事との違いについて解説します。

UI/UXとは

UI/UXは、Webサイトやスマホアプリの開発などでよく使われる言葉です。UI/UXとまとめて使われることが多いため間違いやすいのですが、UIとUXは似ているようで異なる意味を持ちます。

UIとは

UIとは、ユーザーインターフェース(User Interface)の略語です。ユーザーが直接製品に接する部分のことを指します。

たとえば、アプリのメニュー画面のデザインは、UIデザインにあたります。ユーザーが、インターフェイスを通じて快適に製品を使うために、UIデザインが重要です。

ユーザーが使いやすいように、メニュー画面のアイコンの大きさ、色、間隔をどのようにするか考えるのは、UIデザイナーの仕事です。ユーザーにとって使いやすく、便利なインターフェイスを考えて、デザインに落とし込んでいきます。

ユーザーが目にする部分のデザインを担当することが多いため、タイポグラフィや視覚デザインのセンスが求められることが多いです。

UXとは

UXとは、ユーザー・エクスペリエンス(User Experience)の略語です。ユーザーが製品を使うことで、どのような体験を得られるかを指します。

たとえば、アプリを使った時に感じる楽しさや便利さ、といった感情がUXにあたります。利用したユーザーの満足度を高めることが、高いUXに繋がります。

反対に「使いづらい」「わかりにくい」といった不快な感情を抱かせることは、UXが考えられていないデザインということになります。

UXデザインの基本は、まずユーザーが何を求めているか徹底的に調べることです。

ユーザーがその製品やWebサイト、アプリに求めているものを調べ、問題点の解決や使用感の向上を目指すのが主な仕事です。

そのため、UIデザインとは異なり、実際にデザインを手掛ける作業よりも、デザインの元となる設計を担当する場合が多い仕事です。

UIとUXの違いとは?

UIはUXの一部ではありますが、UX は UIとは関わらない部分もあります。

UXもUIもユーザーにとっての使いやすさという意味では共通点があります。しかし、明確に異なる点もあります。

まずは、明確に異なる点からお話しします。

UIは簡単に言えば、デザインやレイアウトのような、外観の形や色などを工夫することにより、視覚的デザインをもってユーザーに働きかけるものです。

例えば、Webサイトで言えば、バナーを目立つ色にする、バナーをクリックされやすいような形にする、などの方法が考えられます。

一方、UXは導線や使いやすさなどにより、ユーザーに「嬉しい」体験をさせるためのものです。

「嬉しい」とは、「知りたい情報にたどり着くまでに何回もクリックせずに、一回で済む」、「必要な情報のそばに関連する情報がある」、「知りたい情報にたどり着くまでの順番が段階を踏んでいてわかりやすい」というように、ユーザーの「嬉しい」体験をデザインするものです。

次に両者に共通する点を挙げてみましょう。

バナーデザインが目立つ色である、目立つ形であることによって、ユーザーがバナーをクリックしやすくなるのであれば、UIもユーザーが「嬉しい体験」をさせることに一役買っていることになりますから、UXの一部とも言えます。

UI/UXを高める方法

UIを高めるための施策

UIを高めるための6つのポイントをご紹介いたします。

1. ターゲットを意識する

例えばWebサイトのUIの場合、バナーなどの色やレイアウト、キャッチコピー、使用するイラストや写真などはターゲットとなるユーザーを意識しながら決めることが重要です。

2. 重要な情報を載せる位置を考える

人は、紙媒体の場合の視線の進み方はZ型と言われています。

一方、Webサイトの場合はF型と言われています。

これは、概ね、上部ロゴ、左メニューを見て、コンテンツを見て行くという順番になりますから、重要なものは左側、上部を優先して配置するとよいでしょう。

例えば、ログインしないとマイページに行けないWebサイトの場合、ログインボタンがフッターの右下にあると、ユーザーは探すのに手間取ってしまいます。

ログインボタンという重要な要素は、上部の左か、せめて、上部右側に配置するべきなのです。

3. 視覚に訴える

Webサイトを見るユーザーは、そのコンテンツをくまなく読むわけではありません。ざっと流し見をして、気になったところだけを読むという人が大多数です。

ですから読んでもらうためには、テキストで細かい説明をする以前に、読んでもらいたい箇所を画像や大きいフォントなどを使う、テキストよりもバナーやアイコンを使って視覚に訴えることが大切です。

例えば、ある商品の特長が、「ハイスペック」「業界最安値」「長期保証」であった場合、いかにハイスペックなのか、どの業界で最安値なのか、長期保証の条件などをだらだら説明する文章で表現するより、まずは、「ハイスペック」「業界最安値」「長期保証」の3ワードを丸で囲むなりして目立たせて、興味を引くようにします。

つまり、読まなくても分かる状態にしておくわけです。

4. コントラストをつけて見やすくする

参照:https://atirail.jp/

同じ様な色で同じようなレイアウトが続いていると、見ている方も飽きてきますし、目立ちもしません。

背景となる部分を、白の次は黒にしてみるなど変化を持たせることで、メリハリがつき、読み手も新鮮な気持ちで次の記事を読むようになります。

5. 余白を多めに取る

参照: https://atirail.jp/shihoushoshi/

特に1ページ完結型のランディングページの場合は、ページが長いので読みやすさに注意することが大切です。

読みやすくするためには、余白を多めに取り、ぎっしり文字が詰まっているイメージにしないことです。

そのためには、タイトルのフォントを大きめにする、段落のスペースは大きめに取るなどの工夫が必要です。

6. 配色を考える

配色は人に違和感を与えるような色は避けるべきです。

例えば、カレー専門店のWebサイトに、紫色を使うと、なんとなくチグハグな感じがします。飲食店は暖色系の方が食欲をそそると言われています。

カレーであればカレーの黄色い色を使う方がより、ユーザーがカレーをイメージしやすいでしょう。

水族館のWebサイトであれば、水のイメージ、ブルーやブルーグリーンなどがイメージしやすいでしょう。これがピンク色であったとすると、どこかチグハグなイメージになってしまいます。

UXを高めるための施策

UXを高めるための6つのポイントをご紹介いたします。

1. ターゲットを意識する

ターゲットを意識することはUIにも言えることですが、年齢や性別によって、使い勝手を変える必要があります。

例えば、シニアなどスマートフォンに慣れていない人向けにはひたすらシンプルで、導線が分かりやすいことを最優先させます。

また、店舗の場合は「来てもらえてこそ」という側面がありますから、アクセスページへの導線をわかりやすくします。

2. Webサイトの重さ

Webサイトにアクセスされてから、画面が表示されるまでの速度が異常に遅いと、ユーザーが離脱してしまうことがあります。

例えば、メイン画像の表示サイズは1200pxだったとしても、元の画像が4000pxで5MBもある、というような場合は、表示がとても遅くなる場合があります。

また、使用するスクリプトによっても表示が遅くなることもあります。表示が遅い場合はその原因を特定して対処するようにします。

3. レスポンシブデザイン

参照:The Statistics Portal

ここ数年は、特にモバイルからのアクセスが増えています。

近年の調査では、モバイルのシェアが50%を超えており、若者向けのWebサイトでは9割がモバイルからのアクセスであるケースもあります。

Googleもモバイルファーストを推奨しており、モバイル対応していないWebサイトは検索順位に影響を受けます。

これだけモバイルからのアクセスが多いということは、モバイル対応していないWebサイトはユーザーが使いにくいと思い、アクセスもされにくくなる可能性もあります。

モバイル用のWebサイトを別に作るより、更新効率を考えるとレスポンシブデザインで制作することをお勧めします。

4. EFOを意識する

入力フォームを入力する際にイライラした経験のある方は多いのではないでしょうか。

Webサイトオーナーはユーザーのより詳しい情報が欲しいために、細かい情報を求めますが、ユーザー側はそれを面倒と考えます。

ユーザーの事を考えると、少しでも簡単に入力作業を終えられるようにしたいところです。これらはEFOエントリーフォーム最適化)とも言われます。
  • エラー表示は見えにくいところに表示しない。できればインラインで表示する。
  • 電話番号は一つのフォームで表示する。(3つの枠に分けると、その都度、カーソルを移動させる必要があるので面倒)
  • フリガナ入力は避ける。(入力項目は少しでも減らしたい)
  • Emailの確認作業はさせない。(間違いを減らすメリットはあるものの、コピペできるシステムでは無意味)
  • 郵便番号の入力で住所自動表示させるようにする。(住所を入力するのは大変なので、可能な限り自動表示したい)

5. リンクエラーやバグをなくす

せっかくクリックしてもリンク先がない、テキストが枠からはみ出している、レイアウトが崩れているなどのバグがあると、このWebサイトは本当に機能しているか?という疑問を抱かせてしまいます。

それはユーザーに不便をかけると同時に、信頼度にもつながります。サイトチェックを入念に行ってエラーやバグをなくすことが大切です。

6. 導線をチェックする

導線については一部UIにも関わってきますが、ページのレイアウトだけではなく、ページをまたいだ導線も重要です。

例えば、購入画面に至るまでに、何ページもの深い階層を経由しなくてはいけないようであると、ユーザーは途中で離脱してしまう可能性があります。

商品一覧から詳細画面に入らなくても、一度買ったことがある人であれば一覧画面から直接購入することも考えられますから、一覧ページからも購入できるようにしておくなどの工夫があるとよいでしょう。

まとめ

UI/UXを意識したデザインはあらゆる現場で役立ちます。UI/UXは、Web業界に留まらず、これからますます発展していく分野です。

UI/UXは新しい分野のデザインのため企業によって定義は異なりますが、UI/UXの知識があれば、サービスや製品の質を大幅に向上させることができます。

現在Webデザイナーとして活躍している方も、UI/UXの知識がなければ、この先の変化にはついていけないかもしれません。UI/UXのスキルを身につけて、ステップアップを目指しましょう!

[記事公開日]2018.05.22
[最終更新日]2019.03.04
[ライター]首藤