💫

デザインと開発をつなぐフロントエンド開発

に公開

サービス開発の現場では、「デザイナーとエンジニアの連携がうまくいかない」という課題が頻繁に聞かれます。この課題を掘り下げると、「デザイン通りに実装されない」「実装されたUIが使いにくい」「デザインは再現されているが、体験が損なわれている」といった問題があり、最終的にユーザーにとって価値のある体験を届けることを妨げます。

私たちはデザイン会社のエンジニアとして、この課題を解決し、ユーザーにとって価値のある体験を提供するために、どのようなエンジニアリングを実践すべきかを常に考えています。

なぜ、デザイナーとエンジニアの連携はうまくいかないのか

その原因は、「それぞれが自身の役割におけるプロフェッショナルであるから」だとシンプルに考えています。プロフェッショナルであるからこそ、注力するポイントや視点が異なり、意図せずして連携が難しくなっています。
デザイナーにはデザインの意図が、エンジニアにはエンジニアリングの意図があります。目指すゴールが「ユーザーにとって価値ある体験を届けること」で一致していても、その過程でのアプローチが異なれば、連携はうまくいきません。

この連携に関する課題を解消するには、お互いの領域に歩み寄ることが必要です。しかし、デザイナーがエンジニアリングを、エンジニアがデザインを学ぶ時間や学びながらコミュニケーションを行った場合、本来の役割に費やす時間が減り、プロフェッショナルとして役割を果たす時間が減ってしまいます。
本来の役割に費やす時間を維持したまま、デザインの意図とエンジニアリングの意図を効果的につなぐ。そのために「デザインエンジニア」という存在が必要不可欠です。

デザインエンジニアとは何か

私たちは「デザインと開発をつなぐフロントエンドエンジニア」を「デザインエンジニア」と呼んでいます。その役割は、単にデザインをコード化することではありません。デザインの意図を理解し、技術的にどのような設計になり、どう実現すればユーザーにとって価値のある体験を届けられるかを考えます。
それぞれの意図を理解しないままサービス開発を進めると次のような問題が発生しがちです。

認識のズレ

デザイナーが意図した動的な表現が、エンジニアには「技術的に困難」と見なされたり、逆にエンジニアの実装がデザイナーの意図と異なってしまう。

手戻りによる遅延

認識のズレが手戻りを生み、リリースが遅延してしまう。

品質のバラつき

担当者によって実装品質が異なり、ユーザー体験の一貫性が損なわれてしまう。

デザインエンジニアは、デザイナーとエンジニアがそれぞれの役割に注力できる環境を保ちながら、これらの課題を解決、または未然に防ぎます。

デザインエンジニアの3つの価値

1. 共通言語によるコミュニケーション

デザインエンジニアは、デザインとエンジニアリングの両方を理解し「共通言語」を用いてコミュニケーションします。実現が難しい課題が発生した場合、デザインの意図、エンジニアリングの意図を考慮し、単なる妥協点を探るのではなく、両者の視点からユーザーにとって最適な代替案や解決策を提示します。

2. 「生きている」デザインシステムの構築

サービス開発が進むと、デザインコンポーネントとコードとの間に乖離が生まれることがあります。コードに鮮度があるように、デザインにも鮮度があります。どちらかが先行し、どちらかが遅れている状況、これは鮮度が落ちている状態です。人間で言うなれば血が通っていない状態とも言え、技術的負債やユーザー体験の低下につながります。

デザインエンジニアは、この乖離を埋める、または未然に防ぐ役割を担います。デザインコンポーネントとコードの一貫性を維持・管理し、誰もが参照できるドキュメントを整備することで、デザインシステムを常に「生きている」状態に保ちます。これらのデザインエンジニアの活動は初期のコストがかかりますが、長期的には再利用性を高め、開発生産性を向上させます。

3. プロトタイプの品質向上

サービス開発には、ユーザーからのフィードバックに基づいた改善サイクルが不可欠です。デザインエンジニアは、長期的には再利用性を高める役割を担うため、実際のサービスに近い操作感やアニメーションをデザインの意図がある精度の高いプロトタイプを構築できます。デザインシステムがあることで精度はより高められると考えています。
これにより、開発の早い段階で質の高いフィードバックを得ることが可能になり、プロトタイプの品質を担保し、手戻りのリスクを削減できます。

まとめ

デザインエンジニアという役割をサービス開発チームに加えることは、新たなコストです。しかし、デザイナーとエンジニアが本来の役割に費やす時間を確保し、ユーザーにとって価値のある体験を届けるサービス開発を目指す上で、デザインエンジニアは不可欠な存在であると考えます。

もし、同様の課題に直面していたり、具体的な導入方法にご興味がありましたら、お気軽にご相談ください。課題解決のお役に立てれば幸いです。
https://ajike.co.jp/contact

ajikeエンジニアチーム|デザインと開発をつなぐフロントエンドエンジニア

Discussion