AWS Amplify Studioから、エンジニアとデザイナーのそれぞれの領域が広がる可能性

Yuki Takeda

2022-02-07

こんにちは！　ANKR DESIGNの武田です。

先日、AWS (Amazon Web Services)が主催するイベントAWS re:Invent2021にて「AWS Amplify Studio（以下、Amplify Studio）」が発表されました。発表から少し時間が経ってしまいましたが、弊社でも新しい技術のキャッチアップとしてAmplify Studioがどのようなサービスなのかを知るために触ってみることにしました。

Amplify Studioとは

Amplify Studioはデザイナーと開発者がシームレスに協力することでWebアプリとモバイルアプリの開発をこれまでより短期間で行い、サービスとして提供することを主な目的とした新しいサービスです。

　Amplify Studioを利用するためにはまず、デザイナーがFigmaでデザインを作成するところから始まります。そのFigmaデータをAmplify Studioで読み込むことによってReactアプリのコンポーネントに自動的に変換し、利用することが可能になります。また、生成されたUIコンポーネントをAmplify Studioのバックエンドに接続することができます。この仕組みによって開発者はUIのコンポーネントを実装することなく用意された、自動生成されたUIコンポーネントのライブラリを利用してアプリケーションを実装し、AWSのサービスを利用することができます。

チュートリアルを試してみました

チュートリアルのページも用意されていますが、Amplify Studioを利用する方法については公式ブログでよりわかりやすく紹介されています。下記のURLから手順に沿って進めることでWebアプリをローカル環境で動かすことができます。

‍

「AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現」（日本語版）

WebのUIを実装する際には画面の装飾する必要があるときにはCSSが利用されます。Amplify StudioではFigmaで作成されたデザインデータをReactコンポーネントに変換し、そのままアプリ内で使用することができますので、CSSを使うことなく簡単に画像のようなWebアプリを作ることができます。

‍

生成されたReactコード

前述した通り、Figmaで作成したデザインがui-conponentにReactコードとして生成され、エンジニアが利用できるようになりますが、コンポーネントを作成した後に、つまりプロジェクトを進める中でデザインに変更を加える必要がある場合もあるかと思います。

その際はamplify pullコマンドによってFigmaのデザインデータとui-conponentフォルダを更新することが可能です。一方でui-conponentフォルダはAmplify Studioによって管理されることになりますので、フォルダ内のコンポーネントに対して直接変更を加えてはいけません。

これについては自動生成されたReactコンポーネント内にコメントで「ファイルを変更しても上書きされるよ」の旨が記載されていました。

UIコンポーネントに対して引数（props）を渡して色やサイズなどを指定することも可能です。ただしこの際は”Flex.Flex[0].Flex[0].Flex[1].TextField[1]”のような形でコンポーネント内のパーツを指定する必要があります。慣れの問題もあるかもしれませんが、この指定方法は実装時、コードを見返すときにどこのパーツを指定しているのかが分かりにくく、直観的でないように感じました。

デザイナーとエンジニアの関係

従来のWebアプリやモバイルアプリの開発ではデザイナーがデザインを担当し、作成したデザインをもとにエンジニアがUIの実装を担当し、アプリを開発していく流れが主でした。

「Amplify Studio」を利用することで、FigmaでUIをコンポーネントとして作成することが可能となり、デザイナー（もしくはFigmaを利用することができるエンジニア）がデザインしたものをほとんどコーディングすることなく実装することができるようになります。このおかげでエンジニアとしてはUI実装の負担を大幅に軽減することができるでしょう。UI実装にかかる時間を短縮できるということは、その他の部分にリソースを使うことができますので、アプリ開発のスピードや品質の向上も期待できるでしょう。

エンジニアのUI実装工数が削減可能である一方で、デザイナーはAmplify Studioでスムーズに読み込み可能なように、コンポーネントの概念を理解してFigmaデータを作成する必要があります。デザインデータの作り方によって生成されるコードも変わるため、デザイナーの腕によってエンジニアの開発効率が変動することになりますし、デザインデータ作成の段階からエンジニアを巻き込んで議論するような新しい開発プロセスの導入もあり得るかも知れません。

AWSの記事を見る限り、Figmaでコンポーネントを意識したデザインをデザイナーが担当することを前提としていますが、エンジニアがFigmaでのデザインを担当しても良いのではないかと思います。Figmaの使い方を身につけておくことで、デザインへの理解が深まり、１からコーディングする場合よりも、より早くキレイなUIを実装できるような気がします。