とあるマークアップエンジニアがデザインエンジニアになるまで

はじめに

こんにちは！ クレイのasachunです。
RailsやReact.jsで動いているWebアプリケーションにデザインを組み込んだり、UIデザインをやったりしています。

最近ではDocBaseヘルプセンターの記事執筆や、クレイブログのアイキャッチ制作もやっています。なんでも屋さんですw

制作したアイキャッチ

先日【翻訳】私ってデザインエンジニアかも…の記事を拝見し、「私もデザインエンジニアかも…」と思ったのをきっかけに、私自身の働き方やデザインエンジニアについての役割を考えるようになりました。

今回はデザインエンジニアとはなんぞや？ から、デザインエンジニアのやっていることや課題について書いていきたいと思います。

デザインエンジニアとは

デザインエンジニアとは、デザインとエンジニアリング間の流れを円滑にする人だと考えています。

各社によって呼称も異なっており、サイバーエージェント株式会社では「テクニカルクリエイター」、Googleやクックパッド株式会社では「UXエンジニア」と呼ばれています。

デザインエンジニアのやることは各社によってさまざまですが、大まかに以下のような役割を担っています。

• UI/UXデザイン（リサーチ段階から携わることも）
• プロトタイプ・モック作成
• デザイン・エンジニアリング双方の視点を踏まえたCSS設計（動的な実装にガッツリ関わることも）

要件定義〜実装まで幅広い領域に関わり、下記のように幅広い視点を持ってプロダクト開発に関わることが求められます。いわば各工程の作業を円滑にするジェネラリストとも言えます。

1. デザイナーの考え方を理解できる（UI/UX観点）
2. プログラマーの考え方を理解できる（実装・運用観点）
3. プロダクトオーナー/プロジェクトマネージャーの考え方を理解できる（ビジネス観点）

どのようにしてデザインエンジニアを名乗るようになったのか

ここで私がデザインエンジニアを名乗るようになった経緯をお話しようと思います。これが正しい方法だとはまったく言えませんが、ひとつの例としてお読みいただければと思います。

クレイの開発で抱えていた問題

私がクレイに入社した2013年4月、Webシステム開発はRails or PHP + jQueryでの開発が主流でした。React.jsのRの字がギリギリ誕生していたぐらいの時代です。※React.jsの初版は2013年3月29日リリース

私の入社以前のクレイの開発は以下のような流れでした。

1. デザイナー（外部の方）がPhotoshopでデザインカンプ作成
2. マークアップエンジニア（外部の方）がHTML + CSS + jQueryでコーディング（デザイナーが兼任することも）
3. バックエンドエンジニア（クレイメンバー）がRailsのシステムに組み込み

この流れにはいくつかの問題がありました。

• システムにHTML + CSSを組み込む際にERBに書き換えなければならない
• システムに組み込んだ際にデザイン崩れが起きてしまう
• システムの規模が大きくなるとCSSがカオスになり、デザイン崩れや上書きのための!importantが増える

システム開発に集中したいエンジニアにとって、HTMLをERBに書き換えるのは楽しくない作業でした。また社内にCSSに責任を持つ人がいなかったため、システムの規模が大きくなるほどCSSの不具合が増えていきました。

そこで「HTML + CSSをRailsに組み込み、メンテナンスする人が欲しい」と意見が上がり、いろんな縁を経て、マークアップエンジニアとして私がクレイに入社しました。

私は新卒の大学生でした。スキルは「HTML + CSS + 少しのjQuery」のみ。学生時代の課外活動でCakePHPを触ったことがありましたが、Railsはおろかプログラミングスキルも素人同然でした。

入社以後の開発の流れ

Railsに直接デザインを組み込むには、ローカル環境でRailsを動かせるようになる必要がありました。
Gitの使い方やRailsの環境構築方法を1から先輩エンジニアに教えてもらい、なんとか自力で環境構築ができるようになりました（その節は大変お世話になりました。。。）。

私の入社以降、開発の流れは以下のように変わりました。

1. デザイナーがPhotoshopでデザインカンプ作成
2. バックエンドエンジニアがRailsで機能を実装（デザインのない素のHTML）
3. 私がRailsにHaml + Sassでデザインを組み込む

エンジニアは機能の実装に集中できるようになり、私が責務を負うことによってメンテナブルなCSSを運用できるようになりました。またHTMLをERBに組み込む作業が無くなったことにより、開発スピードも上がりました。SO HAPPY!!!

軽微なUIは私がデザインすることもあり、このころにはデザインエンジニアに片足を突っ込んだ役割を担っていました。

RailsからJSフレームワークへ

入社して数年はRailsのviewファイルへのデザイン組み込みを主に行っていました。しかし2014年あたりからBackbone.jsやAngularJSなどのJSフレームワークを業務で採用するようになり、現在はReact.jsやVue.jsのコンポーネントに組み込みを行うほうが多くなりました。

とはいえ、RailsとJSフレームワークでもやっていることは変わりません。環境構築の際に使うコマンドが増えたぐらいです。

デザインエンジニアのやっていること

デザインエンジニア、というよりは私のやっていることです。

• DocBaseの改善・UIデザイン
• デザインシステム作成
• プロダクションコードへのデザイン組み込み
• DocBaseヘルプセンターのメモ執筆

DocBaseの改善・UIデザイン

DocBaseのベースのデザインは外部のデザイナーの方に依頼したものですが、ここ数年は大きな変更がないのもあり、ほぼ私が制作しています（小規模な変更だと外部のデザイナーさんに依頼しづらいというのもあります……）。

また、ユーザーからの要望やドッグフーディングで上がった課題を解決する改善も行っています。
参考：7,000社導入のツール「DocBase」が語る、トライアル→有料への転換率を2倍にした、チーム浸透型のインセンティブ施策の話。

ただ、ユーザーリサーチやカスタマージャーニーマップなどのフレームワークを使ったことはないので、今後はそちらにも力をいれていきたいところ……！

デザインシステム作成

先日フロントエンド改修をおこなったのに合わせ、それまでpsdやxdでバラバラに散らばっていたデザインデータをFigmaに統合しました。
Figma + Atomic Design でUIコンポーネント集を作りました

複数回使うコンポーネントはFigmaでComponent化し、ユーザー権限ごとの表示の違いも網羅しました。

プロダクションコードへのデザイン組み込み

DocBaseはRails + React.js + TypeScriptで動いているので、自分のPCに環境構築をします。
ローカルサーバーを起動し、RailsのviewやReactコンポーネントに直接JSXとstyled-componentsでFigmaのデザインを組み込んでいきます。終わったらGitHubでプルリクエストを出してレビューしてもらい、フィードバックの対応を行います。

基本はエンジニアが機能を実装→私がデザイン組み込み の流れで進めています。この段階でデザイン再現のために追加実装の依頼をしたり、必要な機能が抜けていたら実装をお願いしたりしています。

DocBaseヘルプセンターのメモ執筆

デザインエンジニアとは若干外れるかもしれませんが、DocBaseヘルプセンターの使い方メモやリリースの執筆もしています。
DocBaseヘルプセンター

機能の意図や内部の構造を把握したうえで書いているので、外部のライターの方に依頼するよりスムーズにメモの執筆ができていると思います。

デザインエンジニアのいいところ

デザイナーがシステムの構造をある程度把握している

デザイナー自身がプロダクションコードを見ているので、データベースや実装がどうなっているか、ある程度は把握しています。それを踏まえてデザイン作業をおこなえるので、「デザイナーがとんでもないデザインを出してきてどうしよう」のような事態はほぼないです。

ただ実装に気を使ってユーザーファーストのデザインになっていない、となると本末転倒なので、視点が偏りすぎないよう気をつける必要があります。

デザインした本人がプロダクションコードに手を入れられる

私がデザインからRails + Reactの組み込みまでおこなっているので、デザインの意図をプロダクションコードに直接反映できます。

また、デザイン組み込みの際にFigmaのデザイン崩れを発見することがあります。そのときにプロダクションコードでは正しいデザインを反映しつつ、Figmaの修正を同時にやったりもしていますw

デザインエンジニアの課題

どのスキルを伸ばせばいいか迷う

私は改善案の提案、UIデザイン、コーディング、ライティングといろんなことをやっていますが、どれもレベルとしては中途半端です。
どのスキルを伸ばしたい？ と聞かれれば「全部」になるのですが、現実的にすべてを同時に勉強するのは難しい……

まず手をつけるならUI/UX面のスキル強化と、デザインスキルの強化かなぁと考えています。

デザインエンジニア同士での交流が持ちにくい

新しい役職なので、デザインエンジニア同士での交流がなかなか持てないのが個人的な悩みどころです。
UXエンジニアの方、デザインエンジニアの方、zoom飲みしてください！（直球）

おわりに

途中で「これはただの盛大な自分語りなのでは……？」と思いましたが、（自称）デザインエンジニアがどんなことをやっていて、どんな思いを持っているか共有する意義はあると思ったので書いてみました。

「デザインエンジニア」や「UXエンジニア」で検索すると、デザインもエンジニアリングも完璧にできないといけないのでは……？ と思ってしまいますが、基本は「できることを頑張る」でいいんじゃないかと思っています。

マークアップエンジニアのキャリアアップ先としては、フロントエンドエンジニアを選択する人が多いのではないかと思います。私も一時期フロントエンドエンジニアを目指したことがありますが、何年経ってもさっぱりプログラミングができず、病みに病んだ時期がありました。

自分の特性や好きなことを考えた結果、UIデザインやプロダクト改善のほうが向いていそうだったので、今はそちらの方面で頑張っています！

プログラミングが苦手なマークアップエンジニアのキャリアアップ先として、デザインエンジニアはいい選択肢になるんじゃないかなと思いました。

宣伝

DocBase は社内・社外の垣根を超えて情報共有ができる情報共有サービスです。

細かい権限設定ができるので、オープンな情報もクローズドな情報も DocBase に集約できます。そして大きな企業さまでも全員で使えるよう、セキュリティには最も力を入れています。

チームを作成して30日間は無料ですべての機能が使えるので、ぜひチームを作成して試してみてください。

⇒ 30日間無料で DocBase を試してみる