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

【3/24＠オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会
https://ateam.connpass.com/event/276968/

での発表資料

## 技術

AWS Amplify studio, Figma, React, TypeScript, html, css

Transcript

1. AWS Amplify Studioと Figmaの連携によるLP開発の効率化 レバレジーズ株式会社 レバテック開発部 テクニカルイネイブリンググループ 河村 勇樹 2023/03/24
2. 自己紹介 河村 勇樹（28歳） • 経歴： ◦ 2019年4月 大手Web企業 新卒入社 ◦ 2021年1月 レバレジーズ株式会社 中途入社 • 出身： ◦ 東京都町田市（シティボーイ） • 趣味： ◦ お酒、ゴルフ • 2023年の目標： ◦ ゴルフのスコアを90台にのせること • 好きなAWSサービス： ◦ Amplify、CloudFront、ECS、Aurora
3. 目次 • LP制作の現状 • AWS Amplify Studioの紹介 • 実際のLPを使って解説 • まとめ
4. LP制作の現状
5. このLPの実装って どれくらいかかりますか？？？ https://freelance.levtech.jp/lp/023aa/ https://creator.levtech.jp/lp/125aa/ https://rookie.levtech.jp/lp/506ab/
6. 1LP / 1Sprint（10 days） ただし、本番リリースまで至らない ...
7. LP制作の現状
8. LP制作の現状
9. 静的・動的部分の実装で約７日... なぜ、こんなに時間がかかるのか？？？
10. LP制作の現状 LP実装における課題 • 静的・動的どちらもデザインが複雑 ◦ CSSを適用するのが大変 • 画像化した実装はなるべく避ける ◦ 訴求部分のABテストすることもあるため • 完成後もエントリー部分は入念にテストが必要 ◦ 機会損失につながってしまうため
11. リードタイムを削減できないだろうか... 特に、Figma（デザイン）を実装に落とし込む部分 ...
13. Amazon Web Services ブログより引用 Amazon Web Services ブログより引用
14. Amplify Studioの特徴 主要な機能 • バックエンドとフロントエンドを1つのGUI開発環境でビルドする • デザイナーから開発者へのシームレスな引き継ぎ • UIコンポーネントをデータと紐付ける
15. Amplify Studioの特徴 主要な機能 • バックエンドとフロントエンドを1つのGUI開発環境でビルドする • デザイナーから開発者へのシームレスな引き継ぎ • UIコンポーネントをデータと紐付ける
16. Figmaと連携してコードを自動生成 これが本当に便利！！！
17. Amplify Studioの特徴 Figmaと連携してコードを自動生成 • AWS Amplify Studio と Figma との連携 • Figma 上のデザインを AWS Amplify Studio にインポート • React などで利用できる Component としてコードを生成
18. Amplify Studioの特徴 メリット • CSSを書くことなくデザインされたWebアプリを開発 • デザインとシームレスに連携したシステムの構築 • 導入が簡単 ◦ 公式から AWS Amplify UI Kit というコンポーネントライブラリが提供されている ◦ 自作コンポーネントを組み込むのも簡単
19. Amplify Studioの特徴 デメリット • React に依存してしまう ◦ Amplify UI とFigma との連携に関する公式ドキュメントも React のみしか存在しない ◦ ※ 2023/03/24現在 • Amplify Studio に取り込む上での制約がある ◦ 決められたルール上でデザインを作成する必要がある • スタイルを override しないと実現できないデザインもある ◦ ヘッダー固定、アンカーリンク、ボタンのホバー、カルーセル、アニメーションなど
20. 実際のLPを使って解説
21. 実際にお見せします 検証に利用したLPのデザインを例に解説していきます！ （※ スクリーンショットを使います）
22. Figmaで作成したデザイン
23. ”Pc506aaMV”のコンポーネントを Amplify Studio に取り込むと...
24. 上記のようにデザインデータを取り込むことができる （※ 背景画像等はコード上で設定する）
25. 実装に必要な Props や Handler を設定する
26. コンポーネントをコードとして取り込む Amplify CLI を利用して React の Component を生成 “$ amplify pull --appId xxx --envName xxx”
27. 生成されたComponentファイル（jsx） TypeScriptで利用できる型定義（ *.d.ts）
28. ※ Componentとして実際に利用する • Propsに画像のURLを渡す • Handlerに実装した関数を渡す • overridesに個別に必要な設定を追加 ◦ スタイルの調整 ◦ カスタムデータ属性
29. 以上で実装完了 ほとんど CSS の実装をする必要がない！！！
30. 実際にAmplify Studioを導入してみて... 良かったこと • デザインが完成すれば、ほぼ実装が完了状態になる ◦ 今まで辛かったCSSの実装が大幅に削減できた ...！ ◦ 集中すべき、したいところにより実装に時間をかけられる ...！ • Component Propertiesを利用することで、実装する部分も GUIで完結 ◦ 実際のコードも削減！
31. 実際にAmplify Studioを導入してみて... 辛かったこと • 今までのデザインルールを変更するコスト ◦ Amplify Studioの制約に基づいてルールを変更する必要がある ◦ 取り込み時にエラーが発生することも ...（割愛） • ディレクトリ構成を柔軟に変更できない ◦ “ui-components”というディレクトリにフラットに吐き出される ◦ パーツとして利用したいコンポーネントなどのグルーピングが難しい ...
32. 実際にAmplify Studioを導入してみて... これから取り組みたいこと • デザインシステムとして拡張 ◦ 共通 Component も社内ライブラリとして活用したい • Figma → Amplify Studio → React Component をさらにシームレスに ◦ Figma のデザインが完了したら React の Component までの流れを自動化したい • Amplify Studio の機能をさらに活用してノーコードに ◦ 非エンジニアでも開発・運用ができる状態にしたい
33. まとめ
34. エンジニアがコードを書かずにシステムを創る日はそう遠くない...！
36. Leverages スライドテンプレート 基本カラー 基本フォントサイズ アイコン（欲しいモノがあれば言ってくださいませ！） #333333 #fbfbfb #95100e メインタイトル : 42 サブタイトル : 24 本文 : 16 （あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D）
37. スライドタイトル レバレジーズ株式会社　〇〇 〇〇 2018/01/01
38. 目次 • 始めに • 内容１ ◦ 1の内容 • 内容２ ◦ 2の内容1 ◦ 2の内容2 • 内容３ • まとめ • さいごに
39. 伝えたいメッセージ メッセージの説明とか。 解説とかをここでする。
40. 内容１
41. 内容１ 内容１のサブタイトル 内容がここに入ってくる。
42. 見出し 見出し 見出し1 内容1 見出し2 内容2 見出し3 内容3 見出し4 内容4
43. ワークシート ・チーム名 ・チーム目標 ・チームルール　 　　ルールその① 　　ルールその② 　　ルールその③