株式会社renue
renueについて
renueは、AIで業務を実装する会社です
AIコンサルティングから図面AI・広告運用エージェント・コールセンターAIまで、実際に動いているサービスをご覧いただけます。renueが何をしている会社か、まずはサービス一覧からご確認ください。
Webflowとは？デザイナー品質のWebサイトをノーコードで制作するプラットフォーム
Webflow（ウェブフロー）は、2013年創業のWebflow社が提供するノーコードWebサイトビルダー・ビジュアルCMSプラットフォームです。（出典：Webflowの創業年）HTML/CSSの知識がなくてもプロ品質のWebサイトをビジュアル操作で制作できる点が最大の特徴で、世界中のデザイナー・マーケター・エージェンシーに活用されています。
Webflowが他のWebサイトビルダーと異なるのは「ビジュアルに操作しながらも、クリーンなHTML/CSSコードが出力される」点です。HTML/CSSの構造やスタイルを視覚的に細かく調整でき、カスタムアニメーション・スクロールエフェクトなどのリッチな表現も設定できます。WixのエディターやWordPressのテーマ・プラグインにも表現を拡張する方法があるため、自由度は制作したい画面と実装方法で比較します。コーポレートサイト・ランディングページ・ポートフォリオ・スタートアップの製品紹介サイト制作で特に支持されています。
Webflowの主な機能
- ビジュアルエディター（Designer）：ドラッグ＆ドロップでHTML/CSSを視覚的に設計します。要素の配置・サイズ・余白・タイポグラフィ・カラーをピクセル単位で調整でき、スマートフォン・タブレット・PCの各ブレイクポイント別にデザインを設定できます
- CMS（Collections）：ブログ記事・事例・製品・チームメンバーなど任意の構造でコンテンツ型を定義できます。デザインしたテンプレートにCMSのデータを紐付けることで、コンテンツが増えても自動的にデザインが適用されます。エディターモードで非エンジニアのチームメンバーがコンテンツ更新できます
- ホスティング・CDN：Cloudflareを利用するマネージドホスティングとCDN配信を提供。（出典：公式のホスティング基盤）SSL証明書の自動適用・自動バックアップ・高速表示に対応しており、別途サーバー契約が不要です
- SEO設定：ページごとのメタタイトル・ディスクリプション・OGP設定・301リダイレクト・XMLサイトマップの自動生成・構造化データへの対応が可能です。コードの出力方式だけでGoogleの検索順位の優位が決まるわけではありません。各ページの内容に応じたSEO設定と検証を行います（出典：ページ別SEO設定、メタデータ・構造化データの確認）
- アニメーション・インタラクション：スクロールトリガー・ホバー・クリック・ページ読み込みアニメーションをコードなしで設定できます。視差効果（パララックス）や要素の動きで印象的なWebサイト表現が可能です
- eコマース：商品ページ・カート・決済フロー（Stripe連携）をビジュアルで構築できます。商品ページやカートの表示をブランドに合わせて設計できます。Shopifyとの比較では、使用するテーマや独自実装、必要な販売・決済機能まで含めて判断します
- 多言語機能（Localize）：2023年11月にLocalizationを全顧客へ提供開始し、現在の公式資料ではWebflow Localizeと案内されています。日本語・英語など、言語や地域別のコンテンツを1つのサイトで管理できます。追加言語の公開や機能はLocalizeのプランによって異なり、Ecommerceの商品・カテゴリ・ページは対象外です（出典：2023年の一般提供、現行機能と制限、サイトの言語設定）
Webflowの料金プラン（最新情報は公式サイトを確認）
| サイト/統合プラン | 月額（年払い換算） | 主な制限・特徴 |
|---|---|---|
| Starter（無料） | 無料 | 静的2ページ・CMS50件・帯域1GB/月・webflow.ioサブドメインで公開 |
| Basic | $15〜 | 静的300ページ・独自ドメイン対応・帯域10GB/月・CMSなし |
| Premium | $25〜 | 旧CMS/Businessを統合。静的300ページ・CMS20,000件/40コレクション・基本帯域50GB/月。ブログ・事例サイト向け。追加帯域は別料金 |
| Team（統合プラン） | $2,500（年間契約） | SiteとWorkspaceをまとめた組織向けプラン。Localize・公開ワークフロー等を含む。サイト単体のPremiumとは契約範囲が異なる |
| Enterprise | 要見積もり | 制限カスタム・専任サポート・高度なセキュリティ |
※2026年9月17日確認。Webflowの表示は米ドル建てで、Basic/Premiumは1サイトあたりの年払い月額換算、適用される税は決済時に加算されます。月払いはBasic $25、Premium $39です。Teamは年間契約の統合プランです。新規契約の旧CMS/Businessは2026年5月13日からPremiumへ統合されました。既存契約は原則6月29日以降の更新・有料変更時から、一部のFreelancer/Agency Workspaceや旧価格の契約は11月16日以降に移行します。追加帯域や既存契約の条件で総額は変わるため、契約画面で確認してください。（出典：Webflow公式料金、プラン統合と移行条件）
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プラン以上が必要で、Site settings > Publishing > Productionでドメインを追加し、そのサイトに表示されるDNSレコードを設定します。ルートドメインとwww等のサブドメインではA/CNAMEなど必要なレコードが異なり、所有権確認用のTXTレコードも必要です。DNSの反映とドメインの検証を確認し、公開先ドメインを選択してPublishします。移行時期によって値が異なるため、他サイトの設定値を流用しないでください。（出典：独自ドメインの設定・検証・公開）
「誰でも一瞬でわかる資料を作る」：WebflowでWebサイトに「行動を喚起する設計」を実装する
一般的な設計原則として、次の考え方があります。「スライド資料は『読む』ためではなく『行動を喚起する』ための媒体。1スライド=1メッセージを徹底し、情報の優先順位を視覚的に表現する」という考え方があります。
Webflowで制作するWebサイトも全く同じ原則が適用されます。よくある失敗パターンは「伝えたいことを全部詰め込んだWebサイト」です。機能・料金・事例・会社概要・問い合わせが全て均等に並んでいるWebサイトは、訪問者にとって「何をすればいいのかわからないページ」になります。Webflowで「行動を喚起するWebサイト」を設計するための4原則は以下の通りです。
- 1セクション=1メッセージ：Heroセクションで「誰に・何を・どんな価値を提供するか」を1文で伝え、以降のセクションはその証拠・詳細・行動喚起の順に配置します。1つのセクションに複数のメッセージを詰め込まず、各セクションを見た瞬間に「何が言いたいか」が1秒でわかる設計にします
- 情報の優先順位をビジュアルで表現する：Webflowのタイポグラフィ設定で、最重要情報（ヘッドライン）は大きく・太く、サポートする情報は中サイズ、補足は小さく・薄い色で表現します。フォントサイズの階層が明確なサイトは、訪問者が情報をスキャンするスピードが上がります
- CTAは1ページに1つを原則にする：「資料請求する」「無料相談する」「購入する」という複数のCTAが均等に並ぶと訪問者が迷います。ページの目的に対して最も重要なアクション1つを決め、そのCTAボタンを色・サイズで視覚的に目立たせます
- モバイルファーストで確認する：Webflowのブレイクポイント機能でスマートフォン表示を確認し、テキストが読めるサイズか・CTAボタンが指でタップできる大きさか・重要情報がスクロールせずに見えるかをチェックします。Statcounterの世界集計では、2026年8月のページビューの49.36%がモバイルでした（9月17日確認）。同社の計測コードを導入したサイトの集計で、全訪問者の人数比や個々のサイトの比率を示すものではありません。対象サイト自身のアクセス状況も確認します（出典：2026年8月の世界集計、集計方法）
WebflowとWix・WordPress・Framerの比較
| 比較軸 | Webflow | Wix | WordPress | Framer |
|---|---|---|---|---|
| 対象ユーザー | デザイナー・エージェンシー | 初心者・中小企業 | 幅広い（技術者〜初心者） | デザイナー・スタートアップ |
| 学習コスト | 高め（HTML/CSS概念が必要） | 低い（直感的D&D） | 中程度（プラグイン依存） | 中程度（Figma感覚） |
| デザイン自由度 | 非常に高い | 中程度 | テーマ・プラグイン次第 | 高い |
| SEOの設定機能 | ページ別タイトル・説明、構造化データ等（出典：Webflow公式、構造化データ） | ページ別メタタグ・構造化データ等（出典：Wix公式） | パーマリンク等の標準機能とSEOプラグインによる拡張（出典：WordPress公式） | タイトル・説明・サイトマップ等（出典：Framer公式） |
| 料金（無料枠と有料入門） | 無料枠あり。Basic $15/月〜（米ドル・年払い、税別）（出典：公式料金） | 無料枠あり。日本向けパーソナル1,300円/月（年払い換算、税別）（出典：日本向け公式料金、年払いの案内） | WordPress.orgのソフトウェアは無料。ホスティング・ドメイン・有料テーマ等は別（出典：WordPress.org） | 無料枠は非商用向け。Basic $10/月〜（年払い表示、適用税別）（出典：公式料金） |
| 向いている用途 | コーポレート・LP・ポートフォリオ | 小規模ビジネス・個人 | ブログ・大規模サイト | LP・プロダクト紹介 |
よくある質問（FAQ）
Q. Webflowは日本語に対応していますか？
訪問者向けの日本語サイトの制作と、管理画面の日本語化は別です。日本語テキストと対応フォントを使い、サイトの言語を設定して日本語サイトを構築できます。管理画面の翻訳には、第三者のIGNITE Co., Ltd.が公開するChrome拡張「Webflow 日本語化」という選択肢があります。2026年9月17日確認の配布ページはバージョン1.0.3で、Dashboard・Designer・Site Settings等の翻訳を案内しています。Webflow公式のUI言語機能ではなく、CMSやBody等の技術用語は英語のままです。公開サイト自体は翻訳しません。（出典：サイトの言語設定、拡張の配布元と対応範囲）
Q. WebflowはWordPressと比べて本当にSEOに強いですか？
Webflowでは、メタタイトル・説明・OGP・サイトマップ・構造化データ・301リダイレクト等のSEO設定ができます。WordPressにも標準の検索向け機能があり、Yoast等のプラグインで設定機能を拡張できます。機能の有無だけで検索順位の優劣は決まらず、コンテンツ、サイト構造、表示速度、実装と運用によって結果が変わります。Webflowの管理画面に設定をまとめたいか、WordPressのテーマやプラグイン・独自実装を組み合わせたいかという運用面で比較してください。（出典：WebflowのSEO設定、構造化データ、WordPressのSEO機能）
Q. プログラミング知識がなくても使えますか？
完全に不要ではありませんが、HTML/CSSの概念（ボックスモデル・フレックスボックス・クラスなど）を理解していると設計がスムーズになります。Wixや他の初心者向けビルダーと比べると学習コストは高め（公式のWebflow Universityに無料の学習コースがあります。字幕の有無や対応言語は各コースで確認してください（出典：Webflow University））です。「ノーコードだが、コードの概念は理解している」デザイナーや、テンプレートから始めるマーケターに特に向いています。
Webflowによるサイト制作・LP制作を相談したい方へ
renueでは、Webflow・WordPress・Wixを活用したコーポレートサイト制作・ランディングページ制作・CMS構築・SEO設計のようなご相談にも対応可能です。「ノーコードでプロ品質のサイトを作りたい」「既存サイトをWebflowに移行したい」という方は、まずお気軽にご相談ください。
無料相談はこちら