🎁
ノーコードサイト制作サービスFramerのすすめ

原口
2024/10/21に公開
最近実務でFramerを使う機会があり、使い心地も良く、公開まで行うことができました。この体験とFramerのことを広く知ってもらえればと思い記事にしてみました。よろしければ最後までお付き合い下さい。
前提事項

まず前提として普段はReact（CSR）での実務開発を多く行っています。数ページのWEBサイトからサービスサイトまで多様です。

操作感・体験としてはFigmaが近しいと思います。Figmaの使用経験はありますが、細かな機能まで理解していません。なのでFigmaとの違いや共通部分については細かくは触れていません。

 Framerって？ノーコード・ローコードでWEBサイトを構築出来るWEBビルダーサービスです。2013年設立のオランダの会社だそうです。[1]
公式サイト（英語です）

https://www.framer.com
ローコード部分はベースにReactを採用しており、後述するオーバーライド機能やコードコンポーネント機能を使用する際にはReactでのコードを記述することが可能です。

日本ではframer-motionの方が有名かもしれませんが、同じFramerの製品になります。
競合について

Framerの日本語wikiが無かったので、Webflowのwikiを確認したところ、競合として Squarespace、Framer、Weebly、Wix.comなどがある。[2]とのことなので、これらと同じツール・サービスだと言えます。
私は普段React/Vueなどでコーディング・開発を行っており、本格的にローコードサービスを使ったことはありません。なので上記競合との比較は今回は行いません。

ただ、知らないサービスもあったので簡単に調べたのですが、日本だとやはりWixが圧倒的に知名度は高そうです。WixはZennの記事も多く、新しい記事もアップされてました。Framerの記事も増えると良いなと思っています！
framer-motion

Framerといえばこちらの方が有名かも。

https://www.framer.com/motion/

 Framerの機能紹介Framerの機能紹介です。

私が使ってみて良いなと思ったポイントを、重点的に紹介したいと思います。

 エディタ

デスクトップアプリのエディタ画面です。

 レイアウトレイアウトはLayersでツリーを組み上げていきます。これはDOMの構造そのままですね。そして、ボックスのレイアウトはFlex,Gridを使用するのが基本形になるかと思います。Figmaを使用されていれば違和感なく進められると思います。
下記画像の右側にあるLayoutは、CSSを書いている方であれば馴染のあるプロパティが並んでいるかと思います。



ツリー上のレイヤーと右側にLayout
プレビューが右上の▶から出来ます。フルスクリーンモードあり、フルスクリーンにするとブラウザで閲覧している体験に近いプレビューが可能です。



プレビュー画面
💬 レイアウトのコメント

デザインのレイアウト作業をすると、そのままマークアップとスタイル指定がされています。通常のデザイン作業との違いとして、プレビューを確認しながら、ViewportやRelative（比率指定）などを使う事が多くありました。静的な画像では無く、動的なWEBをデザイン・レイアウトしている感覚です。

 レスポンシブレスポンシブのレイアウト作業がとても体験として面白いと思いました。Figmaはあくまでページ単位のデザイン・レイアウトを行うので、レスポンシブ対応はコーディング時に考慮することになるかと思います。

Framerではレイアウト時にレスポンシブを確認しながら進めることが可能です。



DesktopとPhoneで同じレイヤーが強調される
💬 レスポンシブのコメント

この体験は個人的には面白い発見でした。ブレークポイント毎でのレイアウト変更ももちろん可能ですが、ブレークポイントまでの可変領域、フリーな変化時のレイアウトも確認しながら調整出来るのは新しい経験でした。

 テキストのFit（可変フォントサイズ）レスポンシブに関連するのですが、Framerではフォントの可変サイズの指定が可能です。

横幅にフィットする大きさに文字列が収まります。テキストボックスを囲むフレームを基準とした比率を指定すると、フレーム（もしくはビューポート）のサイズに合わせて文字列が拡大縮小します。

画面サイズに合わせてサイズを変更したい時などに重宝します。ブラウザの可変に合わせて、大きく見せたい見出しなどには重宝するかと思います。


テキストサイズが%（横幅）で指定できる
ブレークポイント毎のフォントサイズ

スタイル・アセットにブレークポイント毎のフォントサイズ指定も出来ます。本文などはこちらを使用するほうが良いかと思います。
💬 テキストの可変サイズのコメント

少しクセのある機能ですが、上手く使えるとデザインの幅が広がるかなと思います。

 アセット（コンポーネント）カラー、書式、コンポーネントなど、繰り返し使用する値やパーツをプロジェクトごとに保持出来ます。また、プロジェクト間を超えた使用も可能なようですが、まだ実務で使用はしたことがありません。

カラー、書式についてはCSSのフレームワークを使用したことがある方ならイメージしやすかと思います。クラスを指定する感覚で使用することが出来ます。


Assets一覧

 コンポーネント重要な機能で出来ることも多くしっかりと書くと長くなるので、ここでは簡素に書きたいと思います。
よく使うボタンを例にすると、ホバーやバリエーションなどを作成することが出来ます。また、Variable機能で外部から値を渡すことも出来ます（Reactなどのpropsのイメージ）。

ボタンの色、ラベルのテキスト、アイコンなどは外部から値を受取り、サイズはバリエーション機能で作成すると汎用的なボタンコンポーネントを作ることが出来ます。
同様にカードコンポーネントなど繰り返し同じレイアウトのコンポーネントを作ると便利です。


ボタン：通常と下がホバー時、右側がバリエーション

 パブリッシュ周りパブリッシュ（公開作業）は右上のPublishをクリックで公開されます。

特筆する点は特に無く、逆に足りない点もありませんでした。SaaSですのでそれぞれの機能はプランによっては使用できない場合もあります。

興味がある機能としてはステージング機能があります。今回の案件では使用していませんが、ある程度関わる人が多くなると、確認用のステージング機能は必要かもしれません。

 CMSシンプルなCMSが付属します。ニュースのような簡単なコンテンツ、もしくはギャラリーのWorksなど仕様がシンプルなコンテンツには十分に使えると思います。一覧、個別ページ、コンポーネントへの切り出し（例えばオススメだけフィルタして表示するブロック）なども可能です。

CMSの機能は日々アップデートしているようです。この記事を書いている時点でもプロパティのリレーションやプラグインによるNotionとの連動などが発表されています。

 コード機能FramerではReactの書式に沿ったコードをプロジェクトに組み込む事が可能です。

 オーバーライド上記まではノーコードでしたが、この機能とコードコンポーネントを使用するとローコードでのサイト構築になると思います。

オーバーライドはコード上で受け取ったコンポーネントにpropsを上書きしてレンダリングすることが可能です。使用する場所のイメージとしてはエディタ上で指定しきれないスタイルの追加や、複雑なアニメーションを付けたい場合に使用することになるかと思います。Framerなのでframer-motionが使えるので、演出にこだわりたい場合などは使用してみるのも良いと思います。

 コードコンポーネントオーバーライドとは違い、コンポーネントをコードで記述します。

複雑なコンポーネントも書くことは可能だと思いますが、１ファイルなのであまり複雑なものは現実的では無いと思います。

実務で使用したのはRiveというアニメーションライブラリを配置するのに使用しました（プラグインについて[3]）。エディタからpropsも受け取る事が出来るので、再生するRiveファイルはエディタから指定出来るので使いやすかったです。編集画面でも再生されるので指定したファイルが正常な事も判り良い開発体験でした。
Riveのコード・コンポーネント見ていただければ一目瞭然ですが、Reactのコードです。

やっていることは簡単で、Riveのファイルとアートボード指定を受取Riveコンポーネントを配置しているだけです。
// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/
import { useEffect, useState } from "react"
import clsx from "clsx"
import { useRive } from "@rive-app/react-canvas"
import { addPropertyControls, ControlType, RenderTarget } from "framer"

export default function RiveComponent(props) {
    const { rive, RiveComponent } = useRive({
        src: props.src,
        stateMachines: "default",
        artboard: props.artboard,
        autoplay: true,
    })
    return (
        <div style={riveContainerStyle} title={props.title}>
            {<RiveComponent style={riveStyle} {...props} />}
        </div>
    )
}

const riveContainerStyle = {
    width: "100%",
    borderRadius: "0",
    height: "100%",
    flexGrow: "1",
    flexShrink: "1",
    overflow: "hidden",
}

const riveStyle = {
    marginRight: "0",
    width: "100%",
    borderRadius: "0",
    height: "100%",
    overflow: "hidden",
}

addPropertyControls(RiveComponent, {
    src: {
        type: ControlType.String,
        title: "riv",
        description: ".riv src url",
        defaultValue: "https://min-static.pages.dev/riv/minutes.riv",
    },
    artboard: {
        type: ControlType.String,
        title: "Artboard",
        defaultValue: "About01",
    },
    title: {
        type: ControlType.String,
        title: "Image Title",
        defaultValue: "",
    },
})
Riveについてはこちら

https://rive.app
💬 コードのコメント

エディタ上では手が届かないところに手を入れることが出来るので、いわゆる「力技」が出来ます。良い面悪い面あるかと思いますが、これがあることでFramerでのデプロイを諦めるという機会は減るのかなと思います。

 料金について仕組みとして大きく２つのカテゴリがあります。サイトとワークスペースです。親子関係としてはワークスペースの中にサイトがあります。

 サイトサイトはドメイン単位をイメージしてもらうとわかりやすいと思います。独自ドメインにしたい場合は有料プランを契約する必要があります。
例えば：

フリーランスの方がクライアントのサイトを作成する場合は、サイトプランのみをクライアント側で有料契約すれば問題ないかと思います。構築後アカウントを譲渡するイメージです。

 ワークスペースワークスペースはサイトをいくつも持っているチームの共有ワークスペースです。
例えば：

複数人で運用するサイトを持ちたい場合は、サイトとワークスペースを必要な人数分契約する必要があります。（サイトをフリーでも問題ないですが、あまり実用場面は無いかと）

ローコードなのでテキストなどの編集をデザイナー・デベロッパーが行う必要がありません。ライター、ディレクターが直接編集したい場合は、ワークスペースのプランを契約したほうが良いかもしれません。
https://www.framer.com/pricing/

 とは言え、困ったところ。。。
 コメント機能。。。１つ大きく困ったことは、コメント機能です。日本語環境では現状使用出来ません。日本語変換の確定エンターを送信エンターとして扱います。。。

同様の理由でビルトインのFormも同様の問題があります。（コードオーバーライドでformタグでラップすると一応回避出来る、力技！）

コメントの不具合についてコミュニティに投稿したのですが、反応がありません。。。投稿するカテゴリを間違えたかも？

みなさんに賛同してもらえると対応してくれるかもしれません。

https://www.framer.community/c/requests/entering-multibyte-characters-in-the-comment-function

 バグまた、仕方ない事だとは思うのですが、新しい機能などはバグったりします。私の場合はフォントFitを使用して、文言の変更やレイアウトの変更を繰り返しているとハマる事がありました。この場合は新しくテキストブロックを作成して目的のスタイルにすると問題ありませんでした。推測ですが、内部的に値が残ったりしているのだと思います。仕方ないですね。
他にも「ん？」と思うことはあるのですが、アプリ自体でなければコードオーバーライドなどを使えば力技ですが、回避出来ます。こういったことは完全ノーコードでは出来ないことかなと思います。

 おすすめポイント個人的に気に入ったポイントは使いやすさです。Macでデスクトップアプリを使用していますが、重いという印象もなく、サクサク使う事ができました。ページ数の多いサイトなどでどうなるかはわかりませんが、一般的なサイトであれば問題ないと思います。

 おすすめする使用シーンコンパクトな公式サイト。自社サイトなどでCMSの使用箇所がお知らせだけなど。
企業のコーポレート（更新も少なくお知らせなどはCMSで完結）
ポートフォリオサイト（イラスト、写真、開発者も？）

海外ではこちらが一番多そうです。
ちょっとこだわりたい店舗などの小規模商店のサイト

個人のフリーランスWEBデザイナーさんが受ける規模のWEBサイト
LPなど１ページ完結のWEBサイト。

ノーコードアプリなので、レイアウトを組んでしまえばテキストなどは担当に直接編集してもらえるので、社内でチームを組んでいるWEBチームなどはメリットがありそうです。

 おすすめするユーザーHTML/CSSはわかるけど、JSはちょっと、という人に向いてそうです。
FigmaでWEBデザインをしている人
Wordpressなどで個人開発している人
トランスパイルして静的なサイトを構築している人
HTML/CSSをGUIツールで編集している人

など、デザインや見た目を少しこだわりたいユーザー、そういったクライアントの案件にはオススメかと思います。

 サンプルを作ってみた記事を書くにあたりサンプルを作ってみました。ヘッダーのRemixリンクからサイトをコピー出来るので、作りも確認してもらえるかと思います。



https://ast-practice.framer.website/
画像をUnsplashを使ったけど、APIの直接リンクっぽくてその部分が少し重いかも。一度DLしてアップした方が軽い印象です。
Lighthouse：



このあたりは勝手にやってくれるので楽ですね。


famerのドメインなので、Cookieが得点を下げているのでしょうか。

 まとめ
 気に入っているところ見た目を中心に進められる。（デザインの再解釈からのコード化が不要）
コードコンポーネントなど、ローコードも取り入れられるので凝った事も出来る
テキストや画像の差し替えなら誰でも出来る
ホスティングまでしてくれるので、用意するのはドメインぐらい？
見たまま調整出来るのはホント楽。レスポンシブ対応が楽。

 逆に不満なところAdobeフォントを組み込みで使いたい（日本語フォント幅が増える）
日本語などの縦書きにも対応してもらいたい
コンポーネント変数に出来ない値がある（paddingなどに使いたいときがあった）

 日本製のSTUDIOとの考察以前少し触る程度ですが、STUDIOを使ったことがあるので、STUDIOとの違いを個人的な印象ですが書いてみようと思います。

使用するユーザーの違いが大きいかと思いました。FramerはSTUDIOよりHTML/CMSSに詳しい方が使いやすいと思います。アプリもそういった視点で作られている気がします。マークアップやスタイリングを書ける人にとってはSTUDIOは物足りなく、ストレスが貯まる場面もあるかなと思いました。

また、STUDIOは良い意味でノーコードに特化していると思います。なので力技が発揮しにくいので、コードコンポーネントで紹介したRiveのような事はSTUDIOでは出来なかったのではと思います。
STUDIOは日本産なので日本語の書体が充実していたり、縦書きにデフォルトで対応などメリットもあると思います。

（STUDIOも大幅なアップデートを予定しているようなので国産サービスとして期待したいです）

 今後Framerの機能アップデートは早いので、良さそうな機能が追加された際には記事に出来ればと考えています。HowToの様な記事についても、日本語記事が少ないので書きたいと思っています！
最後まで読んで頂きありがとうございました！

脚注
https://www.crunchbase.com/organization/framer ↩︎
https://en.wikipedia.org/wiki/Webflow ↩︎
plugins機能が追加され、Riveプラグインも追加されたので今後はそちらを使うほうが良いかと。 ↩︎