🐻‍❄️
Framerをノーコードで終わらせない、フロントエンドエンジニアのCode活用術

zono
2025/06/19に公開
 はじめにこんにちは！令和トラベルでFrontendエンジニアをしているzonoです。
今回は、最近社内でLP制作のために本格導入したノーコードツール「Framer」について紹介します。

 Framerとは？Framer（framer.com）は、Figmaのような直感的なデザインUIでWebサイト制作できるオランダ発のノーコード・ローコードツールです。もともとはプロトタイピングツールとしてスタートしましたが、現在では本格的なWebサイト制作プラットフォームとして進化しています。

 エンジニアにとってのFramerの魅力エンジニア視点から見たときに、Framerが魅力的な理由を以下にまとめてみました。

 ✅ Reactベースで技術的に馴染みやすいFramerでは、必要な部分だけ、Code ComponentとCode OverrideとしてReact + TypeScriptで書けるため、ノーコードの枠を超えた細かいUIロジックや動的処理も簡単に実装可能です。（後ほど具体例をお見せします。）
また、propsをGUIで管理できるため、チーム内のデザイナーと共通のUIで連携できるのも大きな魅力です。

 ✅ 本質的な機能開発に集中できる「機能自体は実装できたのに、デザイナーから指示されたアニメーションを実装するのが難しくて工数がどんどん溶けていく。。。」という経験があるエンジニアは多いのではないでしょうか？

（私です。）
Framerには洗練されたテンプレートやアニメーション、インタラクションが多数用意されており、かなりハイクオリティなアニメーションもデザイナーだけでノーコードで作れてしまいます。
たとえば、以下のページはFramerで弊社のデザイナーが作ったもので、エンジニアは実装していません。
https://newt.net/wonder

（手前味噌ですが、）このようなハイクオリティなLPも基本的に全部デザイナーだけで作れるため、エンジニアは動的データやロジック部分など、「本質的な機能開発」に集中できます。

 ✅️ 即時公開＆高速ホスティング
プレビュー環境へのデプロイが、ボタンをポチッと押すだけで一瞬で完了します。
また、同時編集している他の利用者画面にも、リアルタイムにデプロイされたことが分かるよう通知もされるので、連携もとてもスムーズです。

 Framerでの開発における重要な概念Framerを触るエンジニアが覚えておくべき機能としては、主に以下の2つです。

 ✅ Code Component（コードコンポーネント）Reactコンポーネントを作成する機能。
Framerの標準機能では実現できない独自の機能や複雑なUIを一から構築できる。
プロパティコントロールを使って、ノーコードユーザーでも視覚的に設定を調整可能。

 ✅ Code Override（コードオーバーライド）既存のFramer要素の動作を変更・拡張する小さな関数（Higher Order Component）。
プロパティの変更、イベントハンドラーの追加、スタイルの調整などが可能。
クリック追跡、カスタムID・属性の追加、アプリケーション状態の管理などに使用。
既存要素をコードで強化したい場合に使用。

 Code Componentの活用例Code ComponentはFramer上で独自のReactコンポーネントを作成する機能です。基本的にはReactコンポーネントと同じように書けますが、Framer特有の記法があります。
基本的な構造
import { addPropertyControls, ControlType } from "framer"

// 通常のReactコンポーネントと同じように書ける
export default function CustomButton({ text, variant, onClick }) {
    const handleClick = () => {
        console.log('Button clicked:', text)
        onClick?.()
    }

    // variant に応じてスタイルを変更
    const getVariantStyles = () => {
        switch (variant) {
            case 'secondary':
                return { backgroundColor: "#6c757d", color: "white" }
            case 'outline':
                return { backgroundColor: "transparent", color: "#007bff", border: "2px solid #007bff" }
            default:
                return { backgroundColor: "#007bff", color: "white" }
        }
    }

    return (
        <button
            style={{
                padding: "12px 24px",
                borderRadius: "8px",
                border: "none",
                fontSize: "16px",
                cursor: "pointer",
                transition: "all 0.2s ease",
                fontWeight: "600",
                ...getVariantStyles()
            }}
            onClick={handleClick}
        >
            {text}
        </button>
    )
}

// Framer特有：GUI上で設定できるプロパティを定義
addPropertyControls(CustomButton, {
    text: {
        type: ControlType.String,
        title: "ボタンテキスト",
        defaultValue: "クリック"
    },
    variant: {
        type: ControlType.Enum,
        title: "スタイル",
        options: ["primary", "secondary", "outline"],
        defaultValue: "primary"
    }
})

スタイリングの方法
Framerでは以下の方法でスタイルを適用できます：

インラインstyle（上記例）：style属性に直接オブジェクトを記述

CSSクラス：classNameプロパティで外部CSSを参照

CSS-in-JS：styled-componentsやemotionなどのライブラリも利用可能
Framer特有のポイント

addPropertyControls：デザイナーがGUIで設定できるプロパティを定義

ControlType：文字列、数値、配列、画像など様々な型に対応

defaultValue：初期値を設定して使いやすく
これにより、デザイナーは画面右側にあるパネル上で、ボタンのテキストやスタイルを視覚的に変更でき、エンジニアが書いたロジックを簡単に活用できます。

 Code Overrideの活用例
 認証状態に応じた表示制御Code Overrideの最も実用的な使用例の一つが、利用者の認証状態に応じた表示制御です。
例えば、非会員のみに表示したいキャンペーンバナーや会員登録促進要素がある場合、以下のようなOverrideを作成し、それを適用したいバナーやコンポーネントに対してデザイナーがGUIで適用することができます。
import { forwardRef, type ComponentType } from "react"

// 非会員のみ表示
export function withLogout(Component): ComponentType {
    return forwardRef((props, ref) => {
        if (isLoggedIn()) return null
        return <Component ref={ref} {...props} />
    })
}

// 会員のみ表示
export function withLogin(Component): ComponentType {
    return forwardRef((props, ref) => {
        if (!isLoggedIn()) return null
        return <Component ref={ref} {...props} />
    })
}


 使用方法Code Overrideファイルを作成
Framerのアセットパネルで「Code Overrides」から新しいファイルを作成
上記コードを記述
isLoggedIn()関数は実際の認証ロジックに合わせて実装
GUIで適用
デザイン上の任意の要素を選択し、画面右側のプロパティパネルから「Code Overrides」セクションを選択し、ファイル名と関数名（withLogoutやwithLogin）を選択
プレビューで確認
実際の動作をプレビューやPublishしたサイトで確認
このように、コードを書いてGUIで設定するというFramerならではのワークフローで、デザイナーでもエンジニアが作ったロジックを簡単に適用できるようになります。

 エンジニア目線でのFramer開発ノウハウ
 共通関数の作成方法Framerでは（少なくとも本記事執筆時点では）.tsファイルが使えないため、複数のファイルで使える共通関数を作りたいときは、.tsxファイルで作成し、その中で定義する必要があります。
// utils.tsx - 共通関数ファイルも、.tsx拡張子で作成する
import { forwardRef } from "react"

// API関連（サンプル）
export async function fetchUserData(userId: string) {
    try {
        const response = await fetch(`/api/users/${userId}`)
        return await response.json()
    } catch (error) {
        console.error('Failed to fetch user data:', error)
        return null
    }
}

 バージョン管理の現実的な対処法FramerにはGitのような本格的なバージョン管理機能がないため、コード変更の履歴管理や複数人での協業には工夫が必要です。
プロジェクト複製によるバックアップ管理
Framerでは、一つのWebサイト（またはWebアプリケーション）を「プロジェクト」という単位で管理します。
プロジェクトに含まれるもの
複数のページ（トップページ、詳細ページなど）
共通コンポーネント（ヘッダー、フッターなど）
Code ComponentやCode Override
画像・動画などのアセット
サイト全体の設定（ドメイン、SEO設定など）
このプロジェクト全体を、以下のようなタイミングで複製する運用で、バージョン管理の代替手段とすることができます。

重要な変更前：プロジェクトを複製してバックアップ作成（例：キャンペーンLP_v1.0_backup）

定期的なスナップショット：週次でプロジェクト複製による履歴保存

リリース前の必須バックアップ：本番反映前に必ず複製を作成

 外部エディタでの事前開発
Framerのエディタはコード補完機能が現状ないため、複雑なロジックを書いたり、がっつりコードを書く際は、普段使っているエディタ（Visual Studio CodeやCursor）で事前に実装してからFramerにコピペする方法がおすすめです。
メリット
構文エラーやタイポを事前に発見
自動補完やAIアシスタントの活用でスピードアップ
慣れ親しんだエディタで集中して開発可能
この方法により、Framerのエディタ制約をほぼ感じることなく、普段と同じ開発体験で効率的にコードが書けます。

 まとめこのように、Framerは新たに覚えるべきことが少なく、ほぼ通常のReact開発と同じ感覚で実装できます。デザイナーやマーケティングチームが作ったハイクオリティなLPに、エンジニアが必要な部分だけコードを追加する分業体制により、プロダクトのアウトカム、チーム全体のスピード・生産性を大幅に向上させることができます。
令和トラベルでは、『あたらしい旅行を、デザインする。』というミッションのもと、Framerを含む最新ツールやAIエージェントも積極的に導入し、「エンジニアが本当に価値を発揮すべき領域に集中できる環境」を整備しています。
そんな環境に興味があるFrontendエンジニアの方がいらっしゃいましたら、ぜひお気軽にお声がけください！

 お知らせこの記事を読んで会社やプロダクトについて興味を持ってくれた方は、ぜひご連絡お待ちしています！お気軽にお問い合わせください！
フランクに話だけでも聞きたいという方は、カジュアル面談も実施できますので、お気軽にお声がけください。

https://www.reiwatravel.co.jp/recruit
約1年ぶりのQA Career Talk 第5弾は『QAエンジニアの生存戦略』をテーマに、QA/EMのmiisan・株式会社ダイニーのTanakaさん・アルプ株式会社のYokotaさんの3名が登壇し、スタートアップにおけるQAエンジニアの生存戦略についてパネルディスカッションを行います。
移転後の新オフィスにてオンライン・オフラインのハイブリット開催となりますので、ご興味のある方はぜひご参加ください！

https://reiwatravel.connpass.com/event/355308