Flutterを利用することで、どのように開発者とデザイナーがコラボレーションできるのか
デザイナーと開発者の引き継ぎ作業をより簡単で生産的に行う方法を発見しました。
--
Julia Park, Interaction Designer | Slava Olenin, Principal Software Engineer
この記事は、2019年1月に発行された How Developers and Designers Can Collaborate Using Flutter の日本語翻訳です。
デザイナーと開発者の業務の引継ぎにおける問題点
デザイナーと開発者の間での業務でのよくある問題点は、デジタル製品を改良するための業務のやりとりです。開発者はデザイナーのビジョンに基づき、製品を設計するための最初のステップに取り掛かります。デザイナーは製品の初期バージョンをテストした後、いくつかの調整を試みます。しかし彼らが念頭に置いていた要素の不透明度や、ドラッグアンドドロップの動作を正確に伝えることは必ずしも容易なことではありません。多くの場合、デザイナーは変更したい内容を説明するためだけに別のプロトタイプを作成します。これには多くの労力と時間、およびコミュニケーションを必要とし、特にアニメーションとトランジションが豊富なアプリケーションの場合は尚のことです。
Favorite Mediumでは、学歴と職務経験が異なる２つのチームがどのように効率的にコラボレーションできるか、自ら問いかけました。「デザイナーと開発者の間の業務の引き継ぎはどのようにしたら独創的に取り組むことができるのか」「どのような作業順序で行えば、不要な手順や時間を削減し、より良い製品を生み出すことができるのか」
新しいツール：Flutter
Googleが『Google I / O 2018』のイベントでFlutterを発表したとき、我々はこの製品がもつ特長に興奮しました。この製品は単一のコードベースからAndroidとiOSの両方にネイティブアプリをデプロイできる新しいフレームワークがあるのです。それは我々には他のクロスプラットフォームよりもとても印象的だったのです。より柔軟で美しいUIの可能性を提供しつつ、ツール内の緊密なコラボレーションを通じて、デザイナーと開発者の間の作業の流れを合理化させるようにも見えました。 早速、我々は自ら試してみることにしました。
Flutterの最大の特長の１つは、開発者がネイティブパフォーマンスでカスタムトランジションとアニメーションを構築できるようにする高性能ユニバーサルアニメーションフレームワークです。ボタンの単純なクリックアニメーションから始まり、画面間の複雑な遷移に至るまでアプリケーション内のほぼすべてのウィジェットにアニメーションを追加できます。ホットリロードと組み合わせることで、これらのアニメーションの再生がこれまでになく簡単にできます。
しかしながら、ボタンの色やフォントサイズなどの単純な値と比較すると、アニメーションには、アニメーションの速度やタイミング、イージング、キーフレーム等、微調整する値が多くあります。また、調整やデバッグが難しく、変更を加える際に開発者とデザイナーの間でやり取りが増えることになります。
幸いにもFlutterはこれらの問題に我々が自由にアプローチできる非常に柔軟なフレームワークです。ここでは、Flutterベースのプロジェクトにおいて、我々がデザイナーと開発者のやり取りを改善した例を、デザイナーのJuliaParkと開発者のSlavaOleninのコメントとともにご紹介します。
我々が行ったこと
我々のプロジェクトのために、ユーザーが地元企業の取引を探索できる報酬アプリを開発しました。
１．Principleを使用してアプリとラフアニメをデザイン
UIフレームワークを使用せずにゼロから設計を開始し、後でFlutterのフレームワーク内で編集することを予想し、プロトタイプに費やす時間と労力を通常よりも少なくしました。
2.Figmaを介してビジュアルアセットを受け渡し
受け渡しにはFigmaを使用しました。 これはデザイナーと開発者が設計や 意思疎通、受け渡しの際に共同作業が簡単にできるウェブベースのリアルタイムのコラボレーションデザインツールです。そしてデザイナーのJuliaは「デザイナーが常に念頭に置いていることの１つは、受け渡し前に設計が完璧でなければならないということ」と述べ、さらに彼女は「 しかしFigmaを使用すると、プロセスの中でも設計の変更が可能なため、その心配をする必要はない。 設計の変更が生じた時は、デザイナーはデザインを更新し現在使用中のファイルにコメントを残すことができる」と話しています。
3. Flutterを使用してデザインを構築
ビジュアルアセットを使用して、開発者はFlutterでのビルドに取り組みます。 我々の目標は、アプリケーションの視覚的な側面を微調整する方法をデザイナーに提供することでした。 これを実現するために、ボタンの色やフォント、アニメーションの速度、イージングなど、デザイナーが編集する可能性がある全てのプロパティを含むtheme.dartファイルを作成しました。 そのようにすることで、デザイナーは１つのファイルを処理するだけで済み、アプリケーション導入の詳細を理解する必要はありません。 このテーマファイルは、適切なホットリロードを使用して任意のウィジェットでアクセスできるため、デザイナーはアプリケーションを再コンパイルせずにテーマのプロパティを微調整してテストできます。
4. 設計者がコードを編集するためのシステムをセットアップ
次に、エンジニアはデザイナーが１台の機械に６つのプログラムをセットアップできるよう、デザイナーのサポートしました。 これらのプログラムを使用すると、デザイナーはアプリケーションに使用されるプラットフォームを深く理解していなくても、テーマとアニメーションを修正できます。我々の開発者のSlavaは「デザイナーにXcodeやAndroidStudioの学習を強要したくない」と話しています。
使用したプログラム一覧
開発環境の構成には、相互に依存する多くのツールが含まれるため、多くの時間を要す可能性があります。 通常、帯域幅とコンピューターのパフォーマンスにもよりますが、プロセス全体には３～５時間かかります。 幸い、このプロセスはすべてのFlutterプロジェクトに対して１度のみ必要な作業になります。
5. アプリケーションのソースコードをロード
開発の環境が整い稼働し始めると、変更するアプリケーションソースが必要になります。 このステップには、開発者とデザイナーの両方の努力が必要です。 デザイナーはgitの基本を理解する必要があります。 基本的には、最後に変更されたものを取得する方法と、変更をリポジトリにプッシュする方法を理解することが必要になります。 開発者は、プルリクエストを使用してデザイナーが行った変更を検証し、潜在的なソースの競合を統合させる必要があります。
6. 開発者は何をどのように編集できるか、デザイナーをガイド
開発環境と最新のアプリケーションソースコードの両方が揃い、デザイナーはテーマとアニメーションを微調整でき、変更の結果が即座に確認できます。
Flutterを使用することは、このようなのデザイナーと開発者のコラボレーションには重要な鍵となります。 Flutterにはプラットフォーム固有のテーマファイルがないため、デザイナーはこれらのテーマやアニメーションを微調整するAndroidまたはiOS固有の方法を理解する必要はありません。 「現時点では、構成可能で保守可能なテーマファイルを作成するのは主に開発者の責任であり、デザイナーの役割はそのファイルの値を微調整すること」と開発者のSlavaは話しています。
Flutterのホットリロードサポートにより、デザイナーはアプリケーションを何度も統合させることなく、変更を即座にプレビューすることもできます。 これにより、特にアニメーションの調整に関して大幅な時間を節約できます。
我々のデザイナーであるJuliaはコーディングの方法を知る必要があるのではないかと心配していましたが、コーディングの予備知識がなくても編集を問題なく行うことができました。彼女は「編集の作業はストレスを全く感じることなく、変更した箇所をすぐに確認できた」と感想を述べています。
Juliaはコードを更新するだけで、カードの色やアニメーションの速度、フォント、パディング、余白を変更することができました。 彼女は「これらの作業はQAの前には私たちデザイナーは不満を抱える作業です。今回のプロセスは作業の往復を減らすことができ、本当に役立った」と感想を述べています。
結論
Flutterを使用したこのアプローチは、デザイナーと開発者のコラボレーションをよりスムーズにする際に役立つ方法だと発見しました。
要点
- このプロセスは、QAの時間とプロセス全体の時間を節約。
- 開発者とデザイナーはともに結果に対して責任を実感した。 「設計はデザイナーのもの」、「ビルドは開発者のもの」と考えるのではなく、共にアプリケーションの作成・改良を行った。
- 互いの学びあい。 デザイナーは開発の制約を、開発者は設計の意図を、各々がよりよく理解できた。
課題点
- デザイナーはgitの基本的な理解が必要であるが、これはデザイナーにとって難しい場合がある。
- デザイナーは、theme.dartファイルの編集中にエラーを起こす可能性がある。 Slavaは「デザイナーをプログラマーにさせることなく、これを適切に処理する方法を理解しなければならない」と述べる。
ただし、これらの課題点の多くは最初の１度のみにある課題であり、次にプロジェクトを行う際には時間はそれほどかからずに済むと思われます。 全体としてこのアプローチは、時間を節約し生産性の高めより緊密なコラボレーションの促進、最終製品を改善させるため、試す価値があると考えています。よくある典型的なデザイナーと開発者の間のコミュニケーションでは、意図した方向で明確に詳細を伝えるためにそれぞれが自分の言語で話しているように感じます。しかし、Juliaは 「しかし今では、同じ言語を使用して製品に直接取り組んでいるようだ」と述べています。
