aaam
Framer・Studio

Framerとは?できること・日本語対応・始め方を2026年の実務目線で整理

Framerとは?できること・日本語対応・始め方を2026年の実務目線で整理

アーム代表の伊藤です。
Framerは、デザインツールの操作感のままホームページの制作から公開・運用までを1つで完結できるノーコードのサイトビルダーです。

操作画面は標準では英語ですが、日本語サイトの制作・公開は問題なくできます(アームの実案件でも日本語サイトを運用中です)。

公開したあと、文言を直したいと思ったその日に自分で直せます。この記事では、日本語で使えるのか、公開後に何が変わるのか、そして自社に向くかどうかを、Framer/Studioでの制作支援を行う実務の目線で整理します。

「Framer」を初めて聞いた人が、先に知ること

  • オランダ発のノーコードWebビルダー
  • デザインの完成がサイトの完成になる
  • 2026年4月にシェーダー機能追加

Framerという名前を初めて聞いた方向けの前提です。すでにご存じの方は飛ばして、次の「日本語で使える?」から読んでください。

Framerとは。自分で公開まで完結できる、コード不要のツール

Framerとは、コードを書かずにホームページのデザイン・公開・運用までを1つで完結できる、オランダ発のノーコードのホームページ作成ツールです。読み方は「フレーマー」です。

Figmaに近い自由なキャンバスでデザインし、公開ボタンを押せばそのままホスティング(※サーバーにサイトを設置して公開する仕組み)までFramerが担ってくれます。

サーバー契約もコーディングも不要で、デザインの完成がほぼそのままサイトの完成になりますこの距離の近さがFramer最大の特徴です。

近年はAI機能の拡張が非常に速く、AIエージェントによるページ生成・編集も組み込まれています。

機能アップデートも活発で、2026年に入ってからもLogo Shaders(4月)、Spectrum・Crystal(5月)、フォームのスパム判定(6月。AI判定はPro以上)と、表現系・運用系の機能が毎月のように追加されています(出典: Framer公式 Updates)。

Figmaや「Framer Motion」と何が違うのか

よく混同される2つを整理しておきます。

名前

正体

との関係

Figma

デザインツール/設計図を作る

Figma案をFramerで公開が王道

Framer Motion

React用アニメーションライブラリ(現Motion)

Framer社開発/本記事のFramerとは別物

Figmaが「設計図を描く場所」だとすると、Framerは「設計図から実際に建てて、住めるようにする場所」です。設計と施工が同じ操作感でつながっているため、Figmaを使えるデザイナーなら学習コストはかなり低く済みます。

Studioとの違い。表現力のFramer、日本語運用のStudio

日本では国産ノーコードツールのStudioとよく比較されます。ざっくり言えば、デザイン表現力とAI機能のFramer、日本語UIと組織運用のStudioという棲み分けです。

詳しくはFramerとStudioはどっちを選ぶ?料金・機能・更新体制で比べる判断基準で判断基準まで整理しているので、選定段階の方はそちらをご覧ください。

Framerは日本語で使える?操作画面は英語のまま

  • 操作画面は英語だが日本語サイト制作可能
  • 日本語化Chrome拡張は個人提供で非公式
  • 学習リソースは英語中心、操作は視覚的

操作画面は標準では英語ですが、日本語のホームページを制作・公開することは問題なくできます。アームの実案件でも、日本語サイトをFramerで制作・運用しています。

英語が不安なら、Chrome拡張でエディタを日本語にできる

Framer公式によるUIの日本語対応はありません。ただし、エディタの表示を日本語に置き換えるChrome拡張「Framer Japanese Localization」が公開されています(2026年9月17日確認)。

Framer公式の拡張ではなく個人提供なので、導入は自己判断で。英語のエディタで手が止まっている段階なら、「どこに何があるか」を掴むまでの時間は短くなります。

本当のつまずきは、ツールでなく情報が英語なこと

公式の学習リソース(Framer Academy)やコミュニティは英語中心なので、調べ物の効率は英語ツールに慣れているかどうかで変わります。

逆に言えば、操作自体はビジュアル中心なので、英語の長文を読む場面は思ったより多くありません。日本語の情報を探すなら、Framer Japan Communityのような有志のコミュニティも立ち上がっています。

Framerにすると、公開した「あと」の動きが変わる

  • 数日の待ちが、その場の差し替えになる
  • カンプと実物のズレが構造的に消える
  • 1ページから試せて、失敗が小さい

Framerを使う価値は、作っている最中より公開したあとに出ます。サイトが「頼まないと直らないもの」から「その日に直せるもの」に変わるからです。

どんな見た目のサイトが作れるのかは、Framer公式のギャラリーを眺めるのが速いです。テイストや業種で見ていくと、表現の幅が具体的につかめます。

見出しを変えたいと思った、その場で直せる

広告を回しながら「この見出しを変えたい」と思ったとき、その場でテキストや画像を差し替えられます。制作会社への依頼も、数日の待ちも挟みません。

アームがFramerで納品したサイトも、この形でお渡ししています。

なぜ、数日待つ構造だと改善が止まるのか

サイトは公開してから文言を調整して育てるものなので、直すたびに数日待つ構造にすると、改善そのものが止まります。

アームがLP制作で何にどれだけ時間を使っているかは、工程ごとに公開しています。

「カンプと実物が違う」という事故が起きなくなる

Figmaで固めた画面を、そのままFramer上で組み立てて公開できます。デザインと実装のあいだに渡しの工程が挟まらないので、「カンプと実物が違う」という古典的な事故が起きません。

アームも、事業の課題整理とFigmaでの情報設計を先に固めてからFramerで実装する流れを基本にしています。

サイト全体でなく、1ページだけで試して確かめる

いきなりサイト全体を作り替える必要はありません。LPや採用ページを1枚だけ公開して、更新の感触を確かめてからサイト全体へ広げてください。この段階的な進め方なら、ツール選定の失敗コストを最小化できます。

ノーコードでの段階的なサイト構築はアームのFramer/Studio制作支援でも詳しく紹介しています。

公開後も毎月機能が増え、伸びしろが残り続ける

Framerは毎月のように機能が増えるツールです。作って終わりではなく、新機能を定期的に確認して取り込む運用ができると、サイトの表現と効率は公開後も伸び続けます。

Framerの始め方。まず1ページだけ公開まで通す4ステップ

  • 登録は無料、クレカ登録も不要
  • 独自ドメインは有料プラン必須
  • まず1ページだけでも公開まで通す

無料アカウントを作る → テンプレートかAIで土台を作る → エディタで編集する → 公開する。この4つです。各ステップの中身は、下の見出しから開いてください。

ステップ1|クレカ登録なしで、無料アカウントを作る

ユーザー登録は無料で、Freeプランのままエディタ機能をひと通り試せます。クレジットカードの登録も不要です。

ステップ2|ゼロから作らず、テンプレートかAIで土台を作る

ゼロから作るより、公式マーケットプレイスのテンプレートを流用するか、AIにたたき台を生成させるのが速いです。構造ができた状態から編集を始められるので、エディタの学習も兼ねられます。

ステップ3|Framerのエディタでテキストと画像を差し替える

テキスト・画像の差し替え、レイアウト調整、レスポンシブ設定(※画面サイズごとの表示調整)を行います。Figma経験者なら、キャンバスの操作感はすぐに馴染みます。

ステップ4|公開ボタンを押せば、その日から自分で直せる

公開ボタンを押せば、Freeプランでもサブドメインで公開できます。独自ドメインを接続するには有料プラン(Basic以上)が必要です(出典: Framer公式 Pricing・2026年9月17日確認)。

おすすめは、いきなり本番サイトを作り込まず、1ページだけでも公開まで一度通すことです。料理と同じで、一皿を最後まで作ってみて初めて段取りの全体像がつかめます。Framerの使い方の細部は、触りながら覚えるのが結局は近道です。

Framerが向くケース・向かないケース、実際の分かれ目

  • 追加人数は1人月2,054円から
  • CMSはBasicで2コレクション上限
  • 向かない場合はStudioが受け皿

正直に、向き不向きの両方を書きます。

向いているケース

向かないケース

デザイン表現がブランド価値に直結するサイト

日本語UI・日本語サポートが公式に必須の組織運用

スタートアップのサービスサイト・LP

更新に関わる人数が多い体制(人数課金が積み上がる)

海外向け・多言語展開を視野に入れたサイト

会員機能・決済など大規模なシステム要件

デザイナーが制作から公開まで一気通貫で担う案件

WordPress級の深いCMSカスタマイズが必要なメディア

「更新に関わる人数が多い」が、実際に問題になる場面

右の列は抽象的に見えるので、この記事で確認した数字に置き換えておきます。

「更新に関わる人数が多い体制」が問題になるのは、料金が人数課金だからです。デザインまで触れる追加エディターは1人あたり月2,054円、CMS更新やオンページ編集に限ったコンテンツエディターは月1,027円で、人が増えたぶんだけ月額の外側が伸びます。

向かない理由は、課金構造と運用体制の2つに分かれる

「日本語UI・日本語サポートが公式に必須の組織運用」が問題になるのは、エディタの日本語化が非公式のChrome拡張に依存しているからです。端末に拡張を入れられない管理をしている会社では、英語のまま運用することになります。

「WordPress級の深いCMSカスタマイズが必要なメディア」が問題になるのは、コレクション数とアイテム数に上限があるからです。Basicで2コレクション・1,000アイテム、Proで10コレクション・2,500アイテムです。

向かないと分かったら、受け皿はある

向かないケースの多くは、Studioや従来型の開発が受け皿になります。ツールありきではなく、要件から逆算して選ぶことをおすすめします。

向き不向きの判断がついたら、次は誰が手を動かすかです。すでに他社が作ったFramerサイトがあって更新が止まっているならFramer・Studioサイトの引き継ぎと運用、これから新しく作るならStudio・Framer実装代行が、それぞれ対応する範囲です。

他社が作ったサイトを引き継げるかどうかの確認点は、こちらのコラムにまとめています。

「デザイナーの間で話題」という理由だけで選ぶと、あとで困る

Framerを検討する理由に、「海外のデザイナーがこぞって使っている」「センスが良いと言われるサイトはだいたいFramer製」という評判を挙げる方もいます。実際、Framer公式のギャラリーやコミュニティは活気があり、トレンドに敏感なデザイナーほど話題にしています。

ただし、それだけを理由に選ぶと、向き不向きの検討が抜け落ちます。「話題になっているツールを使いこなせる自分でありたい」という気持ちと、「事業の更新体制に合っているか」は別の話です。この記事の前半で見たとおり、操作画面は英語のままで、更新に関わる人数が増えるほど月額の外側が伸びます。話題性に惹かれて選んだ結果、実際に更新するのは別の担当者で、その人には向かなかった、という分かれ目が起きるのはここです。

選ぶ基準は、評判ではなく更新体制に置く

選ぶ基準は、周囲の評判ではなく、上の表にある「誰が何人で更新するか」「日本語対応が必須か」です。話題性は導入の後押しにはなっても、選定理由の主役にしないほうが、公開後に困りません。

迷うなら、机上より先に1ページだけ公開してみる

表を見ても判断がつかないなら、机の上で比べ続けるより1ページを公開まで通すほうが速いです。Freeプランならサブドメインで公開まで試せて、費用はかかりません。

合わないと分かるのが早いほど、やり直しの範囲は小さく済みます。

ここまでが、Framerを選ぶかどうかの判断に必要な材料です。ここから先は、実際に何ができるのかを機能ごとに見ていきます。

Framerでできること。実案件で使う5つの特徴

  • アニメーションや3D表現もコード不要
  • AI翻訳は1言語月2,054円で20言語まで
  • 公開はProで300拠点以上のCDN配信

実案件で使っていて価値を感じる機能を5つに絞って紹介します。

表現

コード不要で、スクロール連動や3Dまで作れる

スクロール連動アニメーション、パララックス、3D表現、シェーダーなど、通常はコードが必要な動きのある表現を、エディタ上の設定だけで実装できます

ブランドの世界観を動きで伝えたいサイトで、Framerが選ばれる一番の理由です。

表現

Framer

Studio

スクロール連動アニメーション

設定だけで実装

Scroll Effectで対応(2026年4月〜)

パララックス

標準で対応

Scroll Effectで対応

3D表現

対応

標準機能では非対応

シェーダー(Logo Shaders等)

対応(2026年4月〜)

非対応

コードなしで設定

対応

対応

この表の根拠と時点

Framer公式のUpdates(Logo Shadersは2026年4月)と機能ページ、Studioは公式ヘルプとリリース情報(Scroll Effectは2026年4月)を、2026年8月12日時点で照合しています。

両ツールとも更新が速いので、採用を決める前に最新の公式ページで確認してください。

AI

プロンプトからページを生成し、操作も任せられる

プロンプトからページを生成したり、AIエージェントにエディタ操作を任せたりできます。

各プランにはAI機能用のクレジットが含まれており(Freeは500クレジットの試用枠、Basicで月1,000、Proで月3,000。足りなければ追加購入もできます)、たたき台の生成やラフの量産が速くなります。

生成結果をそのまま公開するというより、初稿を出す速度を上げる道具と捉えるのが実務的です

AI機能

Framer

Studio

プロンプトからページ生成

対応

文章生成など4機能(Editor 5.0)

AIエージェントにエディタ操作を任せる

対応

Studio.Assistant(正式版・有料アドオン)

AI翻訳(多言語化)

アドオンで対応

非対応

画像編集・レスポンシブ補完

一部対応

Editor 5.0で正式提供

利用枠

クレジット制(Pro 月3,000)

有料アドオン(Starterから、14日間無料トライアル)

この表の根拠と時点

Framer公式の料金ページ(AIクレジットの枠)とAI機能ページ、StudioはEditor 5.0とStudio.Assistantの公式発表を、2026年9月17日時点で照合しています。クレジットの枠とStudio.Assistantの料金体系は変わりやすい項目です。

CMS

ブログやお知らせを、管理画面から更新できる

CMS(※記事やお知らせなどのコンテンツを管理・更新する仕組み)が組み込まれており、ブログ・実績・お知らせのような繰り返しコンテンツを管理画面から更新できます。

コレクション数やアイテム数の上限はプランによって異なります。本格的なメディア運用よりも、コーポレートサイトに付随するCMS運用に向いた設計です

CMS

Framer Basic

Framer Pro

コレクション数

2

10

アイテム数

1,000

2,500

ブログ・お知らせの運用

十分

十分

CMSと連動した動的な見せ方

対応

対応

本格的なメディア運用

上限が厳しめ

中規模まで

この表の根拠と時点

Framer公式の料金ページのプラン比較(CMSのコレクション数・アイテム数)を、2026年9月17日時点で照合しています。上限はプラン改定で変わるため、運用規模が決まっている場合は契約前に最新値を確認してください。

多言語

1言語月2,054円で、最大20言語まで翻訳

アドオン(1言語あたり月2,054円、最大20言語)でサイトをAI翻訳し、多言語対応を1つのプロジェクトで完結できます

海外向けサイトをこの手軽さで運用できるのは、国産ツールにはない明確な強みです。

多言語

Framer

Studio

AI翻訳アドオン

対応

非対応

対応言語数

最大20言語

1言語あたりの費用

月2,054円

1プロジェクトで完結

対応

非対応

ページ複製での手動多言語化

可能

可能

この表の根拠と時点

Framer公式のLocalization(AI翻訳アドオン)の料金と対応言語数を、2026年9月17日時点で照合しています。日本からアクセスしたときに表示される円建て額です。Studioは同時点で多言語の公式機能がなく、ページを複製して手動で対応する形になります。

公開

ボタン一つで、世界中のCDNから配信される

公開ボタンひとつでグローバルCDN(※世界各地のサーバーから配信して表示を速くする仕組み)から配信されます。

配信拠点数はプランで異なり、2026年9月17日時点の公式料金ページではFreeとBasicが20拠点、Proが300拠点以上です。

タイトル・ディスクリプション設定やサイトマップなどのSEOの基本にも標準で対応しています。サーバー保守という概念自体がなくなるのは、公開後の運用コストに表れてきます。

公開・配信

Basic

Pro

独自ドメイン接続

対応

対応

CDN配信拠点

20拠点

300拠点以上

帯域幅(月)

50GB

100GB

リダイレクト設定

非対応

対応

Staging/Branching

非対応

対応

この表の根拠と時点

Framer公式の料金ページのプラン比較(CDN拠点・帯域幅・リダイレクト・Staging)を、2026年9月17日時点で照合しています。帯域幅は月間の転送量の上限で、超過時の扱いは公式ドキュメントを確認してください。

よくある誤解「FramerはFigmaの代わりになる」は半分違う

  • UIデザインの試行錯誤はFigmaが向く
  • FramerはFigma案を公開する出口
  • 設計段階からFramer単独は遠回り

これは半分誤解です。実際のFramerは、デザインツールではなく、公開と運用まで担うホームページ作成ツールです。

画面設計やUIデザインの検討そのものはFigmaのほうが向いており、FramerはFigmaで固めたデザインを「動くホームページ」にする出口として使うのが実務的です。

デザインの検討段階からFramerだけで完結させようとすると、かえって遠回りになることが多いです。役割の違いを理解して使い分けることが、両ツールを活かす近道です。

Framerの料金は、先に使い方を決めれば1つに絞れる

  • 独自ドメイン接続はBasic以上必須
  • 複数人編集や多言語は月額に追加
  • 金額より先に人数と用途を決める

プランの一覧を眺めても、自社がどれになるかは決まりません。先に使い方を決めれば、プランは自動的に1つに絞れます。

こんな使い方なら

選ぶプラン

理由になる制約

お試し・公開はFramerのサブドメインで十分

Free

独自ドメインが要らないうちは課金が発生しない

独自ドメイン1サイト・更新は自分ひとり

Basic

独自ドメインの接続はBasic以上

リダイレクト・Staging利用、CMSで記事継続

Pro

リダイレクト・Staging・CMSの上限がProで外れる

更新者が複数・多言語でも出す

プラン+追加課金

編集メンバーとAI翻訳は月額の外側に乗る

この記事では金額を出しません。先に決めるべきは月額ではなく、誰が何人で、何を更新するかだからです。人数と要件が決まっていないうちに月額だけ比べても、あとから追加課金で崩れます。

プランごとの月額、上限値、月額の外側にかかる費用、請求通貨の扱いは、こちらのコラムにまとめています。

Framerのまとめ

Framerは、デザインツールの操作感でホームページの制作から公開・運用までを完結できるノーコードのサイトビルダーです。

デザイン表現の自由度、AI機能、多言語対応が強みで、操作画面が標準では英語である点と人数課金の料金構造が主な注意点です。前者は非公式のChrome拡張で日本語表示にできます。

まずは無料アカウントを作り、この記事のFramerの使い方4ステップで1ページを公開まで通してみてください。触った実感が、どんな比較記事よりも確かな判断材料になります。

よくある質問

Framerとは何ですか?

コードを書かずにホームページのデザイン・公開・運用までを1つで行える、オランダ発のノーコードのホームページ作成ツールです。デザインの自由度とAI機能の進化の速さが特徴で、デザイン性を重視するサイトで採用が広がっています。

Framerの読み方は?

「フレーマー」と読みます。

Framerは無料で使えますか?

使えます。ユーザー登録は無料で、Freeプランでもエディタ機能をひと通り試せ、Framerのサブドメインでの公開も可能です。独自ドメインでの公開はBasicプラン(月1,027円・年払い時)以上が必要です。

Framerは日本語に対応していますか?

操作画面(UI)の公式な日本語対応はありませんが、日本語のホームページの制作・公開は問題なくできます。

エディタの表示については、非公式のChrome拡張「Framer Japanese Localization」を入れると日本語で使えます。公式の日本語UIと日本語サポートが必要な場合は、国産のStudioが比較対象になります。

Framer Motionとは違うものですか?

別物です。Framer Motion(現在は「Motion」)はReact用のアニメーションライブラリで、エンジニアがコードで使う開発ツールです。本記事のFramerは、ノーコードでホームページを作るサイトビルダーを指します。

Framerで作られたサイトの実例はどこで見られますか?

公式のギャラリーで世界中の事例を閲覧できます。テイストや業種で眺めていくと、Framerの表現の幅が具体的につかめます。

Framerはどこの国のツールですか?

オランダ発のノーコードのホームページ作成ツールです。日本語のホームページの制作・公開自体は問題なく行えます。操作画面が英語である点への対処は「Framerは日本語で使える?」でまとめています。

関連するお悩み

関連するコラム