エンジニアから信頼されるデザイナーになる

こんにちは、デザイナー兼エンジニアのふじけん(@kenshir0f)です。
普段はKomercoのUIデザインと実装を担当しております。

チームやプロダクトの状態に合わせて、デザインしたり実装したりと役割を変えながらサービス開発に携わっていますが、Komercoに参加した当初から実装に入っていたわけではありませんでした。
デザイナーとしてアウトプットしつつも、エンジニアの実装負担を下げる取り組みを行うことで少しずつ信頼を得て、そこから開発スピードを上げるため徐々に実装を担当するようになりました。

デザイナーとしてエンジニアからの信頼を得るために取り組んだことや、その過程で学んだことについてご紹介いたします。

エンジニアが実装しやすいUIデザインデータを作る

デザインデータをエンジニアに渡すときは、例外的なケースも含めてセットで渡すようにしています。例えば、ある商品のページの場合では、

・商品の情報がある場合
・商品の情報がない場合
・(インターネットエラーによって)商品の取得に失敗した場合
・(サーバーエラーによって)商品の取得に失敗した場合
・商品を取得する権限がない場合
・商品の取得に時間がかかった場合

など1つの画面でも多くのパターンがあり、メインである「商品の情報がある場合」のみデザインを渡しても、他のデザインがないと実装することができません。
エンジニアから「このパターンはどうしたらいい？」と毎回確認が入ると、待ち時間が発生して開発スピードは落ちてしまいます。
もちろん画面幅や情報の出し分けなど考慮すべき点は他にもありますが、実装に必要な情報は事前にエンジニアとコミュニケーションを取って用意するようにしています。

デザインデータの一例

実装して初めて分かることもあるため全てを考慮することは難しいですが、エンジニアが実装に入るときの確認コストを減らすことで、開発スピードを落とさない工夫をしています。

技術を理解してエンジニアと共通言語を持つ

新機能の開発や既存の機能改善などの工数出しは、データの持ち方や流れ、処理などをエンジニアと一緒に議論して見積もりしています。
KomercoではサーバーにFirebaseを利用していますが、

データベース：Cloud Firestore
ストレージ：Cloud Storage
関数の実行：Cloud Functions
検索：Algolia
決済：Stripe

など、様々なサービスを組み合わせて使っています。

例えば「商品が非公開になったら検索に表示されないようにする」機能を作るとして、

「Firestoreで情報が更新されたらCloud Functions経由でAlgoliaに情報を送る」

といった会話が発生します。このとき会話の流れ・中身が理解できると、なぜ工数がそれくらいかかるのか、その工数を減らすためにデザインでできることはないか、など開発スピードを落とさない工夫をエンジニアと協力して模索することができます。

自分たちのサービスがどんな技術を使っているのか知り、共通言語を持ってエンジニアとコミュニケーションすることで見積もりや役割分担を素早く決めることができます。
「仕様がよく分からないのでエンジニアにお任せ」ではなく、エンジニアと同じ目線で考えることでチームとして一体感を持って価値提供から開発まで取り組むようにしています。

また、技術を理解するとUIデザインを作る上で通信の流れや表示・入力するデータが事前に把握できるようになり、考慮漏れを極力減らすことが可能になるためデザインにも恩恵があります。

エンジニアに実装の知見を共有する

ある程度開発を共にして技術への理解が深まってきてから、ティザーサイトや管理画面などのWeb開発に取り組むようになりました。
Komercoの開発チームはiOSエンジニアが3人しかいないため、先行してWeb開発で得られた知見はエンジニアに還元するようにしています。
その時の資料はこちら↓

このとき、安心してエンジニアが話を聞いてもらえるよう、HTML5の試験を受けることで正しい知識を再度インプットしなおしました。

正しい知識を正しく伝えるため、エンジニアが安心して話を聞いてもらうためにこういった資格を便利に活用しています。

一見すると、デザイナーがエンジニアに技術の話をするのはおこがましいように見えますが、チーム全体のパフォーマンス向上を考えたら相手がエンジニアでも恐れず正しい知見を伝えることが大切です。
コツコツと学んだことをチームに還元することで、チーム内の知識量が増えるだけでなく、共通言語をさらに持てるため開発のコミュニケーションがより一層しやすくなります。

おわりに

デザイナーとしてエンジニアから信頼されるために取り組んだことや、その学びについてご紹介しました。
エンジニアと共通言語を持ったり知見共有して密にコミュニケーション取ることで、素早く連携してサービス開発できる環境を整えるようにしています。

知識を持つその裏には莫大なインプットがもちろん欠かせないですが、ユーザーに素早く価値を届けるためならデザイン以外の領域でも積極的に挑戦し、チームとしてパフォーマンスを上げることが大事かと思います。
この記事が、デザイナーとエンジニアが上手く連携するための参考になれば幸いです🙏

そして、クックパッドではサービス開発が好きなデザイナー・エンジニアを募集しています！興味を持たれた方はぜひご連絡ください！

採用情報 | クックパッド株式会社

ではでは👋