- Webflowとは
- Webflowとは、コードを書かずにWebサイトを制作できるノーコードのWeb制作ツールです。デザインからサイトの公開まで一貫して行え、HTML・CSS・JavaScriptのコード出力にも対応しています。
こんにちは、Webflow専門家のマサトです。
Webflow（ウェブフロー）とは、コードを書かずにデザインからサイト公開まで一貫して行える、ノーコードのWeb制作ツールです。この記事では「Webflowとは？」に焦点を当て、できること・使い勝手・STUDIOやAIで作る場合との違い・年間の料金・習得にかかる時間・外注した場合の費用まで、Webflow専門で6年目の僕が、実際に使ってきた立場で書きます。
Webflowは一定まで無料で使えます。まずは触ってみたいという方は公式ページへどうぞ→公式HP
Webflowとは？主な特徴や機能について
Webflowとは？
Webflowは、コードを書かずにWebサイトを制作することができるノーコードのWeb制作ツールです。クリエイティブなデザインや効率的な開発のための多彩な機能を持ち、使いやすいインターフェースで簡単に操作できることが特徴です。HTMLやCSSの知識がなくても、デザインからサイトの公開まで一貫して行うことができ、管理・更新も簡単なことから多くの時間を節約できます。
Webflowの主な特徴や機能
Webflowにはデザインから開発までWebサイト制作に必要な機能が一通り揃っています。よく使う機能と、6年使っている僕の実感です。
| 機能 | できること | 僕のひとこと |
|---|---|---|
| シンプルなUI | 知識がなくてもマウス操作で直感的に作れる。従来のWeb制作の10分の1の速さで構築できる | まずはWebflow大学（日本語解説版）から |
| レスポンシブ対応 | PC・スマホなど端末ごとの表示を自動で作ってくれる | ここで時間がかなり浮く |
| 100%カスタムデザイン | 縛りなし。足りない機能はWebflow APPやカスタムコードで補える | 唯一PHPだけ使えない |
| ワイヤーフレームから制作 | プロトタイプからそのまま作り込める | 「デザイン完成→コーディング」の工程を短縮できる |
| 外部API連携 | 自動返信メール・Instagram自動反映・アクセス解析など | 自動返信は今はWebflow単体で対応可 |
| アニメーション | クリック操作だけで作れる | Appleのようなサイトも作れる。本社の推し機能 |
| コード出力 | HTML/CSS/JSをZipで書き出せる | 「手書きより良い」と言われる品質。万が一のリスクヘッジにもなる |
| 大規模サイトの管理 | CMSで最大10,000ページ。URL階層やデザインの出し分けも楽 | 人件費・外注費の削減につながる |
| 無料テンプレート | 「Made in Webflow」に著作権フリーのテンプレートがある | 素人作もあるので、面倒なら外注も手 |
Webflowには以上のような機能があり、Web制作をより高速にできる便利ツールと認識できます。また世界中に多くのユーザーがおり、業績、サポート共に安定しています。
Webflowの使い勝手｜6年使った本音
正直に言うと、使い勝手には気になる点もあります。制作画面が重くて1回1回開くのが面倒だったり、文章を書いているとたまにバグったり、保存されていない時があったりします。多少のデメリットではあります。
それでも、デザインを見たまま編集できて、ずっと放置していてもサイトが崩れない。この2つがあるので、サイトを本格的に運用していくツールとしておすすめしています。
しかしなぜWebflowは世界で愛されているのでしょうか？上記で挙げた機能は他のノーコードや、WordPressでもカバーしていると言えます。そのため次のセクションではなぜWebflowを選ぶのか。メリット・デメリットを紹介していきます。
Webflowのメリット・デメリット
今まで多くのWebサイトをWebflowへ移行してきました。クライアントは口を揃えて「他のノーコードではできないことがWebflowではできる。」といいます。では具体的になにが違うのか。WordPressやWIX・STUDIOなどの有名ツールと比べた、Webflowのメリットとデメリットです。WordPressとの比較だけを深掘りした記事はWordPressで新規サイトを作るのをもうおすすめしない理由にあります。
Webflowのメリット｜他のツールより優れている点
Webflowは他のノーコードと比べても圧倒的に自由度が高いツールです。HTML、CSS、JSのコードを基準に構築されているため、やりたいことはほぼ全て対応でき、手書きコードで一部対応していない機能も実施可能です。CMSのカスタム機能が強く、オウンドメディアごとにオリジナルの更新管理システムを作成できます。WordPressのようにプラグインの兼ね合いで定期メンテが必要になることもなく、システム側の問題で管理に無駄な時間がかかることもセキュリティーに悩むこともありません。
またWebflowはHTML、CSS、Javascriptのコードを出力することができます。これは他のノーコードには無い強みです。コード出力のおかげで、将来Webflow以外のツールに変更する事ができるためリスクヘッジにもなります。これらはWebflow最大のメリットだと言えるでしょう。
Webflowのデメリット｜他のツールより劣っている点
日本製のSTUDIOではコストが安く、日本語解説があります。その点ではWebflowは日本市場で負けていると言えます（両者の違いはWebflow vs STUDIO 比較で詳しく書いています）。またWebflowはノーコードの中でも習得レベルが高いと言われています。APPLEのようなサイトが作れるのは事実ですが、その分難しくWebflow専門の知識が必要です。サーバーはWebflowが用意しているものを使うことになり、そこに自由度はないと言えます。
さらに日本語のサポートがないことも相まって日本でWebflowを使用できる人はかなり少ないです。しかし僕はこのデメリットを逆手にとってWebflowへのコミットを決めました。
Webflow専門家の僕がWebflowを使う理由
僕はWebflow専門で2024年で4年目になります（2026年追記: 現在は6年目です）。時には違うツールも試しましたが結局「Webflowの方がいいな。」と結論つけました。実際にWebflowを使っているからこそわかるWebflowを選ぶ理由を紹介していきます。
デザインがツールに縛られない
僕がWebflowを選んだ理由の一つにWebflowのテンプレートのレベルが高いことが挙げられます。僕が使用を始めた段階で既にWebflowを使用してAPPLEのサイトを模倣したサイトが作られていました。
これは他のノーコードでは表せないレベルのサイトで、これをみた時「Webflowができればコードを書くWebコーダーに並んだ成果を最短で出せる」と考えました。
またWebflowは時代の流れにも敏感で随時アップデートを繰り返し機能をドンドン高性能にしています。最近ではFigmaからのデザインをコピペする機能をリリースしたり、多言語展開の機能をリリースしたりしています。このサポートの強さからまだまだWebflowは安泰と確信しています。
実は僕がWebflowにコミットを決めた一番の理由は日本にライバルがいなかったからです。また当時は資金調達額200億円のようなニュースが流れており、企業の本気からコミットを決めました。ここらへんの詳細はプロフィールのページに書いています。
ここからは、相談でよく聞かれる「STUDIOとどう違うのか」「AIで作るのとどう違うのか」に答えます。
Webflow vs STUDIO｜日本製ノーコードとどちらを選ぶか
ノーコードで一番先に考えないといけないのは、ツールの機能ではなく「そのサービスが無くなったらどうなるか」です。運営会社が潰れる・統合されるなどでサービスが終了すると、サイトを丸ごと放棄して作り直すか、別ツールへ移行してUIと操作を覚え直すことになります（実例はノーコードWebサイトのデメリット3つに書きました）。
Webflowはアメリカのノーコードでトップ級の規模で生き残っていて、資金規模も日本のSTUDIOとは比べものになりません。このリスクを避けるうえでは、今のところ最も手堅い選択だと考えています。
| 観点 | STUDIO | Webflow |
|---|---|---|
| 料金 | 円建てで安い（年払いで月590円相当〜） | USD建て。年払いでBasic $15／Premium $25/月 |
| 操作感 | 軽い・簡単・国産で日本語UI | 多機能で高性能。英語UIで習得に1〜2ヶ月 |
| できること | 小〜中規模サイトに十分 | CMS・多言語・アニメーション・コード出力まで |
| 新機能の速さ | — | AI機能など新機能の投入が速い |
| サービス継続リスク | 国内スタートアップ規模 | 米国ノーコード最大級で資金規模が大きい |
| コード出力 | 不可 | 可（有料プラン）。資産を外へ持ち出せる |
まとめると、STUDIOは軽く・安く・国産で使いやすい。Webflowは多機能で高性能、費用は高いがやれることが多く、スピードが速くて安定している。詳しい選び方はWebflow vs STUDIO 比較｜どっちを選ぶ？にまとめています。
Webflow vs AI｜バイブコーディングで作る場合との違い
2026年7月から、Webflowで作るか、AIでコードを書いて作る（バイブコーディング）かという選択肢が加わりました。当社は制作の現場でAIをフルに使っていて、Webflowでの作成に特にこだわりがなく、より新しい時代のやり方でサイトを伸ばしたいという方には、こちらを提案することもあります。
| 観点 | Webflowで作る | AIで作る（フルスクラッチ） |
|---|---|---|
| 向いている人 | 見たまま編集で自社更新したい | Webflowにこだわりがなく、全部盛りで伸ばしたい |
| 作り方 | Webflowの画面でデザインを組む | AIにコードを書かせる（コードそのものが資産） |
| 公開後の運用費 | サイトプラン $15〜25/月 | ほぼゼロ（筆者の自社サイトは年1,500円） |
| 更新方法 | Webflowの画面で見たまま編集 | CMS＋AI更新指南書つき。AIに指示して更新 |
| 拡張 | Webflow App・カスタムコード | 多言語・LPを自由に追加。会員・予約・決済はフルスタックへ拡張 |
AIで作ると何が実現できるかはフルスクラッチサイトとは？AI構築で実現できる7つのことに書きました。構築の全工程は企業のAI導入マニュアル（2026年9月10日正式リリース予定・先行案内はメルマガ限定）に入れています。どちらが向いているかは事業とチーム次第です。迷ったら、事業内容と更新体制をうかがって診断します。
Webflowの料金｜年間でいくらかかるか
結論から言うと、サイトプランが年払いで$15〜25/月＝年$180〜300が土台です（2026年5月改定・USD建て）。ここに、ローカライズなどのアドオンと、外注する場合の制作費が乗ります。
プランは2026年5月の改定でStarter（無料・お試し）・Basic（年払い$15/月・CMSなし・静的300ページ）・Premium（年払い$25/月・CMS付き）の3つに再編されました。ブログなどを更新するサイトは実質Premium一択です。月払いはBasic $25／Premium $39と差が大きいので、続けるなら年払いが基本。僕の自社サイトの実費は、ローカライズとワークスペースを含めて年$576（約8.3万円）でした。
＞Webflowの料金プランの解説（2026年5月の新体系）
＞Webflowの総額費用｜新料金＋制作費＋運用費の実費
Webflowの使い方と習得までの時間
WebflowはHTML、CSSを基本としてサイト制作をします。そのため既にWebデザイナーで活躍している方やHTML、CSSを知っている方ならよりスムーズにWebflowを使いこなすことができるでしょう。未経験から始める方は「Webflow大学」というWebflow公式の無料講義で学ぶことができます。各項目の詳しいWebflowの使い方は「Webflowの使い方をまとめました」の記事で紹介しています。
Webflowのサイト作成から公開までの手順
自分の会社のWEBサイトを作成すると仮定したステップを紹介します。基本的に以下の4ステップで進めましょう。当社独自の詳しい制作フローはWebflow制作サービスのページに記載しています。
- デザインの作成 FigmaやAdobe XDでWebデザインのフレームを作り、色やフォントもこの段階で決めます。Figmaで作ればWebflowへデザインをコピペできます。
- プロジェクトの作成 Webflowにログインして新しいプロジェクトを作成し、デザインエディタでウェブサイトを作ります。
- ページの設定 SEOに必要なメタデータやOGP、自動返信の設定など、ページの設定を細かく行います。
- サイトの公開 Webflow内でパブリッシュします。独自ドメインを設定する場合は有料のサイトプランが必要です（チームやフリーランスでなければワークスペースプランは不要）。
＞Webflowの料金プランの解説
＞Webflowで独自ドメインを設定する方法
WebflowでのSEO対策について
WebflowでのSEO対策の基本は、コンテンツの品質向上・メタデータの設定・画像の最適化・リンクの質の向上・ページの読み込み速度の向上の5つです。これらを行うことで、検索エンジンのクローラーがサイトを正しく解析し、ユーザーが検索したキーワードでの上位表示を狙うことができます。詳しくはWebflowのSEO対策 完全ガイドで解説しています。
Q＆A｜WebflowはSEOに強いですか？
A｜WebflowはSEOに強いと言われています。しかし3年以上使用した専門家の僕の意見は「他と大差ない」です。その理由はSEOは結局コンテンツの強さや質に依存するからです。もちろんドメインの強さや各方面の多少のテクニックなどもありますが、これらがノーコードひとつで大きく左右されることはないと考えています。
Webサイトは全てHTMLやCSSを基準としているので、その知識がないとどんなツールを使ってもSEOで勝つことはできないでしょう。以前に日本製のstudioで作られたサイトをSEOツールでみた際、Hタグ0個と表記されていたことがあります。これはstudioが悪いのではなく、制作者にSEOの知識がなかったと考えられます。サイトを簡単に作れる反面、このような知識不足が増えているのがノーコードはSEOが弱いと考えれる大きな原因でしょう。
その面でWebflowは全てのアイテムがコード基準ですので間違いやミスは起きにくいと言えます。Webflowで出てくる言葉はほとんどがそのままHTMLです。その分他のノーコードより難しいのがWebflowのネックな部分ではあります。
習得にかかる時間は1〜2ヶ月
おおよそ1ヶ月から2ヶ月、勉強に時間を割いてコミットすれば習得できます。学習の順番はWebflow日本語学習の最短ルート、項目別の操作はWebflowの使い方まとめにまとめています。
Webflowの教材も作成する予定です。当社のメルマガは読者との会話を大事にしているので、登録したら1通目に「Webflowの教材を検討したい」など、登録の理由を返信してください。一言で大丈夫です。
自分で作るか、プロに依頼するか｜外注した場合の費用
Webflowでのサイト構築には大きく2つの進め方があります。自分で構築するか、制作会社に依頼するかです。
自分で構築する場合、費用はWebflowのプラン料金だけで済みます。本記事で紹介した基本操作を押さえれば、テンプレートを使ったサイトであれば数日で公開まで到達できます。一方で、デザインの再現度や、CMS設計・SEO設定・多言語対応などの構築品質は経験の差が出やすい部分です。
制作会社に依頼する場合は、デザインから構築・公開後の運用設計までを任せられます。Webflowはコードの分かる制作者が構築すると、表示速度・SEO・運用のしやすさが大きく変わるツールです。依頼先を選ぶ際は「Webflow専門かどうか」「構築後の運用まで設計してくれるか」を基準にすると失敗しません（同業目線の見積もりの見方はWebflow制作会社の選び方にまとめています）。
制作会社に外注する場合の費用は、規模によりますがだいたい50万〜150万円の間に収まる案件が多いです。当サイトを運営する株式会社Web春はWebflow専門の制作会社で、作っているのは「検索で見つかり、公開後は自社で更新できる」サイト。Webflowフルスクラッチは¥1,000,000〜（税別・2026年時点）、制作期間は約1.5〜2ヶ月です。AIで作る場合の費用は内容で決まるので、要件を聞いてからお伝えしています。内容と料金の詳細はWebflow制作サービスをご覧ください。「まず自分で作ってみたい」という方への個別アドバイスも行っています。
Web春が制作したWebflowサイトの事例
Webflowは数多くの企業で使われています。当社（Web春）がWebflowで制作・移行を担当した企業の一部です。各社の詳細は実績ページに書いています。
- JTB Americas - 世界最大級の旅行会社JTBグループ北米拠点のコーポレートサイトを全面リニューアル
- 株式会社MLJ（Musco Lighting Japan） - WordPressからWebflowへ100記事を超える移行を実施
- 日本テレビ主催 Web3.0イベント - FigmaデザインをWebflowへ高精度にコンバートしてLPを構築
- Snug株式会社 - 企画・Figmaデザイン・Webflow構築をワンストップで対応
- Spider AF - 既存Webflowサイトのデザイン改善・SEO最適化・レスポンシブ対応
- GeoDreams株式会社 - 地熱発電スタートアップのブランドサイトを制作
- 医療法人いぶきクリニック - Figmaで再設計し、Webflowでリニューアル
- 玄品（ふぐ料理チェーン）採用サイト - LINE公式アカウントを活用した長期採用の仕組みを構築
- NIPPONIA HOTEL 函館港町 - 料理ページを制作
- UPBOND - Web3.0企業のコーポレートサイトを全面リニューアル
このほかの案件は制作実績にまとめています。国内外の大手企業の導入例はWebflowの導入事例まとめをどうぞ。
Webflowのサイトと判別するためにはWebflowチェッカーというChromeの拡張機能を使用します。この拡張機能を使ってDiscordのサイトを見てみるとWebflowで作られていることがわかります。
このように世界ではWebflow導入の動きがかなり活性化しています。その背景にノーコードでも使いやすく高性能であること、十分な資金力、ユーザーの熱意が揃っていることが大きな力を呼んでいると考えられます。2024年時点ではAIの力もかなり拡大していますが、まだまだWebflowの存在を否定するものではなく、将来的なWeb管理や運用の面では今後も安定した業績を保てると考えています。（2026年追記: AIによる制作が広がった2026年現在もWebflowはノーコードツールとして健在で、当社もWebflow制作を継続しています）
Webflowは無料でサイト作成に必要なほとんどの機能を使用できます。まずは触ってみて必要に応じて課金していくのがおすすめです。僕自身も最初の3ヶ月は無料でサイト運営をしていました。もし何か困ったことがあればWebflowコミュニティーや制作依頼などもお受けしているのでご相談くださいませ。
よくある質問
Webflowは無料で使えますか？
一定の範囲まで無料で使えます。まず触ってみたい場合は無料プランから始めて、公開時に有料プランを検討すれば十分です。
Webflowでできないことはありますか？
PHPは使えません。ただし必要な機能の多くはWebflow APPで提供されており、カスタムコードの実装で対応できる範囲も広いです。
作ったサイトのコードは取り出せますか？
HTML・CSS・JavaScriptをZipファイルで出力できます。ツールの乗り換えやサイトの自己管理ができ、万が一の際も自社でコードを保有できます。
Webflowでのサイト制作を依頼すると、費用はいくらかかりますか？
Web春の場合、Webflowサイト制作（フルスクラッチ・テンプレート不使用）は¥1,000,000〜（税別）、制作期間は約1.5〜2ヶ月が目安です（2026年時点）。着手後に金額を変えることはありません。概算は30分の無料相談でその場でお答えしています。
Webflowの習得にはどのくらいかかりますか？
おおよそ1〜2ヶ月、勉強に時間を割いてコミットすれば習得できます。HTMLやCSSの知識がなくても始められ、学習はWebflow公式の「Webflow大学」（当ブログに日本語解説版あり）から始めるのがおすすめです。
Webflowは年間いくらかかりますか？
サイトプランは2026年5月改定で年払いBasic $15/月・Premium $25/月＝年$180〜300が目安です（USD建て）。ローカライズなどのアドオンを足すと増え、筆者の実費はアドオン込みで年$576（約8.3万円）でした。
