私がデザインエンジニアになるまでのキャリア

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

Offers」は、時代の変化や環境にあわせてキャリアを築きたい、そんな人にぴったりのサービスです。副業を通じて、本業では経験できない、新しい環境/開発スタイルを経験しよう!

「Offers」をもっと詳しくみる!

デザインからコードへ

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

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

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

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

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

コードからデザインへ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

定義は未定義

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

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

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

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

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

最後に

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

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

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

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

『実践TypeScript』の著者・吉井健文が考えるTypeScriptの魅力と可能性

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことをマニ...

ヤフーが実践するギグワーク活用がこれからの新しい採用手法に!?リモート環境で求められる人材とはーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

コロナ後に問い合わせ数が6倍のサービスも。DX化が進むHRの現状ーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

デザイン

お金

採用・組織

グルメ