Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

での発表資料

## 技術

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

More Decks by レバレジーズTechアカウント

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. LP制作の現状

    View Slide

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

    View Slide

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

    View Slide

  7. LP制作の現状

    View Slide

  8. LP制作の現状

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 実際のLPを使って解説

    View Slide

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

    View Slide

  22. Figmaで作成したデザイン

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. まとめ

    View Slide

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

    View Slide

  35. View Slide

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

    View Slide

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

    View Slide

  38. 目次 ● 始めに
    ● 内容1
    ○ 1の内容
    ● 内容2
    ○ 2の内容1
    ○ 2の内容2
    ● 内容3
    ● まとめ
    ● さいごに

    View Slide

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

    View Slide

  40. 内容1

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide