🏷️ プロダクト情報更新: 2026年2月16日10分で読める

Webflow — デザイナー向けノーコードWebサイトビルダー

コーディングなしでプロ品質のWebサイトを構築。デザイナーにとっての理想的なツールで、Figmaのようなビジュアル編集とCMSを統合。

最終情報更新: 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)

  1. アカウント作成: https://webflow.com で無料登録
  2. テンプレート選択: 数百のテンプレートから選択、またはゼロから
  3. デザイン: ビジュアルエディタでレイアウト、スタイルを設定
  4. コンテンツ追加: CMSでコンテンツを管理
  5. インタラクション: アニメーション、ホバーエフェクトを追加
  6. 公開: ワンクリックでデプロイ

料金(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機能でニュース、ブログも運営。

公式リンク