
カバー画像:AIによるコンセプトイメージ
執筆・編集:ALIH. STUDIO | 公開・情報確認:2026年9月12日
この記事では、WordPress、HTML・CSS・JavaScriptを直接書く制作、Webflowの3つを比較します。どれかが一律に上位という関係ではなく、得意な進め方と管理する範囲が異なります。
まず、比べているものの種類を整理する
WordPressは、記事やページを管理するCMSです。ここでは主に、WordPress.orgで配布されるソフトウェアを、選んだサーバーで運用する構成を指します。WordPress.comというホスティングサービスとは、契約や管理する範囲が異なります。参考:WordPress.comとWordPress.orgの違い
HTML直書きは、ページを構成するコードを直接書く制作方法です。HTMLは内容や構造、CSSは見た目、JavaScriptは操作や動きを主に担当します。ここではCMSを組み込まず、静的なファイルを公開する構成を中心に考えます。参考:MDNのHTML入門
Webflowは、画面上で構造・スタイルを設計し、CMSやホスティングも利用できるサービスです。コードを書かない操作が中心でも、レイアウトやレスポンシブ表示の理解は制作に役立ちます。実際の運用は、使う機能と契約プランに合わせて設計します。参考:WebflowのCMS Collections
WordPress:更新と拡張の仕組みを組み合わせる
WordPressは、記事の追加や分類を管理画面から行う構成を作れます。テーマによるデザインの変更、プラグインによる機能追加など、サイトの目的に合わせて組み合わせる仕組みがあります。参考:WordPressの主な機能
ブログやメディアのように、記事を継続して増やす運用の候補になります。編集画面や権限、必要な機能を実際に確認し、更新担当者が扱える形を選びましょう。
デザインは既存テーマに限られず、独自テーマや追加の実装も可能です。ただし、自由に変更できることと、低い費用で簡単に変更できることは別です。テーマやプラグインの選択、追加開発によって工数が変わります。
運用では、本体・テーマ・プラグインの更新、バックアップ、互換性の確認を誰が行うかを決めます。管理代行付きサーバーを使う場合も、任せられる範囲は契約ごとに確認してください。参考:WordPressの更新
HTML直書き:構成と実装を直接管理する
HTML・CSS・JavaScriptを直接扱う方法では、画面の構造や動きをコードで設計します。ツール固有の編集画面に合わせずに作れる一方、作ったものを維持するための知識も必要です。
CMSを組み込まない場合、記事を投稿する管理画面は標準では付きません。内容の変更はファイルの編集と再公開が基本になります。自社で頻繁に更新するなら、担当者がその作業をできるか、別のCMSや仕組みを追加するかを考えます。
「静的」という言葉は、画面が動かないことを意味しません。静的なファイルでも、ブラウザ上のJavaScriptでアニメーションや操作を加えられます。一方、問い合わせ内容の受信・保存などには、別の送信先やサーバー側の処理が必要です。参考:MDNのサーバー側処理の解説
ページ数や更新頻度が少ないサイト、独自の表現を細かく設計したい画面などで候補になります。ファイルを移すだけでは使えなくなる外部機能がないかも、公開先の変更時に確認します。
Webflow:視覚的な制作とCMS・公開環境をつなぐ
Webflowでは、ページの構造やスタイルを視覚的に設定し、繰り返し追加する情報をCMSのCollectionとして管理できます。企業サイトや採用サイトなどで、デザインと更新項目をまとめて設計したいときの候補になります。
Webflowでホスティングする場合、配信基盤やSSL証明書などの提供をサービス側に任せられます。ただし、独自コード、外部連携、アカウント管理、掲載情報の更新まで不要になるわけではありません。参考:Webflowのホスティング概要
記事を更新する人が使う画面、必要な編集権限、CMSの項目や件数、言語対応、外部機能との連携は、導入前に確認したい点です。必要な機能によってプランや追加サービスが変わるため、制作費と継続費を合わせて比較します。
コードを書き出せても、機能がすべて移るわけではない
Webflowの公式コード書き出しでは、HTML・CSS・JavaScript・画像などを出力できます。利用には対象の有料Workspaceプランが必要で、Siteプランの契約だけではコード書き出しは含まれません。
また、CMSの機能や、CMSと結び付いたページ内容、フォームの送信処理、サイト内検索などは、そのまま外部の公開先へ移るものではありません。CMSのデータをCSVで書き出せても、それを表示・更新する仕組みは別途必要です。参考:Webflow公式のコード書き出し条件
将来別の公開先へ移す可能性があるなら、どのデータ・デザイン・機能を引き継ぐかも制作前に確認しましょう。
3つを比べる、5つの質問
1. 誰が、何を、どれくらい更新しますか?
記事を頻繁に投稿するなら、WordPressやWebflowのCMS画面を実際に触り、必要な更新ができるかを確認します。変更が少なく、コードを管理できる担当者がいるなら、HTML直書きも選択肢になります。
2. 必要な機能は、標準で実現できますか?
会員機能、検索、予約、決済、多言語、外部システム連携などは、名前だけで可否を判断しないことが大切です。標準機能・追加サービス・独自開発のどれになるかと、その運用費を整理します。
3. 誰が保守を担当しますか?
サーバー、ソフトウェア、外部サービス、更新画面など、担当する範囲が異なります。Webflowは管理不要、WordPressは危険、HTMLなら絶対安全、といった単純な分け方はできません。構成と運用方法を具体的に比べます。
4. 制作費だけでなく、維持費も見ていますか?
同じ見た目でも、既存テーマの活用、独自の実装、原稿作成、CMS設計で工数は変わります。利用料、更新作業、保守、将来の改修まで含めて、自社の運用に合うかを確認します。
5. 引き継ぎや移行に何が必要ですか?
管理アカウント、ファイル、データ、外部サービス、利用ライセンスを整理します。「コードを受け取れる」からといって、すべての機能を移せるとは限りません。
SEOや表示速度は、ツール名だけでは決まらない
どの方法でも、情報の内容、ページの構造、画像の扱い、リンク、表示の確認が必要です。Googleのガイドも、役立つ内容、読みやすい構成、検索エンジンが理解しやすい情報などを案内しています。特定のツールを選ぶだけで検索順位が上がるとは言えません。参考:GoogleのSEOスターターガイド
表示速度も、画像・動画・JavaScript・外部タグ・公開環境などに影響されます。アニメーションを多く使う場合は、見せ場と読みやすさを両立できているか、スマートフォンでも確認します。
迷ったときは、更新する場面を見せてもらう
同じ文章や画像を変更する操作を、それぞれの方法でどう行うか見せてもらうと、運用の違いを判断できます。「会社紹介を作る」だけでなく、「公開後に担当者が何をするか」まで共有して選びましょう。
依頼の整理には、制作前に用意するものと、保守費用の確認項目も役立ちます。
Web制作ガイドの一覧へ ↗