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

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

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

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

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

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

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

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

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


Framer icon
この記事で紹介 / AIデザイン3.76無料あり日本語◎最低料金 ¥0〜

ステップ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と並ぶ第一候補です。最後に編集部としての率直な評価をまとめます。


Webflow icon
この記事で紹介 / AIノーコード3.95無料あり日本語◎最低料金 ¥0〜

編集部の評価

公開情報とプラン構造から判断した、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で補える、くらいの位置づけで考えるのが現実的です。