Webflowとは、コードを書かずにデザイン性の高いWebサイトを設計・公開・更新できるビジュアル開発プラットフォームです。
Webflowは、HTMLとCSSの構造をそのまま画面上でいじる感覚でWebサイトを組み立てるツールです。テンプレートに文字を流し込むタイプのサービスとは設計思想が違います。デザイナーが頭の中で描いたレイアウトを、ほぼ妥協なく形にできます。
その代わり、最初の数時間は確実に戸惑います。ボックスモデル、Flexbox、CMSコレクションといった概念を理解しないと、思った通りに動きません。ここを越えられるかどうかが、Webflowが向くか向かないかの分かれ目になります。
Webflowとは何か

Webflowは、コードを書かずにプロ品質のWebサイトを設計・公開・運用できるビジュアル開発プラットフォームです。背後では本物のHTML/CSS/JavaScriptを生成しています。
似たノーコードツールと一線を画すのは、「テンプレート編集」ではなく「設計そのもの」をブラウザ上で行う点にあります。要素の入れ子構造、クラスによるスタイル管理、レスポンシブのブレークポイント設定まで、Web制作者が普段コードで触る領域をGUIに置き換えています。
だから完成物の見た目は、テンプレート系サービスと比べて格段に自由です。ブランドサイト、コーポレートサイト、ポートフォリオ、マーケティング用ランディングページなど、「見せ方」が成果に直結する用途で選ばれています。
できること1|ビジュアルデザインでの自由なサイト設計

Webflow最大の武器は、デザインの再現度の高さです。余白1px、フォントのトラッキング、スクロール連動アニメーションまで、細部を作り込めます。
操作はドラッグ&ドロップが中心だが、内部ではDiv(箱)を組み合わせてレイアウトを構築します。この「箱を積む」考え方がWebデザインそのものなので、HTML/CSSの基礎知識があると一気に扱いやすくなります。逆に知識ゼロだと、最初は要素がどこに入ったのか迷子になりやすいです。
インタラクションズという機能では、ホバーやスクロールに反応する動きをコードなしで設定できます。動きのあるサイトを作りたい層にとっては、ここが他ツールから乗り換える決め手になります。
できること2|CMSによる構造化コンテンツ運用

ブログ記事、導入事例、商品一覧のように「同じ型のコンテンツを量産する」ページは、CMSコレクションで管理します。
項目(フィールド)を一度定義すれば、あとは中身を入れ替えるだけでページが自動生成されます。100件の事例ページを1件ずつ手作りする必要はありません。テンプレートとデータを分離する考え方で、更新作業が大幅に軽くなります。
メディア運営や継続的なコンテンツ発信を前提にするなら、このCMSの存在は重い意味を持ちます。ただしコレクション数やアイテム上限はプランで変わるため、規模が読めるなら契約前に確認しておくとよいでしょう。
できること3|AIによる制作の初速アップ

2026年のWebflowは、AI機能をプラットフォーム全体に組み込む方向へ大きく舵を切りました。ページ構成のたたき台生成、コピーライティング補助、CMSフィールドの作成支援などに対応します。
ゼロから白紙のキャンバスと向き合う負担を減らすのがAIの役割です。「まず形にする」までの時間を短縮できます。
ただしAIが出すのはあくまで下書きで、ブランドのトーン、事実確認、SEO/AEOを意識した調整は人が仕上げる前提になります。AIに丸投げして完成、という設計思想ではありません。
できること4|公開・ホスティング・SEO設定の一元化
Webflowは制作だけでなく、公開後の運用までひとつの環境で完結します。サイトをホスティングし、独自ドメインを接続し、メタタグやサイトマップなどのSEO設定もダッシュボードから行えます。
制作ツールとサーバーが別々だと管理が煩雑になるが、Webflowはそこを統合しています。デザイナーやマーケターが、エンジニアの手を借りずに公開まで持っていけます。
検索エンジンやAI回答での参照を意識した情報設計(AEO)まで同じ画面で進められるのは、運用視点で見ると地味に効きます。
料金プラン|2026年5月改定後の構成
Webflowはフリーミアム型で、無料で作り始められます。ただし無料のままでは「webflow.io」のサブドメインでしか公開できず、CMSアイテム数なども制限されます。独自ドメインで本番公開する時点で、有料プランがほぼ必須になります。
2026年5月の改定で、サイトプランは従来の4階層から3階層に整理されました。プラン名や金額は変動が続いているため、契約直前には必ず公式サイトで最新の数字を確認してほしいです。以下は2026年6月時点の目安です。
| プラン種別 | 月額の目安(年払い換算) | 主な用途 |
|---|---|---|
| 無料(Starter) | 0ドル | 試作・操作確認 |
| Basic | 14ドル前後 | CMS不要の独自ドメインサイト |
| CMS/Premium | 23〜39ドル前後 | ブログ・事例などCMS運用 |
| Enterprise | 個別見積もり | 大規模・チーム運用 |
注意したいのは、上の「サイトプラン」とは別に、複数人で制作する場合の「ワークスペースプラン」が存在する点です。さらにAnalyze(解析)などのアドオンも別課金で、これらを足すと体感コストは表示金額より上がります。「サイトを作る費用」と「公開し続ける費用」を分けて見積もると見誤りにくいです。
eコマースを使う場合はさらに専用のティアが乗ります。月額だけでなく取引手数料の有無も含めて、トータルで判断するのが安全です。
始め方|独自ドメイン公開までの3ステップ
無料登録から本番公開までの流れはシンプルだが、各ステップで決めるべきことがあります。
ステップ1|アカウント作成と最初のプロジェクト
公式サイトから無料登録する。クレジットカードは不要だ。まずは試作用プロジェクトを1つ作り、デザイナー画面の操作に慣れることを優先したい。
いきなり本番サイトを作り始めると、ボックスの入れ子に苦戦して時間を溶かしやすいです。最初の1〜2時間は「練習」と割り切るのが結局は近道になります。
ステップ2|サイト構造とCMS設計
ページ構成と、CMSで管理したいコンテンツ種別を先に決めます。ブログや事例を扱うなら、この段階でコレクションのフィールドを設計しておくと後がラクです。
後からCMS構造を作り変えると、既存ページの作り直しが発生しやすいです。面倒でも初期設計に時間をかけたほうが、トータルの工数は減ります。
ステップ3|公開とドメイン接続
テンプレートまたはAIサイトビルダーを起点にトップページを組み、表示崩れとコピーを確認します。問題なければ有料プランに加入し、独自ドメインを接続して公開します。
公開前にモバイル表示のチェックは必須です。Webflowはブレークポイントごとに細かく調整できる反面、PCで完璧でもスマホで崩れることがあります。
こんな人に向いている/向いていない
向き不向きがはっきり分かれるツールなので、契約前に自分がどちら側かを見極めたい。
向いている人
- デザインの再現度を最優先したいデザイナー・制作者
- ブログや事例をCMSで継続運用したいメディア・企業
- クライアントワークでサイトを量産する制作会社
- 動きのある表現を自分の手でコントロールしたい人
向いていない人
- 日本語の管理画面が必須の人
- 学習時間をほとんど取れず、すぐ公開したい人
- データ処理を伴う業務アプリを作りたい人
- 質問に答えるだけで完成する手軽さを求める人
注意点・落とし穴
最大の壁は、管理画面が英語のみという点です。日本語UIには対応していません。専門用語混じりの英語画面に抵抗があると、学習コストが一段跳ね上がります。
次に料金構造の複雑さ。サイトプラン、ワークスペースプラン、アドオン、eコマースティアが絡み合い、「結局いくらかかるのか」が一目では分かりにくいです。安く見えて、必要機能を足すと想定の倍近くになるケースもあります。
そして自由度の裏返しとしての学習コスト。テンプレートに文字を入れるだけのツールではないので、最初の制作物が形になるまで時間がかかります。短時間で公開だけ済ませたい人には、この自由度がむしろ重荷になります。
Webflowとよく比較されるツール
Webflowを検討する人は、たいてい以下のツールと天秤にかけています。それぞれ得意領域が違います。
Framer
Framerは、デザイン性の高いサイトをより速く・軽く作りたい場合の対抗馬だ。アニメーション表現とスピード感に強く、近年はAI生成機能の進化も速い。CMSの自由度や細かな構造制御ではWebflowに分があるが、「とにかく見栄えよく早く」ならFramerが候補になる。
Wix Studio
Wix Studioは、制作会社やチーム向けにWixが用意したプロ向け環境です。Webflowより操作の取っつきやすさを重視する人に向きます。細かなデザイン制御の限界とCMSの考え方は、事前に比べておきたいポイントになります。
Bubble
Bubbleは、サイトではなくWebアプリを作りたい場合の選択肢です。ユーザー認証、データベース処理、ロジックを伴うアプリ開発に強いです。WebflowがブランドサイトやCMS型サイトに向くのに対し、Bubbleは「動くアプリ」寄りで、目的がそもそも違います。
ノーコードツールを横断で比べたいなら、ノーコードカテゴリの一覧も合わせて見ておくと選びやすいです。AI連携の最新動向はAIノーコードの解説も参考になります。
編集部の評価
率直に言って、Webflowはデザイン自由度では今もノーコードの一択級です。「コードを書かずにここまで作れるのか」という驚きがあります。プロの制作者が本気で使うと、テンプレート系サービスとは別次元の成果物が出ます。
一方で、万人向けではありません。英語UIと学習コストの高さは正直なところ参入障壁が高く、「サイトをサクッと作りたいだけ」の個人には微妙です。そこはFramerや国産サービスのほうが幸せになれます。
料金面は2026年の改定でいくらか整理されたものの、アドオンを含めた実コストの読みにくさは残ります。それでも、デザインと運用を妥協なく両立させたいプロにとっては、月14ドル前後から始められる価値は十分にあります。重宝するのは、明確に「作り込みたい人」です。
よくある質問(FAQ)
Q. Webflowは無料でずっと使えますか
作る・学ぶだけなら無料で続けられます。ただし公開URLは「webflow.io」のサブドメインに限られ、CMSアイテム数なども制限されます。独自ドメインで本番公開するには有料プラン(月14ドル前後〜)が必要です。
Q. プログラミング知識は必須ですか
必須ではないが、HTML/CSSの基礎を知っていると習得速度が段違いに上がります。ボックスの入れ子やクラスでのスタイル管理はWebデザインそのものの考え方なので、まったくの未経験だと最初の壁は高めになります。
Q. 日本語に対応していますか
サイトの中身は日本語で作れるが、管理画面(編集UI)は英語のみです。日本語UIには対応していません。英語の専門用語に抵抗がある場合は、ここが最大のハードルになります。
Q. FramerとWebflow、どちらを選ぶべきですか
スピードと手軽さ、最新のAI生成を重視するならFramer。CMS運用の柔軟さ、細かな構造制御、大規模サイトの保守性を重視するならWebflowです。継続的にコンテンツを増やすメディア用途では、Webflowの設計が効いてきます。
Q. 公開後の月額以外に費用はかかりますか
独自ドメインの取得・更新費(年1,500円前後〜)は別途必要です。さらに複数人制作のワークスペースプランや、解析などのアドオンを使うと加算されます。「制作費」と「維持費」を分けて見積もると総額を把握しやすいです。
まとめ
Webflowは、デザインの自由度と運用の一貫性を両立させたいプロ向けのノーコードプラットフォームです。無料で始められるが、本番公開には月14ドル前後からの有料プランが要ります。
英語UIと学習コストという明確な弱点があるため、手軽さ最優先なら他ツールが合います。だが「妥協なく作り込みたい」「CMSで長く運用したい」なら、今も第一候補に挙がる実力を持っています。まずは無料プランで操作感を確かめ、自分のプロジェクトに釣り合うか見極めるのが賢い始め方です。



