プロダクト開発におけるコンポーネント実装で、デザインステータスを明示してもらえて助かった話

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回の記事では、プロダクト開発においてコンポーネントを効率よく実装する際に、デザインの工夫で助けられた話を書こうと思います!

助けられたこと

プロダクトの機能開発では、デザインと実装が並行して進むことがままありますし、デザインが未確定の状態でコンポーネントに先行着手することもよくあります。

そういった進め方をする際には、通常であればエンジニアとデザイナー間で、デザインのどこが確定してどこが確定していないかを都度確認する必要があります。

しかし、ある案件でそういった進め方になった際、弊社UIデザイナーの今西に前もってFigma上にデザインのステータスが分かるように明示してもらえたことがありました。

`Work In Progress` のようなステータスが明示されている

デザインの進行状況が明確だとどこを先行して着手できるか、どこはまだ着手できないかをFigmaを確認するだけで把握することが出来、手戻りが少なく効率的に進めることが可能になります。

実際の案件でも進められるところを進めつつ、Figmaを確認することで着手可能の判断をすることができたのでとても助かりました!

どんなテンプレートを使ってる?

デザインステータスの表示にはどんなテンプレートを使用しているのか、デザイナーの今西に訊いてみました。

こちらの Design Handoff System というテンプレートを使用しているようです。

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

ステータス表示はもちろん、アノテーションコメントやエラーケース・エッジケースの明示に使えるヘッダーなども用意されており、有用なテンプレートだと感じました。

使用方法もファイルを自分の Figma 上に複製するだけなので簡単です!

まとめ

プロダクト開発においてコンポーネントを効率よく実装する際にデザイナーに助けられた話を書きました。

効率よく円滑に作業を進める上でデザインステータスが明示されているとコンポーネント実装がやりやすく、また必要のないやりとりが減るため双方にメリットがある工夫だと感じます。

まだ認識できていない工夫もありそうなので、よりよい協業のために今後更にデザインについて深掘りしてみたいなと思っています。

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。