最終情報更新: 2026-02-16
| 項目 | 詳細 |
|---|---|
| 種別 | ノーコードWebサイトビルダー |
| 開発元 | Webflow, Inc. |
| 料金 | 無料版 / Basic $18/月 / CMS $29/月 |
| 出力 | クリーンなHTML/CSS/JS |
| 特徴 | デザイン自由度、CMS、Eコマース |
Webflowとは?
Webflowは、デザイナーがコーディングなしでプロ品質のWebサイトを構築できるノーコードプラットフォーム。2013年にローンチし、デザインにこだわるクリエイターに支持されている。
最大の特徴はFigmaのようなビジュアル編集とクリーンなコード出力の両立。ドラッグ&ドロップで構築しながら、生成されるHTML/CSS/JSは人間が書いたような美しいコード。
CMS(コンテンツ管理)とEコマースも統合しており、ブログ、ポートフォリオ、ECサイトまで幅広く対応。
こんな人におすすめ
| ターゲット | 適性 | 理由 |
|---|---|---|
| Webデザイナー | ⭐⭐⭐ | デザインの自由度最高 |
| フリーランス | ⭐⭐⭐ | クライアントワークに最適 |
| マーケター | ⭐⭐⭐ | LP、コーポレートサイト |
| ブロガー | ⭐⭐ | CMS機能でブログ運営 |
| Webアプリ開発 | ⭐ | Bubbleの方が適している |
主要機能
ビジュアルデザイナー
CSSの全プロパティをビジュアルで操作。Flexbox、Grid、アニメーションも直感的に設定。
CMS(コンテンツ管理)
ブログ記事、製品情報、チームメンバーなどをコレクションとして管理。動的ページを自動生成。
インタラクション&アニメーション
スクロールアニメーション、ホバーエフェクト、ページ遷移アニメーションをノーコードで実装。
レスポンシブデザイン
デスクトップ、タブレット、モバイルそれぞれのブレークポイントを細かく調整。
Eコマース
商品管理、カート、決済(Stripe)、在庫管理を統合。本格的なオンラインストアを構築。
コードエクスポート
生成されたHTML/CSS/JSをエクスポート可能。他のホスティングサービスに移行できる。
ホスティング
Webflow自身がホスティングを提供。CDN、SSL証明書、自動バックアップ込み。
使い方(Getting Started)
- アカウント作成: https://webflow.com で無料登録
- テンプレート選択: 数百のテンプレートから選択、またはゼロから
- デザイン: ビジュアルエディタでレイアウト、スタイルを設定
- コンテンツ追加: CMSでコンテンツを管理
- インタラクション: アニメーション、ホバーエフェクトを追加
- 公開: ワンクリックでデプロイ
料金(2026年2月時点)
| プラン | 月額 | 主な機能 |
|---|---|---|
| Starter | $0 | 2ページ、webflow.ioドメイン |
| Basic | $18 | カスタムドメイン、150ページ |
| CMS | $29 | CMS機能、2000アイテム |
| Business | $49 | 10,000アイテム、高トラフィック |
| Ecommerce | $42-212 | オンラインストア機能 |
Pros(メリット)
- ✅ デザイン自由度: CSSの全機能をビジュアル操作
- ✅ クリーンコード: エクスポート可能な美しいコード
- ✅ CMS統合: 動的コンテンツを簡単管理
- ✅ アニメーション: ノーコードで高度なインタラクション
- ✅ Eコマース: 本格的なオンラインストア
- ✅ レスポンシブ: 細かいブレークポイント設定
- ✅ SEO: メタタグ、サイトマップを完全制御
Cons(デメリット)
- ⚠️ 学習曲線: CSS知識があると理解しやすい
- ⚠️ Webアプリ: 複雑なロジックは苦手(Bubbleが適切)
- ⚠️ 価格: 本格運用は$29/月〜
- ⚠️ 日本語UI: 英語のみ
- ⚠️ フォーム機能: 限定的(外部連携推奨)
ユーザーの声
「FigmaでデザインしてWebflowで実装。このワークフローが最強」 — Webデザイナー
「クライアントワークの効率が3倍になった」 — フリーランス
「CSSを理解していると、Webflowの良さがわかる」 — フロントエンドエンジニア
「LPやコーポレートサイトには最高。Webアプリは別ツール」 — スタートアップ創業者
FAQ
Q: Bubbleとの違いは?
A: Webflowはウェブサイト・LP向け(デザイン重視)、BubbleはWebアプリ向け(ロジック重視)。
Q: コーディング知識は必要?
A: 不要だが、CSS/HTMLの基礎があると理解が早い。
Q: コードをエクスポートできる?
A: 可能。HTML/CSS/JSを書き出して他のサーバーにホスティングできる。
Q: WordPressからの移行は?
A: 可能。CMS機能でブログを管理し、デザインの自由度が大幅に向上。
競合比較
| ツール | 価格 | 用途 | デザイン自由度 |
|---|---|---|---|
| Webflow | $0-49/月 | Webサイト | ◎ |
| Framer | $0-30/月 | Webサイト | ◎ |
| Wix | $0-50/月 | Webサイト | ○ |
| Squarespace | $16-65/月 | Webサイト | △ |
ソロビルダー向けの使いどころ
プロダクトLP
高品質なランディングページをWebflowで構築。コンバージョン最適化のA/Bテストも容易。
ポートフォリオ
デザイナーとしての作品集をWebflowで制作。他ツールでは実現できないデザイン表現。
コーポレートサイト
会社の顔となるサイトをプロ品質で構築。CMS機能でニュース、ブログも運営。
公式リンク
- 公式サイト: https://webflow.com/
- 料金プラン: https://webflow.com/pricing
- テンプレート: https://webflow.com/templates
- 大学: https://university.webflow.com/
- フォーラム: https://forum.webflow.com/