【境界が無くなる】デザイナーとエンジニアの仕事内容

アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。

それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。

このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。

デザインの未来を示す15の変化で下記のような項目があった。

“デザイナーとエンジニアは2つの異なる職業とされて来た。しかし、テクノロジーが進むにつれ、エンジニアの経験やバックグラウンドを持つデザイナーは非常に重要な人材となるだろう。逆にデザイナーからエンジニアに転身する事も珍しくは無い。この2つの職業の境界線はどんどんなくなり始めている。これからは、僕はエンジニアだから…, 私はデザイナーだから… などの言い訳は出来なくなる。”

カリスマが放ったツイート

以前にとあるツイートが話題になった。下記に紹介するのはAdobe Type Kitの元クリエイティブディレクターで、現在はメディアでも活躍する著名デザイナーのElliot Jay Stocksによる内容。

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

— Elliot Jay Stocks (@elliotjaystocks) February 17, 2010

2010年に彼が放ったのは、

“2010年にもなって、自分のデザインをコード出来ないWebデザイナーがいるのにはビビった”

とのつぶやき。これに対して多くの賛同と反響が寄せられた。そもそもWebデザイナーという役職名が曖昧で、人によってカバー出来る範囲が異なるのが原因なのかもしれない。

自分が設計したものは自分が動かす時代

上記の内容で彼が言いたかったのは、デザイナーたるもの自分でデザインした内容は自分で動かしてこそ仕事だろ、という事。ページのレイアウトや色づけだけをして、”あとはコーダーまかせ”はあまりにも身勝手過ぎる。

様々なソフトウェアやフレームワークが利用可能な時代なのに、静止画だけ描いてWebデザイナー気取るなよ、動かすとこまでが遠足だろ、と言いたいのだろう。それからしばらく経って、マルチデバイスが当たり前になった今の時代、1種類の画面デザインだけではそのクオリティを理解する事は確かに難しい。

多様化するデザイナーとエンジニアの役職

実はこのWebデザイナーと呼ばれる職業はかなり曖昧で、場合によってはデザイナーなのかディベロッパーなのかも微妙なところである。そして、テクノロジーの進化に伴い、デザイナーとエンジニアがカバーするべきエリアがどんどん拡大して行っている。企業によってその種類、数、内容は微妙に異なるが、現時点で簡単に思いつく役職だけでも下記があげられる。

デザイナーの主な職種名

• Creative Director
• Art Director
• UX Designer
• CX Designer
• Business Designer
• UI Designer
• Web Designer
• Graphic Designer
• Visual Designer
• Product Designer
• Front-end Designer
• Production Artist
• Motion Designer
• Illustrator
• Interaction Designer

エンジニアの主な職種名

• Software Engineer
• Web Engineer
• Mobile Engineer
• Programmer
• Coder
• Architect
• Software Architect
• Front-end Developer
• Back-end Developer
• UX Engineer
• QA Engineer

アメリカには存在しない”ディレクター”や”SE”という役割

ちなみに、上記を見てみると日本で言うところの”ディレクター”や”SE”という職種が存在していない。これらは実は日本特有の役職で、アメリカだとProject ManagerやProduct Managerという人達が近い仕事をしているが、同時にデザイナーやエンジニアの仕事内容が多少異なる事が理由であろう。

では、何が異なるのか。簡単に言うと”描くだけ”や”書くだけ”では仕事にならないという事。デザイナーやエンジニアのような技術職であってもチームメンバーやクライアントからの意見を吸い上げ、アイディアを考え、それを形にし、プレゼンで伝える事が求められている。

恐らく日本だとそのやりとりを専門に行うディレクターやSEという人達がいるが、こちらでは作る人がちゃんとコミュニケーションが取れないと仕事にならない。

デザイナーの役割とその意外な仕事内容とは

エクゼクティブにも広がるデザイナー職

デザイナーの重要性は上級職にも広がっている。今まではマネージメントやファイナンスといったビジネス系の役職、もしくはテクノロジー系の会社であればCTOなどの技術系の上級職が存在しているが、最近の企業では、Chief Design Officer, Chief Creative Officer, Chief Experience Officerなどデザイン系のバックグラウンドを持つ人達がその能力を最大限活用して経営に参加出来るポジションを設ける会社が増えて来ている。

WebはIT? マーケティング? デザイン？

一昔前、もしくはもう少し前、”Web”という媒体が注目され始めた90年代にどこの部署がこの媒体を管轄するのかが話題になっていた。企業ごとにIT部署の役割になるケースもあれば、マーケティング部が担当する事もある。

また、外部のデザイナーに丸投げしていたケースもある。もしかしたら日本の企業だとまだこの状態が残っているケースもあるかもしれない。しかし、その正しい答えは”ITとマーケティングとデザインを絡み合わせてビジネスに活用する為のメディア”となるであろう。

ビジネス活用するにはIT的なことも、デザイン的なことも知っていなければならないが、それをマーケティングにしっかりと落とし込めないのであれば意味が無い。

そういった意味では役職や部署で分けること自体がナンセンスにであるという結論に至った。それにより、それらの領域全てを包括的に理解する知識と技術を持った人材のニーズが高まっている。

ではグロースハッカーはどっち？

そして最近はやっているのが、”グロースハッカー”という職種。企業の中でもその重要度が急激に高まっており，デザイナーやエンジニアよりも給料が高いケースも少なく無い。仕事内容は様々な解釈と説明が存在するが、簡単にいうとデジタルメディアを活用し、ユーザー数を集め、そこからの収益をアップさせることを担う職業。

この役職、”ハッカー”という名前からエンジニアっぽい印象を受けやすいが、やっている事はトラフックの増加、ユーザーからの問い合わせやサインアップなどのコンバージョンアップ、そしてリピーターになってもらう方法を考えるなど。

よりユーザーの気持ちを理解する必要があるので考え方としてはデザイナーに近い。しかし、その施策を行うにはコーティングの知識が必要になるため、エンジニアのバックグラウンドも必要になってくる。

実際にサンフランシスコ・シリコンバレー周辺のスタートアップにおけるグロースハッカーのその多くはエンジニア上がりだ。しかし、彼らがグロースハッカーの仕事を行うには一度UXやレイアウトなど、デザイン的技術を学ぶ必要がある。つまり、エンジニアが出世するにはデザインを学ぶ必要があるという事である。

参考: 〜企業の成長を最大化させる〜 最近話題のグロースハッカー(Growth Hacker)とは

データビジュアリゼーションはどうする?

ビッグデータなどの情報を人間にも分かりやすく表示するデータビジュアリゼーション。これを実現するには複雑なJSなどのコーティング技術が必要とされる。その一方で、その見やすさや使いやすさなどは、UIやUXの領域になってくる。この場合、エンジニアの管轄なのか、それともデザイナーがリードを取るべきなのか。

見た目の良いデザインでも、動いていなければ意味が無いし、しっかり動いていても使いにくければ使ってもらえない。デザイナー or エンジニア論争はここでも繰り広げられる。

見える化が加速する -【いまさら聞けない】データビジュアリゼーションとは？？

デザイナーに広がる”Lean to Code”ムーブメント

エンジニアがデザインの基本を学び始めているのに合わせ、コーディングを学んでいるデザイナーも少なくは無い。少し前であれば、”デザイナーだからコーディングは出来ません”も通用したかもしれないが、今の時代はデザイナーとして仕事をしたいのであれば最低限のコーディングの知識と、可能であれば簡単なコードが書ける必要がある。

これは、かなりの高い確立でエンジニアと一緒に仕事をする事になるので、彼らの仕事内容と気持ちを理解する目的と、いざとなったら自分たちでさくっと作れる技術が必要であるからだ。

単純に考えても、インタラクション要素の増えて来ている最近のメディアやデバイスに対してデザインする場合、静止画だけで表現、説明する事には限界があるからである。

例えばクライアントに対して、”この部分がぬるっと動くイメージになります”と伝えた所で全く想像がつかない。むしろ、デザイナーが考える最適な動きを自分自身で表現出来なければ仕事にならない。

最低条件は”プロトタイプが作成出来る事”

ではどこまで出来れば合格なのか。一つの目標は恐らくプロトタイプの作成が出来る事であろう。デザイナーとして表現したい事、エンジニアとして実現したい事を互いに頼る事無く一度プロトタイプとしてさくっと作成出来れば作業効率はかなり上がり、ミスコミュニケーションはかなり少なくなる。場合によっては仕様書のページ数も格段に減らす事が出来るだろう。

例えば、HTML/CSS/JSと外部APIを利用してUIを作成する事が出来れば、PhotoshopやIllustratorなどのグラフィックソフトを経由する事無くアプトプットが作成可能になる。それもPCやモバイルなどの既に対応した形で。

一方デザイナーであれば、ゴリゴリコードが書けなくても、プロトタイピングツールを活用して画面遷移やトランジションを再現したプロトタイプも作成できる時代になっている。

エンジニアとデザイナーがガッツリ一緒に仕事をする前にまずは自分でプロトを作ってみる事が重要。英語で言うところの”On the Fly”という概念で、”とりあえずサクッと作成してみました”と言える様になれば最高である。これは、バンドメンバー全員で曲を演奏する前にメンバー１人がデモテープをさくっと作るのにどこか似ている。

お互いがお互いを理解し合い末永く

結婚式でのスピーチ内容のようであるが、デザイナーとエンジニアは”モノをつくる”という点では表裏一体。夫婦のようなものである。しかし、なぜかミスコミュニケーションが後を立たない。

そもそも”完成”の概念がそれぞれ違う。エンジニアにとってはバグ無く動作する事であろうし、デザイナーにとってはズレなく表示されることになる。

そこで、お互いの視点を理解し合い、共同作業を行う。この”Learning to Communicate and Collaborate”の姿勢が今後どんどん必要になる。それぞれがそれぞれの仕事内容を極める必要は無いが、少なくともお互いを理解、尊重し合い、共通の認識でのコミュニケーションとコラボレーションが可能になっている事が最低条件となるであろう。

お互いの仕事内容を理解する為のイベント

日本でも最近はデザイナーミートアップや、エンジニア飲み会などの勉強会が開催されている。こちら、サンフランシスコでは定期的にDESIGNERS + GEEKSと呼ばれるイベントが開催されており、それぞれの役職の人達が集まり相手の視点に立って知識を学ぶという勉強会である。

ここではエンジニアとデザイナーの人達が分け隔てなくあつまり、毎回数人自分たちの仕事内容をプレゼンし、理解を深めるというもの。最近のスタートアップなどでは両方の知識が不可欠なため、毎回チケットはソールドアウトで、かなりの人気を集めている。

両方出来る様になったら君に”Rockstar”や”Ninja”の称号を与えよう

少し前に”フルスタック”という言葉が流行った。これはエンジニアやデザイナーなどの技術を広範囲で取得しているという意味。例えば、エンジニアであればフロントエンドからバックエンドまで、JSからPHP, Swift, Rubyまでできまっせ、という事。

でもこれからは、デザイナーとエンジニアの両方の技術を持ち合わせた、”Creative Rockstar”や”Design Ninja”などの無敵の称号がふさわしいかも知れない。

右脳と左脳のキャッチボールをうまく行う事で、まるで僧侶と魔術師の両方の魔法を使える賢者のような存在になれる。素晴らしいエンジニアも、凄腕デザイナーも世の中を探せば見つかるが、その両方を兼ね備えた人はまだまだ少ない。

何を学べば良いのか

デザイナーは開発を、エンジニアはデザインを学ぶ。これは女性が男心を男性が女心を学ぶ事に似ている。そもそもクリエイティブとロジック、相反する様に思われる領域であり理解が難しい。でも実はそれらの接点はかなり多い。

全ては問題を一緒に考える事から始まる

何かをつくり出す時にはそこに必ず解決するべき問題や課題が存在する。最も重要なのはデザイナーもエンジニアもその課題をしっかりと認識すること。次にそのアプローチであるが、絵を描く事やコードを書く事を始める前に、ユーザー視点で求められる要素とビジネス的に求められる結果、そして技術的にな制約のその3つをお互いに理解、共有する。

そこから自分の得意な視点で解決策を導きだして行く。最終的にデザインやプログラムというのは問題解決の道具でしかないのだから。

お互いに必要なのはお互いのマインドセットを理解する事。

デザイナーは動かしてみる

今の時代、動かないデザインは意味が無い。ソフトウェアもハードウェアもUIもUXも動いていない状態だと全く評価する事が出来ない。そもそも静止画の見た目は仮の姿でしか無く、ユーザーが触って初めてその価値が生み出される。デザイナーは細部までこだわった造り込みをしがちであるが、とりあえず動かす所までを一つのタスクとして考える。

逆に動いている状態でエンジニアに渡せば、”すごい。これだとかなり仕事がやりやすい”と言われるはず。画面であれば、基本的なHTML/CSS/JSを書いたり、プロトタイピィングツールを活用すればかなりリアルな動きを再現する事が出来る。ハードウェアでも、3Dプリンターで関節部分を再現したりなどすれば動きが表現出来る。

エンジニアは綺麗に出力してみる

コーディングに集中しすぎるとどうしても、動作に問題が無いか、バグが起きないか、大量のアクセスに耐えられるかなどの”ちゃんと動く事”にフォーカスしがちで、最初の出力した画面のレイアウトや、プロダクトの見た目がおろそかになってしまう。

しかし、最近のヒット製品をみてみるとプロトタイプの段階でのデザインクオリティがかなり高い事が分かる。

レイアウト、タイポグラフィー、カラーコーディングなどいわゆるデザインの基本を勉強し、アウトプットは出来るだけシンプルに行う事でクオリティをあげる事が可能になる。

最近だと”間違いない”デザインを自動的に出力してくれるプラットフォームも増えているので活用すると良いだろう。最終的には自分の感覚で何が良いデザインなのかを身につける必要はある。

筆者: Brandon K. Hill / CEO, btrax, Inc.