Webflow完全ガイド2026｜月14ドルから始める料金とノーコード制作の全手順

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月時点の目安だ。

注意したいのは、上の「サイトプラン」とは別に、複数人で制作する場合の「ワークスペースプラン」が存在する点だ。さらに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で長く運用したい」なら、今も第一候補に挙がる実力を持っている。まずは無料プランで操作感を確かめ、自分のプロジェクトに釣り合うか見極めるのが賢い始め方だ。