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