paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

Webデザイン入門者向け「UI・UX」って何?UXを向上させるには?

f:id:paiza:20180524142407j:plain

上原です。

paiza(ギノ)に入社して3ヶ月くらいのWebデザイナーです。

今回は、Web制作の現場でよく聞く「UIとUX」って一体何なのか、どういう関係性なのか、またUXを考えるのは誰の仕事なのか…などといった話を書きたいと思います。

デザイン初心者の方、これからデザインを学びたい方、UIとかUXってよく聞くけど何なのか実はよくわかってない方、そんなのはデザイナーが考えることだから関係ないと思っている方にとって少しでも参考になればと思います。

UIとUXの関係性について

UI(User Interface)とは

人とデバイスをつなぐ役割をする機能のこと。
=ユーザーの操作を助ける要素。

UX(User Experience)とは

プロダクトやサービスなどの利用を通じて、ユーザーが得る経験のこと。
=サービスを通じて得られる感覚、感情も含むすべての経験

たとえば、このpaizaのトップページで言うと…

f:id:paiza:20191007115111p:plain

この通り、ヘッダーのリンクやボタン、コードを入力できるエディタエリアなどなどは、ユーザーの操作を助ける機能=UIと言えます。

対してUXは、このページに対する「使ってみて楽しい・おもしろい!」「わかりにくくて使いづらい!」などといった感情や経験です。

「それくらい知っとるわ」という人も多いかと思いますが、何が言いたいかっていうと、「よくUI・UXって並列にひとまとめにされがちだけど、全然並列の言葉じゃない」ということです。

UIは、あくまでUXのもととなる「ひとつの要素」にすぎません。

f:id:paiza:20191008151614p:plain

f:id:paiza:20191008151642p:plain

サービスを通したUXを向上させるには

では、よりよいUXを作るにはどうしたらよいのでしょうか。

私は、UXを向上させるために必要なのは、大きくわけて

  • おもてなし精神
  • ユーザー理解

の2つだと思っています。

もう少し補足します。UXをよくするには、作り手側が一方的なおもてなしの気持ちだけで終わってはいけません。

たとえば、プログラミング学習のWebサービスがあって、そのユーザーであるプログラミング初心者たちが「手軽に学びたい」「楽しく学びたい」と思っていたとします。しかし、作り手側が「プログラミングを学ぶならまずは手続き型言語から!」「環境設定を自分でやれるようになってから!」と考えて、最初から難しい内容を網羅するようなコンテンツばかり作っていたら、UXは向上しませんし、ユーザーも離れていってしまいます。(※最初から難しい内容に取り組むことの是非ではなく、あくまでサービスを通して得られるUXの例の話です)

だから、よりよいUXを作るには、自分たちがよいと思うものばかりを形にするのでなく、それを使ってくれるユーザーを理解することが何よりも重要なのです。

f:id:paiza:20191008153832p:plain

UXを考えるのは誰の仕事?

最近はUXデザインとかUI/UXデザイナーとかいう言葉が広まっているので、「UXについて考えるのはデザイナーの仕事でしょ」と思っている方もいるかもしれません。

しかし、UXのもととなる領域は非常に広く、デザイナーが携われるのは下図くらいの領域にすぎません。どれだけ見た目のよいサービスがあったとしても、企画内容や機能がともなっていなければ、UXを向上させることはできないのです。

f:id:paiza:20191008153916p:plain

では、誰がUXを考えるべきなのか?やはりオーナーはビジネス視点から、 エンジニアは開発視点から、デザイナーはデザイン視点から…というように、サービスや企画にかかわる人が全員UXを意識することで、初めてよいUXを作れるのではないでしょうか。

f:id:paiza:20191008154230p:plain

まとめ

というわけで、UIとUXって何なのか、どういう関係性なのか、またUXを考えるのは誰の仕事なのか…などなどのお話でした。

UXについては、そのサービスにかかわる人全員が考えるべき領域だと思いますので、やっていきましょう。

paizaラーニングの「Webデザイン入門編」では、ITエンジニアやデザイン初心者の方向けに、Webデザインの基礎が学べる動画レッスンを公開しています。

Webデザイン入門編について詳しくはこちら





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud