FramerでWebサイトを作る方法｜AIから公開まで【2026年】

Webサイトを作りたい。

でも、コードを書くところから始めると少し遠く感じる。WordPressを開くと、今度はテーマや設定項目が多い。

そんなとき、Framerは別の入口になります。

画面を見ながら作って、そのまま公開する。

現在のFramerでは、Agentに「こんなページを作りたい」と伝えながら、ページやセクションを作り、あとから会話しながら直していくこともできます。

最初に結論：Framerは「作りながら見た目を決めたい人」と相性がいい

  • LPを作りたい
  • ポートフォリオを作りたい
  • デザインを見ながら調整したい
  • コードをゼロから書きたくない
  • AIを使って初期案を早く作りたい
  • 公開までをひとつのツールで進めたい

一方で、大量の記事を長期間運用するメディアや、WordPress特有のプラグインを使いたい場合は、WordPressの方が扱いやすいこともあります。

WordPressとFramerの違いはこちらで詳しく比較しています。

見た瞬間に分かる、Framer制作の流れ

1. 決める

誰に何を伝えるかを1文にする

2. 作る

Agentで1セクションずつ生成する

3. 直す

文章・余白・スマホ表示を人が判断する

4. 公開

SEOを確認してPublishする

AIで一発完成を狙うより、「生成 → 確認 → 修正 → 公開」を短く回す方がFramerの使い方として自然です。

Framerとは

Framerは、Webページをビジュアルに編集しながら制作・公開できるWeb制作ツールです。

レイアウト、文字、画像、コンポーネント、アニメーションなどをキャンバス上で調整し、そのままWebサイトとして公開できます。

Framer Agentでは、プロンプトからページやセクションを作り、生成後も同じキャンバス上で編集できます。公式ガイドでも、ページ全体を一気に作るより、1セクションずつ生成して調整する方法が案内されています。

STEP 1：最初に「何を作るか」を1文で決める

Framerを開く前に、サイトの目的を1文にします。

例：
「個人でWeb制作をしている人のポートフォリオサイトを作る」

ここが曖昧だと、AIに頼んでもページが広がりすぎます。

  • 誰向けか
  • 何を伝えるか
  • 最後に何をしてほしいか

この3つだけ決めれば、最初の制作には十分です。

STEP 2：Framer Agentで最初のセクションを作る

Framer Agentでは、作りたい内容をプロンプトで伝えて、ページやセクションを生成できます。

最初からサイト全部を一度に作らせるより、1セクションずつ作る方が調整しやすくなります。

プロンプト例

Web制作のポートフォリオサイトのファーストビューを作ってください。
白背景、余白を広く、タイポグラフィを大きく。
見出しは短く、CTAは「制作実績を見る」。

生成されたら、そのセクションを選択し、「見出しを短く」「余白を広く」「CTAを強く」のように続けて修正します。

白いキャンバスに、最初の見出しが置かれる。

まだ完成ではない。でも、ゼロから線を引く必要はなくなった。

ここからは「作る」より「選ぶ」「直す」に時間を使えます。

STEP 3：ページを5つのセクションに分ける

初心者なら、最初の1ページは次の5つで十分です。

  1. ファーストビュー
  2. サービス・特徴
  3. 制作実績
  4. プロフィール・信頼情報
  5. 問い合わせCTA

Framer Agentを使う場合も、一気に全部生成するのではなく、この単位で作っていきます。

STEP 4：文字・余白・幅を自分で調整する

AIが作ったものをそのまま公開すると、文章が長すぎたり、要素が多すぎたりすることがあります。

ここからは人が判断します。

  • 見出しを短くする
  • 説明を削る
  • 同じ役割のボタンを減らす
  • セクション間の余白を調整する
  • スマホで文字が大きすぎないか確認する

AIは最初の案を速く出してくれますが、「何を残すか」を決めるのは制作側です。

STEP 5：スマホ表示を確認する

PCで整ったら、必ずスマホ幅を確認します。

  • 見出しが改行しすぎていないか
  • ボタンが押しやすいか
  • 画像が小さすぎないか
  • 横スクロールが出ていないか
  • 余白が広すぎないか

PCの完成をそのまま縮小するのではなく、スマホでは情報量や余白も含めて調整します。

STEP 6：SEOの基本設定をする

Framerには、公開前に設定できるSEO機能があります。

  • ページタイトル
  • メタディスクリプション
  • URL
  • 検索エンジンへのインデックス設定
  • 見出しなどのセマンティック設定
  • 画像のalt
  • リダイレクト

公開サイトでは sitemap.xml と robots.txt も自動生成されます。CMSページにも個別のメタ情報を設定できます。

STEP 7：Publishを押して公開する

ページができたら、右上のPublishから公開します。

公開するとFramerの framer.app ドメインが発行されます。独自ドメインを持っている場合は、サイト設定から接続できます。

最初はFramerのURLで確認し、問題がなければ独自ドメインへつなぐ流れでも構いません。

Framer＋AIで大事なのは「一発生成」ではない

AIサイト制作というと、1回プロンプトを入れたら完成するイメージがあります。

実際には、最初の生成より、その後の修正の方が重要です。

  • 生成する
  • 削る
  • 並べ替える
  • 文字を直す
  • スマホを調整する
  • 公開する

Framer公式も、選択したセクションへ追加のプロンプトを送り、範囲を限定しながら改善する方法を案内しています。

CodexとFramerは競合ではなく、組み合わせることもできる

FramerではCustom Codeを使って、分析タグ、カスタムCSSやJavaScript、JSON-LDなどを追加できます。

さらにFramerは、Codex in ChatGPTを含む外部AIエージェントとプロジェクトを連携する方法も公式に案内しています。

つまり、Framerで画面を作り、必要になった構造化データやCMS更新、リダイレクトなどを外部エージェントで補う、という使い方もできます。

Codexを中心にWebサイトを作る方法はこちらで解説しています。

Framerが向いていないケース

  • WordPress専用プラグインを使いたい
  • WordPress案件の運用経験を積みたい
  • サーバーやPHPまで自分で管理したい
  • 既存のWordPressサイトをそのまま拡張したい

この場合はWordPressを選んだ方が、目的に直接つながります。

まとめ

FramerでWebサイトを作る流れはシンプルです。

  1. サイトの目的を決める
  2. Agentで最初のセクションを作る
  3. ページ構成を増やす
  4. 自分で文章・余白を調整する
  5. スマホを確認する
  6. SEO設定をする
  7. Publishで公開する

AIによって「最初の白紙」はかなり小さくなりました。

それでも最後に必要なのは、何を伝えるか、何を削るか、どこまで整えれば公開できるかを判断することです。

まずは1ページ。AIに全部任せるのではなく、一緒に作って公開するところまで進めてみてください。

次に読む

参考