SaaSくらべ

本記事はアフィリエイトリンクを含みます。記事内で紹介する商品・サービスを購入・契約すると、当サイトに報酬が支払われる場合があります。

【PR】本記事には運営者が提携するアフィリエイトリンクが含まれます。製品情報は公式サイトおよび公式ヘルプをもとに2026年6月時点で整理しました。料金・機能は変更される場合があるため、最終判断前に公式の最新情報を必ずご確認ください。

Framerの始め方｜登録から公開までの7ステップ【2026年版】

Framerが良いらしいと聞いてサイトを開いたが、最初の画面が全部英語で、どこをクリックすれば作り始められるのか分からず手が止まった——Figmaは触ったことがあるのに、いざ「サイトを公開する」となると勝手が違う。そんな最初の5分のつまずきを、この記事で全部つぶしておく。

Framerの始め方は、ひとことで例えるなら「Figmaで新規ファイルを開く感覚に、最後だけ"公開"が付いた流れ」。デザインを置いて、整えて、公開ボタンを押す。間にレスポンシブとドメインの設定が挟まるだけで、骨格はデザインツールそのもの。

登録は無料・カード不要。無料プランのままFramerサブドメインで公開でき、独自ドメインを使うときだけMini（月$5）に上げる。AI機能のFramer Wowを使えば、叩き台は数十秒。全ステップを通しても、最初の1ページは半日あれば公開まで届く。

ここでは運営者マヤがFramer公式ヘルプと制作者の実践手順を2026年6月時点で付き合わせ、「英語UIでも迷わず、最初の1ページを公開するまで」を7ステップで整理しました。

Step 1: 無料アカウントを作成する

Framer公式サイト（framer.com）にアクセスし、「Sign up」からアカウントを作る。Googleアカウント連携が最も速い。登録直後は無料プランで、カード登録は求められない。

ログインするとプロジェクト一覧（ダッシュボード）が表示される。ここが全ての出発点。右上の「New Project」または「Start from template」のどちらかを選ぶ。

Step 2: テンプレートを選ぶか白紙から始める

初めてなら白紙よりテンプレートが安全。完成された構造を見ながら学べる。

選び方の目安

作りたいものおすすめの入口
ポートフォリオPortfolioテンプレート
1ページLPLanding Pageテンプレート
スタートアップ紹介Startup/SaaSテンプレート
自由に試したいBlank（白紙）+ AI生成

無料テンプレートと有料テンプレートがある。学習段階は無料テンプレートで十分。気に入った構造を複製して、中身を自分の内容に差し替えていく。

Step 3: Framer Wow（AI）で叩き台を作る

白紙から始める場合は、AI機能のFramer Wowに頼ると速い。「美容室のランディングページを作って。落ち着いた色味で、メニュー・料金・予約ボタンを入れて」のように日本語でも英語でも指示できる。

数十秒でセクション・見出し・画像配置を含む初稿が生成される。最初から完成形を期待せず「叩き台」として受け取り、ここから手で整えるのが前提。ゼロから配置を悩む時間を丸ごと省ける。

Step 4: レイヤーとコンテンツを編集する

生成またはテンプレートで土台ができたら、テキスト・画像・色を自分の内容に差し替える。左パネルのレイヤーツリーで構造を確認しながら進める。

編集の基本操作

Step 5: ブレークポイントでレスポンシブ対応する

PCで整えたら、スマホ・タブレット表示を必ず確認する。Framerは上部のブレークポイント切り替え（Desktop / Tablet / Phone）で各画面幅の見え方を個別に調整できる。

PCで凝ったレイアウトほど、スマホで崩れやすい。Phone表示に切り替えて、文字サイズ・余白・要素の並びを整える。日本のアクセスはスマホが多数派なので、ここを省くと公開後に後悔する。

Step 6: 独自ドメインとSEOを設定する

無料プランはFramerサブドメイン（○○.framer.website）で公開できる。独自ドメインを使うならMini以上に上げ、サイト設定の「Domains」から接続する。

公開前に設定するSEO項目

  1. 各ページのタイトルタグ（Settings → Page → SEO）
  2. メタディスクリプション
  3. OGP画像（SNSシェア時のサムネイル）
  4. ファビコン（タブに表示される小アイコン）

これらは公開後でも変更できるが、最初に入れておくとSNSでシェアされたときの見栄えが整う。

Step 7: 公開して動作を確認する

右上の「Publish」を押すと公開される。公開後は実際のURLを開き、スマホとPCの両方で表示・リンク・フォーム送信を確認する。

公開後のチェックリスト

Framer初心者がやりがちな3つの失敗

失敗1: スマホ表示を確認せず公開する

PC画面だけ整えて満足し、スマホで見たら文字が重なっていた——よくある失敗。公開前にPhoneブレークポイントを必ず確認する。日本の閲覧者の多くはスマホで開く。

失敗2: コンポーネント化せずに同じ部品を量産する

ボタンやカードを毎回手作りすると、後で色やサイズを変えるとき全部を1つずつ直す羽目になる。繰り返す部品は最初にコンポーネント化しておくと、1箇所の変更が全体に反映される。

失敗3: ECを作ろうとして行き詰まる

Framerにはカート・決済機能がない。物販サイトを想定して作り進めると途中で詰まる。ECを含むなら、最初からWixやSquarespaceを選ぶか、Gumroad等の外部決済を埋め込む設計にしておく。

よくある質問

Q. Framerは初心者でも始められる？

始められます。テンプレートを選び、テキストと画像を差し替えるだけでも公開できますし、Framer Wow（AI）に指示すれば叩き台を自動生成してくれます。ただし管理画面が英語のため、Figma未経験の初心者は最初の数時間だけ用語に慣れる時間が必要です。

Q. Framerの登録に費用はかかる？

登録は無料で、クレジットカードも不要です。無料プランのままFramerサブドメインでサイトを公開できます。独自ドメイン接続や商用利用にはMiniプラン（月$5）以上が必要ですが、操作を試して公開体験するまでは一切費用がかかりません。

Q. Framer Wow（AI）はどう使う？

作りたいサイトの内容をテキストで指示すると、セクション・見出し・画像配置を含む叩き台を自動生成します。生成後はレイヤーを手動で調整して仕上げます。白紙から悩むより、AIに初稿を作らせて手直しする流れの方が公開までが速くなります。

Q. Framerで作ったサイトは日本語でも大丈夫？

公開サイトは日本語で問題なく表示できます。日本語フォントもGoogle Fonts経由で追加可能です。管理画面の操作UIは英語ですが、Figmaに近い構成なので操作自体は画面を見ながら進められます。

Q. 独自ドメインはどう設定する？

Miniプラン以上で、サイト設定のDomains項目から独自ドメインを接続します。ドメイン会社（お名前.com・Cloudflare等）で取得したドメインのDNSレコードを、Framerが指定する値に設定すれば反映されます。反映には数分〜最大48時間かかります。

Q. FramerとWebflow、始めるならどっち？

Figma経験があり速く公開したいならFramer、じっくり技術を積んで大規模CMSも視野に入れるならWebflowです。立ち上がりの速さはFramerが優位ですが、CMSの自由度や教材の体系性ではWebflowに分があります。まず両方の無料プランを触って手に馴染む方を選ぶのが確実です。

まとめ — 半日で1ページ、無料で公開まで届く

Framerの始め方は、テンプレ選び→AIで叩き台→中身を差し替え→レスポンシブ調整→公開、の5幕構成。英語UIに最初だけ身構えるが、Figmaの感覚が地続きなので、触り始めれば手が勝手に動き出す。無料プランのまま、最初の1ページは半日で公開まで届く。

マヤの私見としては、Framerはデザインの初稿を速く形にしたい人に強い。AIで叩き台、アニメーションは標準装備、表示も軽い。逆に「日本語UIで運用したい」「ECや大規模CMSを組む」ならSTUDIOやWebflowを先に見た方がいい。まずは無料で1ページ、週末の数時間で公開体験をしてみてほしい。

【PR】下記リンクは運営者のアフィリエイトリンクを含みます。公式サイトで料金・機能の最新情報を確認の上、自己判断でご登録ください。

【PR】▶ Framer無料プランで最初の1ページを作る

Figma経験者・デザイナー・スタートアップLP向け。カード登録なしで公開まで体験できます。

【PR】▶ Framerの評判・口コミまとめを先に読む

始める前に実際の使用感を確認したい方向け。デザイナーの本音と向き不向きを整理。

合わせて読みたい

この記事について 運営者:マヤ ｜ 情報ソース:Framer公式ヘルプ・制作者の実践手順 ｜ 最終更新日:2026-06-04