AIでWebサイトを作る方法｜Framerで下書きから公開まで進める

FramerでAIからWebサイトを作る場合、最初のpromptに全ページを任せるより、サイトの目的・対象者・必要なページを決め、section単位で生成と修正を進めます。Framer公式Agentsヘルプも、page全体ではなくsingle sectionから始め、生成後にそのsectionを選択して次のpromptを出す方法を案内しています。これにより、意図しない別sectionの変更を抑え、修正範囲を分けられます。生成された文章・画像・数値は完成した事実ではなく、公開前に実データと一致させる必要があります。

生成前にサイトの完成条件を決める

まずサイトを開いた人が最終的に何をできるかを決めます。「会社を知る」「製品を選ぶ」「問い合わせる」など主要な目的を一つ選び、必要なページとCTAへ落とします。

表は横にスクロールできます

Brief項目	記入する内容	未確定なら
対象者	誰が何を探すか	対象を決めてから生成
主目的	読後の行動	CTAを一つに絞る
Page list	Home、Product、About等	最小構成から始める
実データ	確定済み文章・数値・画像	placeholderと明示
Visual direction	色・密度・参考画像	参考を用意
制約	必須link、機能、公開条件	必須と希望を分離

「AIでサイトを作って」のような曖昧な指示だと、一般的なHero、機能カード、testimonialが自動で並ぶだけで、事業や読者に必要な構造になる保証はありません。実績、顧客の声、料金、効果数値を用意できない場合は、生成AIに作らせず空欄または未掲載にします。

Framer Agentで最初のsectionを作る

1. 既存または新規projectを開き、対象Pageと用途を決める。

2. Properties panelからAgentを開く。

3. sectionの役割、表示内容、要素数、layout、visual directionをpromptへ書く。

4. 必要なら正規のlogoや参考画像、実素材を添付する。

5. 生成結果をCanvasで選択し、意図しない箇所を変えないようcontextを絞る。

6. 仕上がったsectionを見てから次のsectionへ進む。

Framer公式は、Agentがpromptをもとにcanvas内のcontent、layout、interaction、codeを生成・更新できると説明しています。また具体的なcontent、layout、structure、styleを指示し、sectionを選択して変更対象を限定することを勧めています。生成物の品質や公開成果を保証する説明ではありません。

初回promptの設計例（架空のサービス）

「小規模なオンライン講座の案内サイト。最初のHeroだけを作成。対象は初めて講座を選ぶ人。見出しは講座で得られる成果を具体的に、補足文は対象と対象外を明記。CTAは日程を見る。実績数値や受講者コメントは作らない。白背景、本文幅を抑え、mobileではCTAを早めに表示。」

これはpromptの構造例で、Framerで実際に生成した結果ではありません。

画面構成をsection単位で整える

Heroができたら、次に読者の疑問を解くsectionを作ります。会社サイトなら「提供内容→根拠→導入手順→FAQ→問い合わせ」の順が候補ですが、全サイト共通のテンプレートではありません。ページの目的と訪問者の迷いに合わせて、必要なsectionだけを追加します。

各sectionについて次の項目を確認します。

• そのsectionはどんな質問へ答えるか。

• 文章とvisualは同じ情報を二重表示していないか。

• その場面に必要なリンクやCTAがあるか。

• モバイルで縦に長くなりすぎたり、情報が隠れたりしないか。

• 他sectionや別ページと同じ説明を繰り返していないか。

サイト全体の骨組みはFramerのPagesで管理します。Framer公式のページ説明では、Web pagesは公開サイト、CMS pagesはcollectionの内容を共有templateで表示するpage、Design pagesは公開しない作業canvasとして区別されています。見た目のsectionとURL上のpage構造を同一視せず、ページを増やす前に運用とnavigationを考えます。

Placeholderを公開前に一つずつ置き換える

AI生成の文章に仮の社名、価格、顧客数、testimonial、認証、比較優位などが入っていないか検索します。仮素材を残すなら、編集者が判別できるDraft labelを付けます。実データがないなら、そのsection自体を公開しない判断もあります。

表は横にスクロールできます

Generated item	検証方法	公開条件
会社名・住所	正式な会社情報と照合	事業者が確認
価格・プラン	現行pricingと照合	対象条件・確認日を記録
Customer quote	許諾済みの原文と照合	使用許可を確認
Benefit / result	根拠となる計測資料	条件・期間が明確
Image / logo	利用権と正式素材を確認	出所・権限が確認済み

Responsiveと実装機能を確認する

Desktop、Tablet、Phoneの各breakpointで、見出しの折返し、navigation、画像crop、ボタン幅、カード順序を確認します。FramerはWeb pageでresponsive layoutやcustom breakpointsを扱えますが、生成後にあらゆる画面幅で適切になるとは限りません。フォームが必要なら、必須項目、送信後の状態、失敗時の案内、個人情報の利用目的を人が確認します。

公開前テスト

• 主要CTAをクリックして意図したpageやformが開く。

• Navigationの全リンクが正しいpageを指す。

• mobileでボタンが画面外へ切れない。

• 画像が重要な文章や製品名を隠さない。

• CMSを使う場合、空欄や長文データでもlayoutが崩れない。

• 重要なSEO metadata、index設定、redirectを担当者が確認する。

Framerの公開・SEO設定は、プロジェクトと契約構成により異なるため、公開時の現行画面で確認します。生成されたpageが存在することだけで、domain、form、analytics、SEO設定が完成したとは判断しません。

AIものさしの判断

Framer AgentはWebサイトの初稿や局所編集を速める補助です。対象者・主目的・確定データを先に揃え、sectionごとに生成し、変更範囲を選択してから修正します。公開判断はCanvasの見た目ではなく、実データ、機能、responsive、metadata、CTAを人が確かめて行います。

ページ構造を先に決める

Framerでサイトを作るときは、見た目のsectionと公開URLのpageを分けて設計します。複数の読者目的があるなら、Homeからすべてを長い1ページに詰め込まず、About、Service、Contactなど実際のNavigationに必要なページを整理します。更新頻度の高い同型コンテンツならCMS pageを検討しますが、CMSを使う理由がない少数の固定ページを無理にcollectionへ入れる必要はありません。

Page map例（架空）

• Home：対象者、価値、主要CTA。

• Service：提供範囲、条件、根拠。

• Process：相談から完了まで。

• Contact：必要な情報、返信条件、privacy説明。

PageごとにH1、title/descriptionの担当者、リンク元、URLを決めます。FramerはPage名からURL pathを作成し、page設定でURLを管理できます。既存URLを引き継ぐ場合、renameや公開時のpath変更は検索・linkへ影響するため、作成時に既存routeを照合します。

Agent promptに含める構造

簡潔なpromptでも「どこを作るか」「何を含めるか」「何を変えないか」を書きます。

• Target section: HomeのHeroのみ。

• Reader: どんな人か、どの質問を持つか。

• Content: 確定済みheadline、補足、CTA。

• Layout: 幅、column/card数、mobile変更。

• Visual: 色や参考image。

• Guardrail: 架空proof、仮価格、未承認logoを作らない。

• Output: Canvasに配置し、既存navやfooterは触らない。

変更範囲を選択してからAgentへ指示すると、Framer公式が説明するcontext toolの利点を活かせます。生成後はどのlayerやcomponentが変わったか確認し、意図しない変更があればUndoまたは差分修正を行います。

更新運用を考えてから公開する

会社情報や価格、FAQが変わる頻度が高い場合、どのpageが正本を参照するか決めます。運用担当、更新頻度、承認者が決まっていないと、生成したページが古くなります。公開前にownerと更新日を記録し、変更時にどのPageとCMS itemを見直すか一覧化します。