デザイナーと開発者の引き継ぎ作業をより簡単で生産的に行う方法を発見しました。

Julia Park, Interaction Designer | Slava Olenin, Principal Software Engineer

この記事は、2019年1月に発行された How Developers and Designers Can Collaborate Using Flutter の日本語翻訳です。

デザイナーと開発者の業務の引継ぎにおける問題点

デザイナーと開発者の間での業務でのよくある問題点は、デジタル製品を改良するための業務のやりとりです。開発者はデザイナーのビジョンに基づき、製品を設計するための最初のステップに取り掛かります。デザイナーは製品の初期バージョンをテストした後、いくつかの調整を試みます。しかし彼らが念頭に置いていた要素の不透明度や、ドラッグアンドドロップの動作を正確に伝えることは必ずしも容易なことではありません。多くの場合、デザイナーは変更したい内容を説明するためだけに別のプロトタイプを作成します。これには多くの労力と時間、およびコミュニケーションを必要とし、特にアニメーションとトランジションが豊富なアプリケーションの場合は尚のことです。

Favorite Mediumでは、学歴と職務経験が異なる2つのチームがどのように効率的にコラボレーションできるか、自ら問いかけました。「デザイナーと開発者の間の業務の引き継ぎはどのようにしたら独創的に取り組むことができるのか」「どのような作業順序で行えば、不要な手順や時間を削減し、より良い製品を生み出すことができるのか」

新しいツール:Flutter

Googleが『Google I / O 2018』のイベントでFlutterを発表したとき、我々はこの製品がもつ特長に興奮しました。この製品は単一のコードベースからAndroidとiOSの両方にネイティブアプリをデプロイできる新しいフレームワークがあるのです。それは我々には他のクロスプラットフォームよりもとても印象的だったのです。より柔軟で美しいUIの可能性を提供しつつ、ツール内の緊密なコラボレーションを通じて、デザイナーと開発者の間の作業の流れを合理化させるようにも見えました。 早速、我々は自ら試してみることにしました。

Flutterの最大の特長の1つは、開発者がネイティブパフォーマンスでカスタムトランジションとアニメーションを構築できるようにする高性能ユニバーサルアニメーションフレームワークです。ボタンの単純なクリックアニメーションから始まり、画面間の複雑な遷移に至るまでアプリケーション内のほぼすべてのウィジェットにアニメーションを追加できます。ホットリロードと組み合わせることで、これらのアニメーションの再生がこれまでになく簡単にできます。

しかしながら、ボタンの色やフォントサイズなどの単純な値と比較すると、アニメーションには、アニメーションの速度やタイミング、イージング、キーフレーム等、微調整する値が多くあります。また、調整やデバッグが難しく、変更を加える際に開発者とデザイナーの間でやり取りが増えることになります。

幸いにもFlutterはこれらの問題に我々が自由にアプローチできる非常に柔軟なフレームワークです。ここでは、Flutterベースのプロジェクトにおいて、我々がデザイナーと開発者のやり取りを改善した例を、デザイナーのJuliaParkと開発者のSlavaOleninのコメントとともにご紹介します。

我々が行ったこと

我々のプロジェクトのために、ユーザーが地元企業の取引を探索できる報酬アプリを開発しました。

1.Principleを使用してアプリとラフアニメをデザイン

--

--

Favorite Medium

Favorite Medium

Favorite Medium builds digital products with tangible purpose for companies around the world.