こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！
テラーノベルでは、アニメーションスタジオのGONZO様と共同でストーリー原案募集コンテストを開催していました。
GONZO 新作アニメ「SAMURAI cryptos」ストーリー原案募集コンテスト - テラーノベル（Teller Novel)
今回、こちらのコンテストのLPページはNext.jsで作成しようかと考えていましたが、次のような課題がありました。
- 今後いろいろなコンテストを行ったときに、それぞれLPをつくるのが大変
- エンジニア以外でもコンテンツを編集でき、即時反映できるようにしたい
- ノーコードで実装ができること
- ただ一部の表示などはReactなどで実装ができるようにしたい
これらを解消するものとして、今回はFramer Sitesを使いコンテストのLPページを作ることにしました。
FramerとFramer Sitesについて
FramerはFigmaのようなデザインツールであり、Framer SitesはそのデザインしたサイトをWebサイトとして公開できる機能となっています。
今回のLPのデザインを行ったデザイナーにFramerとFramer Sitesの感想を聞いたところ、以下の点が非常に優れていると感じたようです。
ボタンひとつでホスティングされるため爆速でリリースが可能
今回作成したLPは公開までの期間が短く、また人的リソースも多くない中で制作を進めなければなりませんでした。
通常であれば、Figmaなどのツールでデザイン後、現状運用しているウェブページに内にコーディングを行いますが、この作業は多くの時間がかかります。
Framer Sitesは、WebflowやSTUDIOのようなコーディングを必要とせずに直感的にデザインし、公開ボタンを押すだけで即時にウェブページとして公開することが出来ます。
操作感がFigmaに近いので学習コストが低い
一番のメリットは操作感がFigmaに近いため学習コストが低いことです。
LPをデザインしたデザイナーは普段からFigmaを使うことが多いですが、特に迷うことなくFramerでデザインをすることができました。
また、PC・タブレット・モバイルの各デザインも一つのデザインに対して複数のBreak point
を設定することができるため、それぞれの画面を見つつ同時にデザインができるのはかなり快適なようでした。
そしてCSSのMedia Queryのように、PCだけ表示、モバイルだけ表示という切り替えもレイヤーの不可視ボタンを押すだけで簡単に行うことができます。
テンプレートが豊富、アニメーションも簡単に追加可能
FramerはWebサイトで良く使うモーダルやカルーセルなどのテンプレートが豊富で、Drag&Dropでページに配置することができます。
それらを利用することで簡単にページを作ることが出来ます。
またヘッダー/フッターなどをComponent化して共通化できるので急な変更作業も可能です。
エンジニアの視点からのFramerとFramer Sites
エンジニアからFramerを見たときに、ノーコードでWebページを作る際にいくつか不安な点を感じるかもしれません。
私も当初はシンプルな構成のページであれば、teller.jpの他のページのようにNext.jsでページを作成してもよいのでは？と考えていました。
しかし、調べていくうちにこれらの不安も解消されました。
FramerのコンポーネントはReactで実装されている
Framer SitesでJSで処理を行いたいときに、それらが可能であるかが懸念でした。
（例えばボタンを押したときにJSを実行してURL Schemeを呼び出すなど）
Framerでデザインされた各要素はReactコンポーネントで表現されており、FramerのCode OverridesによってFramer上でつくったコンポーネントをReactのコンポーネントとして扱うことができます。
コード
コードでの振る舞いをコンポーネントに設定
さらにCode ComponentsではReactで実装されたコンポーネントをFramerで扱うことができ、既にReactで作られているコンポーネントをFramerで扱ったり、地図の埋め込みなどJSが必要となるような高度なコンポーネントを扱うことが出来ます。
エディター画面
このようにJSで実行したい処理をReactのコンポーネントで行うことで、今回の問題点を解決することが出来ました。
また、今回は利用していませんが、FramerでつくったコンポーネントをReactのプロジェクトで使うことが出来る Handshake といった機能もあり、FramerでつくられたコンポーネントをReactのプロジェクトにimportして使うことができる機能もあります。
以上のようにFramerとコードの相互運用が可能となっているため、拡張性やポータビリティの高さを感じました。
Framer SitesはSSGされている
ページのパフォーマンスも気になる点です。
しかし、FramerではSSGによってPre-renderingされており[1]、ページのパフォーマンスも非常に高いと感じました。
また端末のサイズなどによって表示を変更するBreak pointを行っている場合でも、Framer側が最適なレスポンスを返すように行ってくれます。
SEOの対応
ページのメタ情報や構造化データなど、SEO上必要な変更が可能であるかもウェブページを作る際に重要となります。
こちらも特に困ることなくFramer Sitesで設定をすることができました。
SSGによってレンダリングされているためページのパフォーマンスも良く、SEOでの懸念は特に必要ありませんでした。
Framer Sitesを自社ドメインでホスティングができるか
Framer Sitesでサイトを作った際、デフォルトでは https://*.framer.app でホスティングされます。
Framer Sitesのドメイン設定で、サブドメインなどカスタムドメインでホスティングすることも可能です。
ただ、今回は https://teller.jp/contest/202209-gonzo といったサブディレクトリにFramer Sitesのページを配置したかったため、リバースプロキシを設定[2]することにしました。
Framer Sitesをリバースプロキシでサブディレクトリに配置する
teller.jpはFirebase Hosting（バックエンドにCloud FunctionsとCloud Runがある）でホスティングしています。
今回は /contest/202209-gonzo のパスをCloud Functionsで受け、http-proxy-middlewareを使ってFramer Sitesのページをリバースプロキシするようにします。
まず firebase.json に指定のパスを Cloud Functionsに指定します。[3]
{
"source": "/contest/202209-gonzo",
"function": "proxy"
}
リクエストを受けるCloud Functionsでは次のように http-proxy-middleware でリバースプロキシをします。
import express from "express";
import { createProxyMiddleware } from "http-proxy-middleware";
const app = express();
app.use(
"/contest/202209-gonzo",
createProxyMiddleware({
target: "https://my-framer-site.framer.app",
changeOrigin: true
})
);
exports.proxy = functions.https.onRequest(app);
このようにリバースプロキシを設定することでサブディレクトリでFramer Sitesをホスティングすることができました！ 🎉
まとめ
以上のように、デザイナー/エンジニアともに、非常によい体験でLPを作成することが出来ました。
現状LPやコーポレートページなど、teller.jpのサブページで利用するのみにとどめていますが、Handshakeなど面白い機能もあり、今後Framerをもっと使ってみたいと思いました。
Discussion