デザインエンジニアになるまでのキャリア｜デザインとコードを行き来した経歴

こんにちは、株式会社プレイドで、デザインエンジニアをしています@t32kです。今日は私がデザインエンジニアになるまでの経緯や、その仕事内容について書きたいと思います。

（編集部注）本記事は2021年12月に公開した寄稿です。筆者の所属・役職、文中の職務内容の記述、末尾の募集の案内は公開時点のものです。末尾で案内している募集のページは現在公開されていないため、リンクを外しています。

デザインからコードへ

大学でデザインを専攻後、私はWebデザイナーとしてキャリアを始めます。Webデザイナーといっても簡単なHTML/CSSコーディングも実装するデザイナーでした。

当時は今と違って、JavaScriptをゴリゴリと実装する必要はない静的なWebサイトが一般的でしたから、それで何も問題ありませんでした。自分でUIデザインして自分でコーディングすると言えば、聞こえは良いかもしれませんが、実際に仕事をしていると妥協の連続でした。

例えば、UIデザインに角丸を取り入れたとします。今でこそCSSの border-radius で簡単に実装できますが、当時はそのプロパティはブラウザに実装されていませんでした。しかし、当時のWeb 2.0風のUIを実現する上では、角丸は欠かせません。

さて、どうするか？今の人には信じられないかもしれませんが、縦横可変の角丸ボックスを再現するためには、あらかじめ4角に角丸の背景画像を設置することで対応していました。

まぁ、この実装がめんどくさいと思うわけです。そうすると、UIデザインの段階から角丸を避けようと考えます。これではUIの表現力に自ら制限をかけているようなものです。

コードからデザインへ

フロントエンドエンジニアへの転身

これでは良くないと思い、転職を期に私はWebデザイナーからフロントエンドエンジニアにジョブチェンジをしました。もともとコードを書くほうが好きだったので、それに専念したかったという面もあります。

時はHTML5隆盛の時期で、AndroidやiOSなどのネイティブアプリケーションのような振る舞いをHTML5製のWebアプリケーションでも求められるようになりました。ただ処理能力に乏しい端末、低速なモバイル回線など制限が多いのも事実でした。

フロントエンドエンジニアとして感じる限界

リッチなアプリケーションを求められるようになったのはユーザーインターフェイスもそうでした。グラデーションやシャドウを多用したUI、現実世界のオブジェクトに似せたキューモーフィックデザインはCSSだけで当然表現できるものではなく、画像ファイルを多用しなければならない実装だったのです。

フロントエンドエンジニアとして、できるかぎり高速なWebアプリケーションを実装を心がけているつもりでしたが、それも限界があります。

デザインの段階からパフォーマンス（実装）を意識しないと、ユーザーが満足できるアプリケーションを提供できないと考えるようになりました。ここでもまた自分の中でデザインとコードを行き来しなければならない必要性を感じるようになりました。

フロントエンドエンジニアの責務の拡大

スキューモフィズムからフラットデザイン、高速なモバイル回線の普及など、これまでパフォーマンスを低下させる要因だったものが解消され、フロントエンドの開発環境は改善されてきました。

その反面、Webpackなどを使ったアプリケーションビルドの複雑化、SPAからSSRの普及に伴いサーバサイドでJavaScript（Node.js）を記述したり、JSONを使ったNoSQLはJavaScriptとの親和性も高くデータベースの管理もするようになりました。

フロントエンドの肩書とは裏腹にフロントエンドエンジニアの責務が拡大しているような現状です。

フロントエンドエンジニアでも簡単なものであればアプリケーション一つまるまる実装できるようになってきたのは嬉しい反面、個人的にはUIを考えるのが好きなので、UI以外にも考慮しなければならないことが増えたのはストレスでもありました。

これまでもバックエンドでできていたものはバックエンドエンジニアに任せて、自分はUI側に専念してきたいという気持ちが日に日に増してきました。

デザインエンジニアの仕事

そんな時に、見つけたのがデザインエンジニアという求人でした。フロントエンドエンジニアとしての求人は昨今多く見かけるのですが、デザインエンジニアというのは珍しいと思う反面、これが自分のやりたいことなのでは？と思い転職しました。

初めての仕事 – Webフォント

デザインエンジニアとしてはじめに取り掛かったのは、Webフォントの読み込み最適化でした。

DTPデザインのようにタイポグラフィにこだわることができれば、どんなに面白いことであろうと、私がWebデザイナーになったときは考えました。しかし、当時は見出しレベルのものを画像に出力するのが精一杯でしたので、徐々にタイポグラフィへの興味も失くなっていきました。

今では多種多様なフォントがWebフォントとして提供されており、タイポグラフィの表現力が格段に向上していますが、あれやこれやとWebフォントを読み込んでしまうと、途端に重いWebアプリケーションとなってしまうでしょう。

エンジニア勢からはWebフォントを辞めたいと言う声も聞こえてきます。フロントエンドエンジニアとしての自分も辞めたほうが楽なのは理解しています。

ただ、ここでWebフォントを使用することを頭ごなしに否定しては、この先Webフォントを使った表現力を制限してしまうのではないだろうかと考え、デザインエンジニアとして、パフォーマンスを毀損しないWebフォントの読み込み方など考えていました。

次に取り掛かった仕事 – カラーパレット

次に、取り掛かったのはカラーパレットの作成でした。デザインシステムを作っていく上で、基本となるカラーは重要なデザイン要素の一つです。

実際にカラーを決めるのはデザイナーの役割ですが、それをどのように管理するのか、何段階くらいカラーレベルがあれば、デザインする問題ないのか、カラーはHEXなのかRGBなのかHSLなのか、カラーコントラストは大丈夫なのか、いろいろ考慮しなければならないことが多いです。

• Re-approaching Color. by Kevyn Arnott

実際には、上記のようなツールを使い、カラーパレットを決めていったのですが、機械的にカラーレベルを決定する方法や、それをFigmaのカレーパレットファイルに出力したり、CSS変数として出力したりと、デザイナーとしての使いやすさとエンジニアとしての使いやすさ、両方を考えなければなりませんでした。

（編集部より）UIの実装とデザインの両方に関わる仕事を探している方は、UIの実装を担う求人をOffers Jobs のフロントエンドエンジニアの一覧で探せます。デザインとコードを行き来してきた経歴は、Offers に職務経歴とスキルとして登録しておくと、関心を持った企業から直接スカウトのメッセージが届く仕組みです。

定義は未定義

弊社のデザインエンジニアとしての職務内容に、これといった明確なものはありません。上記の2つの仕事も自分が解かなければならない課題だと思ったから取り組んだのです。

他にもアクセシビリティ改善、インタラクションデザイン実装や、DesignOpsなどもデザインエンジニアのやっていくべき仕事と考えていますが、それはあくまで、私がそう感じるのであって、他の人にとっては違うものが重要と感じるかもしれません。

よく、プロダクトのユーザーエクスペリエンスを表す図として、テクノロジー・ビジネス・デザインの3つの円が重なり合ったものが使われることが多いのですが、これはあくまで理想図として、でしょう。

実際に現場で開発していると、どちらかというと3つの円が重なり合わないことが多いように感じます。または野球のお見合いエラーのように、それはそっちの仕事でしょう？と思いこみの結果、多くの問題が見逃されていることが多い気がします。

それは自分の職能（肩書）が自分の行動を制限しているのではないでしょうか。私はたまたまデザインとテクノロジーの狭間で課題を見つけることが多かっただけですし、私が見えているのも全てではありません。

最後に

海外ではデザインエンジニアに似たような職種としてUXエンジニアというものも見受けられます。ここで職種の定義の違いついては述べませんが、どちらもエンドユーザーの体験について、職能関係なく問題を解決しようとしている姿勢は同じだと考えます。

株式会社プレイドでは、必要であればデザイン領域、テクノロジー領域、関係なく学び問題を解決する仲間を募集しています。一緒にデザインエンジニアとして働きましょう！

デザイナー/デザインエンジニア | 株式会社プレイド

（編集部注）上の募集の案内は2021年の公開時点のものです。募集のページは現在公開されていません。

（編集部より）関連記事は「UXエンジニアの転職事情と求人の探し方・必要なスキル」と「フロントエンドエンジニアのキャリアパスと必要なスキル」です。