Webflowの使い方完全ガイド｜初心者向けにノーコードWebサイト制作・料金プラン・Wix・WordPressとの比較を解説

Webflowとは？デザイナー品質のWebサイトをノーコードで制作するプラットフォーム

Webflow（ウェブフロー）は、2013年に米国サンフランシスコで設立されたノーコードWebサイトビルダー・ビジュアルCMSプラットフォームです。HTML/CSSの知識がなくてもプロ品質のWebサイトをビジュアル操作で制作できる点が最大の特徴で、世界中のデザイナー・マーケター・エージェンシーに活用されています。

Webflowが他のWebサイトビルダーと異なるのは「ビジュアルに操作しながらも、クリーンなHTML/CSSコードが出力される」点です。Wixなどの初心者向けビルダーと比べてデザインの自由度が高く、WordPress＋テーマの組み合わせと比べてカスタムアニメーション・スクロールエフェクトなどのリッチな表現をコードなしで実装できます。コーポレートサイト・ランディングページ・ポートフォリオ・スタートアップの製品紹介サイト制作で特に支持されています。

Webflowの主な機能

• ビジュアルエディター（Designer）：ドラッグ＆ドロップでHTML/CSSを視覚的に設計します。要素の配置・サイズ・余白・タイポグラフィ・カラーをピクセル単位で調整でき、スマートフォン・タブレット・PCの各ブレイクポイント別にデザインを設定できます
• CMS（Collections）：ブログ記事・事例・製品・チームメンバーなど任意の構造でコンテンツ型を定義できます。デザインしたテンプレートにCMSのデータを紐付けることで、コンテンツが増えても自動的にデザインが適用されます。エディターモードで非エンジニアのチームメンバーがコンテンツ更新できます
• ホスティング・CDN：Webflow独自のグローバルCDNを標準搭載。SSL証明書の自動適用・自動バックアップ・高速表示に対応しており、別途サーバー契約が不要です
• SEO設定：ページごとのメタタイトル・ディスクリプション・OGP設定・301リダイレクト・XMLサイトマップの自動生成・構造化データへの対応が可能です。クリーンなコードが出力されるためGoogle評価が高い傾向があります
• アニメーション・インタラクション：スクロールトリガー・ホバー・クリック・ページ読み込みアニメーションをコードなしで設定できます。視差効果（パララックス）や要素の動きで印象的なWebサイト表現が可能です
• eコマース：商品ページ・カート・決済フロー（Stripe連携）をビジュアルで構築できます。デザインの自由度がShopifyより高く、ブランドに合わせたECサイトを設計できます
• 多言語機能（Localize）：2023年以降、公式の多言語対応機能を提供。日本語・英語など複数言語のサイトを1つのプロジェクトで管理できます

Webflowの料金プラン（2024年7月改定後）

※価格はWebflow公式サイト（webflow.com/pricing）掲載の2024年7月改定後の参考値（米ドル建て、年払い換算）です。月払いはやや高くなります。最新価格は公式サイトでご確認ください。

Webflowの基本的な使い方

Step 1：アカウント作成とプロジェクト開始

webflow.comでGoogleアカウントまたはメールアドレスで無料登録します。ダッシュボードから「New project」→「Blank site」または「Template」を選択してプロジェクトを作成します。用途に近い無料・有料テンプレートを選ぶと初期構造が整った状態から制作を始められます。

Step 2：Designerでページを設計する

Designerのキャンバス上で要素を追加・配置します。左パネルからセクション・コンテナ・テキスト・画像・ボタンなどの要素をドラッグして配置し、右パネルでスタイル（サイズ・色・余白・タイポグラフィ）を設定します。ブレイクポイント（PC/タブレット/スマートフォン）を切り替えて各デバイスでのレスポンシブデザインを確認・調整します。

Step 3：CMSコレクションの設定とコンテンツ入力

ブログやポートフォリオなどのコンテンツがある場合、CMSパネルで「Collections」を作成し、フィールド（タイトル・本文・画像・カテゴリ等）を定義します。デザインした「Collection Template Page」にCMSフィールドをバインドすることで、コンテンツを追加するたびにデザインが自動適用されるページが生成されます。

Step 4：公開とドメイン設定

「Publish」ボタンでサイトを公開します。Starterプランではwebflow.ioサブドメインで公開されます。独自ドメインを設定するにはBasicプラン以上が必要で、ドメインのDNS設定をWebflowが提供するCNAMEに向けることで独自ドメインでの公開が完了します。

「誰でも一瞬でわかる資料を作る」：WebflowでWebサイトに「行動を喚起する設計」を実装する

Renueの社内ガイドラインには「誰でも一瞬で『わかる』資料を作る」として、「スライド資料は『読む』ためではなく『行動を喚起する』ための媒体。1スライド=1メッセージを徹底し、情報の優先順位を視覚的に表現する」という考え方があります。

Webflowで制作するWebサイトも全く同じ原則が適用されます。よくある失敗パターンは「伝えたいことを全部詰め込んだWebサイト」です。機能・料金・事例・会社概要・問い合わせが全て均等に並んでいるWebサイトは、訪問者にとって「何をすればいいのかわからないページ」になります。Webflowで「行動を喚起するWebサイト」を設計するための4原則は以下の通りです。

• 1セクション=1メッセージ：Heroセクションで「誰に・何を・どんな価値を提供するか」を1文で伝え、以降のセクションはその証拠・詳細・行動喚起の順に配置します。1つのセクションに複数のメッセージを詰め込まず、各セクションを見た瞬間に「何が言いたいか」が1秒でわかる設計にします
• 情報の優先順位をビジュアルで表現する：Webflowのタイポグラフィ設定で、最重要情報（ヘッドライン）は大きく・太く、サポートする情報は中サイズ、補足は小さく・薄い色で表現します。フォントサイズの階層が明確なサイトは、訪問者が情報をスキャンするスピードが上がります
• CTAは1ページに1つを原則にする：「資料請求する」「無料相談する」「購入する」という複数のCTAが均等に並ぶと訪問者が迷います。ページの目的に対して最も重要なアクション1つを決め、そのCTAボタンを色・サイズで視覚的に目立たせます
• モバイルファーストで確認する：Webflowのブレイクポイント機能でスマートフォン表示を確認し、テキストが読めるサイズか・CTAボタンが指でタップできる大きさか・重要情報がスクロールせずに見えるかをチェックします。現在のWeb訪問の過半数はモバイルからです

WebflowとWix・WordPress・Framerの比較

よくある質問（FAQ）

Q. Webflowは日本語に対応していますか？

公式の管理画面UIは英語のみです（2025年時点）。ただし、Webflow日本コミュニティのメンバーが開発したChrome拡張「Webflow日本語化」を使うと管理画面を日本語表示にできます。WebサイトのコンテンツとしてはJapanese対応フォント・日本語テキストを問題なく使用でき、訪問者向けの日本語サイトの構築は標準で対応しています。

Q. WebflowはWordPressと比べて本当にSEOに強いですか？

Webflowはクリーンなコードが出力されるため、WordPressのプラグインに頼らなくても基本的なSEO設定（メタタグ・OGP・サイトマップ・構造化データ・301リダイレクト）をネイティブに設定できます。一方でWordPress＋YoastなどのSEOプラグインは機能の網羅性で優れています。「シンプルなSEO設定・高速表示・クリーンコード」を重視するならWebflow、「SEOプラグインの豊富さ・細かいカスタマイズ」を重視するならWordPressが選択候補です。

Q. プログラミング知識がなくても使えますか？

完全に不要ではありませんが、HTML/CSSの概念（ボックスモデル・フレックスボックス・クラスなど）を理解していると設計がスムーズになります。Wixや他の初心者向けビルダーと比べると学習コストは高め（公式の学習プラットフォームWebflow Universityに無料の日本語字幕付きコースあり）です。「ノーコードだが、コードの概念は理解している」デザイナーや、テンプレートから始めるマーケターに特に向いています。