Webデザイン

WebデザインとUXデザインの違いとは?必要なスキルや資格について

この授業は次のような方におすすめです。

・ユーザーに満足してもらえるWebサイトを作りたい

・よくUIとかUXデザインとか言われるようになったがどんな物なのか知りたい

・WebデザインとUXデザインの違いを知りたい

この授業を最後まで受けてもらえれば、UXデザインというものがどんなものであるのか、どうしたらUXデザインのスキルを身につけることができるのかということなどがわかるようになります。

どうぞ最後までご覧になってください。

目次
  1. Webデザインとは
  2. Webデザインに必要なスキル
  3. UXデザインとは
  4. WebデザインとUXデザインの違い
  5. WebデザインとUXデザインの年収の違い
  6. UIデザインとは
  7. UIデザインにはUXの視点も必要
  8. UI/UXデザイナーとは
  9. UXデザインの例
  10. UXデザインに必要なスキル
  11. 数字と向き合う力を鍛える「ミエルカヒートマップ」
  12. UXデザインを学ぶのに役立つおすすめ本
  13. UXデザインにおすすめの資格や試験
  14. UI/UXデザインの需要はこれから伸びる
  15. いきなりUI/UXデザイナーになるのはNG
  16. まとめ

Webデザインとは

Amina Filkinsによる写真: https://www.pexels.com/ja-jp/photo/5424635/

 

先生
先生
まずはWebデザインとは何かについてというところからお話していくね。

Webデザインとは、Webサイトのデザインを行う専門職の仕事です。

良いWebサイトを作るためには、ユーザーの目線に立って考えながら、見やすくて分かりやすいデザインを作る必要があります。

会社によってはWebデザインだけでなく、その前段階の企画や構成から任されることもありますし、作ったデザインをWebで見られるようにコーディングという作業までするWebデザイナーも多いです。

Webデザインとはどんな職業か?未経験からの勉強方法から就職までこの記事は次のような人のために書いていています。 ・未経験からWebデザイナーになりたい ・Webデザインの勉強はどんな...

Webデザインに必要なスキル

先生
先生
Webデザインをするのに必要なスキルは主に次の通りだよ。

・Photoshop

・Illustrator

・HTML

・CSS

・JavaScript

Webデザインを作るには、PhotoshopやIllustratorなどのデザインツールを使いこなせるスキルが必要です。

また、コーディングまでも受け持つためには、HTML、CSS、JavaScriptなどのプログラミング言語のスキルが必要になります。

先生
先生
就職や転職時の選考の時に、上記ののスキルの経験年数を聞かれることが多いよ。
【未経験OK】これからWebデザインの仕事をするために必要なスキルこの授業は次のような方に向けて行います。 ・Webデザインの仕事をしたいので必要なスキルを知りたい方 ・未経験からWeb...
Webデザイナーはコーディングの知識があった方が有利な理由についてこの記事は次のような方に向けて書いています。 ・そもそもコーディングとはなんなのかを知りたい ・Webデザイナーにコーデ...

UXデザインとは

UXデザインの「UX」とは、「User Experience」の略で、「ユーザー体験」のことを指します。

UXデザインとは、ユーザーが使いやすく、さらに売上などの成果を生み出すサイトの設計を作る職業で、サービスを利用するユーザーの体験を最高に充実させることを目的としています。

Webサイトやアプリを利用するときに、ユーザーが体験することは、たくさんあります。

例えば、ECサイトを利用して、そこで商品を購入するという体験はUXによるユーザー体験になりますし、天気予報のアプリを使って今日の天気予報を知ったのであれば、それもUXになります。

UXデザインとはは、ユーザー体験から逆算してWebサイトやアプリのデザインを行う仕事です。

UXデザインをするには、

・クライアントへのヒアリング

・想定ユーザーへのアンケート

・サイト解析、テスト

を行うこともUXデザイナーの大切な仕事です。

先生
先生
ここで次の2つのことをお話ししていくよ。

・UXデザインのサイト設計の手法

・UXデザインはWebディレクターが進化したもの

UXデザインのサイト設計の手法

Fabian Wiktorによる写真: https://www.pexels.com/ja-jp/photo/3471423/

 

最近は、Webサイトがたくさん作られて競合が多すぎるので、Webサイトを作っても、売上に繋がりにくくなってきています。

先生
先生
なので、より良いユーザー体験を実現するために次のようなWebサイトの設計の手法が生み出されてきたんだ。

・エスノグラフィー(サービス使用シーン)の観察調査

・ペルソナを設定

・カスタマージャーニーマップ(ユーザーがサービスを知ってから体験までの流れ)の作成

・プロトタイピング作成

・ユーザーインタビュー

UXデザインはWebディレクターが進化したもの

先生
先生
「UXデザインサイトの設計の手法」の調査や業務は元々は、Webディレクターが行っていたんだ。

デザイニャー
デザイニャー
つまりUXデザインは、Webディレクターの延長線上にあるってことだニャン。

クライアントにヒアリングをしたりワイヤーフレームを作ったりするのも元々はWebディレクターの仕事ですし、今もそうです。

しかし、現在はWebサイトが乱立しているので、それだけでは成果が出せなくなってきたので、Webディレクターは、いろいろな方法で成果の出るWebサイトを作るUXデザイナーへ進化しつつあるのです

デザイニャー
デザイニャー
なので、UXデザインの仕事はWebディレクターの仕事に限りなく近いというわけだニャン。

先生
先生
場合によっては、一応UXデザイナーという名称でも実際はWebディレクターと同じ仕事をしていることがあるので注意が必要だよ。

ただし、Webディレクターが担当してきたプロジェクトの進行管理などは、プロジェクトマネージャーが担当することが普通で、UXデザイナーはサイトを設計することを担当することが一般的です。

WebデザインとUXデザインの違い

先生
先生
WebデザインとUXデザインの違いについて、次の2つのことに触れていくよ。

・WebデザインとUXデザインの業務内容の違い

・WebデザインとUXデザインの年収の違い

WebデザインとUXデザインの業務内容の違い

Lukasによる写真: https://www.pexels.com/ja-jp/photo/669610/

 

デザイナーと一口に言っても、それぞれさまざまな役割や業務があります。

先生
先生
ここでは「UXの5段階モデル」を元に説明してくね。

Webデザインの仕事は表層にあたるビジュアルデザインがメインで、どうすればビジュアルによってわかりやすく伝わるのか?ということを考えます。

世間一般で「デザイナー」と呼ばれているのは、ピクセル単位のわずかなズレを修正してあり、色彩設計を慎重に行う職人仕事のことです。

一方、UXデザイナーとは、ユーザーのニーズ分析やサービス・プロダクトの目標や目的の設計をメインにしている職業の人のことを指します。

UXデザイナーは、「ユーザーに期待通りの体験をしてもらうにはどうすればいいのか?」ということを考えます。

先生
先生
ユーザーとの対話とビジネスゴールの達成を重点的に行うため、スピーディーなPDCAを回す能力が求められるのがUXデザイナーだよ。

WebデザインとUXデザインの年収の違い

同じデザイナーでもWebデザイナーとUXデザイナーでは年収にも差が出ます。

Webデザイナーの平均年収は約453万円なのに対して、UXデザイナーの平均年収は約596万円です。

Webデザインの年収は?今より収入アップの秘訣や必要なスキルも解説この記事は次のような方におすすめです。 ・Webデザインの仕事に転職したいので、年収がどれくらいなのか知りたい ・Web...

UIデザインとは

UIデザインとは、UXデザイナーが作ったサイト設計を元にしながら

・最適な配色やボタンの形

・フォントサイズ

・写真選び

などを行って、具体的にWebサイトやアプリのUIデザインを作り込む仕事です。

先生
先生
ここでは次の2つのことについてお話しするね。

・UIデザインが生まれた理由

・UIデザインにはUXの視点も必要

UIデザインが生まれた理由

先生
先生
「UI」とはユーザーインターフェース(User Interface)の略だよ。

このUIというのは、スマートフォンのアプリが生まれたことによるものが大きいです。

スマートフォンの画面はパソコンと比べて小さいため、その画面を操作するには、シンプルで使いやすいUIが必要になります。

できる限り無駄を省いたレイアウト設計が求められるので、以前までは「UIデザイン」というと、アプリのデザインを指すことが多かったのです。

しかし今では、スマートフォンでWebサイトを観ることが普通になってきたため、Webサイトでもアプリと全く同じようにUI/UXの視点が強く求められるようになりました。

先生
先生
スマートフォンのような小さな画面でもWebサイトを魅力的に見せられるように、Webデザイナーも考えないといけなくなってきているということなんだ。
WebデザインとUIデザインってどう違うの?仕事内容についても解説この授業は次のような方におすすめです。 ・UIデザインってWebデザインとどう違うのか知りたい ・UIデザインについての...

UIデザインにはUXの視点も必要

以前まではWebデザイナーがUIデザインの役割を担当してきました。

ただ、これからはWebディレクターからもらったワイヤーフレームをPhotoshopなどでビジュアルに起こすだけではなく、UXデザイナーと同じようにユーザーインタビューに参加したり、クライアントにヒアリングすることも会社によっては必要になってきます。

先生
先生
なぜならUIはUXと深く関わっているからなんだ。

UIの制作する時には、フォトショップではなくAdobe XDやSketch、Figmaなどが使われています。

UI/UXデザイナーとは

UI/UXデザインという職種が会社に存在する場合は、UXデザイン(サイトの設計)とUIデザインの両方をやるのが普通ですが、現場によっては様々になります。

先生
先生
ここではUI/UXデザイナーについて次のようなことをお話しするよ。

・転職するときは業務内容をしっかり確認する

・会社の業態によってUI/UXデザインの業務は違う

転職するときは業務内容をしっかり確認する

転職する時には業務内容をしっかり確認するようにしましょう。

募集ではUXとUIの両方の人材を指している場合もあればUXだけの場合もあります。

先生
先生
時々、「UI/UXデザイナー募集」と言いながら、実際にはWebディレクターをさせる会社もあるので、注意が必要だよ。

人が少ないためにWebディレクターとWebデザイナーをかねている人をそう呼ぶ場合もありますので、転職活動をする際には、具体的な業務内容をきちんと確認した方がいいです。

会社の業態によってUI/UXデザインの業務は違う

先生
先生
Web制作会社なのか事業会社なのかで、UI/UXデザインの役割は少し変わってきます。

制作会社で働くUI/UXデザイナーは、クライアントの新規サイト設計とUIデザインを行うことが普通です。

しかし事業会社のUI/UXデザイナーは、自社サイトの改善をするのが普通で、すでに存在するWebサイトの成果をあげることが仕事です。

なので、A/Bテストをしたり、アクセス解析やヒートマップの結果を元にして、ボタンの色や人物写真を変えてみたりするなどの改善をし続ける職業でもあります。

この場合は、Webマーケティングの知識が必要になります。

このような改善に特化した作業を行う職種のことをグロースハッカーという事もあります。

グロース(成長)をハックするためには、UXデザインとウェブマーケティングのスキルが求められます。

UXデザインの例

先生
先生
UXデザインを使ったWebサイトの例が紹介されている記事を見つけたよ。ぜひ読んでみてね。

UXデザインに必要なスキル

UXデザインの仕事内容はWebデザインとは大きく違いますので、単純に「WebデザインができればUXデザイナーになれる」というわけにはいきません。

また、デザイナーといったら美大や芸大卒の方が有利なのかなという声もありますが、UXデザインは業務範囲が広いため、文系・理系・美大卒・芸大卒などを問わずに誰でも自分の強いを生かして活躍することができる仕事です。

先生
先生
ここでは、UXデザイナーに役に立つスキルについて、次のことをお話ししていくね。

・コミュニケーション力

・連携力

・ブランディングについての知識

・コーディングやプログラミングの知識

・数字と向き合う力

コミュニケーション力

fauxelsによる写真: https://www.pexels.com/ja-jp/photo/3184325/

 

UXデザイナーの仕事は仕事上、立場が異なる人たちと接する場面が多いので、コミュニケーション能力が重要になります。

連携力

fauxelsによる写真: https://www.pexels.com/ja-jp/photo/3184418/

 

ユーザーとの対話のためには、マーケティングチームやCSチームとの連携が必要になります。

また良いプロダクトを作るリソースを確保するためには経営陣の理解が必要不可欠です。

先生
先生
気軽に協力してもらえる人間関係を作っておくのが理想だよ。

ブランディングについての知識

fauxelsによる写真: https://www.pexels.com/ja-jp/photo/3183131/

 

一貫性のあるプロダクトを作り出す上で、ターゲット市場での認識を分析して、どのように認識されたいかということを計画していくブランディングの知識が必要になります。

コーディングやプログラミングの知識

olia danilevichによる写真: https://www.pexels.com/ja-jp/photo/4974912/

 

コーディングやプログラミングの知識があるほど、エンジニアとの連携がスムーズになります。

Webデザイナーはコーディングの知識があった方が有利な理由についてこの記事は次のような方に向けて書いています。 ・そもそもコーディングとはなんなのかを知りたい ・Webデザイナーにコーデ...
Webデザインに動きをつけるJavaScriptの基礎と学習サイトこの授業は次のような方にぜひ受講してほしいです。 ・Webサイトに動きをつけるJavaScriptについて知りたい方 ・...
Webデザインとプログラミング|これから目指すならどちらにすべき?この授業は次のような方へおすすめです。 ・Webデザインとプログラミングの仕事内容の違いについて知りたい ・Webデザイ...

数字と向き合う力

ユーザーからの評価は、経験値やなんとなくの感覚値では推し量れません。

自分の意図をより正しくユーザーに伝えるには、Googleアナリティクスやヒートマップなどの数字と向き合う力が必要になります。

数字と向き合う力を鍛える「ミエルカヒートマップ」

デザイニャー
デザイニャー
数字と向き合う、だなんて、ちょっと難しそうだニャン。

先生
先生
確かにビジュアルデザインが強みなデザイナーにとっては、そういった細かい分析画面を見るのはあまり得意とは言えないかもしれないね。

しかし、ビジュアルを見るだけで分析ができるとしたら、数字と向き合う力を直感的に楽しく鍛えられるかもしれませんよ。

先生
先生
ここで登場するのが「ミエルカヒートマップ」だよ!

ミエルカヒートマップ」とは、視覚的なデータで数字と向き合う力を鍛えられるツールです。

先生
先生
ここでは「ミエルカヒートマップ」について次のことをお話ししていくよ。

・ヒートマップとは

・ミエルカヒートマップの使い方

ヒートマップとは

出典:MIERUCA HEATMAP

 

ヒートマップというのは、ユーザーの行動や興味関心を可視化することができる便利なツールです。

ミエルカヒートマップの使い方

先生
先生
ミエルカヒートマップ」の使い方は次の通りで簡単だよ。

・ユーザーの行動をもとに読まれていない部分を削除する

・ユーザーの離脱が起こっている部分を改善する

デザイニャー
デザイニャー
一生懸命頑張ってデザインを作ってもユーザーに見てもらえないとしたら、とても悲しいよニャン。

先生
先生
デザイナーからユーザーへの一方通行を減らすためにも「ミエルカヒートマップ」は効果的だよ。

ユーザーの本心がヒートマップでわかる

ミエルカヒートマップ」を使うとユーザーの本心がわかるようになります。

先生
先生
ここでは「ミエルカヒートマップ」についてCTAボタンを例に、次の2つのことに軽く触れるね。

・ヒートマップがないと不便な点

・ヒートマップがあると便利な点

・デザイナーが分析スキルを知るメリット

ヒートマップがないと不便な点

ヒートマップがないと、CTAボタンを押してもらえていないことがわからず、見た目は良いれどCVが低いなどのように独りよがりのデザインになってしまいます。

ヒートマップがあると便利な点

一方、ヒートマップがある場合は、CTAボタンが押してもらえていないことが一目でわかります。

そこから、ボタンの場所が適切なのか?などの仮説検証ができます。

そしてボタンの位置を改善することによって、ユーザー目線のデザインに作り直すことができるようになります。

デザイナーが分析スキルを知るメリット

先生
先生
デザイナーが分析スキルを知るメリットは次の3つだよ。

・根拠に基づいてデザインを提案することができる

・評価が高くなる

・ポートフォリオでアピールできる

根拠に基づいてデザインを提案することができる

デザイナーが分析スキルを使うと、根拠に基づいてデザインを提案することができ、クライアントに納得してもらうことができるようになります。

評価が高くなる

分析スキルを使うことで、成果物や改善の実績が効果を生んでいるいることを証明することができ、デザイナーの仕事を高く評価してもらうことができるようになります。

ポートフォリオでアピールできる

数字と向き合える力やサイト分析ができるデザイナーは数少ないので、多くの仕事の時に調法がられます。

またUIデザイナーやUXデザイナーへ転職する時にもアピールすることができます。

【採用される】Webデザインのポートフォリオを作る3つの流れとコツこの授業は次のような方におすすめです。 ・未経験でWebデザインの仕事がしたくて就職や転職をする方 ・ポートフォリオを作...

UXデザインを学ぶのに役立つおすすめ本

先生
先生
UXデザインを学ぶのにおすすめの本は次の1冊だよ。

UXと理論で作るWebデザイン

 

 

UXデザインにおすすめの資格や試験

UXデザイナーになるためには特に資格は必要ではありません。

しかし、

・人間中心設計(HCD)専門家制度

・ユニバーサルデザインコーディネーター

の資格を持っていると、デザインスキルを証明できるので、転職の際に有利になります。

先生
先生
この2つの資格についてお話ししていくね。

人間中心設計(HCD)専門家制度

人間中心設計(HCD)専門家制度は、特定非営利活動法人人間中心設計推進機構が実施する認定制度です。

・プロダクトやサービスの設計・開発におけるユーザビリティ

・人間中心設計

・UXデザイン

などの専門性を認定する資格です。

「スペシャリスト」と「専門家」という2つがあって、スペシャリスト2年以上、専門家は5年以上の実務経験が受験資格になります。

UXデザイナーに必要なスキルが証明できますし、転職の際にも大きく有利になるので、受験してみる価値があります。

ユニバーサルデザインコーディネーター

ユニバーサルデザインコーディネーターは、特定非営利活動法人 実利用者研究機構が認定する資格です。

3級、準2級、2級、準1級、1級に区分されています。

この資格を持っていることで、高齢者や障がい者、人種や国籍に関係なく全ての人が使いやすいユニバーサルデザインの視点で物事を解決できる力を持っている人材として評価されます。

これもUXデザイナーとして転職する際に有利になります。

UI/UXデザインの需要はこれから伸びる

AIやビッグデータの活用と関連してIoT(Internet of Things)はどんどん普及していき、今ではUI/UXデザインの需要が高まってきています。

IoTとはさまざまな物をインターネットに接続させて、IoTの技術を活用することです。

例えばスマートフォンを家電のリモコン代わりにして、スイッチを入れたり、スマートフォンを使って利用状況を確認したりすることができます。

このようなIoTはこれから色々な分野で拡大していくことが見込まれていて、ユーザーにとってわかりやすく使いやすいシステムやサービスを設計することができるUI/UXデザイナーの需要もこれから大きく伸びることが見込まれています。

いきなりUI/UXデザイナーになるのはNG

ここまで話した背景もあり、未経験でUI/UXデザイナーになりたいと希望する人が一気に増えてきていますが、いきなりUI/UXデザイナーになるのはあまりおすすめできません

先生
先生
ここではUI/UXデザイナーになるためにはどうしたら良いのか、次のことをお話ししするね。

・UIデザインにはWebデザインの経験が必要

・まずはWebデザイナーを目指すのがおすすめ

UIデザインにはWebデザインの経験が必要

ビジュアルデザインは苦手なんだけど、UIデザインなら簡単そうでできるかもと思っている方ももしかしたらいるかもしれませんが、その考えは甘いですよ!

UIデザインでも、配色余白ジャンプ率タイポグラフィーなど、Webデザインのスキルがかなり求められるからです。

また、サイトのメインビジュアルをデザインしなければいけなくなった時に、ビジュアルデザインができないようでは困ります。

なので、未経験でいきなりUI/UXデザイナーになろうとするのはおすすめできません。

まずはWebデザイナーを目指すのがおすすめ

なので、まずはWebデザインのスキルである「装飾美」のスキルを身につけてから「機能美」のUI/UXデザインを目指すことをおすすめします

今の時代では、 Webデザイナーとしてやっていくにしても、UI/UXデザインの視点が問われています。

UXデザイナーになりたいのであれば、まずはUIというジャンルを包んでいるWebデザイナーになるのが賢い選択かもしれません。

まとめ

先生
先生
この授業では次の39個のことについてお話ししてきたよ。

・Webデザインとは

・Webデザインに必要なスキル

・UXデザインとは

・UXデザインのサイト設計の手法

・UXデザインはWebディレクターが進化したもの

・WebデザインとUXデザインの違い

・WebデザインとUXデザインの業務内容の違い

・WebデザインとUXデザインの年収の違い

・UIデザインとは

・UIデザインが生まれた理由

・UIデザインにはUXの視点も必要

・UI/UXデザイナーとは

・転職するときは業務内容をしっかり確認する

・会社の業態によってUI/UXデザインの業務は違う

・UXデザインの例

・UXデザインに必要なスキル

・コミュニケーション力

・連携力

・ブランディングについての知識

・コーディングやプログラミングの知識

・数字と向き合う力

・ヒートマップとは

・ミカエルヒートマップの使い方

・ユーザーの本心がヒートマップでわかる

・ヒートマップがないと不便な点

・ヒートマップがあると便利な点

・デザイナーが分析スキルを知るメリット

・根拠に基づいてデザインを提案することができる

・評価が高くなる

・ポートフォリオでアピールできる

・UXと理論で作るWebデザイン

・UXデザインを学ぶのに役立つおすすめ本

・UXと理論で作るWebデザイン

・UXデザインにおすすめの資格や試験

・人間中心設計(HCD)専門家制度

・ユニバーサルデザインコーディネーター

・UI/UXデザインの需要はこれから伸びる

・いきなりUI/UXデザイナーになるのはNG

・UIデザインにはWebデザインの経験が必要

・まずはWebデザイナーを目指すのがおすすめ

これからは、UI/UXデザインの需要がどんどん伸びていくことが予想されます。

UI/UXデザインは、Webデザインの進化版だということがわかりましたね。

よりユーザーに満足してもらえるWebサイトを作るためには、UI/UXデザインのスキルが必要になります。

まだ未経験の方は、いきなりUI/UXデザイナーを目指そうとするよりも、まずはWebデザインを経験してからUI/UXデザイナーを目指すことがおすすめです。

私たちは頑張るあなたを応援しています。