Framerでコードコンポーネントが活きた場面と、マーケットプレイスの使いどころ

⏱️ 読み終えるのに５分ほどです。

✍️ まずは

Framerでのサイト作成において、最近はコードコンポーネントをあまり使っていませんでした。しかし、今回その便利さを改めて実感する機会があったため、事例として記事に残しておこうと思います。

💬 SNSシェアボタンを追加することに

Framerでサイト作成を行いました。その過程でニュースページの詳細記事に各種SNSのシェアボタンを追加することになりました。
SNSシェアボタンはFramerの公式機能としては用意されていない機能です。

リサーチする

いつもの通りエディタでコンポーネントを作成しリンクを設定すれば良いと考えました。
ただ、なにかしら事例があるかもと考え調べてみることにしました。

Framerに限らず、普段とは少し違うことをする際は、よりスマートな方法がないか調べるようにしています。最近ではAIに聞くのが増えましたね。

📦 マーケットプレイス

検索すると、Framerの公式のマーケットプレイスに、いくつかSNSシェアボタンのコンポーネントを発見しました。

https://www.framer.com/marketplace/
マーケットプレイスには、デザインテンプレートやプラグイン、コンポーネントが配布されています。アイコンのようなグラフィックパーツも含まれています。

その中の１つ（Social Share Links）を使ってみることにしました。
コンポーネントのプロジェクトへの導入は、当該ページで Copy Component をクリックするだけです。追加されたコンポーネントは、Assets/Components/[作者名のフォルダ]に格納されます。自身のコンポーネント（Projectフォルダ）とは異なり、そのままでは中身を確認・編集することはできません。

そのまま使用するのであれば、いつも通り配置し必要な値を右のパネルから入力して終わりです。

ですが、今回は LINEシェア も使用したかったので、コンポーネントを unlink して中身を編集・修正することにしました。

※ unlink すると、元コンポーネントのアップデートは反映されなくなる点には注意が必要です。

⚙️ コードコンポーネント

最初はエディタで編集されたコンポーネントだと思っていたのですが、unlinkしたところコードコンポーネントのみで作られていました。
普段はエディタでのコンポーネント作成が中心で、サイト制作はスムーズに進められていました。コードの使用は、演出などエディタだけでは複雑になりがちな場合に、主にOverrideで対応していました。

コードを確認したところ行数は800行ほどと長いのですが、読んでみるとそのほとんどはビジュアルのためのsvgコードとシェア先毎の処理の振り分け、同じような処理が書かれていました。

目的にそった書き換え

取得したコンポーネントはカウント数も取得・表示していましたが、今回は不要なので削除しました。６つのシェア先が記述されていましたが、それをLINEを含む３つに変更しました。

コードで記述されている理由は、フルURL取得とカウント数の取得部分です。URLについてはエディタでも可能ですが、汎用性を考えるとコードの方がシンプルだと思います。

···
export default function LineShare(props) {
    ···
    const shareURL = window.location.href || ""

CMSを使用しているとはいえ、シェアリンクを１つ１つ指定するのは無駄が多いと思いました

ビジュアルについては配布されているSVGからコードを使用しました。
また、ホバーを付けたかったので、配布コンポーネントを見習って framer-motionを使いました。いつもはエディタで行っているのをコードで行う形になります。

import { motion } from "framer-motion"
···
export default function LineShare(props) {
    ···
    return (
        <motion.a
            href={href}
            target="_blank"
            style={{
                width: "fit-content",
                height: "fit-content",
                scale: 1,
                filter: "drop-shadow(0px 2px 3px rgba(0,0,0,0))",
            }}
            whileHover={{
                scale: 1.06,
                filter: "drop-shadow(0px 2px 3px rgba(0,0,0,0.25))",
            }}
            aria-label={`share on ${type}`}
        >
        ···

シンプルなホバーでのシャドウと拡大演出です。

自身の目的用に最適化した結果150行に収めることが出来ました。これくらいなら後日編集が必要になってもサクッと読み解けると思います。

感想

今回のような小さなパーツでは、コードコンポーネントは非常に相性が良いと感じました。

再利用頻度の高いパーツを1ファイルで管理できる点は大きなメリットですし、
ホバーなどの簡単な演出であれば、ビジュアル面も複雑にならずに実装できます。

特に、普段から React を使っている場合は、より直感的に扱えると感じました。

✨ 演出もマーケットプレイスで

同じプロジェクトで一部のページでスクロールに慣性を付けた演出を付けたかったのですが、これもマーケットプレイスのコンポーネントを使用しました。

https://www.framer.com/marketplace/components/lenis/
ページスクロールに慣性を付けることが出来ます。

こちらもシェアボタン同様に Copy Component で取得したコンポーネントを、演出を追加したいページに配置するだけです。

📌 まとめ

マーケットプレイスを意図的に使用したことはありませんでしたが、今回使用してみて内容も充実してきているように感じました。これからは必要そうな機能やパーツは一度マーケットプレイスで探してみようと思っています。

プラグインも多く配布されていますが、まだ実際のWEBサイトでは使用したことがないので、こちらも機会があれば是非使ってみたいと思います。

Framerはアップデートが早いので、便利なコンポーネントは公式が採用する事もあると思います。常に新しい情報をご確認ください。

https://www.framer.com/updates
Framerの更新情報ページです