aaam
Framer・Studio

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

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

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

操作画面は英語でも日本語サイトは問題なく作れます。公開したあと、文言を直したいと思ったその日に自分で直せます。Framer・StudioのSEO対策を行う実務の目線で整理します。

初めて聞いた人へ

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

コード不要で公開完結

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

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

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

機能アップデートも活発です。2026年もLogo Shaders(4月)など表現系・運用系の機能が毎月のように追加されています(出典: Framer公式 Updates)。

FigmaやMotionとの違い

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

名前

正体

との関係

Figma

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

Figma案をFramerで公開が王道

Framer Motion

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

2024年11月にFramerから独立/本記事のFramerとは別物

Figmaが「設計図を描く場所」だとすると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で納品したサイトも、この形でお渡ししています。

サイトは公開してから文言を調整して育てるもので、直すたびに数日待つ構造にすると、改善そのものが止まります。アームがLP制作で何にどれだけ時間を使っているかは、工程ごとに公開しています。

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

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

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

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

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

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

Framerは毎月のように機能が増えます。定期的に取り込む運用ができれば、サイトの表現と効率は公開後も伸び続けます。

Framerの始め方4手順

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

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

ステップ1│無料で登録

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

ステップ2│ひな形かAI

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

ステップ3│中身を差替

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

ステップ4│公開して自走

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

おすすめは、いきなり本番サイトを作り込まず、1ページだけでも公開まで一度通すことです。Framerの使い方の細部は、触りながら覚えるのが結局は近道です。

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

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

向き不向きの両方を書きます。

向いているケース

向かないケース

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

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

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

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

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

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

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

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

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

料金が人数課金のため、追加エディターは月2,054円、コンテンツエディターは月1,027円。人が増えたぶんだけ月額の外側が伸びます。

日本語UIが必須の組織で問題になるのは、日本語化が非公式のChrome拡張に依存しているからです。WordPress級のCMSが必要なメディアで問題になるのは、Basicで2コレクション・1,000アイテムという上限です。向かないケースの多くは、Studioや従来型の開発が受け皿になります。

向き不向きの判断がついたら次は誰が手を動かすかです。既存サイトの引き継ぎと改善は、Framer・StudioのSEO対策が対応します。

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

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

「海外のデザイナーがこぞって使っている」という評判だけでFramerを選ぶと、向き不向きの検討が抜け落ちます。選ぶ基準は評判ではなく、上の表にある「誰が何人で更新するか」「日本語対応が必須か」です。

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

表を見ても判断がつかないなら、机上で比べるより1ページを公開まで通すほうが速いです。Freeプランならサブドメインで無料で試せ、合わないと分かるのも早く済みます。

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年3月〜)

非対応

AI

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

AIの使い方は2つあります。Framerの中で動くエージェントに頼むか、手元のClaudeやChatGPTからFramerを直接動かすかです。前者はプランに含まれるクレジットで動きます(Free500・Basic月1,000・Pro月3,000)。

後者が2026年10月22日公開のFramer MCPです。エディタを開かずに、ページの作成や文言の差し替えを頼めます。プレビュー中は無料で、公開はこちらが頼んだときだけです。

アームは8月から前身のCLI版を実案件で使っています。生成結果をそのまま出すより、初稿を出す速度を上げるために使うのが実務的です。

AI機能

Framer

Studio

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

対応

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

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

対応

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

手元のAIツール(Claude等)から操作

Framer MCP(2026年10月〜)

別プロダクトのStudio.Dropのみ

AI翻訳(多言語化)

アドオンで対応

非対応

利用枠

クレジット制(Pro月3,000)・MCPはプレビュー中無料

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

Studioは本体に外部AIツールの接続が無く、別プロダクトのStudio.DropにMCP接続があります。

CMS

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

CMS(※コンテンツを管理・更新する仕組み)が組み込まれ、ブログ・実績・お知らせを管理画面から更新できます。

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

CMS

Framer Basic

Framer Pro

コレクション数

2

10

アイテム数

1,000

2,500

ブログ・お知らせの運用

十分

十分

本格的なメディア運用

上限が厳しめ

中規模まで

多言語

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

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

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

多言語

Framer

Studio

AI翻訳アドオン

対応

非対応

対応言語数

最大20言語

機能なし

1言語あたりの費用

月2,054円

なし

1プロジェクトで完結

対応

非対応

公開

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

公開ボタンひとつでグローバルCDN(※世界各地のサーバーから配信して表示を速くする仕組み)から配信されます。配信拠点数はプランで異なります(Basic20拠点・Pro300拠点以上)。

サーバー保守という概念自体がなくなるのは、公開後の運用コストに表れてきます。

公開・配信

Basic

Pro

独自ドメイン接続

対応

対応

CDN配信拠点

20拠点

300拠点以上

リダイレクト設定

非対応

対応

Staging/Branching

非対応

対応

各表は2026年8月12日〜10月27日時点の公式情報で照合しています。契約前に最新のページで確認してください。

よくある誤解「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とは何ですか?

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

Framerの読み方は?

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

Framerは無料で使えますか?

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

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

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

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

FramerはClaudeやChatGPTから操作できますか?

できます。2026年10月に公開されたFramer MCPで、Claude・ChatGPT・Cursorなど手元のAIツールからページの作成やCMSの更新を頼めます。プレビュー期間中は無料で、公開はこちらが頼んだときだけです。

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

別物です。Framer Motion(現在は「Motion」)は、2024年11月にFramerから独立したアニメーションライブラリです。React・JavaScript・Vueで使う、エンジニア向けの開発ツールです。本記事のFramerは、ノーコードのサイトビルダーを指します。

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

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

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

オランダ発のノーコードのホームページ作成ツールです。日本語のホームページの制作・公開自体は問題なく行えます。

Framerとは制作から公開・運用まで完結するノーコードツール

  • 制作から公開・運用まで1つで完結するノーコードのサイトビルダー
  • 操作画面は英語でも日本語サイトは作れる/注意点は人数課金
  • 始め方は無料アカウントで1ページを公開まで通すところから

関連するお悩み

関連するコラム