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

2026年4月9日

Webflowは「コードを書かずにプロレベルのWebサイトを作れるツール」と紹介されることが多い。間違いではないが、これだけだと何がすごいのかわからない。SquarespaceもWixも同じことを謳っている。

Webflowの本質は「ビジュアルエディタの操作が、そのままHTML/CSSのコードに変換される」という点にある。ドラッグ&ドロップでdivを配置すると、裏側でFlexboxやGridのCSSが書かれる。つまり、コードの知識がなくても使えるが、コードの概念を理解している人ほど使いこなせる。

WordPressとの根本的な違い

WordPressは「テーマ + プラグイン」でサイトを構築する。既製の型に内容を流し込む方式だ。カスタマイズしたければPHPとCSSを書く必要がある。

Webflowは「白紙のキャンバス + ビジュアルCSS」で構築する。テーマの制約がない代わりに、すべてのレイアウトを自分で組む必要がある。

WordPressが「車を自分で組み立てるキット」なら、Webflowは「ハンドルを握ればすぐ走れる車」。ただしWebflowの車は、エンジンの中身をいじるのは難しい。

Webflowが最も得意とするジャンル。トップページ、サービス紹介、会社概要、お問い合わせの4〜10ページ構成なら、デザイナー1人で完結する。

具体例として、DropboxやDellの一部のマーケティングページがWebflowで構築されている。Webflow公式のShowcaseページで実例を見ると、デザインの自由度がイメージしやすい。

活用されている機能:

広告やキャンペーン用の1ページ完結型。ABテストのためにページを複製して微調整するのが簡単。CMSを使わない静的ページなら、Free プランでも公開できる。

WebflowのCMSを使えばブログも作れる。ただし、記事数が1,000を超えるような大規模メディアには向かない。CMSの上限が10,000件（Businessプラン）で、WordPress のような複雑なタクソノミーやカスタムフィールドの柔軟性はない。

Webflow Ecommerceプラン（$29/月〜）で物販が可能。商品登録、カート、決済（Stripe連携）が標準で使える。ただし、在庫管理や配送の細かい設定はShopifyのほうが充実している。商品点数が少ないブランド直販には向くが、数百点の在庫を扱うECには不向き。

Webflowのエディタを開いて最初に戸惑うのが、要素の配置方法。「ここにテキストを置きたい」と思っても、まずdivを作って、その中にテキストブロックを入れて、divにパディングやマージンを設定する、という手順が必要になる。

HTMLのボックスモデル（margin, padding, border）を知らない人は、最初の1時間で「なぜ思った場所に配置できないのか」で詰まる。Webflowの公式チュートリアル「Webflow University」を先に一通り見ておくのが、遠回りに見えて一番速い。

WebflowではスタイルをCSSクラスとして管理する。見出しに「heading-large」というクラスを付けると、同じクラスを使っている全ページの見出しが一括で変わる。

これを知らずに、各要素に個別にスタイルを設定してしまうと、後から修正するときに全ページを1つずつ直す地獄が待っている。初日の失敗ランキング1位。

Webflowのエディタ上のプレビューと、実際に公開したサイトで見え方が微妙に違うことがある。特にカスタムフォントの読み込みタイミングと、アニメーションの再生タイミング。公開前にステージング環境（webflow.ioドメイン）で確認する癖をつけたほうがいい。

WordPressならプラグインで自動圧縮されるが、Webflowではアップロード前に自分で画像を最適化する必要がある。4MBのPNGをそのまま貼ると、ページの読み込みが遅くなる。TinyPNGやSquooshで圧縮してからアップロードする手間がかかる。

注意点として、サイトプランとワークスペースプランは別課金。サイトを公開するには両方が必要になる。無料プランで試して、公開段階でサイトプランを追加する流れが一般的。