UI/UXデザイナー・Webデザイナーとプログラマーの違いとは？兼任はできる？│にっこりWebデザイン

※記事内に商品プロモーションが含まれる場合があります

こんな方に向けて書いたよ

未経験からUI/UXデザイナー、Webデザイナーを目指しています
プログラマーとの違いがよくわかりません
プログラマーのスキルも得ておいたほうがいいの？
デザイナーとプログラマーって兼任できるの？

この記事の内容だよ

UI/UXデザイナー、Webデザイナーとプログラマー（PG）との違いを説明するよ
ぼくがいた事業会社だと、UI/UXデザイナー・Webデザイナーとプログラマー（PG）は世界が結構違くて、キャリアを横断するような人はいませんでした

詳しく見ていきましょう。

はじめに
UI/UXデザイナー、Webデザイナーとプログラマーの違い
UI/UXデザイナー、Webデザイナーはプログラマーのスキルを身につけるべき？
まとめ

はじめに

ぼく

先生、プログラマーってどんな職種なんですか？

プログラマーはシステムの開発実装をする人のことを言うんじゃ。PHPやRuby、Javaといったプログラミング言語を使うんじゃぞ。

先生

ぼく

デザインはあまりやらないんですかね？

あまりというか、ほとんどやらないと思っていた方がいいぞ。デザインとはだいぶ違う分野じゃからな。

先生

未経験からUI/UXデザイナー、Webデザイナーを目指していると、「プログラマー」という職種を目にする方もいるかと思います。

プログラマーはITの現場だとPG（ピージー）などと呼ばれることもあり、プログラミング言語を使ってゴリゴリにシステムを開発するようなポジションになります。

「UI/UXデザイナー、Webデザイナーとプログラマーならどっちを目指すべき？」というような記事もよく見かけますが、少なくともぼくのいた事業会社では、デザイナーとプログラマーは住む世界がまったくと言っていいほど違いました。
どちらを目指すかはキャリアをよく考えてから判断するべきかなと思います。

このページではUI/UXデザイナー・Webデザイナーとプログラマー（PG）との違いを説明しつつ、UI/UXデザイナーやWebデザイナーがプログラマーのスキルを身につけることのメリット・デメリットについて説明していきます。

何かしら参考になれば幸いです。

UI/UXデザイナー、Webデザイナーとプログラマーの違い

UI/UXデザイナー、Webデザイナーについて

UI/UXデザイナーやWebデザイナーは、主に画面設計やデザイン、コーディングを担当するポジションになります。

下の図はWebの制作や改修・改善を行うときの大まかなフローです。会社にもよりますが、ぼくのいた事業会社だと、UI/UXデザイナー・Webデザイナーは下図の赤いエリアのどこかしらに携わるイメージになります。

コーディングに携わる場合、大抵はプログラミング言語としてHTMLとCSS、JavaScriptを扱うことになります。

ぼく

ちなみに、WebデザイナーとUIデザイナー、UXデザイナーの違いについてはこちら↓の記事で述べているので、よければご参考ください。

2020年8月11日 UI・UX・Webデザイナーの違いとは？現役UI/UXデザイナーが解説

プログラマーについて

一方でプログラマー（PG）は、システムの開発実装を担当するポジションです。Webの制作や改修・改善のフローに乗せると、担当領域はこんなかんじ↓です。

一言で”システム”といってもいろいろあります。例えば食べログのオンライン予約とか口コミ投稿の機能など、ぼくたちがWebサービスを使っていてよく目にするような機能もシステムにあたります。

一方で、サーバー側の通信処理やデータベースの構築、セキュリティ対策など、ユーザーの目に触れないところの機能もあります。こういったものもシステムにあたります。

こうしたシステムは、その内容や箇所によって求められるスキルやプログラミング言語が大きく変わります。つまり一言で”プログラマー”と言っても、担当分野によってけっこう世界が違うのです。

ぼく

ちなみに食べログの例に出したような、ユーザーの目につきやすい部分の開発を行うプログラマーを「フロントエンドエンジニア」、サーバーやネットワーク側の方の開発を行うプログラマーを「サーバーサイドエンジニア」「インフラエンジニア」と呼んだりします。

MEMO

プログラマー（PG）が扱うプログラミング言語は、WebであればPHPやRuby、Java、Python、Go、JavaScript（TypeScript）など、アプリであればSwift（iPhone）やKotlin（Android）、iPhoneとAndroidの両方で動くアプリを作るためのDart（Flutter）やJavaScript（React Native）などなど、非常に多岐に渡ります。

フロントエンドエンジニアだとHTMLやCSSをある程度いじれる方もいますが、どちらかというと、JavaScriptやTypeScript、Reactのような画面を作るための仕組み（フレームワーク）を使った開発がメインという印象です。HTMLやCSSを使ってWebの画面実装をするのは「コーダー」と呼ばれる、プログラマー（PG）とは別のポジションの方が担当することが多いかなと思います。

「プログラミングをする人＝HTMLやCSSを書く人＝プログラマー」という捉え方は、言語としては間違いではないのですが、転職のキャリアとしてはちょっと相違が生まれてきます。プログラマー（PG）はあくまでもPHPやJavaScript、C#などの言語を扱う分野で、HTMLとCSSは脇役だと思っておいた方がいいかもしれません。

デザイナーとプログラマーって兼任できるの？

基本的にはできないと思っていた方がいいです。

上でも述べたように、UI/UXデザイナー・Webデザイナーとプログラマーは担当する領域が大きく異なるため、ほとんどの会社では別々のポジションとして扱っています。

個人でやっている方や小さな会社とかであれば、デザインからコーディング、バックエンドの開発まで一気通貫で担当することができるかもしれませんが、大きな組織体になってくると兼任の可能性は低くなってくるでしょう。

ただ最近は、AIの登場で状況が変わりつつあります。AIの力を借りれば、デザイナーでもある程度の実装ができるようになり、逆にエンジニアがデザインのたたき台を作ることもできるようになってきました。

こうした流れの中で、デザイナーとエンジニアといった職種の境目はだんだん溶け合ってきています。デザインもコードもわかる「デザインエンジニア」のような職種も出てきました。

とはいえ、AIが作ったものの良し悪しを判断して仕上げるには、それぞれの専門の知識が欠かせません。未経験のうちから両方を狙うよりは、まずはデザインの軸をしっかり作るのがおすすめです。

SEとPGの違いってなに？

ちょっと話が脱線するのですが、プログラマー（PG）について調べていると「SE」という単語も出てくるかと思います。

このSEというのはすごく簡単に言うと、「システムの設計書を作る人」になります。そしてプログラマー（PG）は、「（プログラミング言語を駆使して）SEが作った設計書通りに実装を行う人」になります。

図で表すとこんなかんじ↓です。キャリアとしては、PGの経験をある程度積んだ人がSEになることが多いようです。

MEMO

現役SEの人に聞いたのですが、プログラマー（PG）はSEの設計書通りに実装を行うことが大切らしいです。気を利かせて設計書にない要素をよしなに追加したりすると、システムの管理や不具合対応が煩雑になり、かえってぐちゃぐちゃになってしまうためのようです。

UI/UXデザイナー、Webデザイナーの感覚だとちょっと意外かもしれませんが、システム開発の現場はちょっとのミスが大事故につながるため、細かいところもキチッと決めていきます。家の図面をもとに大工さんが組み立てるような感覚に近いです。

UI/UXデザイナー、Webデザイナーはプログラマーのスキルを身につけるべき？

基本はHTMLとCSSのスキルがあれば十分

上でも述べたように、UI/UXデザイナー・Webデザイナーとプログラマー（PG）はかなり分野の違う職種なので、未経験からUI/UXデザイナー、Webデザイナーに転職したい方は、プログラミング言語としてはHTMLとCSSを学んでおけば十分かなと思います。（コーダー寄りのキャリアに転職したい場合はJavaScriptも必要です）

ただ「JavaやC#を身につけても意味がないのか？」と言われると、決してそうではありません。
プログラマーに求められるプログラミングスキルを身につけることで、UI/UXデザイナー・Webデザイナーとして役に立つことは多少あるかなと思います。

スキルを身につけるメリット

キャリアの幅が広がる

UI/UXデザイナー・Webデザイナーのキャリアパスとしては、クリエイティブディレクターやディレクター、プロジェクトマネージャーなどが一般的ですが、プログラマーのスキルを身につけることでPGやSEのようなエンジニアサイドのキャリアも視野に入れることができます。

開発者とのコミュニケーションがしやすくなる

Webサイトやアプリの制作では、「どのような画面デザインを作るか」だけでなく、「開発的に実現可能か」を見定めることも大切です。
見た目は素晴らしくても、技術的に実現が厳しかったり、開発のリソースが足りない場合もあります。UI/UXデザイナー、Webデザイナーはそうした制約も加味した上でデザインを作らなくてはなりません。

プログラマーのスキルを身につけると、そうした技術的制約をなんとなくでも理解することができ、ムリのないデザインを作ることができます。

同時に開発者の視点に立って物事を考えられるようになるので、開発者とのコミュニケーションがスムーズになり、プロジェクトをうまく進められるようになります。

システム面からUI/UXを考えられるようになる

UI/UXは表側の画面デザインだけでなく、裏側のシステム設計の側面も重要です。
例えばショッピングサイトとかで、キーワード検索をしたのに処理が重くてなかなか検索結果が出てこないと、とても使い勝手の悪いサイトになってしまいます。

プログラマーのスキルを身につけると、表側から裏側まで一貫してサービスを作ることができるようになるので、システム面まで含めて最適なUI/UXの提案をすることができるようになります。

注意点

上でも述べたように、UI/UXデザイナー・Webデザイナーとプログラマーは担当する領域がかなり違うので、多くの企業では全く別のポジションとして扱っています。

システムまでいじれるデザイナーはあまりいない（気がする）ので、「Webサイトやアプリを表から裏まで作れるデザイナー」という意味では貴重な人材ではありますが、UI/UXデザイナー、Webデザイナー界隈で求められるスキルはどちらかというと下記の方が優先度が高い傾向にあります。
まずはこちらを優先して身につけ、一通りスキルセットが揃ってきたところでプログラマーのスキルに手を出した方がいいかなと思います。