Webflowは「コードを書かずにプロレベルのWebサイトを作れるツール」と紹介されることが多い。間違いではないが、これだけだと何がすごいのかわからない。SquarespaceもWixも同じことを謳っている。
Webflowの本質は「ビジュアルエディタの操作が、そのままHTML/CSSのコードに変換される」という点にある。ドラッグ&ドロップでdivを配置すると、裏側でFlexboxやGridのCSSが書かれる。つまり、コードの知識がなくても使えるが、コードの概念を理解している人ほど使いこなせる。
WordPressとの根本的な違い
WordPressは「テーマ + プラグイン」でサイトを構築する。既製の型に内容を流し込む方式だ。カスタマイズしたければPHPとCSSを書く必要がある。
Webflowは「白紙のキャンバス + ビジュアルCSS」で構築する。テーマの制約がない代わりに、すべてのレイアウトを自分で組む必要がある。
| 比較項目 | WordPress | Webflow |
|---|---|---|
| デザインの自由度 | テーマに依存 | 完全自由 |
| コーディング | PHP/CSS必要（カスタム時） | 不要（ビジュアル操作） |
| プラグイン | 60,000+ | 限定的（Integrations） |
| ホスティング | 自前 or レンタルサーバー | Webflow側で管理 |
| セキュリティ | プラグイン更新が必須 | Webflow側で管理 |
| CMS | 強力（カスタム投稿タイプ等） | シンプル（10,000件上限） |
| 月額費用 | サーバー代 + テーマ代 | $14〜$39（サイトプラン） |
WordPressが「車を自分で組み立てるキット」なら、Webflowは「ハンドルを握ればすぐ走れる車」。ただしWebflowの車は、エンジンの中身をいじるのは難しい。
実際に何が作れるのか
コーポレートサイト
Webflowが最も得意とするジャンル。トップページ、サービス紹介、会社概要、お問い合わせの4〜10ページ構成なら、デザイナー1人で完結する。
具体例として、DropboxやDellの一部のマーケティングページがWebflowで構築されている。Webflow公式のShowcaseページで実例を見ると、デザインの自由度がイメージしやすい。
活用されている機能:
- Interactions: スクロールに連動したアニメーション
- CMS: ブログやニュースの動的コンテンツ管理
- フォーム: お問い合わせフォーム（Webflow標準、またはTypeform連携）
ランディングページ
広告やキャンペーン用の1ページ完結型。ABテストのためにページを複製して微調整するのが簡単。CMSを使わない静的ページなら、Free プランでも公開できる。
ブログ・メディアサイト
WebflowのCMSを使えばブログも作れる。ただし、記事数が1,000を超えるような大規模メディアには向かない。CMSの上限が10,000件（Businessプラン）で、WordPress のような複雑なタクソノミーやカスタムフィールドの柔軟性はない。
ECサイト
Webflow Ecommerceプラン（$29/月〜）で物販が可能。商品登録、カート、決済（Stripe連携）が標準で使える。ただし、在庫管理や配送の細かい設定はShopifyのほうが充実している。商品点数が少ないブランド直販には向くが、数百点の在庫を扱うECには不向き。
使い始めた初日に困ったこと
1. ボックスモデルの理解が前提
Webflowのエディタを開いて最初に戸惑うのが、要素の配置方法。「ここにテキストを置きたい」と思っても、まずdivを作って、その中にテキストブロックを入れて、divにパディングやマージンを設定する、という手順が必要になる。
HTMLのボックスモデル（margin, padding, border）を知らない人は、最初の1時間で「なぜ思った場所に配置できないのか」で詰まる。Webflowの公式チュートリアル「Webflow University」を先に一通り見ておくのが、遠回りに見えて一番速い。
2. クラスの概念
WebflowではスタイルをCSSクラスとして管理する。見出しに「heading-large」というクラスを付けると、同じクラスを使っている全ページの見出しが一括で変わる。
これを知らずに、各要素に個別にスタイルを設定してしまうと、後から修正するときに全ページを1つずつ直す地獄が待っている。初日の失敗ランキング1位。
3. 公開がローカルプレビューと違う
Webflowのエディタ上のプレビューと、実際に公開したサイトで見え方が微妙に違うことがある。特にカスタムフォントの読み込みタイミングと、アニメーションの再生タイミング。公開前にステージング環境（webflow.ioドメイン）で確認する癖をつけたほうがいい。
4. 画像の最適化が手動
WordPressならプラグインで自動圧縮されるが、Webflowではアップロード前に自分で画像を最適化する必要がある。4MBのPNGをそのまま貼ると、ページの読み込みが遅くなる。TinyPNGやSquooshで圧縮してからアップロードする手間がかかる。
料金体系（2026年3月時点）
サイトプラン（公開に必要）
| プラン | 月額 | 主な制限 |
|---|---|---|
| Free | $0 | webflow.ioドメイン、2ページまで |
| Basic | $14 | カスタムドメイン、CMS無し |
| CMS | $23 | CMS利用可、2,000件まで |
| Business | $39 | CMS 10,000件、フォーム2,500件/月 |
| Enterprise | 要問合せ | SLA、SSO、専任サポート |
ワークスペースプラン（エディタ利用）
| プラン | 月額 | 主な制限 |
|---|---|---|
| Free | $0 | 2プロジェクト |
| Basic | $19 | 無制限プロジェクト |
| Growth | $49 | チーム向け、ロール管理 |
| Enterprise | 要問合せ | 高度な権限管理 |
注意点として、サイトプランとワークスペースプランは別課金。サイトを公開するには両方が必要になる。無料プランで試して、公開段階でサイトプランを追加する流れが一般的。
Webflowが向いている人・向いていない人
向いている
- デザイナーで、コーディングを外注したくない人: デザインからコーディングまで1人で完結できる
- 小〜中規模のコーポレートサイトを作る人: 5〜20ページのサイトが最もフィットする
- ランディングページを量産する人: 複製 → 修正のワークフローが速い
- HTML/CSSの基本を知っている人: 学習曲線が一気に緩やかになる
向いていない
- ブログだけ書きたい人: WordPressやNote、はてなブログのほうが楽
- 大規模ECサイトを作りたい人: Shopifyのほうが機能が充実
- サーバーサイドの処理が必要な人: Webflowにバックエンドはない。ユーザー認証、データベース操作が必要ならNext.jsやRailsのほうが適切
- コードの概念に全く触れたくない人: 操作自体にHTML/CSSの理解が暗黙的に求められる
学習リソース
| リソース | 内容 | 費用 |
|---|---|---|
| Webflow University | 公式チュートリアル動画 | 無料 |
| Webflow Blog | 新機能の紹介、Tips | 無料 |
| Finsweet University | 上級者向けTips、カスタムコード | 無料 |
| Flux Academy (YouTube) | 実案件ベースのチュートリアル | 無料 |
Webflow Universityの「Ultimate Web Design Course」を一通り見るのに約4時間。これだけで基本操作は一通りカバーできる。
始めるなら
- Webflow Universityで基本操作を学ぶ（4時間）
- 無料プランでアカウントを作成し、練習プロジェクトを作る
- 最初のサイトは自分のポートフォリオか、身近な人のサイトがおすすめ
- Showcaseページで他の人の作例を見て、構造を研究する
最初の壁は「ボックスモデルとクラスの概念」。ここを乗り越えれば、あとは手を動かすほど速くなる。逆にここで詰まったら、HTML/CSSの基本を30分だけ学んでからWebflowに戻ると、驚くほどスムーズになる。
