Framer AIでホームページ作成:使い方・料金・導入前の注意点

Framer AIでホームページを作る前に知っておきたい機能と料金を解説。生成後の手動編集、CMS、フォーム、SEO、多言語対応から、編集者や追加言語を含む総額まで整理します。Webflow・Lovableとの使い分けや、コードの書き出しをめぐる公式説明の矛盾も、公開資料に基づいて確認できます。

公開日

Framer AIでホームページ作成:使い方・料金・導入前の注意点

Framer AIは、AIで下書きを作り、人の手で仕上げるビジネスサイトに適しています。生成したページはFramerのビジュアルキャンバスで引き続き編集できます。Basicは年払いで月額$10から。ただし、Proに共同編集者を2人、追加言語を2つ加えると、年払い換算でも月額$100になり、税金と追加のAI利用料は別途かかります。編集しながら運用するマーケティングサイトには有力な選択肢です。顧客のログインやアプリ固有の業務フローが必要なら、アプリビルダーを選びましょう。

Framerの公開製品ページ、ヘルプ記事、公開中の料金ページをもとに、2026年10月14日に情報を確認しました。本記事はドキュメントに基づく評価で、公開事例と料金の試算を用いています。ログインしての生成や製品の実機検証は行っていません。手作業でのデザイン調整、コンテンツ運用、サブスクリプションの総額、別のプラットフォームが必要になる要件を判断軸としています。

Framer AIとは?生成したサイトはその後も編集できる?

Framerは、ビジュアルキャンバス、コンテンツ管理、公開機能を備えたホスティング型のWebサイトビルダーです。AIエージェントは、そのプロジェクト内でコンテンツを作成・変更します。サイトやセクションの要望を伝えると、編集可能なページ、文章、ビジュアルが生成されます。その後もプロンプトで修正を依頼したり、キャンバスを直接操作したりできます。得られるのはサイトの見た目を描いた画像ではなく、作業を続けられるWebサイトです。Framerは、AIによるスタイル調整、CMS操作、翻訳、再利用できる指示、外部エージェントとの接続も案内しています。それぞれ別の作業フローですが、料金面では相互に関わります。プロンプトだけでビジネスサイトのすべてが完成するという意味ではありません。Framer AI

ビジュアルでのWebサイト制作とAIエージェントを紹介するFramerの公開ホームページ
Framer:公開されている製品概要

Framerが向いている人、別のツールを選ぶべき人

Framerが向いているのは、一般公開するマーケティングサイトを作りたい創業者、マーケター、フリーランスのデザイナーです。サービスを説明し、信頼できる実績を見せ、コンテンツを公開し、問い合わせを受け付ける用途に合います。AIによる生成後も、運用担当者が見た目を直接調整したい場合には、特に魅力があります。

ツール適した用途公表されている有料プランの開始料金契約前に確認したい点
Framer見た目を直接調整するビジネスサイトやキャンペーンサイトBasicは年払いで月額$10。無料プランあり共同編集者、ロケール、追加AIクレジットの予算を別に見込む必要があります
WebflowデザインとCMSの運用フローが確立しているマーケティングサイトBasicは年払いで月額$15。CMS付きのPremiumは$25。無料のStarterありCMSを使うサイトにはBasicより上のプランが必要です。Workspaceやシートの料金が別途かかる場合があります
Lovableアカウント、データ、ビジネスロジックを備えたWebアプリProは月払いで月額$25。無料プランありアプリの開発・運用には、利用量に応じた予算と技術面の確認が必要です

上記の料金は、情報確認日にFramer、Webflow、Lovableの公式情報で直接確認しました。記載した支払いサイクルでの開始料金であり、含まれる機能が同じというわけではありません。

サービス紹介、導入事例、問い合わせフォームを用意したい個人コンサルタントには、Framerがよく合います。デザインを崩さずにコンテンツを編集してもらえるよう、サイトを納品したいデザイナーにも適しています。一方、将来は顧客ポータルに発展させたい創業者は、マーケティングサイト用のツールを選ぶ前に、ポータルをどこで構築するか決めておくべきです。

Webflow AIとの比較では、日々の運用方法を基準にする

Webflowも、AIによるサイト生成、文章作成、CMSアイテム生成、デザインシステムに沿ったセクション作成に対応するビジュアル型のWeb制作プラットフォームです。AIがあるというだけでは、Framerを選ぶ決め手になりません。WebflowのAI機能概要

サイト制作とコンテンツ作成の流れを紹介するWebflowの公開AI機能ページ
Webflow:AIを使ったWebサイト制作の流れ

既存のサイト運用チームがデザインシステムやCMSの扱いに慣れているなら、Webflowは引き続き候補に残ります。Framerで作り直すには、編集しやすい、引き継ぎが簡単になるといった具体的な利点が必要です。一方、小規模事業では、いつか必要になるかもしれないという理由だけで、規模の大きな運用体制を取り入れる必要はありません。詳しい判断材料はWebflowレビューで解説しています。

Lovableは、サイトそのものがアプリになる場合に選ぶ

Lovableは、フロントエンド、バックエンド、データベース、認証、編集可能なコードを備えたアプリを構築します。認証はユーザーがログインする仕組み、バックエンドは画面の裏側でデータや処理ルールを扱う部分です。一般公開のサービス紹介ページとは、出発点となる要件が違います。Lovableのドキュメント

アプリ開発向けのサブスクリプションとクレジットを掲載したLovableの公開料金ページ
Lovable:アプリ開発向けプラン

顧客用ダッシュボード、社内ツール、アカウントを使うプロダクトを作るならLovableが候補になります。必要なのが見栄えのよい会社・サービス案内サイトだけで、アプリのロジックを管理する理由がないなら、選ぶ必要はありません。入門用の有料プランであるProには月100クレジットとユーザー数無制限が含まれますが、稼働時の利用料も予算に入れる必要があります。アプリビルダーの月額料金だけを運用費の総額と考える前に、Lovableの料金解説とLovableの代替ツールも確認してください。

要件を整理して、AIでビジネスサイトを作る

Framerはプロンプトからサイトを生成できます。ただし、役立つ制作指示にするには、AIには決められない事業上の判断を先に伝える必要があります。誰に向けたサイトか、何を提供するか、どんな裏付けがあるか、どのセクションを設け、次に何をしてもらうか、という点です。Framerの公式入門例では、Ember Roastというコーヒーロースタリーを題材に、商品、お客様の声、問い合わせの各セクションを作成しています。これは公開されている説明用の例であり、本レビューで生成した成果物ではありません。Framerのサイト生成ガイド

Agentサイドバーと公開のサイト制作例を示したFramerのヘルプ記事
Framer:公式に案内されているプロンプトからサイトを作る手順

サービスを販売するサイトなら、見た目を指定する前に、訪問者に何を理解してもらう必要があるかを決めます。「モダンで美しいサイト」だけでは、肝心な点が定まりません。「独立系の小売店に記帳代行サービスを説明し、掲載承認済みの導入事例を示して、相談につなげる」と伝えれば、レイアウトに明確な役割が生まれます。

Framer AIの使い方:素材の準備から公開前の確認まで

以下は、Framerが公開している操作方法に基づく進め方の提案です。プロンプトは本記事のために作成した例であり、今回の作業で得られた生成結果を示すものではありません。

  1. 元になる素材を用意する

    使用が承認されたサービス説明、ロゴ、画像、公開する権利のある実績資料を集めます。未確定の情報と掲載承認済みの文章は分けておきましょう。レイアウトを埋めるために、架空の顧客やお客様の声を作るようエージェントに頼んではいけません。

  2. Agentを開き、作業範囲を明確にして依頼する

    プロジェクトを作成し、右サイドバーからAgentを開きます。最初のプロンプトは、例えば次のようにします。「独立系の小売店向け記帳代行サービス、Cedar Ledgerのホームページを作成してください。添付した承認済みの文章とロゴを使ってください。提供価値、サービス、業務の流れ、支給した導入事例、相談フォームを含め、落ち着いたエディトリアル調のレイアウトにしてください。不足している内容は明示し、実績や裏付けを創作しないでください。」

  3. 対象のセクションを選んで修正する

    キャンバス上でヒーローセクションを選択してから、範囲を絞って依頼します。「承認済みの見出しとロゴは維持してください。主要なアクションをもっと目立たせ、視線を奪い合う装飾要素を減らしてください。」Framerは、ほかの場所への意図しない変更を減らすため、セクションごとに作業し、選択した領域をコンテキストとして渡すことを勧めています。

  4. 公開前に内容と動作を確認する

    文章、リンク、画像、レスポンシブレイアウトを、スマートフォン表示も含めて確認します。ブランチ機能のあるプランで大きな修正をする場合は、ブランチを作成し、Changesで変更内容を確認してからmainに適用し、その後で公開します。見栄えのよい下書きを採用する判断と、サイトを公開する判断は別です。

Framerには参考画像や実際のデザイン素材を添付できます。操作時の振る舞いが重要な場合、公式の説明では、見た目を示す画像と動作を確認できる実際の参考サイトの両方を渡すことを勧めています。漠然と「高級感を出して」と頼むより、具体的に伝わります。Agentの利用ガイド

仕上がりの判断基準はシンプルです。訪問者が装飾の意味を読み解かなくても、何を提供していて、次に何をすればよいか分かるでしょうか。下書きがその条件を満たしていなければ、動きを加える前に情報の優先順位を整えます。

AIでスタイルを整える:生成後はどこまで編集できる?

Framerでは、生成後もテキスト、画像、レイアウト、文字組み、コンポーネント、余白、色、エフェクト、ブレークポイントを編集できます。ブレークポイントとは、画面幅に応じてレイアウトを切り替えるための設定です。例えば、スマートフォンで見出しの折り返しが不自然でも、サイト全体を生成し直す必要はありません。Framerの編集の仕組み

レスポンシブ対応のキャンバスとビジュアル編集機能を紹介するFramerの公開デザインページ
Framer:AI生成後のビジュアル編集

Cedar Ledgerの制作例なら、同じページを段階的に修正しながら評価します。最初の合格条件は、内容とセクションの順序が正しいことです。次は、見出し、ボタン、画像の扱いが統一され、ブランドらしさが伝わること。最後は、狭い画面でもフォームが読みやすく、次の操作が明確で、使いやすいことです。これは確認手順の提案であり、実施していないテストの不具合報告ではありません。

支給された文字スタイルを各セクションに適用するなど、繰り返す変更には、対象を絞ったエージェントへの依頼が向いています。画像の切り抜き方や見出し周りの余白など、その場で判断したい調整はキャンバスで行います。どちらの方法でも、結果の確認は必要です。

Framer Skillsで指示を再利用し、修正の基準をそろえる

Framer Skillsには、デザインシステム、ブランドの文体、公開前の確認事項など、繰り返し使う指示を保存できます。プロジェクトのSettings内にあるSkillsで作成し、エージェントとのチャットから呼び出します。Cedar Ledgerなら、承認済みの文字スタイル、既存のコンポーネント、支給された裏付け資料を使い、事業に関する説明を創作しないよう求めるスキルが役立ちます。Framer Skills

Framerの公開Skillsページには、文章の修正前後を比較できる参考例があります。修正前は、大げさで抽象的な表現でAIを説明しています。修正後は、問い合わせの振り分けや記録の更新といった具体的な作業を挙げ、人が何を確認するかも説明しています。題材を変えずに、仕事の中身が伝わる文章に直しているのです。

ビジネスサイトの下書きにも、同じ基準を当てはめましょう。「小売業の財務を変革する」だけでは、店主にほとんど何も伝わりません。どの記帳業務を代行するのかを、承認済みの内容で説明すれば、判断材料になります。AIは表現を提案できますが、それが事実かどうかは事業者が確かめる必要があります。

Framerのテンプレートから始める方法もある

FramerのMarketplaceには、編集可能なテンプレートが用意されています。例えば、Grain LabによるBedrockは無料と記載され、エージェンシー向けに提供されています。紹介ページでは、カスタマイズ可能なレスポンシブレイアウトと説明されています。見せたい内容に合う構成がすでにあるなら、それを出発点にするのは合理的です。Bedrockの紹介ページ

テンプレートの出来から、AI生成の品質を判断することはできません。ただし、実際の構成を見たうえで、そのまま調整するか、エージェントに変更を依頼するか、新しい要件から作るかを選べます。

Framerの制作事例で分かること、分からないこと

Framerの公開製品ページや制作事例からは、このプラットフォームでどのような表現が可能かが分かります。ただし、短いプロンプトだけで、人の手を加えずにそのサイトが完成した証拠にはなりません。レイアウト、動き、情報の整理方法を評価するために見ましょう。初回生成の品質や時間短縮を実測した証拠として扱うべきではありません。

外部エージェントとの接続と、ワークスペースでの共同作業

Framerは、Claude Code、Cursor、Codexなどの外部コーディングエージェントとの接続も案内しています。接続によってアクセスできるのは、明示的に選択したプロジェクトです。エージェントはキャンバスとCMSを操作でき、変更が公開サイトに反映されるのは、自分で公開するか、エージェントに公開を指示したときです。Framerによると、外部エージェントによる変更ではブランチが使われ、アクセス権は取り消せます。外部エージェントのドキュメント

マーケターにとって大切なのは、プロジェクトの編集と、本番サイトへの反映を承認することの違いです。開発者にとっては、普段使っているツールの作業フローに組み込める接続です。ただし、Framerのサイト料金、シート料金、利用量に応じた料金がなくなるわけではありません。料金ページでは現在、外部エージェントのアクセスをプレビュー期間中は無料としています。

CMS・フォーム・SEOでサイトを運用する

Framerには、ビジネスサイトの公開・運用に必要な基本機能がそろっています。ただし、どの機能も事業の目的に合わせた設定が必要です。完成して見える下書きでも、サンプルの導入事例が残っていたり、問い合わせの送信先が設定されていなかったり、ページに合わない説明文が使い回されていたりする可能性があります。

CMS:承認済みのコンテンツから同じ型のページを作る

FramerのCMSはコンテンツ管理システムで、記事や導入事例など、同じ構造の情報をコレクションに保存します。エージェントは、フィールドやスラッグの作成、コレクションへのデータ追加、CSV形式の表のインポート、関連コンテンツの紐付け、そのデータに連動する詳細ページの作成に対応しています。Framer CMS

コレクション、構造化されたコンテンツ、エージェントによる支援を紹介するFramerの公開CMSページ
Framer:CMSコレクションとコンテンツ運用

Cedar Ledgerなら、顧客、課題、提供した業務、掲載承認済みの成果を、導入事例のフィールドとして用意します。導入事例ページを一度デザインし、そのフィールドから内容を流し込みます。ページごとに別々のデザインを増やしていくのではなく、運用担当者が同じ手順で公開を続けられる仕組みになります。

サンプルデータには注意が必要です。Framerは、現実らしいCMSのサンプルアイテムを生成できると案内しており、レイアウトのプレビューには役立ちます。ただし、現実らしいことと、事実確認が済んでいることは別です。もっともらしい顧客名や成果でも、架空なら公開には適しません。

プランを選ぶ前に、コンテンツの構造を整理しましょう。ブログ記事と導入事例なら、Basicのコレクション2つに収まります。著者を別のコレクションで管理すると3つになるため、アクセス数が少ないサイトでもBasicの範囲を超えます。

フォーム:送信先と流入元の計測を確認する

Framer標準のフォームは、フィールドや状態に応じた見た目の調整、メール配信、Google Sheets、Webhookに対応し、スパム対策とレート制限も備えています。Insert → Formsから追加し、入力項目と送信先を設定します。Framerの問い合わせフォームガイド

Insertパネル内のFormsの選択肢を示したFramerのヘルプページ
Framer:標準フォームの設定

相談フォームの合格条件は、送信内容が対応を担当する人やシステムに届くことです。公開サイトで、必須項目、送信完了メッセージ、受信したデータを確認しましょう。送信ボタンの見栄えがよくても、これらが動く証拠にはなりません。

広告を運用するなら、流入元の計測に関する制限は重要です。 隠しフィールドは、UTMパラメータを自動では取得しません。UTMパラメータは、流入元を識別するためにキャンペーンURLに付けるタグです。Framerは、フォームでのUTMトラッキングをEnterpriseの標準機能として掲載し、別の方法としてコードオーバーライドも案内しています。また、Hiddenフィールドの設定と、Visibleプロパティで入力欄を非表示にする操作は区別されています。後者では、その入力欄の値は送信されません。隠しフィールドのドキュメント

隠しフィールドに固定の値を入れれば、どのランディングページから送信されたかを識別できます。ただし、その訪問者がどの広告から来たかまで自動で分かるわけではありません。マーケティングの判断にその区別が必要なら、計測の実装費も予算に含めます。

SEO:公開に必要な設定はできても、集客は保証されない

Framerは、ページタイトルと説明文、カスタムスラッグ、CMSのデータに基づくメタデータ、セマンティックHTML、インデックスの制御、サイトマップとrobots.txtの自動生成に対応しています。エージェントは、監査や、見出し、メタデータ、画像の代替テキスト、内部リンクの変更を支援できます。Framer SEO

ページ設定、メタデータ、監査機能を紹介するFramerの公開SEOページ
Framer:SEO設定とエージェントによる支援

導入事例では、題材が分かるタイトル、実施内容を正確に要約した説明文、安定して使えるURLを設定します。検索エンジンへの登録対象にする、つまりインデックスさせるべきページかも確認しましょう。既存サイトを置き換える場合は、旧URLとリダイレクトの要件を確認します。Framerでは、サイトのリダイレクトはProの機能として掲載されています。

これらの設定により、適切な形でページを公開できます。ただし、検索順位、アクセス数、見込み度の高い問い合わせを保証するものではありません。AIが作成したメタデータも、ページの内容に合っているか確認する必要があります。

自動翻訳を使いながら、編集の判断は人が行う

FramerのAuto Translateは、元の内容が変わると、有効にしたロケールのキャンバスとCMS内にある翻訳対象コンテンツを更新できます。ロケールとは、サイトの言語別・地域別のバージョンです。Localizationを開いて対象のロケールを選び、Settings内のAI SettingsでAuto Translateを有効にします。モデルを選ぶことも、Autoのままにすることもできます。Auto Translateの設定手順

自動翻訳と手動での確認について説明するFramerの公開ドキュメント
Framer:翻訳の設定と編集内容の管理

Cedar Ledgerのフランス語版なら、サービス名、フォームのラベル、次の操作を案内する文章をまとめて確認します。個々の文が正確でも、ボタンが示す操作と送信完了メッセージの内容が食い違えば、利用者は戸惑います。表示されたレイアウトも確認しましょう。翻訳後のラベルには、より広いスペースが必要になる場合があります。

Framerでは翻訳を確認して手動で編集でき、手動の修正が優先されます。確認ステータスを使うと、新しい内容と、すでに確認済みの内容を区別できます。

ロケールの利用料と、AI翻訳に使えるクレジットは別です。 ローカライズ用のアドオンに加え、AI翻訳ではワークスペースのAIクレジットも消費します。Framerによると、クレジットを使い切っても手動翻訳は可能です。つまり、多言語のコンテンツ運用は、公開時だけの支出ではなく、継続的なAI予算にも関わります。

Framer AIの料金:サイトプラン・編集者・アドオンの総額を考える

Framerの現行サイトプランはFree、Basic、Pro、Enterpriseです。以下の米ドル料金は、年払いと月払いの両表示、および料金ページのUSDデータを含め、2026年10月14日に確認しました。年払いの月額表示は、年間料金を月あたりに換算したものです。月ごとに解約できる契約ではありません。Framerの料金

Free、Basic、Pro、Enterpriseのサイトプランを掲載したFramerの公開中の料金ページ
Framer:サイトプラン、共同編集、アドオン
サイトプラン年払いの場合月払いの場合含まれるAIクレジット
Free$0$0未契約のワークスペースに初回のみ500クレジット
Basic月額$10、年額$120月額$15月1,000クレジット
Pro月額$30、年額$360月額$45月3,000クレジット
Enterprise個別見積もり個別契約個別設定

Basicには、サイトページ30件、CMSコレクション2つ、CMSアイテム1,000件、帯域幅50 GBが含まれます。Proは、サイトページ150件、コレクション10個、アイテム2,500件、帯域幅100 GBに加え、掲載されているリダイレクト、ステージング、ブランチ機能を利用できます。Enterpriseは上限を個別に設定でき、組織向けの管理機能を備えています。プランの上限

Freeは、作業の流れを試すためのプランです。 公開されている提供内容には、Framerのドメインと帯域幅1 GBが含まれます。FAQには、1,000ページ、CMSコレクション10個、5 MBのファイルアップロード、試用できるロケールも記載されています。この試用環境の上限が、そのままBasicに引き継がれるわけではありません。独自ドメインを使うには有料プランが必要です。

サイトの契約とワークスペースのシートは別料金

Framerでは、サイトと編集できる人に対して別々に料金がかかります。BasicとProでは、ワークスペースのオーナーと閲覧者は無料です。追加のフル編集者は、年払いの料金設定で月額$20、月払いで月額$30です。コンテンツ編集者はそれぞれ**$10または$15**で、CMS、ローカライズ、ページ上の編集を行えます。どちらのサイトプランも、編集権限を持てるユーザーは最大10人とされています。共同編集の料金

レイアウトは変更せず、導入事例を更新したいクライアントには、有料のコンテンツ編集者権限が合う場合があります。全員を同じ種類のユーザーとして扱うのではなく、デザインを含む編集権限が業務上必要な人に、フル編集者のシートを割り当てましょう。

Framerの請求に関するヘルプによると、年間のサイト契約は前払いです。一方、年払いプランの追加編集者や従量課金分は月ごとに請求されます。適用される単価と、実際に請求されるタイミングを分けて考える必要があります。請求に関するドキュメント

ロケール、容量拡張、その他のオプション

公開中の料金ページには、以下の追加月額料金が掲載されています。前が年払い時の単価、後ろが月払い時の単価です。

  • 翻訳用ロケール: 追加ロケールごとに$20 / $25。BasicとProでは最大20ロケールです。
  • Proのページ数拡張: 100ページ追加ごとに$20 / $30。合計700ページまでです。
  • ProのCMSコレクション拡張: 10個追加ごとに$40 / $50。合計40個までです。
  • ProのCMSアイテム拡張: 10,000件追加ごとに$20 / $30。合計40,000件までです。
  • Proの帯域幅拡張: 100 GB追加ごとに$40 / $50。最大2 TBです。
  • ProのConvert: 500,000イベントごとに$50 / $60。テストと計測の機能に対応します。イベントにはページ閲覧、計測対象のクリック、計測対象のフォーム送信などが含まれます。
  • ProのAdvanced Hosting: $200 / $250。Enterpriseには含まれると記載されています。

用途の異なる任意の追加料金であり、すべての事業に必要なセットではありません。現行のアドオン料金

AIクレジットは共有で、プロンプトごとの消費量も変わる

Framerのクレジットはワークスペースでまとめて管理されます。サイトプランに含まれるクレジットは合算され、編集者は同じ残高を使います。Agentのチャット、Workshopのチャット、AI翻訳でクレジットを消費します。シートを追加しても、その人専用のクレジットが新たに付くわけではありません。有料クレジットは該当プランの請求日に更新され、プランに含まれる未使用分は繰り越せません。AIクレジットのルール

料金ページのクレジット選択欄では、毎月の利用枠を増やせます。Basicは月1,000〜15,000クレジット、Proは月3,000〜100,000クレジットです。確認した米ドル料金の計算では、月々の継続クレジットを1,000増やすごとに、年払いの単価で月額$10、月払いでは月額$15が加算されます。例えば、Proを月5,000クレジットにすると、合計は年払いで月額$50、月払いで月額$75です。これらは各サイトプランのクレジット設定であり、別のサイトプラン名ではありません。クレジットの選択欄

このクレジット数から、作成できるサイト数を確約することはできません。Framerは、依頼の内容によって消費量が変わると説明しています。また、都度購入の追加クレジットには有効なAI Creditsアドオンが必要で、購入した暦月の末日に失効します。上限に達すると、新たにクレジットを消費する依頼は停止しますが、すでに動いている作業は完了します。料金ページには初月の追加クレジットも案内されていますが、継続的な予算は通常の付与量を基準に立てましょう。

小規模な多言語チームでは、いくらかかる?

1つのProサイトに、オーナー、フル編集者のシートを持つフリーランスのデザイナー、コンテンツ編集者のシートを持つマーケター、追加ロケール2つを組み合わせる場合を考えます。

年払い単価での換算:$30 + $20 + $10 + $40 = 月額$100、年間$1,200。

月払い:$45 + $30 + $15 + $50 = 月額$140、年間$1,680。

計算上の差額は年間**$480**です。税金、追加クレジット、外部サービス、その他の追加費用は含みません。計算に使った単価はFramerの公開中の料金に基づきます。サイト契約だけの金額よりも、予算を考えるうえで実態に近い数字です。

このサイトで月に10件の有望な問い合わせを獲得した場合、試算上のプラットフォーム利用料は、問い合わせあたり年払い単価で$10、月払いで$14になります。10件というのは説明のための仮定であり、アクセス数やコンバージョンの予測ではありません。集客費と人件費も含めていません。自社の実際の成果件数を使い、サイト運用が費用に見合っているか判断してください。

導入判断を左右する制約

Framerで特に確認すべき制約は、サイトの所有・移行に関する要件、利用量の見通しにくさ、そして下書きを実際に機能するビジネスサイトへ仕上げるための作業です。

1. エクスポートに関する公式説明が矛盾しています。 専用のHTMLエクスポートのヘルプページでは、自己ホスティング可能なHTMLエクスポートは提供していないと説明しています。一方、別のデータ移行のページでは、公開済みのHTML、CSS、JavaScript、素材をダウンロードし、別のホストへ移せるとしています。今回の情報確認時には、両方のページが公開されていました。本レビューでは、動作するサイトを正式にサポートされた方法で書き出し、移行できることまでは確認できていません。ホスティング先を変更できることが契約上の要件なら、Framerを選ぶ前に、実際の書き出しと動作確認を求めるべきです。

2. AIクレジットは、完成サイト数を保証する枠ではありません。 1,000または3,000クレジットで、何サイト完成できると決めて予算を立てることはできません。翻訳とデザイン作業は同じ残高を使うため、公開作業が集中する週には、ほかの作業に回せる残量も変わります。

3. Basicでは、アクセス数より先にコンテンツ構造が上限に達する場合があります。 記事、著者、導入事例を分けて管理する事業では、コレクション2つという上限が具体的な制約になります。帯域幅や表示価格だけで判断する前に、必要なコンテンツの種類を数えましょう。

4. フォームを置くだけでは、問い合わせの流入元は自動で分かりません。 標準の隠しフィールドには、キャンペーンのパラメータが自動で紐付きません。どのキャンペーンが問い合わせにつながったかをレポートしたいマーケターは、公式に案内されているEnterpriseの機能か、追加の実装を考慮する必要があります。

5. 見栄えのよい生成結果でも、事業者としてそのまま公開できるとは限りません。 CMSのサンプルコンテンツ、裏付けのないお客様の声、スマートフォンでのレイアウト崩れ、未確認のリンク先や送信先は、人が確認する必要があります。Framer自身も、公開前に内容、画像、リンク、レスポンシブ表示を確認するよう勧めています。AIは制作作業の一部を減らせますが、事業者による承認を代行するわけではありません。

Framer AIの評価:生成後も自分で編集したい人に向いている

作りたいものが編集可能なマーケティングサイトで、最終的なデザイン、内容、公開の判断を人が担うなら、Framerは有力な選択肢です。必要なコンテンツ構造が収まるならBasicから始め、掲載されている公開管理機能や追加のCMS容量が必要ならProを検討します。契約前に、共同編集者と言語を含む料金を計算しましょう。

既存のデザイン・コンテンツ運用が事業に合っているなら、Webflowを使い続ける理由があります。データや業務ルールを持ち、ログインして使うプロダクトが必要なら、Lovableのようなアプリビルダーが適しています。サイトのコピーを持ち出して独自にホスティングすることが必須なら、Framerの公式説明の矛盾により、その要件は未解決のままです。

選ぶ基準は、AI生成後に見た目を直接編集できることを、サイトのアプリケーションコードやホスティング基盤を自分で所有することより重視するかどうかです。 その条件に合うならFramerを選びましょう。

次の作業では、承認済みのホームページ用文章と素材を用意し、重要なページを1つ作成して、レスポンシブ表示を手動で調整し、フォームの送信を確認します。多言語サイトなら、同じページの翻訳版も確認してください。それらが自分たちの合格基準を満たしてから、有料プランとオプションの組み合わせを確定しましょう。

よくある質問

Framer AIは無料で使えますか?

Framerには$0のプランがあり、有効なサブスクリプションがないワークスペースには、初回のみ500 AIクレジットが付与されます。試用のための枠であり、毎月無制限に生成できるわけではありません。独自ドメインで公開するには、有料のサイトプランが必要です。無料プランの詳細

人工知能でいう「フレーム」とは何ですか?

この場合の「フレーム」は、製品名のFramerとは別の意味で使われています。本記事で扱うFramer AIはWebサイト制作の製品であり、AI理論におけるフレームについての問いとは区別する必要があります。

Webサイトのデザインに使えるAIツールはありますか?

FramerとWebflowは、どちらもAIによるWebサイト制作の支援機能を公開しています。データやユーザーアカウントを持つアプリを作るなら、Lovableが候補になります。まず必要なものの種類を決め、そのうえで編集から公開までの作業フローを比較しましょう。

Framer開発者は、どのような仕事をする人ですか?

Framer開発者は、FramerでWebサイトを制作したり、機能を拡張したりする人です。仕事には、ビジュアルレイアウト、レスポンシブ対応、CMSの設定、外部連携などが含まれ、要件に応じてカスタムコードも扱います。FramerのAIを使っても、これらの詳細を確認する必要はなくなりません。

Framerからコードをエクスポートできますか?

現在のFramerのヘルプページには、説明の食い違いがあります。HTMLエクスポートのページでは、自己ホスティング可能な書き出しには非対応としていますが、データ移行のページでは、サイトのファイルを別の場所へ移せるとしています。どちらかの記述だけをもとに、正式にサポートされた方法で完全に動作するサイトを書き出せると判断しないでください。制約のセクションでリンクした公式資料と、導入時の確認事項を参照してください。

Framerは今も使われていますか?

Framerには、現在も公開・提供されている製品、現行のドキュメント、顧客事例、テンプレートのマーケットプレイスがあります。本レビューは、確認済みのアクティブユーザー数を示すものではありません。導入時には、編集と公開の作業フローが自分たちの要件を満たすかを確認するほうが役立ちます。

FramerのデザインをHTMLに変換するにはどうすればよいですか?

Framerでサイトを公開することと、独立してホスティングできる形で書き出すことは、別の要件です。現在はベンダーのエクスポートに関する説明が矛盾しているため、本レビューでは、自己ホスティング向けに検証済みの変換手順を提示できません。持ち出せるコードを成果物とする案件でFramerを使う前に、この要件を解決してください。

FramerのデザインをWordPressに移すにはどうすればよいですか?

テーマへ自動変換できると考えず、移行作業として計画しましょう。Framerのデータ移行に関する資料では、プラグインを使ってCMSをCSVまたはJSONへ書き出す方法が説明されています。ただし、見た目のデザインや動作するサイトが、そのままWordPressテーマになることを示すものではありません。移行先でレイアウトと機能を作り直し、確認する必要があります。

FramerのWebサイトをFigmaに書き出せますか?

公式に案内されているのは、FigmaのレイアウトをFramerへ取り込む方向です。Framerは、素材やページをJPG・PNGで書き出す方法も案内しています。ただし、どちらもFramerからFigmaへ編集可能なプロジェクトとして書き出せることを示してはいません。スクリーンショットは、再利用可能なデザインファイルとは異なります。

FigmaからHTMLにエクスポートできますか?

Figma Designでは、静的な素材の書き出しと、動作するWebサイトの作成を分けて考える必要があります。公式に案内されている静的エクスポートは、画像や文書の形式です。FramerのFigmaインポートを使えば、レイアウトをホスティングされたWebサイトにできますが、持ち出せるHTMLを取得できるかという別の問題は解決しません。

AIによる業務フローの監査チェックリストを入手すると、Webサイトに関わるどの作業を自動化し、どの作業には人の承認を残すべきかを整理できます。

公開日
カテゴリー
Design
Ideogram AIレビュー:文字入り画像の使い方・料金と商用利用

Ideogram AIレビュー:文字入り画像の使い方・料金と商用利用

Ideogram AIは文字入り画像の制作に向いているのでしょうか。4.5の参照画像、Precise Edit、Studioのテキスト編集から、無料・有料プラン、直接APIの料金、商用利用と非公開設定まで解説。ポスターや広告の修正に役立つ機能と制約を整理し、採用画像あたりのコストで導入を判断します。2026年10月13日Design
AI デザインツール8選を比較:Figma・Canva・Claude Designの用途と料金【2026年】

AI デザインツール8選を比較:Figma・Canva・Claude Designの用途と料金【2026年】

AI デザインツール8選を、UI制作、ランディングページ、販促素材、画像生成の用途別に比較します。Figma Make、Canva AI、Claude Designなどの料金と無料枠、1人・5人で使う場合の費用を整理。編集のしやすさや開発者への引き継ぎまで確認し、自社の仕事に合うツールを選べます。2026年10月13日Design
画像生成AIは業務で選ぶ:Midjourneyの代替6サービスを比較【2026年】

画像生成AIは業務で選ぶ:Midjourneyの代替6サービスを比較【2026年】

画像生成AIを業務で選ぶために、Midjourneyの代替6サービスを比較。GPT Image、Recraft、Ideogram、Nano Banana、Firefly、FLUXの料金、API課金、商用利用条件を整理し、商品写真の修正、文字の変更、ブランド素材の制作、自動化に合う選び方を解説します。2026年10月12日Design
AI 音声生成にElevenLabsを選ぶべきか?料金・使い方・商用利用をレビュー

AI 音声生成にElevenLabsを選ぶべきか?料金・使い方・商用利用をレビュー

ElevenLabsを業務で使う価値はあるのでしょうか。AI 音声生成の調整機能、音声クローン、吹き替え、AgentsとAPIを評価し、料金・クレジット・商用利用条件を解説します。StarterとCreatorの選び方から、承認済み音声や解決した問い合わせを基準にした費用計算、導入前に確認すべき制限まで整理します。2026年10月12日Design
Figma MCPでClaude Codeと連携:画面の取り込みから実装への反映まで

Figma MCPでClaude Codeと連携:画面の取り込みから実装への反映まで

Figma MCPでClaude Codeと連携し、動作中のUIを編集可能なフレームに取り込む手順を解説。接続設定やプラン・シートの条件、オンボーディングの3画面を使ったレビュー例、承認済みデザインをコードに反映する手順を紹介。キャプチャの制約と、準備・調整・実装レビューの工数で費用対効果を測る考え方も整理します。2026年10月12日Design
Claude Designが無料に:料金・使い方と仕事での活用ポイント

Claude Designが無料に:料金・使い方と仕事での活用ポイント

Claude DesignはFreeプランで無料利用できます。2026年10月10日時点の米ドル料金、Claude共通の利用上限、営業資料やプロトタイプの作り方、書き出し形式を解説。有料のデザインシステムやClaude Codeとの違い、Figmaへの引き継ぎ、単独サイトの閉鎖に向けた移行手順も確認できます。2026年10月10日Design
AI スライド作成ツールBeautiful.aiをレビュー:料金と導入前に知りたい制約

AI スライド作成ツールBeautiful.aiをレビュー:料金と導入前に知りたい制約

AI スライド作成ツールBeautiful.aiを、料金、Smart Slidesの自動レイアウト、AI機能、ブランド管理から検討。GammaやPlus AIとの違い、Team料金の食い違い、PowerPointの読み込みと書き出しの制約まで、定型資料を繰り返し作る業務に合うかを公開情報で解説します。2026年10月10日Design
Nano Banana 料金比較:2.1の値下げ効果とProを選ぶ条件

Nano Banana 料金比較:2.1の値下げ効果とProを選ぶ条件

Nano Banana 2.1の料金をNano Banana 2・Proと比較。1K・2Kの値下げ、月100〜10,000枚の費用、Batchの使いどころを整理します。採用画像1枚あたりのコストからProを残すべき場面を考え、512px廃止や思考設定などAPI移行の確認点、Geminiアプリとの課金の違いも解説します。2026年10月8日Design
ニュースレター

毎週日曜、一通の手紙。動くシステムの話。感想戦ではなく。

週刊。スパムなし。いつでも解除できます。