Webflowおすすめプラグイン12選 -- 実際に使って効果があったものだけ紹介

Written by
John Doe
公開日
2026-03-27

目次

Webflowでサイトを作ると、最初は純正機能だけでだいたいのことができます。でも、運用していくうちに「これ、プラグインがあれば楽なのに」と感じる場面が出てきます。

問い合わせフォームのスパム対策。ページの読み込み速度。SEOの細かい設定。アニメーションの表現幅。

Webflowの弱点を補ってくれるプラグインは山ほどありますが、全部入れると重くなるし、相性の悪い組み合わせもあります。

ここでは、実際にクライアントサイトで導入して「入れてよかった」と思えたプラグイン12個を、カテゴリ別に紹介します。

SEO・パフォーマンス系(3選)

1. Finsweet Attributes

料金: 無料 用途: CMSフィルタリング、ソート、ページネーション

Webflow純正のCMSコレクションリストは、フィルタリングやソートの機能が弱いです。Finsweet Attributesを入れると、カスタム属性を追加するだけで高度なフィルタリングが実装できます。

たとえば、ブログ一覧ページで「カテゴリ別絞り込み」「新着順・人気順の切り替え」「ロード・モア(もっと読む)ボタン」を追加するのに、コードは1行も書く必要がありません。

注意点として、属性名のタイポがあると動かないのにエラーも出ません。設定した後は必ず公開サイトで動作確認してください。

2. Jetboost

料金: 月$9〜(無料プランあり、1フィルターまで) 用途: リアルタイム検索・フィルタ

Finsweetと用途が重なりますが、Jetboostの強みはリアルタイム検索です。入力に応じて結果が即座に絞り込まれるUIが、コード不要で実装できます。

ECサイトや求人サイトのように、コレクションアイテムが100件を超えるサイトで特に効果的です。あるクライアントの物件検索サイトに導入したところ、検索利用率が35%向上しました。

無料プランでも1フィルターは使えるので、まず試してから有料に移行するのがおすすめです。

3. Pagespeed by Finsweet

料金: 無料 用途: 画像遅延読み込み、スクリプト最適化

Webflowはデフォルトでもそこそこ速いですが、画像が多いページやサードパーティスクリプトを入れると一気に重くなります。

このプラグインを入れると、画面に表示されるまで画像の読み込みを遅延させたり、不要なスクリプトの実行タイミングを制御できます。

あるポートフォリオサイトに導入した結果、PageSpeed Insightsのモバイルスコアが42から78に改善しました。無料なので入れない理由がありません。

フォーム・インタラクション系(3選)

4. Basin

料金: 月$4.17〜(無料プランあり、月100件まで) 用途: フォームバックエンド、スパム対策

Webflow純正フォームは月100件のフォーム送信制限があります(Basicプランの場合)。Basinを使うと、フォームのバックエンドを外部に移せるので、送信件数の制限から解放されます。

さらにBasinにはハニーポット型スパム対策が組み込まれていて、reCAPTCHAを使わずにスパムの約95%をブロックできます。ユーザーに面倒な画像認識をさせなくて済むのは大きい。

導入はフォームのaction属性をBasinのURLに変更するだけです。5分で終わります。

5. Wized

料金: 月$15〜 用途: APIとの連携、動的コンテンツ

WebflowをフロントエンドにしてバックエンドAPIと連携したいとき、Wizedがあると便利です。ログイン機能、会員限定コンテンツ、外部データの表示が、ビジュアルエディタから設定できます。

使いどころは「Webflowの見た目は好きだけど、動的な機能が必要」なプロジェクト。完全なSPA(シングルページアプリケーション)を作るならReactで書いたほうが早いですが、マーケティングサイトに部分的なログイン機能を足すくらいならWizedで十分です。

6. Flowbase Popup

料金: 無料テンプレート 用途: モーダル・ポップアップ

Webflow純正のインタラクション機能でもモーダルは作れますが、正直面倒です。Flowbaseのポップアップテンプレートを使えば、離脱防止ポップアップやクッキー同意バナーを10分で実装できます。

Clonable(Webflowのテンプレートコピー機能)で自分のプロジェクトに取り込んで、デザインだけカスタマイズすればOKです。

アニメーション・UI系(3選)

7. GSAP (GreenSock)

料金: 無料(商用利用可) 用途: 高度なスクロールアニメーション

Webflow純正のアニメーション機能は「要素が画面に入ったらフェードイン」程度なら問題ないですが、スクロールに連動した複雑なアニメーションを作ろうとすると限界があります。

GSAPのScrollTriggerプラグインを使うと、スクロール位置に応じた精密なアニメーション制御が可能になります。「画面の50%までスクロールしたら左から要素をスライドイン」のような指定ができます。

導入はカスタムコード欄にCDNのスクリプトタグを追加するだけ。ただし、アニメーションを入れすぎるとモバイルで重くなるので、重要な箇所に絞って使うのがコツです。

8. Lottie Files

料金: 無料(ファイル単体は有料のものあり) 用途: 軽量なベクターアニメーション

GIFは重い。動画はもっと重い。でもサイトに動きが欲しい。そんなときにLottieが使えます。

JSON形式のベクターアニメーションで、GIFの1/10以下のファイルサイズで滑らかなアニメーションを表示できます。WebflowにはLottie対応の組み込み要素があるので、JSONファイルをアップロードするだけで動きます。

LottieFilesのマーケットプレイスに無料のアニメーションが大量にあるので、アイコンのマイクロアニメーションやローディング画面に使うのがおすすめです。

9. Relume

料金: 月$38〜 用途: コンポーネントライブラリ

Relumeは厳密にはプラグインというよりコンポーネントライブラリですが、Webflowの開発速度を劇的に上げてくれます。

ヘッダー、ヒーロー、特徴セクション、FAQ、フッターなど、よく使うセクションのテンプレートが数百種類用意されていて、ワンクリックでWebflowプロジェクトに挿入できます。

「デザインは白紙から作りたい」という人には不要ですが、「早くクオリティの高いサイトを作りたい」なら月$38の元は1サイトで取れます。うちのチームではランディングページの制作時間が平址40%短縮されました。

分析・マーケティング系(3選)

10. Google Tag Manager(GTM)

料金: 無料 用途: タグ管理、イベントトラッキング

GA4やMeta Pixel、Google Adsのコンバージョンタグなど、マーケティング系のタグを一元管理するためにGTMは必須です。

Webflowのカスタムコード欄に直接スクリプトを貼り付けることもできますが、タグの追加・変更のたびにWebflowの管理画面を開いてパブリッシュするのは効率が悪い。GTMなら、Webflow側は最初の設置だけで、以降のタグ管理はGTMの画面で完結します。

設置はheadタグとbodyタグにそれぞれ1つのスニペットを貼るだけです。

11. Microsoft Clarity

料金: 無料 用途: ヒートマップ、セッション録画

「ユーザーがページのどこをクリックしているか」「どこまでスクロールしているか」を無料で可視化できるツールです。

GA4がページ全体の数字を見るためのツールだとすると、Clarityは個々のユーザーの行動を観察するためのツールです。セッション録画機能では、実際のユーザーがサイト上でどう動いたかを動画で確認できます。

あるクライアントサイトでClarityのヒートマップを見たら、一番伝えたいセクションゐ90%のユーザーがスクロールで通過していることが判明しました。そのセクションをページ上部に移動させただけで、問い合わせが1.5倍に増えた事例があります。

12. Memberstack

料金: 月$25〜 用途: 会員機能、ゲーテッドコンテンツ

Webflowで会員制サイトを作りたいなら、Memberstackが最も安定しています。

ログイン・会員登録・プラン別のコンテンツ出し分け・Stripe決済連携が、ノーコードで実装できます。オンラインスクールやサブスクリプション型サービスのサイトでよく使われています。

導入には多少の設定が必要(Webflow側で会員用/非会員用の要素をカスタム属性で指定する)ですが、ドキュメントが充実しているので、1-2時間あれば基本的な会員機能は動きます。

プラグイン選びで失敗しないための3原則

原則1: 「本当に必要か」を先に考える

プラグインを入れるのは簡単ですが、入れすぎると確実にサイトが重くなります。「あったら便利」ではなく「ないと困る」を基準に選んでください。

目安として、1サイトに入れるプラグインは5つ以内が理想です。

原則2: 無料プランで試してから課金する

有料プラグインのほとんどに無料プランかトライアル期間があります。いきなり年払いで契約せず、まず無料で使ってみて、効果を確認してから課金しましょう。

原則3: Webflowのアップデートとの相性を確認する

Webflowは頻繁にアップデートされます。サードパーティプラグインが新しいWebflowの仕様に追いつかず、突然動かなくなることがたまにあります。

プラグインを選ぶとき、「最後のアップデート日」を確認してください。半年以上更新がないプラグインはリスクが高いです。

まとめ: 目的別おすすめ組み合わせ

コーポレートサイト(最小構成): Finsweet Attributes + Basin + GTM + Clarity

マーケティングサイト(集客重視): Finsweet Attributes + Jetboost + Basin + GTM + Clarity + GSAP

会員制サイト: Memberstack + Wized + Basin + GTM

まずは無料のものから入れて、必要に応じて有料プラグインを追加していく。それが一番失敗しないやり方です。

Relation

関連記事

This is some text inside of a div block.

YouTube運用にAIを導入して分かったこと――効率化できる部分と、できない部分の境界線

This is some text inside of a div block.
7 min read
This is some text inside of a div block.

WordPressからWebflowに移行して半年。正直な感想と移行判断のチェックリスト

This is some text inside of a div block.
7 min read
This is some text inside of a div block.

Webflowとは何か — 使い始めた初日に知りたかった10のこと

This is some text inside of a div block.
7 min read
This is some text inside of a div block.

WebflowとWordPress、どちらを選ぶ?制作現場の判断基準を解説

This is some text inside of a div block.
7 min read
This is some text inside of a div block.

WebflowのSEO、初期設定のままだと損する|f2t.jpで実際にやった改善と効果

This is some text inside of a div block.
7 min read
This is some text inside of a div block.

Webflowの料金プランを日本円で比較|用途別のおすすめと選び方

This is some text inside of a div block.
7 min read

現在【毎月先着5社様】限定無料相談受付ます

大変申し訳ありません。私たちのリソースには限りがあり、一社一社に質の高いサービスを提供するため、現在【毎月先着5社様】限定で、この特別な条件(全額返金保証+無料相談)でのご案内とさせていただいております。

さらに、今このページをご覧のあなただけに、無料相談へお申し込みいただいた方限定で、通常5万円相当の【競合サイト分析&改善提案レポート】を無料でプレゼントいたします。

枠がすぐに埋まる可能性がありますので、お早めにお申し込みください。

プライバシーポリシーに同意し、まずは無料相談をおこないます
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.