
アーム代表の伊藤です。
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の使い方は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 | 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ページを公開まで通すところから






