Framerホストされたサイトriviera.framer.websiteホストされたプロジェクト、公開済みStylesビルダー内のプロジェクトスタイル編集: より穏やかな見出しキャンバス上で再入力し、再公開
Framer 
OpenDesign 公開ではなくデザインのためのオープンソースのFramer代替: OpenDesign
OpenDesignは、サイトの半分であるデザイン（ランディングページやセクション）のための、無料でオープンソース、ローカルファーストなFramer代替です。ブリーフとポータブルなDESIGN.mdから、独自のコーディングエージェントによってレンダリングされ、どこにでもデプロイできるファイルとして保存されます。ノーコードキャンバス、CMS、ホストではありません。このページでは、それらの責任を1つずつ切り分けて説明します。
タスク別の判定06 / Framer
OpenDesign vs Framer、3つの異なるニーズ
正しい場所から始める
このページ · 選択
OpenDesignかFramerか？
状況別の判定、両方のツールでの1回の簡単な実行、日付入りの機能比較、および答えを覆す条件。
判定を読む すでにFramerを使用しているサイトを維持し、デザインレイヤーを移行する
Framerサイトから移行するもの、ホストされたままになるもの、公開に触れることなくファイルとしてデザインするための4つのステップ。
何が移行するかを見る 別の質問ファイルとしてのページがすぐに必要ですか？
ランディングページソリューションは、ブリーフからデプロイ可能なファイルまで、OpenDesignのワークフロー自体をカバーしています。
ランディングページソリューションへ行くそれぞれが何であるか
Framer vs OpenDesign: 各ツールが何であるか
FramerとOpenDesignは、マーケティングページのデザインにおいて重複していますが、公開においては重複していません。Framerの仕事は、キャンバスからライブURLまでのサイトです。OpenDesignの仕事は、好きなようにデプロイできるファイルとしてのデザインです。OpenDesignは自社製品についてこの比較を書いており、Framerとは提携していません。
短い回答。 OpenDesignは、デザインのための無料でオープンソース（Apache-2.0）、ローカルファーストなFramer代替です。コーディングエージェントが、ブリーフとポータブルなDESIGN.mdからランディングページやセクションをレンダリングし、どこにでもデプロイできるファイルとして保存します。ビジュアルキャンバス、CMS、ホスティングはありません。コードなしで1か所でサイトをデザインして公開することが目標なら、Framerを維持してください。
Framer
Framerは、ウェブサイトをデザインして公開するための、ホストされたノーコードのビジュアルビルダーです。コンポーネント、CMS、AI機能、ホスティングを1か所に備え、手動でレイアウトするキャンバスです。コードを書かずにマーケティングサイトをデザインからライブにするのに優れています。
- 実行環境ベンダークラウド、ブラウザキャンバス
- 編集ノーコードビジュアルビルダー、手動
- 出力公開され、ホストされたサイト
- コストサイトまたはプランごとのサブスクリプションここでは階層は検証されていません
OpenDesign
OpenDesignは、独自のコーディングエージェントを向ける、ローカルファーストのオープンソースデザインエージェントです。スキルとポータブルなブランドはリポジトリ内のファイルとして存在し、デスクトップアプリが結果をレンダリングしてレビューします。
- 実行環境マシンのデスクトップアプリとローカルデーモン
- エージェントあなたのもの: Claude Code、Codex、Cursor、Gemini、OpenCode、Qwenなど
- 出力プロジェクトディレクトリ内のファイル
- コストApache-2.0。API使用料は自身のプロバイダーに支払います
重複する部分
ランディングページとそのインタラクションのデザイン。ページの残りの部分でOpenDesignと比較しているFramerの部分はそれだけです。
このページが主張していないこと
OpenDesignがコンテンツを公開、ホスト、または管理すること、あるいはFramerサイトがファイルに変換されること。デザインをコードとして所有することよりも1か所での公開が重要な場合、以下の判定ではFramerを維持するよう述べています。
判定
FramerかOpenDesignか？状況別の判定
次の場合にFramerを選択…
- 自分でサイトをデザインして公開するためのノーコードビジュアルビルダーが必要な場合。
- ホスティングとCMSが1か所に含まれていることを望む場合。
- ファイル、コーディングエージェント、独自のキーよりも、ホストされたキャンバスを好む場合。
OpenDesignを選ぶべき場合…
- ランディングページとブランドを、どこにでもデプロイできるバージョン管理されたファイルとして保持したい場合。
- すでに使用しているコーディングエージェントに、自分のキーを使ってレンダリングさせたい場合。
- フォーク、リブランディング、CLIからの操作、またはセルフホストが可能なオープンソースを求めている場合。
- ブランドごとに1つのDESIGN.mdを用意し、再プロンプトなしですべてのページに適用させたい場合。
両方を使用すべき場合…
- マーケティング部門はFramerで公開を続けるが、製品ページはコードベース内に置く必要がある場合。
- キャンバス上で最終版を再構築する前に、ファイルとして素早くプロトタイプを作成したい場合。
- サイトと製品の両方が従うべきブランドを、1つのDESIGN.mdとして管理したい場合。
同じブリーフ、2つの結果
FramerとOpenDesignでの同じブリーフ
比較の誠実さは、その入力に依存します。同じブリーフと同じブランドをFramerとOpenDesignに入力し、何が返ってくるか、どのように編集されるか、そして最終的にどこに行き着くかが比較の対象です。以下のパネルはスクリーンショットではなくイラストです。20分間のテストで、ご自身でブリーフを実行できます。
ブリーフ · 両方のツールで同一
スロートラベルの滞在を予約する小さなスタジオのランディングページをデザインしてください。強い見出しを持つ1つのヒーローセクション、3つの注目の場所、予約方法に関する短い説明、そして最後のアクション喚起（CTA）を含めます。デスクトップとスマートフォン対応。
- ブランド
- 紙の背景、Albert Sans、1つの緑のアクセント、8pxの角丸
- ブレイクポイント
- デスクトップ1440、モバイル390。横スクロールなし
- 編集テスト
- 最初の結果の後：「見出しをより落ち着いたものにし、2番目の場所を入れ替える」
- 記録
- モデル、日付、最初の結果までの時間、必要な編集回数、エクスポート形式
FramerホストされたサイトOpenDesign + あなたのエージェントリポジトリ内のファイルriviera-landing.html新規 · v2DESIGN.mdバインド済み編集: より穏やかな見出し要素を指し示し、エージェントが修正
例示両方のパネルはこのページのために描かれたイラストであり、どちらのツールのスクリーンショットでもありません。また、判定はこれらに依存しません。以下の20分間のテストでご自身でブリーフを実行し、2つの結果を公平に比較できるように、ここに記載されているポイントに注意してください。
注目すべき点 · 両方のツール
モデルとバージョン、実行日、最初の使用可能な結果までの時間、「完了」に達するまでの編集回数、エクスポートに含まれていたもの。
注目すべき点 · Framer
使用したプラン、スタイルが2ページ目にも維持されたか、サイトのエクスポートまたはコードのエクスポートに含まれていたもの、依然としてビルダーを必要としたもの。
注目すべき点 · OpenDesign
使用したエージェントとキー、再プロンプトなしでDESIGN.mdが尊重されたか、両方のブレイクポイントが確認されたか、バージョンがファイルとして保持されたか。
機能ごとの比較
OpenDesignとFramer、機能ごとの比較
OpenDesignとFramerが実際に異なる9つの側面：デザイン方法、ライセンス、ランタイム、所有権、デザインシステム、ホスティング、CMS、エージェント、自動化。Framerの事実は2026-09-06に公開情報と照合して確認されました。プランの価格は意図的に記載していません。
| 側面 | OpenDesign | Framer |
|---|---|---|
| デザイン方法 | コーディングエージェントに指示を出し、レンダリングされた結果をレビューする | ノーコードのビジュアルビルダー、手作業 |
| ライセンス | Apache-2.0、GitHub上の完全なソース | クローズドソース、ホスト型製品 |
| ランタイム | デスクトップアプリとマシン上のローカルデーモン | ベンダーのクラウド |
| 成果物の所有権 | プロジェクトディレクトリ内のファイル、どこにでもデプロイ可能 | ホストされたプロジェクト |
| デザインシステム | リポジトリ内のポータブルなDESIGN.md、すべてのスキルで尊重される | プロジェクトごとのスタイルとコンポーネント |
| ホスティング / デプロイ | デプロイメントを所有。バンドルされていない | ホスティング込み |
| CMS | なし。コンテンツはファイルまたは独自のCMSに存在する | 組み込み |
| エージェント | BYOK: Claude Code、Codex、Cursor、Gemini、OpenCode、Qwenなど | ベンダー管理のAI機能 |
| CLI / CI | はい、od CLIとHTTPデーモン経由 | Web UI優先 |
Framerが優れている点
CMSとホスティングが含まれたマーケティングサイトをエンドツーエンドでデザインし公開する、ノーコードのビジュアルビルダー。それが目的であれば、Framerはそれを実現し、OpenDesignは実現しません。
OpenDesignが優れている点
どこにでもデプロイできるファイルとしてのデザイン。すでに料金を支払っているエージェントによって生成され、製品も管理するブランドの下で、フォークできないものは何もありません。
決定
OpenDesignがFramerの適切な代替となる場合
マーケティングチーム、エンジニアなし
金曜日までに公開され、チームによって編集されるキャンペーンサイト
Framerキャンバス、CMS、ホスティングが1か所にあることが特徴です。そのチームにファイルのデプロイを求めることは、このページがごまかすことのないコストです。
不向きなケース サイトがプロダクトのコードベースとデザインシステムを共有する必要がある場合。
プロダクト企業
マーケティングサイトとアプリを1つのプロダクトのように見せたい
OpenDesign1つのDESIGN.mdでランディングページとプロダクト画面の両方をレンダリングし、ページはアプリと同じパイプラインでデプロイされます。
不向きなケース マーケティング部門がデプロイなしで毎日コピーを編集する必要がある場合。
Framerを使用するエージェンシー
クライアントはFramerを使用しているが、キャンバス上でのプロトタイプ作成に時間がかかりすぎる
両方実行OpenDesignのファイルとしてプロトタイプを作成してイテレーションを行い、承認されたページをFramerで再構築して公開およびクライアントの編集に備えます。
不向きなケース 再構築のステップが節約以上のコストをかける場合。
デプロイパイプラインを持つ開発者
コードとしてのページ、他のすべてと同じ場所でホスト
OpenDesignブランドとコンテンツをエージェントに指示します。ページはHTMLとしてリポジトリに保存され、既存のホストで公開されます。ランディングページソリューションをご覧ください。
不向きなケース 他の誰かにホストとコンテンツ管理を任せたい場合。
デザインを移行するか、両方を実行する
FramerからOpenDesignへデザインを移行する方法
現在、FramerからOpenDesignへの自動インポートはありません。移行するのはブランドとブリーフであり、ライブサイトからの1回限りの抽出を通じて行われます。Framerプロジェクト、そのCMS、およびホスティングはそのまま残ります。
| 移行するもの | |
|---|---|
| ブランド | エージェントをライブサイトまたはスクリーンショットに向けます。色、タイポグラフィ、余白、トーンをDESIGN.mdに抽出します。 |
| コピーと構造 | ページのコピーとセクションの順序をプレーンテキストとしてOpenDesignのブリーフに貼り付けます。 |
| リファレンス | Framerページのスクリーンショットは、次のレンダリングのリファレンスとして機能します。 |
| Framerに残るもの | |
| キャンバスプロジェクト | レイヤーとコンポーネントは変換されません。ブリーフとDESIGN.mdから再レンダリングします。 |
| CMSとホスティング | OpenDesignにはどちらもありません。コンテンツと公開はFramerに残るか、独自のスタックに移行します。 |
| ドメインとアナリティクスの設定 | Framerサイトに接続されているものはすべて、別の場所にデプロイするまでそこにとどまります。 |
-
OpenDesignをインストールしてプロジェクトを開く
デスクトップアプリをダウンロードし、ページを配置するリポジトリにプロジェクトを作成します。クイックスタートでは、ソースビルドのパスについて個別に説明しています。
-
エージェントをライブのFramerページに向ける
公開されたURL、または外観を維持したいページのスクリーンショットをリファレンスとして使用します。
-
エージェントにブランドをDESIGN.mdに抽出するよう依頼する
ファイルを手動で確認します。1つのアクセントカラー、適切なフォント、適切な角丸。これは判断が必要な唯一の移行ステップです。
-
新しいブランドに対してページをレンダリングし、独自の方法でデプロイする
ランディングページのスキルを選択し、元のブリーフをレンダリングします。要素を指し示してイテレーションを行い、独自のパイプラインでファイルを出荷します。
両方実行する
マーケティング部門が毎日編集するページにはFramerを維持し、プロダクトに属するページにはOpenDesignを使用します。両方に同じDESIGN.md由来のブランドを与えます。自動的に同期されるものはありません。
フォールバックと損失
Framerへの支払いを停止する場合は、まずすべてのページをエクスポートするかスクリーンショットを撮ってください。ホストされているサイトとそのCMSコンテンツは、OpenDesignが再現できない部分です。OpenDesignのレンダリングが失敗した場合、最後のバージョンがディスクに残り、ブリーフは変更されません。
20分間のテスト
Framerで既に構築したページでOpenDesignを試す
Framerで構築したページを取り上げ、独自のエージェントを使用してOpenDesignで再構築します。20分で使える結果が得られなければ、この比較は知る価値のある何かを教えてくれたことになります。
1タスク
これは私がFramerで構築したランディングページのスクリーンショットです。そのブランドをDESIGN.mdに抽出し、私のデザインルールを使用してこのブリーフから同じページを再構築してください。デスクトップとモバイルの幅で確認してください。
- 01ページの入力再構築したいFramerページのスクリーンショットまたは公開されたURL。
- 02DESIGN.mdの出力リポジトリ内のファイルに抽出されたブランド — 手動で確認してください。
- 03同じページ、レンダリング済みデプロイ可能なファイルとしてのデスクトップとスマートフォン、その後、要素を指し示して行われた1回の編集。
2成功の条件…
- DESIGN.mdがリポジトリに存在し、そのトークンを承認できる。
- ページが1440と390で水平スクロールなしでレンダリングされる。
- ブリーフを書き直すのではなく、要素を指し示すことで1回の編集（「より落ち着いた見出し」）が適用される。
- 2つのバージョンがファイルとして並んで配置され、暗黙のうちに上書きされたものはない。
機能しなかった場合: 選択したモードでエージェントが接続され、認証されていることを確認し、ツールを判断する前により小さなブリーフで再試行してください。
その他のオプション
その他のFramerの代替
FAQ
Framerの代替: FAQ
OpenDesignはFramerの完全な代替品ですか？
いいえ。Framerはホスト型のノーコードサイトビルダーですが、OpenDesignはエージェント主導のローカルファーストなデザインレイヤーです。ページの設計では重複しますが、公開やホスティングでは重複しません。結論にそれぞれの条件を記載しています。
OpenDesignはFramerのようにサイトを公開できますか？
いいえ。OpenDesignはあなたが所有するデザイン成果物とコードを生成し、それをあなた自身のホストにデプロイします。ホスティングとCMSを備えたオールインワンのノーコードビルダーを求めるなら、Framerの方が適しています。
無料またはオープンソースのFramerの代替ツールはありますか？
OpenDesignはデザイン側においてApache-2.0の下で無料でオープンソースです。API使用料として自身のプロバイダーにのみ支払い、結果を自分でホストします。
OpenDesignと並行してFramerを使い続けることはできますか？
はい。OpenDesignでファイルとしてプロトタイプを作成しFramerで公開するか、マーケティングページとプロダクトページを両者で分けることができます。現在のところ移行は手動です。移行するものと残るものをご覧ください。
OpenDesignはどのコーディングエージェントを使用しますか？
あなたのものです。Claude Code、Codex、Cursor、Gemini、OpenCode、またはQwenを自身のキーで使用します。認証情報はローカルに保持され、プロキシされることはありません。
OpenDesignは本当にオープンソースですか？
はい。github.com/nexu-io/open-designにてApache-2.0の下で公開されており、セルフホスト可能です。
OpenDesignはFramerと提携していますか？
いいえ。OpenDesignは独立したオープンソースプロジェクトです。Framerはその所有者の商標であり、これはOpenDesignチームによって書かれた非提携の比較です。
1つの実際のページでOpenDesignを試す
Framerで構築したページを自身のコーディングエージェントで再構築し、ラウンドトリップを評価してから決定してください。自分に合った状況を選択してください。ページはあなたのセットアップを検出しません。