ノーコードツール Framer にウェブサイトを移行－その理由とプロセスとは？

1.移行の背景

ウェブサイトの運用には思った以上に自由が制限されたりコストがかかることがある。

しかしノーコードツールの登場により、手間とコストを大幅に削減しながらウェブサイト運用をスムーズに行うことが可能になってきている。

当社への問い合わせでも、弊社にウェブ制作を依頼しつつも、運用は自社で自由に行いたいという要望や、運用コスト削減とスピードを求める声が増えている。

そんな中、弊社も、ノーコードツールを活用すれば、コスト削減はもちろん、エンジニアを介さずデザイナーがフレキシブルに直接ウェブサイトを更新したり、デザインから実装までの時間を短縮したりできる、ということから導入を決めた。

現在、当社のウェブサイトであるbtrax.comは現在は全てノーコードツールのFramerで制作・運用されてる。

今回はその導入による効果やプロセスの概要、そして直面した課題について共有していく。

Framer上のbtrax.comのデザインデータ

2.Framerへの移行の効果

Framerへの移行を行なった結果、以下のようなメリットがあった。

ビジネス目線

• 実装から公開までの高速化
• デザイナーやエンジニアに限らず、誰にでも更新が容易になった
• コミュニケーションコストが低減
• 運用コストの低下

デザイナー目線

• 実装が早くできるので、直接ウェブの動きでデザインの検証を行える
• インタラクションの細かい調整が手軽にできるようになった
• デザイン要素の管理をFramerのコンポーネント機能からできるようになった
• 画像の圧縮等はFramerがある程度やってくれるので、面倒な最適化作業がなくなった

何よりも大きい恩恵は、公開までのスピードが早くなったことで、改善や運用を高速に回せるようになり、かける人的コストが減り、他業務に割ける時間が増えたことである。

ウェブサイトは作るまでではなく、作った後にも常に何かしらの工数が取られるものなので、そこを抑えられたことはビジネス上重要である。

デザイナー目線では、Framerではコンポーネントや色、スタイル、カスタムコードをリストのUIで管理できるため、デザイン要素のマネジメントを簡単に整理できるようになった。

Framerではブレイクポイントにおけるフォントサイズを同じテキストスタイルでまとめられたり、ダークモードへの対応も柔軟にできるので要素が散漫になることを防げる。

Framerのデザイン整理における便利機能

3.どのようなプロセスで実行したか

今回の弊社のウェブの移行作業は以下の手順で行った。

1.  活用するノーコードツールの比較・検証
2.  デザインデータの整理
3.  デザインの移行
4.  SEO設定
5.  フォームなどの機能実装
6.  レビュー
7.  ドメイン移行・公開

1. 活用するノーコードツールの比較・検証

ウェブのノーコードツールを複数比較し、我々の状況に最も適したツールを選定した。
選定条件は下記のとおりである。

• 複数人で並行してデザインの編集が可能
• コードを使わずに表現できるアニメーションの自由度が高いこと
• カスタムコードが実装できること
• 価格
• 参照できる文献の充実度

上記の判断軸から弊社ではFramerを活用することにした。

コンポーネント機能が充実している点や、複雑なアニメーションを比較的簡単な方法で実装できる点、弊社は英語を母国語とするメンバーも多いので英語文献が存在するということも重要であった。

また、デザイン編集ツールFigmaからデザインを移行するためのプラグイン(​​拡張機能)があり、それも決め手の１つとなった。

【Webflow Framer, STUDIO】実体験に基づく3つのノーコードツール比較と強み解説

プラグインの中には、Framerの標準機能では実装できない要素もあった。

しかし、Framerのコミュニティ内でそれを解決するコンポーネントが配布されているため機能的要件を満たすとわかり、採用を決断した。移行前のウェブサイトで実装していた比較的複雑を考えられるアニメーションも、事前にFramer上に実装してみて確認をとった。

2. デザインデータの整理

FigmaにはFigmaで制作したデザインをコピー＆ペーストでFramerに移行できるプラグインがある。デザインデータの整理にあたってはこれを利用した。

従来のウェブサイトでエンジニアにコードで実現してもらっていた実装と、Figmaで実現した場合のデザインとの差分の整理も行った。

また、これまで日米で別々だったデザイン要素について、同一コンポーネントとして管理できるものは同一コンポーネントとして定義した。

Framerのレイヤー構造は、Figmaのレイヤー構造と同じ状態で実装されるために、まずは、Framerで調整しやすいレイヤー構成を定義し、それに合わせ、Figmaのデザインデータのレイヤー構成の調整を行った。

Framerのレイヤーの組み方

3. デザインの移行

Figmaのプラグイン「Figma design to HTML for Framer」を活用し、Figam上のデザインを一気にFramerに移行した。移した後はレスポンシブ対応させるために細かい値の調整とアニメーションの設定、コンポーネント設定を行い既存のサイトの再現ができているかを細かく確認した。

CMS対応が必要なものはCMSと接続させ、デザイナー以外でもマネジメントができる環境を整えた。

FigmaからFramerへのデザイン移行

4. SEO設定

各ページに対し、キーワード、OGP画像の設定を行った。弊社ではSpread Sheetで各SEO要素をまとめているので、それを反映した。

5. フォームなどの機能実装

弊社のウェブサイトには、コンタクトフォームやダウンロードフォームといった外部ツールとの連携が必要な機能がある。これらをFramerに実装されたデザインと連携させていった。

弊社ではFramer上のフォームで情報を収集しそれをメール管理ソフトに繋げる、というオペレーションで自動化を行っている。

サイトに使われているツールをFigJam上で管理

どのようなツールが何と繋がっているかはFigJamで表にして、誰にでも見やすい状態でまとめている。

6. レビュー

最後に、デザイン、アニメーション、フォームの機能とオペレーションが正常に働いているかを細かくチェックし、問題がないことを確認し、ドメインの移行と公開を行った。

Btraxでは上記の全ての作業でコードの記述を行わないように工夫し、エンジニアのリソースを極力使わないようした。目的は工数の削減やエンジニアを手を煩わせないことなので、多少調査に時間がかかってもそこの目的からずれることのないようにしている。

4.Framerの課題、振り返り

冒頭にも述べたが、今回のこの移行により、ウェブサイトの改善スピードが格段に上がった。課題の仮説に対し、ごく少数のメンバーでデザインのアップデートを短時間で行えるようになった。

デザイナーとしても、アニメーションを短時間でコミュニケーションコストをかけずに表現できるため、理想とするアニメーションを精度良く表現できるようになった。

一方で、課題となったのは、Framer自身がまだ比較的新しい若いサービスのため、参考情報の収集に時間はかかったことである。

また、フォームのデザインなど、機能的なデザイン要素については柔軟に対応できないものがあった。

日本でFramerを使う場合、まだツールとして新しいため参考文献が少なく、日本でのローカライズすらされていないため、学習コストとハードルを高く感じるだろう。

また、コードを書かないことを前提としたツールなので、現在のウェブの流行でもあるWebGLと3Dを活用したインタラクティブな実装は難しかったり（できないわけではない）、制限はある。

ビジネスとデザインのインパクトを天秤にかけた時に必ずしもノーコードが良いというわけではないので、デザイナーはそこを適宜見分けビジネス的に最善な手段を考えられると良いだろう。

弊社ではさらに今後このツールをベースに新たな取り組みを行う予定だ。

新たな気づきや挑戦はまた記事にしていこうと思う。

ニュースレターに登録するとメールで新しいFreshtrax記事のお知らせが来るため、興味ある方はぜひ登録をおすすめしたい。