見出し画像

インタラクション制作の進め方: mentoのデザイナーとエンジニアの協働

H-takesue

こんにちは、mentoでフロントエンドエンジニアをしている竹末です。
私たちのプロジェクトでデザイナーとどのように協力してインタラクション制作を進めるか、具体的なプロセスと共にその体験を共有します。

mentoは、月3万円からプロのビジネスコーチがつけられるオンラインサービスです。現在は法人向けの「mento for Business」に注力してます。

先日、mento for BusinessにてAIによってコーチングセッションのサマリーを生成する「AIサマリー」機能をリリースしました。

今回はその機能のインタラクション制作について、デザイナーとどう協業し進めたかを共有します。チームの空気感を少しでも感じていただければ幸いです。

AIサマリーのマイクロインタラクション

実装されたインタラクションがこちらです。

AIサマリー機能の開発背景

この新機能は、コーチングセッション後にAIが自動的に重要なポイントを要約し、参加者がセッションの内容を簡単に復習できるようにします。
その情報をどのようにユーザーに認知されるかが課題でした。


デザインとフロントエンドの役割
この目的を達成するために、デザイナーとフロントエンドエンジニアは密接に協力しました。デザイナーはユーザーインターフェースの視覚的要素とインタラクションを設計し、エンジニアはそれを技術的に実現する役割を担いました。このプロセスは、双方が継続的に意見交換を行うことで、最終的な製品がユーザーにとって最も有用でアクセスしやすい形になるよう努めました。

デザインの共有方法について

私たちのチームでは、デザイナーからのデザイン共有は基本的にFigmaを通して行われます。

mentoでは、慣習的にUIインタラクションはエンジニアが実装しデザイナーに確認する形をとっていました。
例えば、読み込み時のローディング表示UIやスケルトン表示などはエンジニア側で実装し、その後デザイナーレビューというフローです。

AIサマリーでの課題

今回のAIサマリーでは以下のような前提がありました

  • mento初のAIプロダクト

  • 明確にインタラクションを含め、UI方向性をはっきりさせたい

  • AIサマリーというあたらしい「異質なもの」を際立せたい

などなどの理由により、作業工程を見直しました。

決定した作業工程

作業工程について、インタラクションの共有をAffter Effectで共有する形としました。
また、動的なコントロールなどを考慮し、アニメーションライブラリのGSAPで実装する形に決定しました。

  1. Figmaでワイヤー作成(デザイナー)

  2. インタラクションをAfter Effecrtで作成(デザイナー)

  3. After Effectを参考にし、アニメーションの作成をGSAPで作成(エンジニア)

  4. CSSアニメーションを作成

  5. Storybookに実装しslackで共有、PM含め確認(エンジニア、デザイナー)

  6.  Reactコンポーネントとして組み込み

1.Figmaでワイヤー、デザイン作成

まずデザイナーがワイヤーをPdMと協議の上作成し、合意形成しながらデザインをFigma上で作成します。
この時点で静的な実装についてはエンジニアが開始します。

2.インタラクションをAfter Effecrtで作成

作成されたワイヤーから、After Effectを使用しアニメーションの当たりを作成します。
この時点でプロジェクトチーム全体に対して、視覚的なイメージと動きの感覚を共有します。

3.After Effectを参考にし、アニメーションの作成をGSAPで作成

After Effectの内容を確認しGSAPライブラリを用いてReactコンポーネント単位で移植します
Lottie等、After Effectの結果を直接取り込むことも検討されました。
しかし、アプリケーションでの操作を重視するため、プログラミングに起こす選択をしました。

細かい実装内容については割愛しますが、After Effectの各キーからおおよその移動と回転を参照しコードに反映します。

4.CSSアニメーションを作成

合わせて、背景等のアニメーションについてはCSSで再現する形をとりました。
デザイナーと頻繁なやり取りを行い、解釈の齟齬がなく納得できる形を目指します。

5.Storybookに実装しslackで共有、PM含め確認

実機検証等、確認についてはStorybookを使用し、なるべく本番環境と近い環境で実装確認を行い早いフィードバックを得ます。

6.Reactコンポーネントとして組み込み

確認修正後、動的な実装を開始します。

学び

  • デザイナーがなるべく明確なアタリを作成しておくこと

    • 動的なUIをFigma等プロトタイプツールのみで共有するのは厳しいです。今回はAffter Effectを使用しましたが、デザイナーとチームのケーパに基づき適切なツールを使用したいです。

  • 実装者間で完成形をイメージしておく以上に、実装者以外で完成形をイメージしておく

    • インタラクションについては実装者以上にステークホルダーは完成形を想像することが難しいです。

  • 小さくパーツごとに実装、細かい確認をインスタントに行う

    • 作り切ってから共有するよりも、細かいFBと細かい修正を繰り返す方が結果的に早く完了することが多いと思います。作業フロー、共有方法は常に改善の余地があります。

  • 「細部に神は宿る」

mentoに興味を持ってくださった方へ

少しでもこの記事を通じて、mentoのプロダクトチームの空気が伝われば幸いです。

mentoのプロダクトチームでは、エンジニア、デザイナー、マネージャが垣根なく協業しています。少しでもご興味があれば、ぜひともこちらをご覧いただければと思います。


この記事が気に入ったらサポートをしてみませんか？