🤖

FramerAIを使ってみた — 1時間で「サイトのたたき台」から「公開」まで試した話

べぇ

2025/12/14に公開

Framer

サイト制作

tech

 はじめに前回は Framer 自体の優れている点を書きましたが、今回はその中でも FramerAI の Wireframer を実際に触ってみて、
何がどれだけ作れるのか
現場でのメリット・デメリット
実際に投げた英語プロンプトと出力の例
をまとめます。
FramerAI の機能はいろいろありますが、この記事では 「ページ全体のたたき台を AI に作ってもらう Wireframer」だけ に絞ります。

Figma もコードも書かずに、「1時間でたたき台から公開まで」どこまでいけるのかを試しました。

 FramerAIのWireframerとは？Wireframer は、Framer の中にある「AI にページの骨組みを作ってもらう機能」です。
テキストプロンプトから、レスポンシブなページ構造（Desktop / Tablet / Mobile）を自動生成
ヒーロー、特徴セクション、ギャラリー、問い合わせフォームなど、よくある構成を一気に並べてくれる
生成されたページは通常の Framer プロジェクトとして編集・公開可能
ざっくり言うと、
「レイアウトとセクション構成を AI に丸投げして、

自分はテキストと細部のデザインに集中する」
ための機能です。

 今回やったこと（1時間の流れ）
 1. 新規プロジェクトから Wireframer を起動Framer にログイン

New project を作成
左の Insert パネル → Wireframer を選択
右側に出る説明テキスト部分に、今回の 英語プロンプト を貼り付け

 2. プロンプトを投げてページを自動生成今回は「プロダクトデザイナーのポートフォリオLP」を題材にして、こんなプロンプトを投げました。
Create a clean, responsive portfolio landing page for a product designer.

Include a hero with name and short tagline, a project gallery grid (3 columns desktop, 1 column mobile),

an about section with profile photo and short bio, and a contact form.

Use a minimal modern aesthetic with ample white space and readable typography.

Generate desktop, tablet, and mobile breakpoints.数十秒待つと、
Desktop / Tablet / Phone の 3 つのアートボード
ヒーローセクション
プロジェクトギャラリー
About セクション
Contact フォーム
までを含んだ 「それっぽい LP」 が一気に出力されます。

 3. テキストと画像を自分用に差し替え生成されたテキストやダミー画像はあくまでサンプルなので、
名前・肩書き・自己紹介文を自分のものに書き換え
CTA ボタンの文言を「Get started」→「お問い合わせ」などに変更
プロジェクトサムネイルを、自分の成果物のスクショに差し替え
といった最低限の修正だけを行いました。
この時点で、レイアウトはほぼ完成しているので「中身を入れ替えるだけ」でかなり見られる状態になります。

 4. 余白とタイポグラフィを軽く調整Wireframer の出力はかなり整っていますが、細かいところで気になる点も出てきます。
セクション間の余白を少し広げたい
モバイルで見たときの文字サイズを少し下げたい
日本語フォントに切り替えたい（例: Noto Sans JP）
Framer の右側パネルから、
Stack の Gap や Padding を微調整
Text のフォントファミリー・サイズを変更
する程度で、30分もあれば「公開してよいレベル」まで持っていけました。

 5. そのまま Publish して公開最後に右上の Publish ボタンから、
プレビュー URL を発行 → 自分だけで確認
必要ならカスタムドメインを設定して公開
まで試しました。

LP 1 本だけなら、Framer + Wireframer だけで本当に完結します。

 実際に触って感じたメリット（Wireframer限定）爆速でアイデアを形にできる

白紙の状態からページ構造が出るまでがとにかく早く、「ヒーローをどうしよう…」と悩む時間がゼロになります。
最初からレスポンシブ対応

Desktop / Tablet / Phone が同時に生成されるので、「あとでモバイル対応を…」という負債が減ります。
よくある LP の定番構成を自動で敷いてくれる

ヒーロー → 特徴 → 実績 → CTA → フッター…といった王道の流れが、考えなくても勝手に並ぶのはかなりラクです。
Framer プロジェクトとしてそのまま編集できる

一度生成してしまえば、以降は「普通の Framer として」編集・アニメーション・公開まで一気通貫で扱えます。

 実際に感じたデメリット / 注意点（Wireframer限定）細かな仕上げは自分でやる必要がある

アクセシビリティ（コントラスト、ラベル）、SEO（metaタグ）などは Wireframer だけでは完結しません。
ブランドの完全再現は難しい

ロゴルールやブランド固有のレイアウトを 100% 再現するわけではないので、「たたき台 + 人の目での微調整」は必須です。
生成結果はプロンプト次第

抽象的なプロンプトだと、無難で平凡な LP になりがちです。

後述のように、「目的・セクション・スタイル」を具体的に書くと精度が上がります。

 Wireframer用プロンプト集（そのままコピペ可）ここからは、実際に使った／テストした Wireframer 用の英語プロンプト を用途別に載せておきます。

Framer の Wireframer にそのまま貼って使えます。

 1. ポートフォリオ用（プロダクトデザイナー）Create a clean, responsive portfolio landing page for a product designer.
Include a hero with name and short tagline, a project gallery grid (3 columns desktop, 1 column mobile),
an about section with profile photo and short bio, and a contact form.
Use a minimal modern aesthetic with ample white space and readable typography.
Generate desktop, tablet, and mobile breakpoints.---

 2. 近所のカフェ向けランディングGenerate a friendly, modern landing page for a neighborhood cafe called "Rose & Grain".
Include hero with large photo, opening hours, menu highlights, testimonials, a map section, and a newsletter signup.
Style: warm colors, rounded buttons, mobile-first layout.
Generate desktop, tablet, and mobile breakpoints.---

 3. SaaS プロダクトのマーケティングLPCreate a marketing landing page for a SaaS called "FlowPulse" offering analytics dashboards.
Include hero with product screenshot placeholder, three key features with icons,
pricing overview, customer logos, and a CTA to start a free trial.
Keep the layout conversion-focused and responsive.
Generate desktop, tablet, and mobile breakpoints.---

 Wireframer用プロンプトのコツWireframer にプロンプトを書くときは、次の 4 点を入れておくと失敗しにくくなります。
目的を書く
例: Create a marketing landing page to get free trial signups.
必須セクションを列挙する
例: Include: hero, features, pricing, testimonials, FAQ, contact.
スタイルを言語化する
例: minimal, playful, corporate, warm colors, dark mode など。
レスポンシブ対応を明示する
例: Generate desktop, tablet, and mobile breakpoints.
この 4 つを書くだけでも、いきなり精度が上がるのでおすすめです。

 まとめFramerAI の Wireframer を 1 時間ほど本気で触ってみて感じたのは、
「Figma もコードも書かずに、“見せられるレベルのLPのたたき台” が本当に一瞬で手に入る」
ということでした。
もちろん、ブランド表現や細かな UI の詰め、アクセシビリティ対応などは、人間のデザイン力が必要です。

それでも、0→1 の「真っ白なキャンバス」と格闘する時間が丸ごと消えるのは、かなりインパクトがあります。
アイデア検証用の LP
プロトタイプとしてのプロダクトサイト
社内向けのコンセプト共有用ページ
など、「とりあえず形にしたい」シーンでは、Wireframer だけでも十分戦える と感じました。
この記事のプロンプトをそのままコピペして、自分のプロダクト版 LP を 1 本、ぜひ試してみてください。