2026年5月22日更新

📌 この記事のポイント

• Framerはオランダ発のデザイナー向けノーコードWebサイトビルダー

• 操作感がFigmaに近く、デザインから公開まで一気通貫できる

• 料金プランは Free / Basic / Pro / Scale の4種、年払いで$0〜$100/月

• AI機能（Wireframer・Workshop）で自然言語から60秒でレスポンシブページ生成

• LP・ポートフォリオ・キャンペーンサイトに真価、ガチWeb案件は要件次第

Framerはデザイナー向けのノーコードWebサイトビルダーで、Figma感覚でデザインから公開・運用までを一気通貫できる注目のツールです。元はコーディング可能なデザイナーのプロトタイピングツールとして始まり、現在はノーコードでサイト構築できるプラットフォームへと進化しました。

駆け出しデザイナー向けに、Framerの3大魅力・料金プラン4種・始め方・向く案件と向かない案件まで、今日から触れる入門ガイドとして体系化しました。

参考動画：今話題のFramerを触ってみよう！はじめの一歩、使い方解説！【前編】（NOT DESIGN SCHOOL公式ウェビナー・おかゆさん登壇・Framerの魅力紹介）／ 【後編】（ゆうごさん登壇・実演形式）

Framerとは｜デザイナー向けノーコードWebサイトビルダー

Framer（フレーマー）とは、オランダ発のノーコードWebサイトビルダーで、直感的な操作でサイトを構築しそのまま公開できるプラットフォームです。元々はコーディングができるデザイナーのためのプロトタイピングツールとして始まり、現在はノーコードで本番サイトを制作・公開できるツールへと進化しました（Framer公式）。

特徴的なのは、「デザインデータの制作」で終わらず「実際に動く本番サイトの公開」まで一気通貫できる点です（Framer Review 2026｜Effloow）。Figmaがデザインデータを作るところで止まるのに対し、Framerはそのまま公開・運用までカバーします。

なぜ今Framerが注目されているか

Framerが2026年に強い注目を集めている理由は、「デザイナーが実装エンジニアを介さずにWebサイトを公開できる」という体験の革新性にあります。

特にAI×ノーコード×デザインの交差点に立つツールとして、駆け出しからベテランまで幅広い層に受け入れられています。Framerが他のノーコードビルダー（Webflow・STUDIO等）と差別化されるのは、操作感がFigmaに非常に近いため、デザイナーの学習コストが特に低いこと。

もち自身も、Figmaを長く使ってきたデザイナーがFramerを触り始めると、初日からそれなりに作れるようになる場面を何度も見てきました。

Framerの3大魅力｜デザイン・インタラクション・コミュニティ

Framerの魅力は、ウェビナー登壇者のおかゆさんが整理した3つの軸で説明できます。

魅力1｜デザインから公開まで一気通貫できる

通常のWebサイト制作では、Figmaなどでデザイン作成→エンジニアがコード実装→公開、という工程に分かれます。一方Framerは、相当凝ったデザインでない限り、Framer上でデザインから公開まで完結できます。

操作感はFigmaに非常に近く、デザインの作業段階で「これがそのままサイトになる」感覚で進められる。エディタの外側にも画像を配置してデザイン検証ができたり、Figma同様のショートカット・共同編集・カーソル表示・スラッシュチャットなどが使えます。

魅力2｜高度なインタラクションがノーコードで実装可能

Framerはエフェクト機能が豊富で、要素を選択して右パネルの「Effects」からアニメーションを設定できます。

特にバリアント間のアニメーション保管は強力で、2駒以上のコンポーネントを作ってその間をFramerが自動補間してくれるため、多くのアニメーションをこれだけで対応できます。

魅力3｜コミュニティが熱い

Framerはテンプレートが2,000個以上用意されており、1から作るよりスピーディに進められます（Framer公式テンプレート）。初心者は文字編集やコピペで組み合わせるだけでもサイトを作れます。

Reactベースのコードコンポーネントも、コミュニティが作ったものをコピーして使える特性があります。「3D Look」「Animated Counter」など、検索すれば多くのコンポーネントが見つかり、フレーマー上にペーストするだけで動作します。

さらにRemix機能でプロジェクトの完全なコピーを他人と共有でき、デザイン・コード・設定がすべてコピーされます。業務協業や、自作デザインの販売にも活用できます。

料金プラン｜Free / Basic / Pro / Scale の違い

Framerの料金プランは2026年5月時点で4種類。年払いで約33%安くなるため、長期利用なら年払いが基本です（Framer公式 Pricing / Framer Pricing 2026｜goodspeed.studio）。

プラン選びの目安

参考：Framer料金プラン解説｜note chiharu では、実務目線でプランごとの選び方が整理されています。

隠れコストに注意

エディター追加費が別でかかるため、複数人で編集する案件では表示価格より実コストが膨らむケースもあります。チーム編集前提なら最初に試算してください。

AI機能｜Wireframer・Workshop で60秒でサイト生成

2026年のFramerはAI機能が標準搭載され、デザイン制作の起点が大きく変わりました（Framer AI機能｜effloow）。

Wireframer

新規プロジェクトで「Generate with AI」を選び、自然言語でサイト要件を記述すると、60秒以内にマルチページのレスポンシブワイヤーフレームが生成されます。

例：「ダークテーマのフリーランスデザイナー向けポートフォリオサイト、プロジェクトギャラリー、Aboutセクション、コンタクトフォーム付き」

→ AIがページ構造・セクション階層・基本コンテンツフローを「最初の40%」まで仕上げてくれる。完成品ではなく、素早い叩き台として強力です。

Workshop

AI支援デザインイテレーション機能で、自然言語でインタラクティブなパーツを生成できます。また生成されたデザインに対して自然言語で修正を加えていけます。

AI Translation

サイト全体（テキスト・CMSエントリ含む）をワンクリックで多言語化。プラグインや外部統合なしで完結します。

On-Page Editing

ブラウザ上でライブページを直接編集できる機能で、マーケティングチームの更新作業が高速化します。

Framerの始め方｜エディタ画面の基本

Framerの基本的なエディタ画面構成を、ウェビナー登壇のゆうごさんが解説した内容で整理します。

最初に覚える基本操作

UIは英語ですが、Figma経験者ならほぼ違和感なく使えます。1つだけFigmaと違うのは、クリックでデフォルト選択されるのが「最も深い子要素」な点。Figmaは親要素を選択しますが、Framerは逆。Cmd + クリックで親要素を選択できます。

フレームとスタックの違い

スタックはFigmaのオートレイアウト相当で、レスポンシブWeb制作では基本的にスタックを使います。

Framerが向く案件・向かない案件

Framerは万能ではありません。向く案件と向かない案件を最初に押さえておくと、判断が楽になります。

Framerが向く案件

Framerが向かない案件

NOT DESIGN SCHOOLでも、Framerは「LP・ポートフォリオ・ブランドサイトの第一選択肢」として教えています。逆に大規模CMS案件はWebflowやWordPressが現実解です。

校長の見解｜もちが大事にしている4視点

NOT DESIGN SCHOOL校長のもちが、Framerを評価する4つの視点を語ります。

視点1｜Framerは「デザイン→公開」の境界を消すツール

これまでデザイナーは「デザインデータを作る人」、エンジニアは「実装する人」と役割が分かれていました。Framerはこの境界を消し、デザイナーが自分でWebサイトを公開できる世界を実現します。

同じようなツールとして「Studio」の存在もありますが、FramerはFigmaのようにツール内でデザイン作成も難なく行える点が強みです。

ただ最近ではFigmaでサイトを公開できる「Figma Sites」という機能も出ました。現状ではFramerの方が機能が豊富である点で優位性があります。

視点2｜Figmaを使えるデザイナーなら学習コストが極めて低い

Framerの操作感はFigmaに極めて近く、ショートカットも共通しているため、Figma経験者なら数日で基本操作を習得できます。

「Figmaの延長線上で公開までできる」感覚なので、学習投資のリターンが大きいツールだと、もちには見えています。

視点3｜クライアントワークで使う場合は料金プランに注意

Framerをクライアントワークで使うときに最初に詰まるのが、「誰がどのプランを契約するか」の設計です。Framerの料金はサイトごとに課金が基本で、独自ドメインを使う時点でBasic以上が必須、CMSや複数ページの本格運用ならProが現実的なラインになります。

ここで実務上の注意点が2つあります。

1つ目は、プランの契約名義はクライアント本人にしてもらうのが安全ということ。デザイナー名義で契約してしまうと、納品後もカード情報・解約権限がデザイナー側に残り、後々のトラブル（支払い停止・サイト消失）に直結します。納品時にオーナー権限ごとクライアントへ移管する前提で見積もりに含めるのが基本です。

2つ目は、エディター追加費が見落とされやすいこと。チームで編集する案件では、編集者1人ごとに追加料金が発生するため、表示価格だけ見て見積もると赤字になります。クライアント側の運用担当者が複数人いる場合は、Pro以上のシート数も最初に試算してください。

料金の話を伝えずに受注すると、後工程で揉める可能性が高いので、提案段階でプランと契約者数を明示するのが、プロのデザイナーには必須だと、もちは考えています。

限界と注意点

限界1｜UIが英語前提

Framerのエディタは基本的に英語UIです。一部日本語化されていますが、新機能リリース時は英語ドキュメントが先行します。

英語アレルギーがある方は、最初の学習コストが余計にかかる可能性があります。とはいえUI英語はシンプルなので、Figmaの英語UIに慣れている方なら問題ないレベルです。

限界2｜CMS機能はWordPressほど深くない

FramerのCMSはブログ・お知らせ・製品リストなど、繰り返しコンテンツを管理できますが、WordPressの柔軟性と比べると以下の制約があります。

• カスタムフィールドの自由度が低い

• プラグインエコシステムが小さい

• 多言語管理はAI Translation頼り（細かい制御不可）

• 検索機能・タグフィルタリング機能が限定的

ブログメイン・大量記事更新・複雑なフィルタリングが必要な案件はWordPressを推奨します。

限界3｜料金プランの隠れコスト

表示価格の他にエディター追加費が別途かかります。

表面の月額だけ見て選ぶと、実コストが想定より大きく膨らむケースがあるので、チーム編集前提なら最初に試算してください。

FAQ

Q1｜FramerとFigma、どちらを学ぶべき？

まず始めはFigmaを学ぶのがおすすめです。なぜならFramerはWebサイトをつくるためのツールであり、Figmaの方が汎用性が高いからです。

「Figma → Framer」の順で学ぶと、Framerの操作感がスムーズに理解できます。

Q2｜FramerとSTUDIOはどう違う？

詳しくはFramer×Figma×Studio比較記事で扱う予定です。

Q3｜Framerで作ったサイトのSEOは大丈夫？

問題ありません。Framerは静的サイト生成＋CDN配信で、Lighthouse スコアも高水準を維持できます。メタタグ・OGP・構造化データの設定もエディタから可能です。

ただし、複雑なSEO要件（多言語SEO・大量URLのリダイレクト制御等）は他ツールが優位な場合があります。

Q4｜AI機能（Wireframer）の生成結果はそのまま使える？

そのまま使うには物足りないことが多いですが、叩き台としては優秀です。AIが「最初の40%」を作ってくれるので、デザイナーは「残りの60%（細部の仕上げ・ブランド固有の調整）」に集中できます。

Q5｜駆け出しデザイナーが最初の1ヶ月でやるべきことは？

1. Framer公式テンプレートを5〜10個複製して中身を見る

2. Wireframerで何個か生成してAI生成結果のクセを掴む

3. 既存LP（自分の好きなブランド等）をFramerで模写する

4. 自分のポートフォリオサイトをFramerで作る（公開練習）

この4ステップで基本操作と公開フローが体感できます。NOT DESIGN SCHOOLのFramer動画講座でも、この流れに沿ってカリキュラムを設計しています。

まとめ｜Framerの4ステップ理解フロー

Framerを駆け出しデザイナーが理解するには、次の4ステップで進めます。

Framerは「LP・ポートフォリオ・ブランドサイトの第一選択肢」として、Figmaを使えるデザイナーに強くおすすめできるツールです。一方で大規模CMS案件には不向きなので、Webflow・WordPress・STUDIOとの使い分けを意識してください。

合わせて読みたい関連記事：

• 配色をセンスではなくロジックで選ぼう｜色相環×形容詞の完全マップ

• 駆け出しデザイナーのためのClaude入門

• Webデザイナーのための文字組み入門ガイド