JMDC TECH BLOG

JMDCのエンジニアブログです

「Webデザイナー」、おぼえていますか

はじめに

こんにちは。株式会社JMDC  プロダクト開発部の蘇です。主にWebとアプリの画面仕様の設計とUI/UXデザインを担当しています。 今年、JMDCではアドベントカレンダーに参加しています。

qiita.com

本記事は、JMDC Advent Calendar 2023 20日目の記事です。

現在、JMDCのヘルスケアプラットフォームサービスである【Pep Up】ではデザインシステム導入に向けて動いており、さらなるサービス品質向上とユーザビリティの改善に向けて力を入れております。

その構築に関わっているデザイナーとして、デザインシステムについて取り上げるべきかなと思ったのですが、書いてみたいものがあったので、そちらはまたいずれどこかでご紹介できればと思います。

その代わり(代わりではないですが笑)に、このアドベントカレンダーに、弊社のフロントエンドエンジニアである新保さんが、インターネット上に公開されている各サービスのデザインシステムの比較&分析という非常に面白い記事を投稿しているので、ぜひぜひご一読ください。

techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp



それでは、アドベントカレンダーの20日目!今日はデザイナーについての話題を取り上げたいと思います。
この記事で触れる「デザイナー」とは、主にIT業界のデザイナーを指しています。1 デザイナーは、エンジニアと共に、今やプロダクト作りに欠かせない存在になってきた職業です。エンジニアと同じく、デザイナーもIT時代のいろんな変化を経験して来ました。

あなたはおぼえていますか。その昔のデザイナーについて。


「Webデザイナー」、おぼえていますか2


少しだけ、一緒に、時代を振り返ってみましょう。

旅立ち:今も歩いている

かつて「デザイナー」という言葉は、ファッションやインテリア、工業などの分野でよく使われていました。ほとんどがオフライン環境での作業で、当時の「デザイナー」のイメージというと、鉛筆を持って何かを描いている姿が一般的でした。
現在は、「デザイナー」という言葉を聞くと、多くの人がまずパソコンの前に座っている人を思い浮かべるようになりましたね。

https://cdn-ak.f.st-hatena.com/images/fotolife/s/skyskys/20231219/20231219180032.jpg



2000年代まで、パソコンで作業する「デザイナー」は主に、印刷・出版に関わるデザインに従事していました。その頃に、いわゆる"IT革命"が起こり、デザイン業務がWebに広がり、「Webデザイナー」という言葉が生まれました。
そして、現在のIT業界のデザイナーはこのWebデザイナーから発展・派生してきたわけです。

🔜荷造り:2000年代からの置き土産

現在のデザイン業界は、昔とは比べ物にならないほど、多様な職務とスキルが求められるようになりました。ただし、今のデザイナーの業務をしっかりと理解するためには、2000年代以前のデザインについても理解しておくことが重要です。

2000年代には、Web環境の拡大に伴い、紙のメディアからWebへの移行が進みました。この時に、編集デザイン(エディトリアルデザイン)の原則をデジタルに適用して、Webページを作るようになったのです。

UI/UXデザイナーという職種が普及した現在、例えば「UIデザイナーでも、印刷についての知識は必要ですか?」と疑問に思う方もいるかもしれません。
もちろん、天性のセンスで素晴らしいUIを構築するデザイナーもいますが、ユーザーインターフェースを構成する要素を掘り下げてみると、フォントサイズや余白、レイアウトを決める規則や用語まで、編集デザインの発想から派生していることがわかります。
そのため、それらのデザイン理論の基礎は、Web環境のデザインが主流になった今も生き続けており、歴史的な視点から現代のデザインを深く理解するためには、これらの知識を押さえておくことが肝要なのです。

旅路①:懐かしい日々から→↗️↘️

それでは、ここからが本題です。
Webデザイナーは、現在も職種として存在しており、聞きなれた単語のはずなのに、この記事ではなぜ“おぼえていますか”と声高にしているのでしょうか。
その理由を説明するために、まずデザイナーの歴史に少し触れていきましょう。

Webの普及につれ、Webサイトは驚くべき速さで増加しました。
これらのサイトは、やがてアイコンやバナー、広告など、様々な美しいグラフィックリソースを必要とするようになりました。そしてそれを作成するためには、誰かが手を動かす必要がありました。

こうして「Webデザイナー」が、歴史上に名をあげます。

🔜停車駅:Webデザイナー

「Webデザイナー」は、その名の通り、過去のWebサイト制作・管理・保守に関わるすべての役割を担っていました。
その頃のデジタル環境はほぼWebしかなかったので、パソコン上で見えるあらゆるデジタルグラフィックデザインに関する制作は大抵、「Webデザイナー」が担当していました。
つまり、昔の「Webデザイナー」は、「デジタル環境のビジュアル体験に関わる全てを“なんとかする”人」でありました。(他にはガラケーの環境もありますが、この話にはあまり影響しないので飛ばします)

その時代から20年近くが経過し、過去とは比較できないくらいデジタルプロダクトの規模は膨大になりました。当時の「Webデザイナー」が手掛けていたデジタル環境の範囲を遥かに超え、今ではWebはもちろん、アプリケーション、スマホ・タブレットなど様々なデバイスに広がり、使う人々のデジタル知識も利用パターンも大きく変化しました。それにつれ、デザイナーに求められる役割も細かく分かれたものに変わっています。

現在のWebデザイナーというと、Webサイトのグラフィック資産の制作・保守をする人という意味合いが強いです。もちろんWebサイトに関する業務もこの長い年月の中で職務の細分化が起きており、この場合のグラフィック資産は主に画像素材などのクリエイティブを意味するでしょう。

改めて、「Webデザイナー」、おぼえていますか?
過去の「Webデザイナー」の役割は、今の時代となっては各デザイナーが分業して担当しないとならないほどの莫大な規模になっています。
1990年代後半から2000年代にかけて、IT業界の変革期を経験した方々は、Webデザイン及びWebデザイナーに慣れているつもりかもしれません。ただし、残念ながらその中には、古い認識をアップデートせずにいる方も少なからずいるでしょう。そうなると、デザイナーに求める業務は、前の時代の「Webデザイナー」の業務のまま。デザイナーに“デザインだから全部お願い”という過度な業務を求める一因になってしまうのです。

旅路②:→↗️↘️たどり着いた先

ここまで、過去のデザイナーについて振り返ってみました。
このIT業界の「Webデザイナー」が、現在は細分化されてどのような役割になっているのか。ここからはそれを簡単にみていきましょう。

停車駅と書いてますが、必ずしもこの順番で各デザイナーが登場したという意味ではありませんので、あしからず。

🔜停車駅:コンテンツデザイナー

昔のデザイナーの業務の内、SNSの管理や広告、バナー制作、LP作成など、いわゆる「Webデザイナー」の業務を最も引き継いだのが、“コンテンツデザイナー”です。チラシやパンフレットなどの印刷物に関わることも多く、昨今あらゆるデザイナーの中で、最も“デザイナー”という言葉だけで呼ばれる機会が多い方かもしれません。

昔と違う点は、コンテンツデザイナーはマーケティングとより密接に結びついていることです。実際、マーケターと協力して作業を行ったり、デザイナー自身もマーケターとしての役割を果たすこともあるため、「マーケティングデザイナー」と呼んで良いかもしれません。

コンテンツデザイナーは、それぞれの広告チャネルに合わせた広告素材を制作し、その効果を評価してマーケティングの成果を高めるためのグラフィックを作成します。要するに、マーケティングの知識やライティングスキルなどがデザインに組み込まれ、商品の魅力を伝え、ユーザーにどのように訴求するかというアイディアやストーリーを作り上げます。

「Webデザイナー」からこちらに特化した分、今時の広告は多様なチャネルの中でより効果的なツールを選択し、ユーザーの手に触れやすいプロセスや目を引くグラフィックへ進化しています。また、マーケティング分析ツールであるGA(Google Analytics)などを積極的に利用することも特徴的です。

🔜停車駅:UIデザイナー

User Interface(UI)をデザインする人を指すのが、こちらの「UIデザイナー」です。
こちらは「Webデザイナー」から拡張された業務の内、インターフェースに特化した専門職になります。

ユーザーインターフェースはWebやアプリ、電車の案内表示装置、クレジットカードの決済端末など、様々な場所に存在します。
ボタンを押した時の画面遷移や移動のアニメーションがスムーズなのか、ボタンのテキスト、形状が適切なのかなど、ユーザーがインタラクションする際のインターフェースの全てを設計します。その際、ユーザーにとってわかりやすく、同時にプロダクトの意図に沿った配置を考えます。

UIデザイナーの仕事は、見た目の美しさだけでなく、ルール化されたインターフェースになっており、ユーザーが便利に利用できることが重要です。
ただし、便利と感じるのは結局見た目の影響も無視できないので、ビジュアルを全く考慮しない事はなく、色の組み合わせやアートスタイルなどグラフィック感覚も一定レベル以上要求されます。

🔜停車駅:UXデザイナー

User Experience(UX)をデザインするのが、こちらの「UXデザイナー」です。UIデザイナーとセットでよく聞く言葉です。
こちらは「Webデザイナー」から拡張された業務の内、ユーザー視点での便宜性向上や改善に特化した専門職と考えられます。

UXデザイナーは、ユーザーがWebサービスやデジタルプロダクトを快適に使えるよう、またプロダクトの目的を達成できるよう、ユーザーの経験を設計します。そのためには、より気持ち良い体験を提供するために、ブランドの言葉のテイストや感情トーンなどを調整することも含まれます。

UXとUIは単語だけでなくその意味ももちろん異なりますが、UXデザイナーはユーザーがプロダクトと接するインタフェースを考慮する必要がありますし、UIデザイナーもユーザーの体験を考慮しなければなりません。UXはUIよりも広範な概念ですが、UXデザイナーとUIデザイナーの違いについて完璧な答えはまだ存在しません。

強いていうと、UXデザイナーは、UIデザイナーより、デザインよりもプロダクト企画に近い場面も多い傾向があります。これも、まだ分業が進んでいる途中であるとも言えるでしょう。

🔜停車駅:サービスデザイナー

少し前まで、日本でもよく見かけた言葉ではないかと思います。海外ではLinkedInなどのプロフェッショナルネットワークサービスで、“サービスデザイナー”と記載している人も少なくありません。

実際、私も“サービスデザイナー”と名乗ることがありつつも、何をする人なのか、なかなか一言では言えません。一般的には、サービスデザイナーは、顧客のニーズを把握し、課題を理解して解決し、もっと良い生き方、もっと良い経験になるようなサービス提供や改善に貢献し、サービスの価値を最大化させる業務を行います。そのために、サービスを提供する全てのプロセスに関与し、ある面ではプロデューサーやプランナーの役割も担います。

とはいえ、やはり具体的な内容や役割は一言で説明するのが難しいので、ヒントになる関連記事をそっと置いておきます。

What does a Service Designer do?

ちなみに、企業におけるサービスデザインとは、もうかなり効率化が進んでる状態で、価値や効率を極大化するために残ってる最後の一雫の効率まで出し尽くそうとするものなので、資金と期間がかかることを覚悟しなければなりません。なので海外では主に公共事業(サービス)分野で活性化しており、そのイメージが強いかと思います。サービスデザインという言葉もその領域から生まれたものだと考えられています。

現在は、サービスデザイナーの”サービス”という言葉の広さが上記のこともありあまり使い勝手が良いとは言えず、企業側では徐々に、次のデザイナー種別にシフトしていく傾向にあります。

🔜停車駅:プロダクトデザイナー

比較的、以前からあった言葉ではありますが、最近とても目立つようになりました。この職業は今後ますます需要が増える可能性があります。一方でこちらも“プロダクトデザイナーが何をする人なのかよくわからない問題”が存在します。たとえば、「UXデザイナー」とか「UIデザイナー」との相違点も、名前だけではなかなかイメージしにくいですね。

プロダクトデザイナーという職種が注目されるようになった理由を説明する前に、IT業界の方であれば類似した用語を聞いたことがあるのではないでしょうか。
そう、“プロダクトマネージャー(Product Manager)”です。

実際、プロダクトデザイナーの役割はプロダクトマネージャーとかなり重なる部分が多いです。最初のプロダクトの基盤を築く際に、お互いが協業することが多い職種でもあります。課題の発見からリサーチ、ユーザーの価値設定、その価値を実現する方法まで、プロダクトデザイナーとプロダクトマネージャーが協力して練り上げることが多いためです。

プロダクトマネージャーがビジネスモデルの企画や戦略にフォーカスするのに対し、プロダクトデザイナーはその企画や戦略に基づいて、ユーザーがプロダクトに対してより価値を感じるような設計を行います。デザイナーというと、ビジュアルの印象が強いかもしれませんが、プロダクトデザイナーは設計者としての側面に特化しています。

プロダクトデザイナーは、その職務上、当たり前にUIやUXデザイナーのスキルを持っています。
ただし、プロダクトデザイナーが作成したものは、UIデザイナーがつくるインターフェイスより洗練されてないかもしれません。UXデザイナーが設計したユーザーのジャーニーより、ちょっとおもてなしが足りないかもしれません。プロダクトデザイナーは、それがメインミッションではないからです。

例えば、UIデザイナーは見た目の一貫性、ブランドイメージの適用、コンポーネントの使いやすさなどを考えてボタンを作成します。プロダクトデザイナーはユーザーにどんな問題があり、それを解決するためにどのようなボタンになるかを設計に落とし込みます。
インタフェースのルールを設計して、配置を考えるのは同じですが、プロダクトデザイナーはより上位から下位までを理解してワンストップで設計(デザイン)できる人です。

UXデザイナーとプロダクトデザイナーについても、似たような話になることがありますが、特にこの記事が素晴らしい考察をしていたのでご紹介しますね。

UX Design vs. Product Design: What's the Difference

改めて考えてみると、最近、“プロダクトデザイナー”が目立ってきたのは、UXデザイナーやUIデザイナーがプロダクトの設計と改善の経験を積み重ね、全般的な工程を理解し、マネジメントスキルを身につけて成長した姿が、プロダクトデザイナーにつながったからかもしれません。
もちろん、すべてのプロダクトデザイナーがUI/UXデザイナーであるわけではありませんが、UI/UXデザインの歴史が進むにつれ、今のIT業界の需要に合わせて、プロダクトデザイナーに移行できる人が増えている可能性もあるかもしれませんね。

🔜停車駅:エンジニア(フロントエンド)

デザイナーの話で、なぜエンジニアのことを取り上げるのか、疑問に思われる方もいらっしゃるでしょう。しかし、よく考えてみると、当然の流れなのです。
現在もWeb制作ではデザインとコーディングを兼業する会社が多いことから分かるように、昔の「Webデザイナー」はWebページのコーディングも一緒に受け持つことがありました。

Web環境が広がりながら、編集デザインがWebページに適用されるようになったという話を最初の【荷造り】のところで書きました。しかし紙ではなくWeb上に載せるので、もちろんWebに合うように加工しなければなりません。「Webデザイナー」は、その責任も持っていたのです。
そこからどの方向へスキルセットを積み上げていくかによって、フロントエンドエンジニアになるケースももちろんあります。エンジニアの観点からデザイナーの歴史を振り返ってみても、非常に興味深いものになりそうですね。

旅の終わり:これから

ここまで、既存の「Webデザイナー」の変化とそれに伴って派生した現在のデザイナーの役割について見てきました。いかがでしょうか。 今回の記事を書いていて、デザイナーの世界はかなり変化してきたんだなと再認識しました。(同時に、ここまで長くなってしまった事にも驚いています…)

実際のところ、「Webデザイナー」という言葉は、もはやあまり使われなくなってきています。Webサイト専門の制作会社以外では、「UI/UXデザイナー」や「プロダクトデザイナー」といった言葉がよく用いられています。デジタル環境がWeb以外の領域に拡大している今、昔から使われている「Webデザイナー」という言葉では、その人の役割やスキルを正確に表現できなくなってきているからです。

この記事で挙げたもの以外にも、「Webデザイナー」から派生したデザイナーの業務は多岐にわたります。さらにいうと、IT業界と他の分野の境界線が曖昧になりつつあり、デザイナーの種類は日々増え続けています。この記事を書いてる今この瞬間にもデザイナーの仕事は変化していますし、呼び方もアップデートされていると言っても過言ではありません。

これからもIT業界は変革し続けることが予想されます。すでにAIは身近な存在となっており、さらなる発展が期待されています。未来のデザイナーの仕事は、このAIに大きな影響を受けると予測されていますが、過去のデザイナーの仕事が現在どのように変化しているか一概には言えなかったように、未来もどのように変化するか、まだわからないのです。

あなたは昔の「Webデザイナー」、おぼえていますか?
急速に変化するIT業界の中で、その役割の意味が変わっていることを感じていますか?
今後もデザイン分野はますます細分化されていくでしょう。UIデザイナーやUXデザイナーなどの言葉を知っていても、それがどんな役割で、どんなスキルセットを指すものなのかはデザイナーですら把握できないうちに変わっているかもしれません。読んでる時点によっては、この内容はすでに過去のものになっていることでしょう。

ただ、この記事が、過去のITの革命期から現在に至るまで、デザイナーがどのように変わってきているのか、その必要性と経緯を少し意識するきっかけとなり、さらには、これからの変化への理解向上に貢献できるものになっていれば幸いです。

終わりに

ここまで拙稿をお読みいただき、大変ありがとうございました。 拙い経験で書きたい放題してますが、どなたかには少しでも共感できる部分があり、どなたかには有意義な情報提供になっていれば幸いです。

JMDCのデザイナーは、年々少しずつ増えております。 様々な経歴と経験を持つ方が積極的に活動しているので、これからもどんどんデザイナーが話をできる場を増やしていければなと思います。

さて、明日21日目は、新保さんのデザインシステム特集の最終回です!お楽しみに♪

JMDCでは、ヘルスケア領域の課題解決に一緒に取り組んでいただける方を積極採用中です!
フロントエンド /バックエンド/ データベースエンジニア等、様々なポジションで募集をしています。
詳細は下記の募集一覧からご確認ください。
hrmos.co

まずはカジュアルにJMDCメンバーと話してみたい/経験が活かせそうなポジションの話を聞いてみたい等ございましたら、下記よりエントリーいただけますと幸いです。
hrmos.co

★最新記事のお知らせはぜひ X(Twitter)をご覧ください!
https://twitter.com/jmdc_tech


  1. 「エンジニア」についても同じくIT業界のエンジニアを意味しています
  2. お察しになられた方もいらっしゃるかと思いますが、この記事は「愛・おぼえていますか」を聞きながら書かれています