FramerとSTUDIOを比較｜デザイナーに人気のノーコード2つの料金・CMS・編集者の増やし方

FramerとSTUDIOの基本的な違い

Framerは、デザインツールとサイトの公開がひとつになったツールです。もともとは画面の試作（プロトタイプ）を作るためのデザインツールとして知られていて、その使い勝手のまま、Webサイトを作って公開できるようになりました。キャンバスに要素を並べ、スクロールやマウスの動きに合わせた動きを付けて、そのままサイトとして公開できます。AIでページのたたき台を作る機能も充実しています。管理画面や公式の情報は、英語が中心です。

STUDIOは、日本生まれのノーコードのWebデザインツールです。箱を並べて組み立てるように画面を作り、余白や文字、動きを細かく調整して、そのまま公開できます。Figmaで作ったデザインを取り込む機能もあります。日本の会社が運営しているため、日本語の情報、使い方の動画、ユーザーのコミュニティが豊富で、日本の企業サイトや採用サイトで多く使われています。

料金の比較（2026年11月時点）

Framerは、編集する人（エディター）を追加すると、1人あたり月2,054円がかかり、見るだけの人（ビューアー）は無料と案内されています。表示されている円の金額は、為替などで変わる可能性があります。税の扱いは、申し込み画面で確認してください。

STUDIOの料金ページには、表示金額が税込か税別かの記載が見当たりませんでした。STUDIOは、招待できるユーザーの数に上限がありません。

「編集する人の数」で料金が変わる

1人で作って1人で更新するなら、FramerのBasic（月1,027円）とSTUDIOのPersonal（月1,190円）は、ほぼ同じくらいの料金です。

違いが大きくなるのは、編集する人が増えたときです。Framerは、編集者を1人追加するごとに月2,054円がかかります。STUDIOは、招待できるユーザーの数に上限がなく、追加の料金もかかりません。社内の3人で更新していくサイトなら、次のような差になります。

Framerの料金ページでは、1人分の編集者がプランに含まれるかどうかなど、細かい条件は案内の内容で確認してください。いずれにしても、複数の人で更新するサイトでは、STUDIOの方が料金の見通しが立てやすいと言えます。

6つの観点でくらべる

1. 作り方

Framerは、デザインツールのキャンバスに、画面の幅ごとの見え方（パソコン・タブレット・スマホ）を並べて作ります。要素を並べる操作は、FigmaなどのUIデザインツールに近く、デザイナーなら直感的に使えます。AIに作りたいサイトを伝えて、ページのたたき台を作ってもらうこともできます。

STUDIOは、箱を並べて組み立てる方式で、画面の幅が変わったときに自然に並び替わるルールを決めながら作ります。デザインツールに慣れていない人でも、日本語の使い方の動画や記事を見ながら覚えやすいのが利点です。

2. 動きとデザインの表現

動きのある表現は、Framerの得意分野です。スクロールに合わせて要素が現れる、マウスに反応して動く、ページの切り替えに動きを付けるなど、さまざまな表現を、コードを書かずに作れます。動きで印象を残したいポートフォリオやサービスサイトには、Framerがよく選ばれています。

STUDIOも、スクロールに合わせた動きや、マウスを乗せたときの変化を付けられ、Lottieのアニメーションにも対応しています。日本語の文字を美しく見せるための、文字の大きさや行の間隔の調整も細かくできます。

3. CMSと記事の運用

Framerは、CMSの「コレクション」で、ブログ、事例、メンバーなどの型を作れます。Basicで2つ、Proで10のコレクションを使えます。STUDIOは、CMSの「モデル」で同じように型を作り、Personalで5つ・記事1,000件、Businessで10・記事5,000件まで使えます。

お知らせとブログだけなら、どちらのツールでも足ります。お知らせ・ブログ・事例・スタッフ・よくある質問など、いくつもの型を使い分けたい場合は、FramerはPro、STUDIOはPersonalから余裕があります。

4. 日本語での使いやすさ

Framerの管理画面や公式の情報は、英語が中心です。世界中のユーザーによる使い方の情報やテンプレートはとても豊富ですが、英語の情報を読みながら進めることになります。また、テンプレートは英語の文字を前提にデザインされていることが多く、日本語の見出しや本文を入れたときに、行の間隔や文字の大きさを整える必要が出ることがあります。

STUDIOは、日本語のヘルプセンター、使い方の動画、ユーザーのコミュニティ、全国でのワークショップなどがそろっています。社内の担当者が日本語の情報を頼りに更新していくなら、STUDIOの方が安心です。

5. 無料プランでできること

Framerの無料プランは、Framerのアドレスで公開でき、転送量は月1GBまでです。STUDIOの無料プランは、50ページまでのサイトを作って公開でき、CMSも使えますが、独自ドメインは使えず、STUDIOのバナーが表示されます。どちらも、本番の前に、実際の文章と写真を入れて試すのに十分な内容です。

6. 公開前の確認とサイトの管理

FramerのProには、公開前に変更を確認するための環境（ステージング）や、変更を分けて試せる仕組み、リダイレクトの設定があります。STUDIOは、変更の履歴がPersonalで30日分、Businessで120日分残り、301リダイレクトの設定もできます。

Framerの「AIのクレジット」とは

Framerの料金表には、プランごとに「AIのクレジット」の数が書かれています。これは、AIにページのたたき台を作ってもらったり、文章を考えてもらったりするときに使う「回数券」のようなものです。無料のプランで月500、Basicで月1,000〜、Proで月3,000〜と案内されていて、上位のクレジットを選ぶこともできます。

AIの機能は、白紙からページを作るときの手助けとしてとても便利です。ただし、AIが作ったたたき台は、そのまま公開するものではなく、自分の言葉と写真に置き換えていく前提で使いましょう。とくに、料金や営業時間、会社の情報などは、AIに任せず、必ず自分で正しい内容を書き込むことが大切です。

STUDIOにも、制作を助ける機能として「Studio.Assistant」などが案内されています。どちらのツールでも、AIは「作業を早くするための道具」と考え、最後の中身は人が確かめるようにしましょう。

ポートフォリオを作るときの構成の例

FramerとSTUDIOがよく使われるのが、デザイナーや写真家、クリエイターのポートフォリオです。どちらのツールでも使える、基本の構成の例を紹介します。

作品の一覧と詳細は、CMSで管理すると、作品を追加するたびにページを作り直す必要がなくなります。Framerならコレクション、STUDIOならモデルを使って、作品の型を作っておきましょう。ポートフォリオを安く作る考え方はポートフォリオサイトを安く作る方法でも紹介しています。

作品の写真は、サムネイルの縦横の比率をそろえると、一覧がきれいに並びます。動きを付ける場合は、作品の一覧が表示されるまでの待ち時間が長くならないよう、動きは短く、控えめにするのがおすすめです。作品を見に来た人が、ストレスなく次々と作品を見られることが、ポートフォリオではいちばん大切です。また、作品ごとに「誰の、どんな課題を、どう解決したか」を2〜3行で添えておくと、依頼を考えている人が自分の仕事に置きかえて想像しやすくなります。

どんな人にどちらが向いているか

デザイン重視のツールを選ぶときの注意点

FramerもSTUDIOも、デザインの自由度が高いぶん、「見た目は素敵なのに、知りたい情報が見つからない」サイトになってしまうこともあります。とくに、お店や会社のサイトでは、デザインと同じくらい、次のことが大切です。

動きのある表現は、うまく使えば印象に残りますが、入れすぎると読みにくさや表示の遅さにつながります。動きは「伝えたいことを助けるもの」に絞るのがコツです。

デザインも更新も任せたいときは

FramerやSTUDIOで作り込んだサイトは魅力的ですが、ツールを覚え、デザインを作り、更新を続けるには時間がかかります。デザインの仕上がりも、公開後の更新も任せたい場合は、制作から管理まで頼めるサービスもあります。CRAFT WEBは、月額3,000円（税別）で、オリジナルのデザインのホームページを作り、更新や管理まで任せられるサービスです。重くならない動きの演出を取り入れることもできます。

まとめ

FramerとSTUDIOは、どちらもデザイン性の高いサイトをノーコードで作れるツールです。動きのあるサイトを、1人や少人数でスピーディに作るならFramer。日本語の情報を頼りに、社内の複数の人で更新していく会社のサイトならSTUDIOが向いています。

料金は、2026年11月時点で、FramerのBasicが年払いで月1,027円、STUDIOのPersonalが年払いで月1,190円と、1人で使うならほぼ同じくらいです。編集する人を増やすと、Framerは1人あたり月2,054円がかかり、STUDIOは追加の料金がかかりません。更新する人数と、日本語での使いやすさを考えてから選んでください。