こんにちは。
スパイダープラスUI/UX部でデザインエンジニアをしている猫大好き中田です。
家にロシアンブルーがいます！
本題に戻って、デザインエンジニアって何だろう、とお思いの方もいらっしゃるかもしれません。一言で説明すると、デザインエンジニアとはUI/UXデザインとプロダクト開発（エンジニアリング）との間を橋渡しする役割です。
私自身、デザインエンジニアになってから1年が経ったばかりです。
今回は1年を振り返りながら、その役割や、お客様にとって使いやすいプロダクト作りとの密接な関わりなどを紹介してまいります。
UI/UX部におけるデザインエンジニアの役割
デザインエンジニア誕生の経緯
スパイダープラスでは、エンジニアのいる開発部門と、UI/UXデザインの部門はそれぞれ別に分かれています。
UI/UXデザインについて、彼ら自身がプロとして考え抜いたものが、せっかく素晴らしい見た目をしているのにそのまま実装するのは難しい、ということは少なくありません。
時間が限られている中では、お互いが納得できるまで調整するのにもやはり限界があるため、最終的には少し異なるデザインのままリリースに至ることやエンジニアからデザイナーに相談することが難しい場合は、調整や異なるデザインのままリリースまで至ってしまうこともありました。
UI/UXデザイナーの立場からすると、リリースされた後にデザインと違うことに気づいて、「そんなはずでは・・・」という思いを抱えざるを得ません。
部門が分かれていることや同じプロダクトを見ていても使う言葉が違うことなど、両者の間には見えない壁があり、UI/UXデザイナーは、実装可否について気軽に相談しているつもりがそのコミュニケーションは簡単なものではありませんでした。
これらを解決するために、私がUI/UX部のエンジニアになりました。
UI/UXデザイナーと開発エンジニアの橋渡し役がいることによって、部門が分かれていてもUI/UXデザイナーはデザインしやすくなり、開発部門のエンジニアは実装しやすいデザインを受け取ることができるようになります。
では、どんなことによって橋渡しが成り立つのかを具体的に書いていきます。
デザイナーとエンジニアの橋渡しとなるためにやっていること３つ
デザインエンジニアの役割をもう少し具体的に説明しますと、大きく3つのことに分類できます。
- デザインシステム構築、コンポーネント開発
- プロトタイピング
- 技術面からのデザインFBやデザイン実現性検証
1. デザインシステム構築、コンポーネント開発
UI/UXデザイナーが策定したデザインガイドラインを、開発エンジニアが意識せずに遵守出来るように、コンポーネントを開発しました。
コンポーネントはデザインを崩さずに、プロパティには制約をかけることが重要です。
開発したてのものを実際に使っていくと、制約をかけすぎていることに直面したこともありましたが、その都度調整をしながら使いやすいものにしていきました。
コンポーネントができたことによって、デザインガイドライン通りの実装をすることが出来るようになり、プロダクトの「価値と品質の担保」をデザイン面で保証出来るようになりました。
2. プロトタイピング
プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。プロトタイピングはシステム設計工程の一部として組み込まれることも多く、それによってプロジェクトのリスクと費用を低減させると考えられている。反復型開発では1つ以上のプロトタイプが作られ、欠陥や問題が徐々に解決されていく。プロトタイプの改善が十分なされ、機能/堅牢性/製造の容易さといった設計目標に達したとき、製品としての製造が可能となる。
[引用: Wikipedia(https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0)]
引用した説明文でのプロトタイピングはUIデザインの検証や操作感を確認するためだけのものです。
スパイダープラスでのプロトタイピングは、デザインしたものが実装後にどんな姿や挙動をするのかを可視化させるのが主な役割です。
従来はUI/UXのデザインを描くだけで終わっていましたが、プロトタイピングが機能していくことで、デザインしたものがどんな風に動くのかを具体的に見ることが出来るようになりました。こうして描くだけ、開発するだけ、ではなく、UI/UXデザインと開発との間が少しずつ埋まっていくようになりました。
営業活動で使いたいから「こんなものが欲しい」、とか、「デザインしてみたものの動きを確認したい」という声があったらプロトタイピングを活用して形にしていきます。
UI/UXデザインと開発は、それぞれ別の部門で作業が行われますが、プロトタイピングの存在によって、両者の間を埋めることができます。
こうして内部的な処理は開発エンジニアに任せて、見た目についてはUI/UX部が作ることでデザインの品質を担保することが可能になっています。
この取り組みをさらにブラッシュアップしていき、いずれはUI/UX部で画面の実装までをできるようにして、開発グループがさらにラクになることを目指していくことを考えています。
3. デザイン実現性検証や技術面からのデザインFB
デザインと実装の間での複雑さの違いを埋めることをしています。
UI/UXの見かけ上、簡単に表現できるものを、プロダクト開発で実装しようとすると、実際は複雑なことを経る必要があることに直面することは多々あります！
そこで、デザインエンジニアの私が、UI/UXデザインをプロダクトへの実装が可能かどうか、検証します。
UI/UXデザイナーは、デザインガイドラインに沿ってデザインしているので、その結果生まれるUI/UXはプロダクトイメージを守ったものです。
それを実装しようとすると、iOSで提供しているUI部品ではデザインを再現できないことが発生します。
こうしたときに、デザインエンジニアがUI部品を自作してコンポーネント化し、可能な限り実現できるように可能性を探ります。
残念ながら実現困難だという場合は、デザイナーにどのようなUIならば実現可能かをフィードバックします。
こうしてプロダクトイメージが守られ、実装可能なUIが協力して作られます。
橋を渡すために必要なこと
橋渡しの内訳を大きく3つ紹介しましたが、実際に業務を進めるためにはそれらをうまくいかせるために必要なことがあります。やはり3つに絞って挙げてみます。
1.デザイン意図の汲み取り
私自身は元々100%エンジニアで、UI/UXデザインに対しては、UI/UXデザイナーと意識に差がありました。
100%エンジニアの視点としては、UI/UXデザインと乖離が生まれたとしても、「まあ動いてるし・・・」と思うことがありました。
しかし、UI/UXデザイナーと距離が近づいたことで、彼らが作ってくれたものを可能な限り再現しようという意識に変わっていきました。
前述のように、技術的に再現が難しいところはどうしても出てきてしまいます。
その時はUI/UXデザイナーと相談して、代替案を出したり出してもらいますが、お互いが納得してプロダクトイメージを守ったものにするためにも、まずはデザイン意図を汲み取った上でコミュニケーションを進めています。
2. Figmaの使い方に慣れること
100％エンジニアからデザインエンジニアになって苦労したのは、Figmaの使い方に慣れることです。
スパイダープラスのUI/UXデザインにはFigmaを使用していますが、FigmaでデザインされたUIを読む方法を身につけるのには苦労しました。
機能や画面上にある項目が多すぎて、どこをどう見たらいいのかわからないことだらけだったのです。
Figmaで実装するコンポーネントを設計する過程で試行錯誤を繰り返すことによって、使い方に慣れることができたのと、実装の際にもどこを見ればいいかなど、橋渡しのために必要なことがわかるようになっていきました。
3. デザインシステムを浸透させるための取り組み
デザインシステムを構築して「この実装方法を使ってね！」とたった一度周知しただけでは簡単に浸透しないものです。
PRを監視して、レビュアーとして割り込んで、周知済みの実装方法が使われているか、などを地道に見ていき、こちらも根気強く周知を重ねることが大切です。
こうした取り組みを重ねていくことにより、社内でデザインシステムに関する修正依頼をもらう頻度が少しずつ増えてきています。周知内容が浸透してきているのだなと感じています。
スパイダープラスでは新しい仲間も増えてきています。既存メンバーに対するのとは違う、新規メンバーへの周知方法も現在模索中です。
最後に
デザインエンジニアの役割をこなすようになって、以前ならば「ちょっと色が違ってるだけ」と思っていたことも、ブランドイメージを守りたいし、デザインシステムで定義している色を使うことでSPIDERPLUSの世界観を表現するという気持ちに変わっていきました。
まだまだ発展途上の状態でうまくいかないこともありますが、現在はプロトタイピングをしながらデザインシステムの方も充実させていこうとしています。
そうすることで、まずは自分たちの足元から効率化を進めていき、UI/UXデザインと開発とがそれぞれのコアな役割をハイレベルにこなして、それぞれの仕事をより良いプロダクトに昇華させられるようにしていきたいです。
今回、自分自身の仕事内容を振り返ってみて、スパイダープラスがアイデンティティにしている「&Co.（ともに）」を促進する役割を負っているのだなと自己再発見にもなったように思います。
プロトタイピングやデザインシステムについては、それぞれでひとつの記事になるぐらい語ることがあるので、またどこかでお話出来ればと思います。
スパイダープラスでは仲間を募集中です。
スパイダープラスにちょっと興味が出てきたなという方がいらっしゃったらお気軽にご連絡ください。最後までご覧くださり、ありがとうございます。
締めにもう一度うちの猫を見てください。
