top of page
執筆者の写真saygo

デザイン|WebとUIの違いをまとめてみた/それぞれに向いている人の解説付


今回も僕たちのブログ、HS BLOGに来て頂き、ありがとうございます。


デザイナーを仕事としていると「何のデザイナー?」と聞かれることもあります。確かに、デザイナーといっても色々なデザイナーがいます。僕たちが仕事としているWebの世界において見てみても様々なデザイナー職がいます。


そして今回、書こうとするのは案外と混同されてしまいやすい、


  • Webデザイナー

  • UIデザイナー


それぞれのデザイン/デザイナーについて書いていきますね。今ではWebデザイナーを目指す人、UIデザイナーを目指す人、と区別されていますがそもそもWebデザインとUIデザインは何がどう違うのでしょうか?





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

超簡単に説明するとWebデザインは「見た目の美しさ」をデザイン、UIデザインはユーザーが使いやすい「機能性」をデザインするという違いがあります。


  • Webデザイン:Webサイト/サービスの見た目の美しさを整えるデザイン

  • UIデザイン:ユーザーがWebサイトやスマホアプリを快適に使えるためのデザイン


となります。ただ、ここ数年でWebデザインにも(ユーザーにとって)使いやすさが配慮されたデザインを求められるようになり、UIデザインを加味したWebデザインを作成することが多くなってきています。僕たちの場合は元々、この「Webデザインも使いやすくないとね」の考え方からスタートしていますので弊社内のWebデザインとUIデザインの線引きは明確にはしていません。





WebデザイナーとUIデザイナーの大きな違い

先の項で分かったと思いますが、WebデザイナーとUIデザイナーでは特に次の点において大きな違いがあります。


  • Webデザイナー:クライアント目線で見た綺麗なデザイン作成

  • UIデザイナー:ユーザー目線(クライアントの顧客)で見た使いやすいデザイン作成


この『誰の目線で作るか』は非常に大切です。確かにお客様の要望や期待、目的に沿ったデザインを作ることは大事ですが、作った結果どうなるか、誰に見てもらい、どう反応(アクション)されたいのか、といった細々したことも考慮して作ることがデザイン作成の本質となります。作って、はい終わり、では仏作って魂入れずといった状態になってしまいます。


次に具体的な仕事内容に関して書いていきますね。





Webデザイナー

_仕事内容


Webデザイナーは、クライアントのご依頼や要望を基にWebサイトやホームページ、さらにはWebサービスのデザインをする人(仕事)です。


企業や個人事業主の方から相談や依頼を受け、そのクライアントが持つイメージをWebサイトやWebサービスに反映させてデザイン制作します。色やレイアウト、コンテンツなどをデザインしていきます。ビジュアルだけでなく、HTMLやCSSなどの言語を使いコーディングも行うこともありますが最近では、ビジュアルとコーディングを部門で分けている会社もあれば、ビジネスパートナーとチームを組んで、分業するところも多くあります。これはフリーランスとして独立起業する人が増え、彼らの働く場としてコワーキングスペースが当たり前になりつつあることが、要因の一つとして大きくあると思います。


  • コワーキングスペース:主にフリーランス(個人事業者)およびスモールカンパニー(小規模法人)が、オープンなワークスペースを共用し、各自が自分の仕事をしながらも、自由にコミュニケーションを図ることで情報や知見を共有し、協業パートナーを見つけ、互いに貢献しあう「ワーキング・コミュニティ」の概念およびそのスペースを指します。https://www.coworking.coop/about/coworking/



_Webデザイナーに必要なスキル


Webデザイナーは主にAdobe製品クリエイティブソフトであるPhotoshop、Illustrator等を使いこなすスキルが求められます。


加えて、HTML・CSS・JavaScript等の言語を使ったコーディングスキルも必要となってきますが最も必要なスキルは、クライアントはもちろん、制作チームとうまく仕事を進めていくためのコミュニケーションスキルです。クライアントだけでなくチーム内での共通認識を持つことがデザイン作成することにおいて非常に大切です。





UIデザイナー

UIとは、User Interface(ユーザーインターフェース)の略となります。Webサイトやスマホ、アプリ等の表示画面や操作方法のことを指します。


_仕事内容


Webサイトやアプリ上にある各要素のレイアウトから、ボタンの配置・大きさ、色やフォント、検索・問い合わせフォームなどをユーザー目線で使い勝手の良いデザインに整えていくことが、UIデザイナーの仕事となります。Webデザイナーはあくまでもクライアントの意志や理念などを的確且つ綺麗に表現=デザインしていきますが、UIデザイナーはその先の(クライアントの)ユーザーが如何に見やすく使いやすいかを考えて表現=デザインしていきます。



_UIデザイナーに必要なスキル


ユーザー視点に立って、Webサイトを見たときの感じ方やアプリの使い勝手を客観的に分析・改善する力が必要不可欠となります。


Webサイトやアプリが評価されている点にではなく、不満に思われている部分に注意を払うことが非常に大事で、その不満を解消/解決するにはどうすればいいのかを考え改善していくことが出来るスキルが必要になってきます。


使うツールとしてはWebデザイナーとは大差なく、Photoshop、Illustratorなどを使いますが、UIデザイン用に設計されたAdobe XDも使えるようになっておきましょう。特に最近では、XDを使ってサイトを作るWebデザイナーも非常に多くなってきています。



実は僕たちも今ではXDを使ってWebサイトを作ることが多くなってきています。





向いている人ってどんな人?

ここまで読んでくると、どういった人が向いているかは想像しやすいと思います。ざっくりとですが、


  • Webデザイナー:見た目(ビジュアル)をデザインする仕事をしたい人・コミュニケーションが得意な人・Web制作に関わりたい人

  • UIデザイナー:機能美をデザインしたい人・機能美にこだわりたい人・Webやアプリの困り事を解決したい人・スマホアプリが好きな人


こんな感じの人がそれぞれのデザイナーに向いていると思います。またWebサイトもアプリも作り始めてから、完成し公開するまでにはかなりの期間を要します。内容や仕様にもよりますが僕たちの経験上、長いもので4ヶ月、短いもので1ヶ月半とかかっています。その期間、同じことを繰り返すこともしばしば、さらには長時間労働と思われて仕方ない一日の過ごし方の時もあります。そのため、向いている共通項としては『働くことが大好き』ってことがあります。本当にたまにですが、寝る間も惜しんで、なんて感じになることもあります。が『好きこそ物の上手なれ』って言葉通り、夢中になって当たれば、自然とスキルも知識も付いてきて、お客様にも面と向かって喜ばれる仕事なので、やり甲斐は十二分に感じることが出来る仕事でもあります。






デザイナーになるにはどうすれば良い?

デザイナーになるにはどうすれば良い?と聞かれることがありますが正直、これに対する正解はないと思っています。解りやすい方法としては、専門学校に通ってスキルや知識を学んで就職活動をする方法があります。


また今では、オンラインで開講しているスクールやセミナーが専門学校に通うよりも安く受けられるので、そちらで学びながら、作品をポートフォリオとして持って自分で制作会社などを回る方法もあります。


本当、正解はないのですが一つだけ確実に言えることは、自ら動いた分だけデザイナーになれる道には確実に近づけるということです。実際に仕事に就いてからでも、覚えることは日々多くあります。Web業界の技術は日進月歩で進化しているため、何十年も経験しているベテランの人でも、自ら高めたり深めたりしようと何かしら学んでいます。


学ぶ姿勢を忘れなければ、デザイナーになれるし、長く続けることもできます。





さいごに

今回の記事で、Webデザイン/デザイナーと、UIデザイン/デザイナーの違いが解っていただければ嬉しく思います。さらには「やってみたい」とか「なりたい」なんて思ってもらえれば光栄に感じます。


混同しがちなWebとUI、それぞれデザイン(の視点)の違いはありますが今後は明確な線引きは薄くなっていき、Web作成といった包括的な方向に行くとも感じています。


今回も最後まで読んで頂き、ありがとうございます。







おまけ.その1


よくUIと一緒に説明されているものに「UX」があります。UXデザインに関しては、別の記事でじっくりと説明します。実はこれから本当に必要となってくるデザインは『UXデザイン』です。そしてこれはブランディングと一緒の作っていくことで大いに効果を発揮してくれるデザインでもあります。



おまけ.その2


今回の中にグラフィックデザインのことを説明しなかったのですが、グラフィックデザインはWebデザインとUIデザインの二つの要素を持っています。グラフィックデザインは見た目だけでなく、人の訴求効果を大いに促進する役目も持っています。そのため、至る場面/場所で未だに必要とされています。例えば、会社案内や学校案内のパンフレット、ブランド商品のカタログ、映画や劇のポスター・パンフなどがあります。グラフィックデザインに関して、UXデザインを説明した後にしっかりと記事としますね。

bottom of page