AmplifyStudioのFigma連携が便利そうなのでコーポレートサイトに使えないか検証する

背景

Amplify StudioのGAから大分経ってしまいましたが、そろそろいじってみないとと思いいろいろ眺めていたところ、コーポレートサイトに使えないのかなと思い立ちました。
コーポレートサイトの制作って地味に悩みどころ多いですよね。

• デザイナーさんがデザインツールで作成したデザインをエンジニアがHTMLに再現する作業が地味に大変だったり
• 動的な要素の有り無しでバックエンド有りか無しか決めないといけないため、意外に静的サイトジェネレーターって選択しにくく、選択したとしても、
  • お問い合わせフォームはGoogleForm埋め込みで妥協する とか
  • 当初はなくていいって言われてたとしても、結局欲しいと言われる とか
• サイトの更新を誰がしたいのかによってCMSを選択する必要もあるかもしれない とか
• でもなんだかんだ結局数年誰も触らなかったじゃん！とか

それら諸々をAmplify Studioが解決してくれるのではないかと思い、まずは検証をしてみたいと思います。

Amplify Studio についてはこちら

いろいろ眺めてみる

こちら、Amplify Studio UI Libraryのお試し用に公式が用意してくれているFigmaですが、
なんとなくコーポレートサイトいけそうな気がしません？

そしてAmplify Studioのコンテンツ管理画面、
リリース情報をここで書いて管理できそうな気がしません？
MarkdownではなくWYSIWYGなところが、ここを非エンジニアが利用する想定に見えてとても良いですね。

あと、お問い合わせがこのコンポーネントから送信できそうな気がしません？

簡単なコーポレートサイトなら、このくらいのモデルがあればいけそうな気がしません？

検証

なんか行けそうな気がするので、検証を始めてみます。

想定する製作運用イメージ

• デザイナーさんがFigmaでデザイン作成を行う
  • 横幅いっぱいのセクションを１単位としてコンポーネントを作成してもらい、コーディング時はコンポーネントを縦に並べるだけというイメージ
  • 使用する文言なども何も気にせずどんどんテキストでべた書きしていく
• エンジニアが諸々繋ぎこみを行う
  • Amplify Studio上でコンポーネントのデータバインドを設定し、amplify pullしてコードに反映させる
  • 静的サイトジェネレーターに組み込んでいく
  • pullしたコンポーネントを縦に積み上げ、必要な部分だけスタイルを微調整する
  • amplify publish で公開する
  • 自動デプロイも設定しておく
• メタタグ、サイトマップ、GAあたりも簡単に導入できれば尚良い
• リリースノートの更新担当者をAmplify Studioに招待し、ここに書けば反映されるよと教えておく
• リリース後に文言修正や会社情報を更新したいと言われたら、その人をFigmaに招待し、好きなところ勝手に変えておくれと伝える
• お問い合わせが送信されたら、DynamoDBのトリガーあたりでLambdaを起動してメール送信なりSlack投稿なりする
• LambdaもDynamoDBもS3も月々の無料枠しか使わないので、運用も０円

という感じに出来上がれば嬉しい気がしますね。

作ってみる

今回は、Amplify公式のFigmaのサンプルをそのまま使っていきます。文言は少し変えたりしてます。
静的サイトジェネレーターはGatsby.jsを使用しました。NextでもViteでもなんでもいいと思います。
Amplify周りはAmplify Studioからポチポチして各種作っていきます。コマンドなんてもう使いません。

そしてなんだかんだして、
コンポーネントの組み込みはこんな感じです。本当に縦に並べただけ

ソースはこちらです。

これを apmlify publish するとこうなります。

Gatsbyのプラグインでサイトマップも出力されています。

お問い合わせフォームらしきものもきちんと出ています。
※データバインドは未実装です

なんか、思ったよりすごい行けてる気がする

良さげなところ

デザイン変更からデプロイまでがストレスフリー

文言変更くらいであれば、
「Figmaで文言変更→Amplify StudioでSync→amplify pull→amplify publish」ですぐサイトが更新されます。
amplify pullで自動生成されるコンポーネントはgitignoreしてあるため、コミット不要で運用できます。
この辺はきちんと自動化しておけばエンジニア不要で持続的に更新可能なコーポレートサイトが運用できるかもしれません。

なんといっても裏側がAmplifyでありAWSであるので、拡張もし放題

Cognitoの認証入れるもよし、CDNするもよし、Lambda組むもよし、WAFも入れ放題、ユーザーも追加し放題ですね。
デザイン作業はノーコードでフロントとバックエンドのエンジニアリングはし放題というのは、NetlifyやGatsby Cloud、STUDIOなどとの中間としてちょうどいい構成ではないかなと思います。

更新しない時期に課金が不要

ノーコードサービスなどは更新しない時期でも課金をし続けないといけないため、もったいない気がしますよね。
この構成ですと、Figmaだけ課金すればあとはほぼ無いようなものですし、元々FigmaとAWSを導入している場合はもうタダみたいなものですね。

惜しいところ

ファイルサイズ

UI Libraryのテーマ系のCSSが大量に書き出されたり、コンポーネント自体も記述が冗長だったりするので、生成されるファイル容量が少し多いかなとは思います。

アンカータグ

また、ウェブサイトでの使用を想定していないからなのか、アンカータグのコンポーネントが無いため、TextコンポーネントにonClickを設定してリンクするという形になってしまいます。辛い。
もちろん、生成されたHTMLもAタグにならないため、cursor: pointer とかも自力で設定していかないといけないのかもしれません。ここはそのうちなんとかなると嬉しい・・

画像の扱いがわからない

Amplify Studioでコンポーネント化できるのはレイアウトと文字とベクターデータだけのようです。
ベクターデータで書かれたロゴやアイコンなどは問題ないですが、画像ファイルはコンポーネント化されないため、ひと手間必要でした。いつか改善されれば嬉しいです。
現状は、Figma側でエクスポート設定をしておき、一括エクスポートしたファイルをGatsbyの/static/imagesに置き、Amplify Studio上で画像コンポーネントのsrc属性を /images/～～.png にすることで無事反映されました。

Figma	Amplify Studio

デザインデータと一体化した画像ファイルって普通にあると思うので、これもコンポーネントになって出力されると嬉しいですね。
「文言変えたい」という要望はFigmaで勝手にやってくれと言えるのに「画像差し替えたい」はエンジニアマターとなるとお互い辛いですしね。

Figma側のバージョン管理

ソースコード側とFigma側のバージョンを紐づけて、いつのバージョンでも再現できるような手段があると嬉しいなと思いました。

おわり

作りきっていないですが、なんとなく読めてきたのでここで終わります。

もう少し研究できれば行けそうな気もしますが、どうなんでしょうね。
作ってみたという方いらっしゃいましたら感想などお待ちしております。