AWS Amplify Studioと Figmaの連携によるLP開発の効率化

by Tech Leverages

Slide 1

Slide 1 text

AWS Amplify Studioと Figmaの連携によるLP開発の効率化レバレジーズ株式会社レバテック開発部テクニカルイネイブリンググループ河村勇樹 2023/03/24

Slide 2

Slide 2 text

自己紹介河村勇樹（28歳） ● 経歴： ○ 2019年4月大手Web企業新卒入社 ○ 2021年1月レバレジーズ株式会社中途入社 ● 出身： ○ 東京都町田市（シティボーイ） ● 趣味： ○ お酒、ゴルフ ● 2023年の目標： ○ ゴルフのスコアを90台にのせること ● 好きなAWSサービス： ○ Amplify、CloudFront、ECS、Aurora

Slide 3

Slide 3 text

目次 ● LP制作の現状 ● AWS Amplify Studioの紹介 ● 実際のLPを使って解説 ● まとめ

Slide 4

Slide 4 text

LP制作の現状

Slide 5

Slide 5 text

このLPの実装ってどれくらいかかりますか？？？ https://freelance.levtech.jp/lp/023aa/ https://creator.levtech.jp/lp/125aa/ https://rookie.levtech.jp/lp/506ab/

Slide 6

Slide 6 text

1LP / 1Sprint（10 days）ただし、本番リリースまで至らない ...

Slide 7

Slide 7 text

LP制作の現状

Slide 8

Slide 8 text

LP制作の現状

Slide 9

Slide 9 text

静的・動的部分の実装で約７日... なぜ、こんなに時間がかかるのか？？？

Slide 10

Slide 10 text

LP制作の現状 LP実装における課題 ● 静的・動的どちらもデザインが複雑 ○ CSSを適用するのが大変 ● 画像化した実装はなるべく避ける ○ 訴求部分のABテストすることもあるため ● 完成後もエントリー部分は入念にテストが必要 ○ 機会損失につながってしまうため

Slide 11

Slide 11 text

リードタイムを削減できないだろうか... 特に、Figma（デザイン）を実装に落とし込む部分 ...

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Amazon Web Services ブログより引用 Amazon Web Services ブログより引用

Slide 14

Slide 14 text

Amplify Studioの特徴主要な機能 ● バックエンドとフロントエンドを1つのGUI開発環境でビルドする ● デザイナーから開発者へのシームレスな引き継ぎ ● UIコンポーネントをデータと紐付ける

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Figmaと連携してコードを自動生成これが本当に便利！！！

Slide 17

Slide 17 text

Amplify Studioの特徴 Figmaと連携してコードを自動生成 ● AWS Amplify Studio と Figma との連携 ● Figma 上のデザインを AWS Amplify Studio にインポート ● React などで利用できる Component としてコードを生成

Slide 18

Slide 18 text

Amplify Studioの特徴メリット ● CSSを書くことなくデザインされたWebアプリを開発 ● デザインとシームレスに連携したシステムの構築 ● 導入が簡単 ○ 公式から AWS Amplify UI Kit というコンポーネントライブラリが提供されている ○ 自作コンポーネントを組み込むのも簡単

Slide 19

Slide 19 text

Amplify Studioの特徴デメリット ● React に依存してしまう ○ Amplify UI とFigma との連携に関する公式ドキュメントも React のみしか存在しない ○ ※ 2023/03/24現在 ● Amplify Studio に取り込む上での制約がある ○ 決められたルール上でデザインを作成する必要がある ● スタイルを override しないと実現できないデザインもある ○ ヘッダー固定、アンカーリンク、ボタンのホバー、カルーセル、アニメーションなど

Slide 20

Slide 20 text

実際のLPを使って解説

Slide 21

Slide 21 text

実際にお見せします検証に利用したLPのデザインを例に解説していきます！（※ スクリーンショットを使います）

Slide 22

Slide 22 text

Figmaで作成したデザイン

Slide 23

Slide 23 text

”Pc506aaMV”のコンポーネントを Amplify Studio に取り込むと...

Slide 24

Slide 24 text

上記のようにデザインデータを取り込むことができる（※ 背景画像等はコード上で設定する）

Slide 25

Slide 25 text

実装に必要な Props や Handler を設定する

Slide 26

Slide 26 text

コンポーネントをコードとして取り込む Amplify CLI を利用して React の Component を生成 “$ amplify pull --appId xxx --envName xxx”

Slide 27

Slide 27 text

生成されたComponentファイル（jsx） TypeScriptで利用できる型定義（ *.d.ts）

Slide 28

Slide 28 text

※ Componentとして実際に利用する ● Propsに画像のURLを渡す ● Handlerに実装した関数を渡す ● overridesに個別に必要な設定を追加 ○ スタイルの調整 ○ カスタムデータ属性

Slide 29

Slide 29 text

以上で実装完了ほとんど CSS の実装をする必要がない！！！

Slide 30

Slide 30 text

実際にAmplify Studioを導入してみて... 良かったこと ● デザインが完成すれば、ほぼ実装が完了状態になる ○ 今まで辛かったCSSの実装が大幅に削減できた ...！ ○ 集中すべき、したいところにより実装に時間をかけられる ...！ ● Component Propertiesを利用することで、実装する部分も GUIで完結 ○ 実際のコードも削減！

Slide 31

Slide 31 text

実際にAmplify Studioを導入してみて... 辛かったこと ● 今までのデザインルールを変更するコスト ○ Amplify Studioの制約に基づいてルールを変更する必要がある ○ 取り込み時にエラーが発生することも ...（割愛） ● ディレクトリ構成を柔軟に変更できない ○ “ui-components”というディレクトリにフラットに吐き出される ○ パーツとして利用したいコンポーネントなどのグルーピングが難しい ...

Slide 32

Slide 32 text

実際にAmplify Studioを導入してみて... これから取り組みたいこと ● デザインシステムとして拡張 ○ 共通 Component も社内ライブラリとして活用したい ● Figma → Amplify Studio → React Component をさらにシームレスに ○ Figma のデザインが完了したら React の Component までの流れを自動化したい ● Amplify Studio の機能をさらに活用してノーコードに ○ 非エンジニアでも開発・運用ができる状態にしたい

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

エンジニアがコードを書かずにシステムを創る日はそう遠くない...！

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Leverages スライドテンプレート基本カラー基本フォントサイズアイコン（欲しいモノがあれば言ってくださいませ！） #333333 #fbfbfb #95100e メインタイトル : 42 サブタイトル : 24 本文 : 16 （あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D）

Slide 37

Slide 37 text

スライドタイトルレバレジーズ株式会社　〇〇〇〇 2018/01/01

Slide 38

Slide 38 text

目次 ● 始めに ● 内容１ ○ 1の内容 ● 内容２ ○ 2の内容1 ○ 2の内容2 ● 内容３ ● まとめ ● さいごに

Slide 39

Slide 39 text

伝えたいメッセージメッセージの説明とか。解説とかをここでする。

Slide 40

Slide 40 text

内容１

Slide 41

Slide 41 text

内容１内容１のサブタイトル内容がここに入ってくる。

Slide 42

Slide 42 text

見出し見出し見出し1 内容1 見出し2 内容2 見出し3 内容3 見出し4 内容4

Slide 43

Slide 43 text

ワークシート・チーム名・チーム目標・チームルール　　　ルールその① 　　ルールその② 　　ルールその③