Framerの使い方・料金を実例で解説|AI機能・日本語対応まで2026年版

Framerは、文章で指示するだけでWebサイトの骨格が立ち上がる。コードは1行も書かない。

LP、採用ページ、サービスサイト。この手のページを「速く、それなりに見栄えよく」出したい人には、かなり刺さるツールだ。一方で、画面は英語だけ。無料の範囲は思ったより狭い。ここを知らずに始めると、公開直前で「あれ、これ有料か」とつまずく。

この記事では、Framerとは何かという定義から、AIでページを作る具体的な手順、Free/Basic/Pro/Scaleの料金、日本語対応の実態、Webflowなど競合との違いまでを公開情報ベースでまとめた。最終確認は2026年6月28日。料金は公式サイトで再確認している。

この記事のポイント Framerとは、プロンプト(AIへの指示文)からWebページを生成し、ノーコードで公開まで進められるサイトビルダー。無料で試せるが、独自ドメイン公開やCMS運用には月$10〜の有料プランが要る。日本語UIは非対応。「自分の手でデザイン性の高いサイトを仕上げたい人」向けの一択級ツールだ。


Framerとは? 一言でいうと何ができるツールか

ステップ1: アカウントを作成する

Framerとは、AIによるレイアウト生成とビジュアル編集で、コードを書かずにWebサイトを制作・公開できるノーコードサイトビルダーです。

もともとはデザイナー向けのプロトタイピングツールだった。それが本番公開できるサイトビルダーへと進化し、いまはAIでページの初期案を一気に作れるところまで来ている。立ち位置でいえば、Webflowほど作り込みに振り切らず、Wixほど初心者向けに寄せず、その中間。デザインの自由度と手軽さのバランスが持ち味だ。

ノーコード(no-code)とは、プログラミングなしで画面操作だけでアプリやサイトを作る手法のこと。Framerはこのノーコードの代表格として、デザイナーとマーケターの両方から支持されている。

向いているのは、こういう作り方をしたい人だ。

  • コードは書きたくない。でもテンプレ丸出しの見た目は嫌
  • 企画から公開まで、自分(か少人数)で完結させたい
  • LPやサービスサイトを、出したあとも自分で更新し続けたい

逆に、日本語の管理画面が絶対条件の人や、サーバー側のロジックまでコードで握りたい開発者には、最初から別の選択肢のほうがいい。詳しくはFramerのツールページでも基本情報を確認できる。

機能の全体像がわかったところで、AIで実際にどうページを作るのかを手順で見ていく。


ステップ1: アカウントを作成する

ステップ2: AIでページのたたき台を生成する

公式サイトにアクセスし、無料アカウントを作る。GoogleアカウントかメールでOK。

最初から有料契約は不要だ。Freeプランで編集画面そのものを触り、自分の作りたいものと相性が合うかを確かめる。ここで「思ったより直感的」と感じるか「英語がきつい」と感じるか。判断はこの段階で半分つく。

課金は後でいい。まず触る。Framerは無料で編集画面のほぼ全部を体験できるので、相性チェックの段階で財布を出す必要はない。

ステップ2: AIでページのたたき台を生成する

ステップ3: ビジュアル編集でデザインを詰める

ここがFramerのAI機能の本番だ。

新規プロジェクトで「AIでページを作る」を選び、作りたいサイトをプロンプト(AIへの指示文)で書く。たとえば「SaaSのLP。ヒーロー、機能3つ、料金表、CTA。トーンは信頼感のある青系」。すると見出し、セクション、導線まで含んだページの初期案が数十秒で立ち上がる。

白紙から組むより圧倒的に速い。ただし、出てきたものをそのまま公開するのは勧めない。あくまで「たたき台」だ。配色、文言、余白は自分で詰める前提で考えたほうがいい。AIが作るのは7割。残り3割の調整で、ありがちな見た目から脱せる。

プロンプトのコツは1つ。要素を箇条書きで指定することだ。「いい感じのLP」では平凡な案しか出ない。「誰向けの、何のページで、どのセクションが要るか」を具体的に書くほど、たたき台の精度が上がる。

ステップ3: ビジュアル編集でデザインを詰める

ステップ4: SEO・公開設定をして公開する

生成されたレイアウトは、画面上で見たまま編集できる。テキストをクリックして書き換え、画像を差し替え、要素をドラッグで動かす。

ここで触る主な調整はこのあたり。

  • レスポンシブ(スマホ・タブレット表示の最適化)
  • アニメーションとインタラクション(スクロール連動、ホバー効果)
  • ブランドカラー、フォント、余白の統一

レスポンシブの作り込みには少し慣れが要る。PC表示は一発で決まっても、スマホ表示が崩れることはよくある。そこを手で直す工程が、Framer習熟の山場だと考えておくといい。

デザインが固まったら、公開前の設定に進む。

ステップ4: SEO・公開設定をして公開する

公開ボタンの前に、SEO設定を済ませる。ページタイトル、メタディスクリプション(検索結果に出る説明文)、OG画像。このあたりは管理画面から個別に設定できる。

独自ドメインで公開する場合は有料プランが必要になる。Freeのまま公開すると、URLが「○○.framer.website」のような共有ドメインになる。お試しならそれでいいが、事業で使うなら独自ドメイン前提のBasic以上を見込んでおくべきだ。料金の詳細は次の章で整理する。

公開後はCMS(記事や事例を継続追加する仕組み)で運用していける。手順がわかったところで、肝心の料金を見ていこう。


料金プランはいくら? Free/Basic/Pro/Scaleを整理

Framerはfreemium型。無料で始められて、用途が広がるごとに上位プランへ移る設計だ。

ポイントは2つある。1つは「サイトの公開機能はサイトプランで、編集者の人数は別の席(エディター席)で課金される」という二重構造。もう1つは、表示価格が年払い時である点だ。月払いだと割高になる。

以下が2026年6月28日時点で公式サイトから確認できるプラン構造だ(年払い・サイト単位、公式)。

プラン月額(年払い)主な内容想定ユーザー
Free$0Framer共有ドメイン公開、1GB帯域、AIクレジット月1,000までお試し・操作確認
Basic$10独自ドメイン、CMS 2コレクション、50GB帯域個人・フリーランス・小規模
Pro$30CMS 10コレクション、100GB帯域、ステージング・ブランチチーム・代理店・スタートアップ
Scale$100CMS・帯域の上限拡大、高度な分析大規模・高トラフィック
Enterprise個別見積SSO・SCIM・稼働保証など大企業・厳格な要件

つまり、ほとんどの個人はBasic、チーム運用ならPro。ここが現実的な落としどころだ。Scaleは月10万PV級のトラフィックを捌くサイトの選択肢で、多くの人には過剰になる。

無料プランの注意点も押さえておく。Freeは独自ドメインが使えず、AIクレジット(AI機能を使うたびに消費されるポイント。公式では日500・月1,000程度が上限)にも制限がある。ここを「無料で全部いける」と誤解すると、公開直前で詰む。

エディター席は2026年5月28日の改定で、全プラン共通で1席あたり月$20になった。マーケ担当向けに、コンテンツ編集だけできる月$10の「Content Editor」席も新設されている。日本語化や多言語展開のローカライズは1言語あたり月$20の追加課金だ。

なお、過去の解説記事ではMini/Startup/Scaleupといった旧プラン名が出てくることがあるが、これらは2026年3月の改定で整理され、現在はFree/Basic/Pro/Scale/Enterpriseの5段階になっている(プラン構造の整理: studio-goro / note)。古い金額表記を見たら、必ず公式で照合してほしい。

料金がわかったところで、日本人ユーザーが一番気にする「日本語対応」を確認する。


Framerは日本語対応している? UIと多言語サイトの実態

ここは正直に書く。Framerの管理画面は英語のみだ。日本語UIには対応していない。

設定項目やメニュー名を英語で読みながら進める必要がある。とはいえ、専門用語が並ぶというより「Publish」「Settings」「Domain」といった平易な単語が中心なので、英語が極端に苦手でなければ実用上は乗り越えられる。ブラウザの翻訳機能を併用する人も多い。

混同しやすいので分けておく。「管理画面の日本語化」と「作ったサイトを日本語で公開すること」は別の話だ。

  • 管理画面: 英語のみ(日本語UIなし)
  • 作るサイトの言語: 日本語で自由に作れる。日本語フォントも使える
  • 多言語サイト: ローカライズ機能で英語版・他言語版を併設できる(1言語あたり月$20の追加)

だから「日本語のサイトをFramerで作る」こと自体は何の問題もない。引っかかるとすれば操作画面の英語だけ。ここをどう感じるかで評価が割れる。

英語のハードルが許容できるなら、次に競合との違いを見て最終判断したい。


FramerとWebflow・Wix・Canvaは何が違う?

「ノーコードでサイトを作る」だけなら選択肢は他にもある。代表的な3つとFramerをAIデザイン視点で比べる。

ツール強みFramerとの違い
Webflow緻密なデザイン制御・大規模サイト自由度は最高峰だが学習コストも最高峰。AI生成起点はFramerが上
Wix Studioテンプレ豊富・制作と運用の一体感初心者寄り。デザインの尖り方はFramerに分がある
Canva資料・画像デザインの手軽さそもそもWebサイト公開ツールではない。土俵が違う

ざっくり言えば、こうだ。

WebflowはFramerの直接のライバル。作り込みを極めたいプロはWebflow、AIで速く形にしたいならFramer。詳細はFramer対Webflowの比較で深掘りしている。Wix Studioはテンプレ起点でとっつきやすいぶん、独自性は出しにくい。Canvaは画像・スライド向きで、Webサイトの公開・CMS・SEOまでは守備範囲外。比較軸が違う。

AIコード生成系のv0と迷う人もいる。こちらはFramer対v0の比較で整理した。デザインツール文脈での比較はFigmaAI対FramerCanvaAI対Framerも参考になる。

結局のところ、「コードを書かずにデザイン性の高いサイトを自分で仕上げる」という一点では、FramerはWebflowと並ぶ第一候補だ。最後に編集部としての率直な評価をまとめる。


編集部の評価

公開情報とプラン構造から判断した、Framerの率直な評価を項目別に並べる。

  • AIたたき台生成: 圧倒的に速い。白紙から組む時間がほぼゼロになる。ただし出力は7割完成。そのまま公開せず詰める前提なら最強の時短になる。
  • デザインの自由度: ノーコード勢では上位。テンプレ感を脱しやすい。反面、レスポンシブの作り込みは慣れが要る。ここは正直、手間がかかる。
  • 料金の入口: Freeで操作感を全部試せるのは破格。一方、独自ドメイン公開は月$10〜、エディター席は別課金と、本番運用のコストは積み上がりやすい。「無料で全部」は誤解。
  • 日本語対応: UIが英語のみなのは明確なマイナス。日本語サイト自体は問題なく作れるが、画面の英語に抵抗があるなら別ツールが無難。
  • 競合比較: 作り込み重視ならWebflow一択。手軽さ重視ならWix。Framerは「速さ × デザイン性」のバランスで選ぶツールだ。

総合すると、Framerは「個人〜小規模チームが、見栄えのするLPやサービスサイトを自分の手でスピーディに出す」用途で重宝する。まずFreeで触り、独自ドメインが要る段階でBasic、チームで継続更新するならPro以上。この順で検討するのが合理的だと考える。

迷っているなら、まず無料登録して編集画面の相性を確かめるのが先決だ。Framerは触ってから判断できる。比較検討の段階ほど、無料試用の価値が高い。


関連記事

Framer周辺のツール選びで、あわせて読んでおきたい記事をまとめた。


よくある質問(FAQ)

Q. Framerは完全無料で使い続けられますか?

編集や学習は無料で続けられますが、独自ドメインでの本番公開はできません。FreeプランのサイトはFramer共有ドメインでの公開に限られ、AIクレジットや帯域にも上限があります。事業利用なら月$10のBasic以上が前提です(2026年6月28日時点、公式)。

Q. Framerで作ったサイトは他社サービスに引っ越せますか?

Framerは独自のホスティング前提のため、WordPressのようにHTML/CSS一式をそのまま別サーバーへ移すのは想定されていません。乗り換えコストが高い点は契約前に意識しておくべきポイントです。長期運用の出口戦略まで含めて検討してください。

Q. プログラミング知識がまったくなくても使えますか?

基本的な制作はノーコードで完結します。ただし管理画面が英語であること、レスポンシブ調整に慣れが要ることから、完全な初学者は最初の数時間で学習コストを感じやすいです。手を動かしながら覚える前提なら問題ありません。

Q. SEO対策はFramerだけで完結しますか?

ページタイトル、メタディスクリプション、OG画像などの基本設定は管理画面から行えます。技術面の土台は揃っていますが、検索上位は結局コンテンツの質と更新頻度で決まります。ツールが整っていることと上位表示は別だと考えてください。

Q. AI機能だけを目当てに契約する価値はありますか?

AIでのたたき台生成は確かに速く、初期制作の時短効果は大きいです。ただしAIクレジット制で消費上限があり、出力もそのまま使える完成品ではありません。「ゼロを1にする道具」と割り切れるなら価値があります。仕上げまで自動でやってくれる期待は禁物です。

Q. 個人ブログを作るのにFramerは向いていますか?

作れますが、記事を量産する純粋なブログならWordPress等のほうがコスパは良い場面が多いです。Framerが光るのは、デザイン性が問われるLP・採用ページ・サービスサイトです。ブログ機能はCMSで補える、くらいの位置づけで考えるのが現実的です。