🌊

デザインとコードを反復横跳びする日々

2022/12/01に公開

こんにちは、Ubie株式会社でデザインエンジニアをしているtakanoripです。

僕がデザインエンジニアとして働き始めてもうすぐ1年になりますが、デザインエンジニアというポジションで働いているとデザインとコードを行ったり来たりすることが多いです。実際僕はデザイナーでもありエンジニアでもあるのでバナーやLPを作ることもあるしユーザーサポート対応でSentryやBQとにらめっこすることもあります。

この記事では普段僕がどういうことを考えて働いているか、Ubieで何やったか、来年やっていきたいこと、とかについて書こうと思います。

Ubieで今年やったこと

Ubieではデザイナーとエンジニアを反復横跳びしながら仕事をしています。

エンジニアやデザイナー以外のメンバーにはデザインエンジニアという概念が伝わりにくいので、そういう人たちとは「コードが書けるデザイナー」「デザインができるエンジニア」みたいな感じで接することが多いです。

プロダクト開発では一応デザインエンジニアという体で動いていますが、実態は「デザインができるエンジニア」に近いかなと思います。(最近はデザイン業務も兼務することも増えてきました。)

もともとUIの開発(デザイン再現、インタラクション、アクセシビリティなど)が全体的に後回しになってしまう問題を解決したくてデザインエンジニアを募集したという背景もあり、プロトタイピングなどの所謂デザインエンジニアっぽい仕事よりフロントエンドエンジニアっぽい仕事が多い気がします。

今年は次のような仕事をしていました。

新機能開発

今年の10月くらいまではユビー 病気のQ&Aの開発に関わっていました。(個人的にとても良いプロダクトだと思うので、ぜひチェックしてみてください。)
https://ubie.app/byoki_qa

このプロダクトではデザイナーがすでにいたのでマークアップ、microCMSの設定、OG画像生成ツールの作成、GASによる入稿ツールの作成などをやっていました。今までSEO意識したウェブサイトの開発はあまり経験がなかったので楽しかったです。

10月からは症状検索エンジン ユビーの新機能開発にも関わっています。最近はログイン後TOPページをリニューアルしたりしました。

症状検索エンジンユビー ログイン後TOP画面

デザイン生産基盤

他の記事や登壇でも話していますがデザイン生産基盤の構築をやっていました。デザイントークンを整備したりコンポーネントを作ったりボイスアンドトーンを考えたり、いろいろやってます。(おそらくアドベントカレンダーのどこかで文章校正ツールの話も出ると思います。)
Figmaをコミュニティに公開しているので、よかったらチェックしてみてください。

https://www.figma.com/community/file/1139108856002045571

最近は社内の事情により時間が割けておらずコンポーネントが全然実装できていないんですが、デザイントークンはjimboさんが作ってくれたVSC拡張のおかげもあって、いい感じに浸透してきています。

https://zenn.dev/ubie/articles/ubie-desing-tokens-for-vscode

最近はプロダクトで使うイラストどうしよう(フリーのイラストだと限界があるけど社内にイラストレーターいないのでどうしよう)問題について考えています。みなさんどうやっているのかお話聞かせてください。

スクラムマスター(SM)

これはまだ始まったばかりでぴよぴよって感じなんですが、スクラムマスターやっていきになりました。デザインエンジニアはデザイナー、エンジニア両方の性質を併せ持っているので、スクラム運営にそのへんの感覚を生かせないかなと思ってスクラムマスターに立候補してみました。Ubieはオンボーディングがかなり充実していて、スクラムマスターのための資料もたくさんあるので目下インプットしながら日々の業務に臨んでいます。

なにか収穫があったら来年のアドベントカレンダーネタにしようかなと思います。

デザインエンジニアは「UIを"つくる"プロ」

Ubieにおけるデザインエンジニアとは UIをつくることに専門性を持ったエンジニア だと勝手に思っています。これはTypeScriptやReactが得意なのとはまた違うスキルです。良いコードを書けるエンジニアが良いUIを作れるエンジニアとは限りません。

UIをつくるためにはデザインとコードの両面からUIを観察する必要があり、これこそがデザインエンジニアの専門スキルの1つだと考えています。フロントエンドエンジニアでもバックエンドの知識があると良いコードが書けるようになるのと同じで、UIを実装するときにデザインの知識があるとより良いUIを実装できるはずです。

会社にとって一番重要なのは会社の目標が達成され事業成長することです。そしてそれは利用してくれる人にとって良いプロダクトでなければならず、良いUIはプロダクトの品質を支える基礎の一部となるものです。デザインエンジニアとして職能の垣根を越えて「利用者にとって良いUI」をつくることでプロダクトの成長に寄与していきたいですね。

来年やりたいこと

今年はデザイン生産基盤構築や新規プロダクトの開発がメインだったので、来年は既存プロダクトのユーザーインタビューやリサーチに手を出したり、既存プロダクトの開発に深く関われたらいいなと思っています。デザインエンジニアといえばデザインシステムみたいなイメージが巷ではありますが、もっといろんな側面からプロダクト開発にアプローチできることを確かめていきたいです。

それからSM業もしっかり腰を据えてやっていきたいと思っています。デザインシステム然りチームの出力を最大化するためにできることをやっていきたいです。

We're hiring!!!

Ubieでは QAエンジニア、プロダクト開発エンジニア、ソフトウェアエンジニア(デリバリー&サクセス) などなどエンジニアを絶賛大募集中です!
まずはカジュアル面談からお気軽にお問い合わせください!
https://recruit.ubie.life/engineer
https://recruit.ubie.life/jd_dev/eng_qa
https://recruit.ubie.life/jd_dev/eng_prod
https://recruit.ubie.life/jd_ops/ops_swe_delivery_success

Ubie テックブログ

Discussion