Framerとは？AIでサイトを作る機能・料金・公開までの使い方を解説
FramerのAI Agent、編集キャンバス、CMS、料金を整理。小さなサイトを作り、スマートフォンでの表示や公開先を確認する手順を紹介します。
情報確認日：2026年11月5日。公式ページ本文を確認した原稿です。Framerでのサイト制作、契約、公開は実行していません。料金は米ドル、年払いの表示を参照しています。
リード
サービス紹介やポートフォリオを作りたいけれど、画面の調整から公開まで別々の仕組みを覚えるのは大変。Framerは、AIへの指示と視覚的な編集を使い、Webサイトの制作から公開までを扱うサービスです。公式サイトでは、Agentが作ったものを編集可能なキャンバスで調整する流れを紹介しています。Framer公式
大切なのは、最初の見た目が整うことと、訪問者が使えるサイトになることを分けて考えることです。この記事では、小さなサイトを題材に、機能と料金、内容を整えて公開前後に確認する手順を解説します。
Framerとは
Framerは、ページのデザイン、繰り返し使う部品、CMSの内容、画面幅ごとの表示、公開設定を扱うWebサイト制作サービスです。公式の画面ガイドは、Canvas、CMS、Localization、Analytics、Settingsという主な領域を説明しています。画面構成のガイド
Canvasで見た目を作り、CMSで記事などを整理し、Settingsでサイト全体の設定を確認する、と役割を分けて理解すると取り組みやすくなります。最初からすべてを使う必要はありません。
編集部としては、一ページの紹介サイトなど、目的が明確な題材から始めることを勧めます。「誰に何を伝え、最後に何をしてもらうか」を決めておくと、見た目を選ぶ基準と、動作を確認する基準をそろえられます。
たとえば制作実績を紹介するサイトなら、作品、担当範囲、相談の入口が必要です。大きな画像があるだけでは、依頼したい人が判断できないかもしれません。表現の自由さを、情報の分かりやすさへ結び付けて考えましょう。
できること（主な機能）
AI Agentに構成やデザインを相談する
公式の入門レッスンでは、空のプロジェクトからAgentへ必要なサイトを説明し、ページやナビゲーション、CMS、部品、画面幅ごとの構成を作る流れを案内しています。生成後はキャンバスで内容を確認できます。最初のサイトを作る
最初の指示には、事業や活動の内容、必要なページ、使う写真、見せたい雰囲気を含めます。編集部の例なら「相談を検討する人が、実績と対応範囲を読めるサイト」と目的を先に書き、必要な項目を続けます。
AIが作った文章を、そのまま自分の実績として使わないことも重要です。架空の顧客名、数値、受賞歴などがあれば、確認できる情報へ置き換えるか削除します。生成されたレイアウトを使う場合でも、掲載する事実は別に確認しましょう。
キャンバスで文字や余白を調整する
Framerの公式ガイドでは、ページ、レイヤー、Assetsを確認し、選択した要素を編集する構成が説明されています。文字や色、余白などの小さな変更は、キャンバスで直接調整する使い分けが紹介されています。インターフェース
編集部としては、最初に文字の役割をそろえることを勧めます。ページの主題、各節の見出し、説明文、注記の違いが分かれば、読む順番を作りやすくなります。装飾を追加する前に、重要な内容が先に目に入るかを確認しましょう。
同じ役割のボタンや見出しがページごとに違っていないかも見ます。統一したほうがよい部分と、内容に応じて変える部分を整理すると、後の修正も考えやすくなります。
CMSで同じ形式の情報を管理する
CMSは、記事、事例、チーム紹介など、共通の項目を持つ情報をまとめる機能です。公式レッスンでは、CollectionにItemを入れ、タイトルや画像などのFieldを定め、一つのレイアウトへつなぐ仕組みを説明しています。CMSの基本
たとえば事例なら、案件名、画像、説明、担当範囲、公開日などが候補になります。編集部の提案として、最初に実際の数件を並べ、毎回必要な項目と、案件によってない項目を分けると設計しやすくなります。
CMSを使うかは、情報の数だけで決めないようにします。同じ形式の情報を継続して追加するなら検討しやすい一方、一度だけ載せる短い説明は通常のページで足りる場合もあります。更新する担当者の作業まで想像して選びましょう。
画面幅に合わせた表示を確認する
プレビューでは画面幅を変えて、レイアウトや動作を確認できます。特定のブレークポイントを選んでから表示する方法もあります。公式ヘルプは、設定から追加したカスタムコードはプレビューに出ず、公開サイトで確認する必要があると説明しています。プレビューの使い方
編集部が勧める確認は、用意されたサイズだけを見ることではありません。幅を少しずつ変え、見出しが不自然に改行されないか、画像と文章が重ならないかを見ます。使う人の端末は一つの幅に固定されていないためです。
スマートフォンでは、文字の小ささだけでなく順番も確認します。横に並べた内容が縦になったとき、説明と画像の関係が分かるか、ボタンへ進む前に必要な情報を読めるかを見ましょう。
料金プラン
確認した料金ページはYearly billingの表示でした。Basicは月額換算10ドル、Proは30ドル、Enterpriseは個別見積もりです。無料プランもあり、Framerのドメインで試せます。公式料金
プラン | 年払い時の月額換算 | 確認した主な位置付け |
|---|---|---|
Free | 0ドル | Framerドメインと試用用AIクレジット |
Basic | 10ドル | 独自ドメイン、2 CMS Collectionsなど |
Pro | 30ドル | 10 CMS Collections、ステージングなど |
Enterprise | 個別見積もり | 組織向けの管理と個別条件 |
料金ページでは、追加の編集者、コンテンツ編集者、多言語化や追加機能にも別の料金が示されています。サイトの基本料金だけを見て総額とせず、誰が編集するか、何を追加するかも合わせて考えます。
無料枠のAIクレジットは、確認時に「試すための500」と案内されています。毎月同じ量が付くとは読み替えず、利用画面で残量と補充条件を確認してください。Agentの利用枠と、サイトのページ数や配信量も別の項目です。
編集部としては、最初に必要なページとCMSの種類を数えることを勧めます。記事と事例を別々に管理したいのか、単に一つの一覧でよいのかによって、求める構成が変わります。将来の最大規模を想像するだけでなく、今の公開内容と更新予定から選びましょう。
独自ドメインについては、接続できることとドメインの取得・更新費用を区別します。公式には年払いでのドメイン特典もありますが、対象や取得先の条件があるため、すべての希望ドメインが無料になるとは考えないようにします。独自ドメインの接続
制作を他の人へ頼む場合は、公開後に誰が文章や画像を変えるのかも決めます。閲覧だけの人と、内容を編集する人、サイト全体を管理する人を整理しておくと、必要な席や権限を比較しやすくなります。
使い方の手順：小さな紹介サイトを作る
ここでは公式の入門レッスンを参考に、制作から公開後の確認までを紹介します。記事制作のためにFramer上でサイトを作ったり、外部へ公開したりしたものではありません。
1. 掲載する情報を先に整理する
まず、見出し、説明、実績、連絡方法など、必要な内容を書き出します。完成した文章がなくても、確定情報と未確定情報は分けておきましょう。写真やロゴも、使ってよいものを用意します。
編集部の一ページ構成例は「何を提供するか」「対応する内容」「実績」「進め方」「相談先」です。これは万能の型ではなく、訪問者が判断する順番を考えるための例です。自分のサイトで不要な節は省き、必要な説明へ置き換えます。
目的を一つ決めると、ボタンの文言も選びやすくなります。資料を読んでもらうのか、相談内容を送ってもらうのかによって、掲載する説明と遷移先が変わるためです。
2. 空のプロジェクトから全体を作る
公式入門では、空のFramerプロジェクトでAgentパネルを開き、必要な内容を伝えます。作られたページやCMS、部品を確認し、追加の指示で調整します。制作開始の公式手順
最初の結果では、色や装飾だけでなく、必要なページがあるか、説明の順番が合っているかを確認しましょう。足りない内容を追加する場合も、「もっとよく」より、どの読者の疑問に答えたいかを伝えるほうが判断しやすくなります。
3. 内容を正しい情報に置き換える
生成されたテキストや画像を読み、事実に合う内容へ置き換えます。編集部としては、料金、所在地、実績の数字、問い合わせ先など、間違いが行動に影響する項目を先に確認することを勧めます。
続いて見出しと本文の関係を見ます。見出しが大きな約束をしているのに、本文で根拠を示せない場合は表現を直します。サイトを初めて見る人が、何を頼めるのか判断できる内容に整えましょう。
写真にも役割を持たせます。雰囲気を伝える写真なのか、実績を示す画像なのかを分け、説明が必要ならキャプションを添えます。美しい素材があるだけで、サービスの内容まで伝わるとは限りません。
4. 繰り返す情報と更新方法を整える
公式のサイト構築ガイドでは、文字・色のスタイルや、ボタンなどの再利用する部品を整える方法を紹介しています。ページを節に分け、内容に応じて調整する構成も案内されています。更新しやすいサイト設計
実績を追加する予定なら、CMSの項目を考えます。編集部なら、最初に短い説明の事例と、長い説明の事例を入れた場合を比べます。理想的な文字量だけで整えず、実際に起こりそうな長さでも読めるかを確認しましょう。
更新担当が迷いそうな項目には、制作メモで入力内容を説明します。完成時の見た目だけでなく、次に一件追加するときも同じ品質で整えられるかを考えると、運用しやすいサイトに近づきます。
5. プレビューで読者の操作をたどる
公式ヘルプでは、Playボタンまたはショートカットでプレビューを開きます。画面幅を変えながら、リンクや表示を確認できます。プレビュー
確認するときは、上から眺めるだけでなく、訪問者の目的を一つ決めて操作します。たとえば「実績を見て相談先へ進む」という順番で、必要なリンクが分かるか、ボタンが適切な場所へ進むかを見ます。
スマートフォン向けの表示では、見出しの改行、画像の切れ方、横にはみ出す要素、ボタンの間隔を確かめます。狭い画面で読みづらい場合、単に文字を小さくするのではなく、内容の順序や余白を調整することを勧めます。
6. タイトルと共有時の情報を設定する
Framerは、サイト全体とページ別のタイトル、説明文、共有用画像を設定する方法を案内しています。ページ固有の設定で全体の初期値を上書きできます。タイトルと説明文
画面の中に大きな見出しがあることと、ブラウザーや共有先で正しいタイトルが見えることは別です。仮のプロジェクト名が残っていないか、ページの内容と説明文が合っているかを確認しましょう。
7. 公開先を決め、配信されたページを確認する
公式手順では、Publishでサイトを公開し、表示されたURLへアクセスします。更新時にはUpdateを使います。Pro以上でステージングを使う場合は、試験環境と本番の公開を分ける構成です。公開の説明／公開URLとドメイン
公開する際は、最終的なURLでページを開き直して確認します。トップページだけでなく、各ページ、画像、主要リンクも見ます。設定から追加したコードなど、プレビューで確認できない要素がある場合は、公開環境での動作も確かめましょう。
編集部としては、公開した日、確認したURL、残っている修正をメモに残すことを勧めます。制作画面で直したことと、本番に反映されたことを区別しておくと、更新時の認識違いを減らせます。
向いている人・向かない人
編集部の判断では、画面を見ながらデザインを調整し、紹介サイトや継続更新するコンテンツを作りたい人に向く候補です。AIで土台を作り、自分で情報と見た目を確認できる人は、制作の流れを試しやすいでしょう。
一方、生成後の文章やリンクを確認せず、そのまま公開したい人には、その運用を勧めません。独自の業務処理が中心になるサイトでは、必要な連携や機能を具体的に挙げてから、対応方法を確認する必要があります。
公開後の更新を誰も担当できない場合も、導入前に運用を整理しましょう。作ることだけでなく、営業時間や価格などの変更を継続して反映できるかが、サイトの使いやすさに関わります。
似たツールとの違い
Webflowも、視覚的なキャンバス、CMS、公開や共同作業の機能を提供しています。公式サイトでは、デザインとコンテンツ管理、分析などを一つの環境で扱う構成を紹介しています。Webflow公式
Framerと比較するなら、同じページを題材に、最初の構成づくり、文章の更新、スマートフォン表示の調整、公開までを試す方法を勧めます。どちらが簡単かを一律に決めるより、更新する担当者が扱えるかと、必要な機能に合うかで判断しましょう。
注意点
プレビューと公開サイトでは、確認できるものが異なる場合があります。特にカスタムコードの反映は公式ヘルプが区別しているため、プレビューが整っただけで公開後の動作まで確認済みとは考えないようにします。
料金も、サイトのプラン、追加編集者、AI利用枠、追加機能を分けて見ます。現在の料金表にない旧プラン名や、過去の紹介記事の金額をそのまま利用しないことが大切です。
デザインの評価では、動きの多さより、必要な内容にたどり着けるかを確認しましょう。説明や操作の邪魔になる演出があれば、目的に合わせて調整することを勧めます。
まとめ
Framerは、AI Agentと編集キャンバスを使い、Webサイトの制作、CMSによる更新、公開を進めるサービスです。小さなサイトで、内容を整える作業と、複数の画面幅で確認する作業を体験すると判断しやすくなります。
公開前のプレビューと公開URLの確認を分け、更新担当や必要な料金も合わせて考えましょう。完成の基準を「訪問者が必要な情報を読んで行動できること」に置くのが、編集部の勧める使い方です。
