- Webflowとは
- Webflowとは、コードを書かずにWebサイトを制作できるノーコードのWeb制作ツールです。デザインからサイトの公開まで一貫して行え、HTML・CSS・JavaScriptのコード出力にも対応しています。
こんにちは、Webflow専門家のマサトです。
この記事では「Webflowとは？」に焦点を当てWebflowの概要、なぜWebflowが世界で人気なのかについて解説していきます。また後半ではWebflow専門家が最初にWebflowを選んだ理由について解説していきます。
Webflowは一定まで無料で使えます。まずは触ってみたいという方は公式ページへどうぞ→公式HP
Webflowとは？主な特徴や機能について
Webflowとは？
Webflowは、コードを書かずにWebサイトを制作することができるノーコードのWeb制作ツールです。Webflowはクリエイティブなデザインや効率的な開発のための多彩な機能を提供しており、使いやすいインターフェースで簡単に操作できることが特徴です。
HTMLやCSSなどの知識がなくても、デザインからサイトの公開まで一貫して行うことができ、管理・更新も簡単なことから多くの時間を節約できます。
Webflowの主な特徴や機能について
Webflowにはデザインから開発までWebサイト制作に必要な機能が全て揃っています。以下にWebflowの主な特徴や機能について詳しく解説します。
- シンプルなUI（UI＝Webflowの制作画面） WebflowはWebデザインや開発の知識がなくても、マウスやキーボードを使って直感的に使用できます。従来のWeb制作の10分の1の速さで構築でき、初心者も簡単にWebサイトを制作することが可能。まずはWebflow公式のWebflow大学から学習するのがおすすめです。 >>Webflow大学（英文）>>Webflow大学 Web春解説版（日本語）
- レスポンシブデザインが簡単に作成できる Webflowはレスポンシブデザインにも対応しています。レスポンシブデザインとは、PCやスマートフォンなど、様々なデバイスで見られるWebサイトを制作するためのデザイン手法です。Webflowならこれらを自動作成してくれるため、かなりの時間を短縮できます。
- 100％カスタムデザインに対応可能 Webflowに縛りはなく、多様なデザインを実現することができます。唯一PHPが使えないことがたまにネックですが、必要な機能はWebflow APPにてリリースされています。必要であれば何でもできると言えるでしょう。また直接コードを書いて実装するということも可能であり、Webflowで対応していない範囲もカバーできます。
- ワイヤーフレームからサイト制作ができる WebflowはワイヤーフレームからWebサイト制作を行うことができます。ワイヤーフレームとは、Webサイトのレイアウトや構成を紙や画面上で簡単にプロトタイプ化する手法です。Webflowを使えばワイヤーフレームから制作を始めることができるため、効率的なWebサイト制作を行うことができます。つまりデザイン完成→コーディングという作業を短縮できるというわけです。（お客様のサイトである場合はしっかり相談しましょう）
- 外部APIとの連携が可能 Webflowは、外部APIとの連携も簡単に行うことができます。APIとは、Webサイトやアプリなどが外部のシステムとデータをやりとりするための機能です。例えば外部ツールを繋げることで自動返信メールを作成したり、Instagramの投稿を自動反映させたり、アクセスの解析をしたりできます。最近では自動返信メールはWebflow のみで対応可能になりました。
- アニメーションが簡単に作れる Webflowはアニメーションをクリックだけで作成可能。「えっスゴ！」と思わず思うAppleのようなWebサイトもWebflowなら簡単に作成できます。Webflow本社もアピールしているのがアニメーションの簡単作成なので期待して良い機能です。
- コード出力ができる 作ったサイトのコードをZipファイルにまとめて出力できます。HTML、CSS、Javascriptが綺麗に出力されます。「手書きより良い」と言われるほどのクオリティーです。またコードができることでツールの変更やサイトの自己管理ができます。コード出力ができないと仮にWebflowが倒産した際、自社サイトが消えてしまうので万が一を考えて自身でコードを保有できるのは嬉しいです。
- Webflowで大規模サイトを管理できる WebflowのCMSは現プランで10000ページまで作成できます。またCMSのアイテムごとにページURLやデザインを分けたり、フォルダ分けするだけでURLの階層を作れたりするため従来のWeb管理よりもかなり楽に管理することができ、人件費や外注費の削減に繋がります。
- 無料で使えるWebflowテンプレートの存在 Webflowには著作権フリーのテンプレートサイト「Made in Webflow」があります。これらのテンプレートはWebflowユーザーが規約に基づいて「自由に使っていいよ」と投稿しているものです。ここから自由にテンプレートを選んで自分のサイトにしましょう。ただ中には素人が作ったものがあり、カスタムが面倒な場合もあるので面倒であれば外注しちゃいましょう。
Webflowには以上のような機能があり、Web制作をより高速にできる便利ツールと認識できます。またWebflowのユーザーは世界に1億人以上おり、業績、サポート共に安定しています。
しかしなぜWebflowは世界で1億人以上に愛されているのでしょうか？上記で挙げた機能は他のノーコードや、WordPressでもカバーしていると言えます。そのため次のセクションではなぜWebflowを選ぶのか。メリット・デメリットを紹介していきます。
Webflowのメリット・デメリット
今まで多くのWebサイトをWebflowへ移行してきました。クライアントは口を揃えて「他のノーコードではできないことがWebflowではできる。」といいます。では具体的になにが違うのかメリット・デメリットの観点で紹介します。
Webflowのメリット｜他のツールより優れている点
WordPressやWIXなどの有名ツールと比べた際にWebflowの方が優れている点をまとめました。Webflowを使用するメリットは以下の通りです。
- 他のツールよりデザインの自由度が高い
- 他のツールよりCMSの自由度が高い
- 拡張機能のレベルが高い
- 全てが高速化＆コード不要＆専門知識不要
- プラグイン不要、アプデ対応不要
- コード出力ができる
Webflowは他のノーコードと比べても圧倒的に自由度が高いツールです。他のノーコードでは対応していない機能やコードなどがありますが、WebflowではHTML、CSS、JSのコードを基準に構築されています。そのため、やりたいことはほぼ全て対応できると言えるでしょう。また手書きコードも可能であることから一部対応していない機能も実施可能です。
WebflowはCMSの機能のカスタム機能が強く、オウンドメディアの運営管理などに最適です。CMS自体をオウンドメディアごとにカスタムできることからオリジナルの更新管理システムを作成できます。
WordPressはアプデの際にプラグインの兼ね合いなどもあり定期メンテが必須ですが、Webflowにはそれらは不要です。システム側の問題で管理に無駄な時間がかかることもセキュリティーに悩むこともないので安心して使用できます。
またWebflowはHTML、CSS、Javascriptのコードを出力することができます。これは他のノーコードには無い強みです。コード出力のおかげで、将来Webflow以外のツールに変更する事ができるためリスクヘッジにもなります。
これらはWebflow最大のメリットだと言えるでしょう。
Webflowのデメリット｜他のツールより劣っている点
しかしWebflowにもデメリットはあります。Webflowを使うとなれば以下のデメリットを考慮しましょう。
- USD支払いなのでコストが高い
- Webflowは習得までに時間がかかる
- サーバー関連は自由ではない（PHPなどは使用不可）
- 日本語解説がない
日本製のSTUDIOではコストが安く、日本語解説があります。その点ではWebflowは日本市場で負けていると言えます。
またWebflowはノーコードの中でも習得レベルが高いと言われています。APPLEのようなサイトが作れるのは事実ですが、その分難しくWebflow専門の知識が必要です。またサーバーはWebflowが用意しているものを使うことになります。そこに自由度はないと言えます。
さらに日本語のサポートがないことも相まって日本でWebflowを使用できる人はかなり少ないです。しかし僕はこのデメリットを逆手にとってWebflowへのコミットを決めました。
Webflow専門家の僕が最初にWebflowを選んだ理由
僕はWebflow専門で2024年で4年目になります。時には違うツールも試しましたが結局「Webflowの方がいいな。」と結論つけました。実際にWebflowを使っているからこそわかるWebflowを選ぶ理由を紹介していきます。
デザインがツールに縛られない
僕がWebflowを選んだ理由の一つにWebflowのテンプレートのレベルが高いことが挙げられます。僕が使用を始めた段階で既にWebflowを使用してAPPLEのサイトを模倣したサイトが作られていました。
これは他のノーコードでは表せないレベルのサイトで、これをみた時「Webflowができればコードを書くWebコーダーに並んだ成果を最短で出せる」と考えました。
またWebflowは時代の流れにも敏感で随時アップデートを繰り返し機能をドンドン高性能にしています。最近ではFigmaからのデザインをコピペする機能をリリースしたり、多言語展開の機能をリリースしたりしています。このサポートの強さからまだまだWebflowは安泰と確信しています。
またWebflowへのコミットを決めた理由は他にもあります。
- 資金調達NEWS（1億4000万ドル調達・評価額21億ドル）
- 専門性からの優位性
- 日本語の解説がないことのポジションの取り方
- 実はほぼギャンブル
実は僕がWebflowにコミットを決めた一番の理由は日本にライバルがいなかったからです。また当時は資金調達額200億円のようなニュースが流れており、企業の本気からコミットを決めました。ここらへんの詳細はプロフィールのページに書いていますが、特に読む必要はないです。
次にWebflowの使用感についてざっくり説明していきます。
Webflowの基本的な使い方
WebflowはHTML、CSSを基本としてサイト制作をします。そのため既にWebデザイナーで活躍している方やHTML、CSSを知っている方ならよりスムーズにWebflowを使いこなすことができるでしょう。未経験から始める方は「Webflow大学」というWebflow公式の無料講義があり、そこで学ぶことができます。
また各項目の詳しいWebflowの使い方については「Webflowの使い方をまとめました」の記事で紹介しています。
Webflowのサイト作成から公開までの手順
自分の会社のWEBサイトを作成すると仮定したステップを紹介します。Webflowのサイト作成から公開までの流れは、基本的に以下の手順に沿って進めましょう。当社独自の詳しい制作フローは料金ページに記載しています。
- デザインの作成 FigmaやAdobe XDなどのWebデザインツールを使用してWebデザインのフレームを作成します。色やフォントなどもある程度この段階で決めましょう。その際には、ウェブサイトの目的やターゲット層、設計コンセプトなどを考慮してプロジェクトの設定も行います。Figmaで作成することによってWebflowへデザインをコピペできる機能もあります。
- プロジェクトの作成 Webflowにログインして、新しいプロジェクトを作成します。Webflowのデザインエディタでウェブサイトを作成しましょう。
- ページの設定 Webflowでは、ページの設定を細かく行うことができます。たとえば、SEOに必要なメタデータやOGPの設定、自動返信の設定などができます。ここでSEOの設定を行いましょう。
- サイトの公開 デザインや設定が完了したら、Webflow内でサイトをパブリッシュしましょう。パブリッシュしたウェブサイトは、Webflowが提供するドメインでアクセスすることができます。独自ドメインを設定する場合には有料プランが必要になります。チームやフリーランスでなければワークスペースプランは必要なく、サイトプランのみで独自ドメインを利用できます。
＞Webflowの料金についての記事はこちら
＞Webflowで独自ドメインを使用する方法についてはこちら
WebflowでのSEO対策について
WebflowでのSEO対策の基本的な方法は、以下の通りです。
- コンテンツの品質向上
- メタデータの設定
- 画像の最適化
- リンクの質の向上
- ページの読み込み速度の向上
これらの対策を行うことで、検索エンジンのクローラーがサイトを正しく解析し、ユーザーが検索したキーワードでの上位表示を狙うことができます。
詳しくはWebflowのSEO対策 完全ガイドで解説しています。
Q＆A｜WebflowはSEOに強いですか？
A｜WebflowはSEOに強いと言われています。しかし3年以上使用した専門家の僕の意見は「他と大差ない」です。その理由はSEOは結局コンテンツの強さや質に依存するからです。もちろんドメインの強さや各方面の多少のテクニックなどもありますが、これらがノーコードひとつで大きく左右されることはないと考えています。
Webサイトは全てHTMLやCSSを基準としているので、その知識がないとどんなツールを使ってもSEOで勝つことはできないでしょう。以前に日本製のstudioで作られたサイトをSEOツールでみた際、Hタグ0個と表記されていたことがあります。これはstudioが悪いのではなく、制作者にSEOの知識がなかったと考えられます。サイトを簡単に作れる反面、このような知識不足が増えているのがノーコードはSEOが弱いと考えれる大きな原因でしょう。
その面でWebflowは全てのアイテムがコード基準ですので間違いやミスは起きにくいと言えます。Webflowで出てくる言葉はほとんどがそのままHTMLです。その分他のノーコードより難しいのがWebflowのネックな部分ではあります。
Webflowでのサイト構築｜自分で作るか、プロに依頼するか
Webflowでのサイト構築には大きく2つの進め方があります。自分で構築するか、制作会社に依頼するかです。
自分で構築する場合、費用はWebflowのプラン料金だけで済みます。本記事で紹介した基本操作を押さえれば、テンプレートを使ったサイトであれば数日で公開まで到達できます。一方で、デザインの再現度や、CMS設計・SEO設定・多言語対応などの構築品質は経験の差が出やすい部分です。
制作会社に依頼する場合は、デザインから構築・公開後の運用設計までを任せられます。Webflowはコードの分かる制作者が構築すると、表示速度・SEO・運用のしやすさが大きく変わるツールです。依頼先を選ぶ際は「Webflow専門かどうか」「構築後の運用まで設計してくれるか」を基準にすると失敗しません。
当サイトを運営する株式会社Web春はWebflow専門の制作会社です。構築のご依頼や相談はサイト制作サービスからどうぞ。「まず自分で作ってみたい」という方への個別アドバイスも行っています。
Webflowの導入事例
Webflowは、数多くの企業や個人によって活用されています。ここでは、Webflowで作成された導入事例をいくつか紹介します。
Webflowで作ったサイトの事例
ここでは日本国内でWebflowを導入している企業を紹介していきます。※僕独自でGoogleのChrome拡張機能を使用して調べたものになります。
- https://www.sakana.farm/ - 持続可能な水産養殖技術を提供する企業。
- https://trevary.webflow.io/ - オンラインの家具とインテリアデザインショップ。
- https://www.emptydressy.com/ - 未使用の衣類をリサイクルし、新たなデザインに生まれ変わらせるサービス。
- https://loview-customer-journey.webflow.io/ - Loviewの顧客体験に焦点を当てたウェブサイト。
- https://forstartups.webflow.io/ir - スタートアップ企業向けの投資家向け情報提供サイト。
- https://www.bsize.com/ - ビジネス戦略、デザイン、開発を提供するデジタルエージェンシー。
- https://careers.asteria.com/#benefit - Asteria社のキャリアページで、同社の福利厚生に焦点を当てています。
- https://www.impv-media.com/ - デジタルメディア制作とマーケティング戦略を提供する企業。
- https://spacetide2022ye.webflow.io/?fbclid=IwAR1j2H1JjpjKyMMIUiiNOfdaMRgoif_Fe_IsLqwk9_2QsjF1YRBeKPtxJ3w - スペーステクノロジーイベント「Spacetide 2022」のウェブサイト
- https://jeek.webflow.io/#flow - ソフトウェア開発者向けのコラボレーションツールJeekのウェブサイト。
- https://www.bravostudio.app/web-app-to-mobile-app - Webアプリをモバイルアプリに変換するサービスを提供するBravo Studioのウェブサイト。
- https://lp.ai-copywriter.jp/ - AIを活用したコピーライティングサービスを提供するウェブサイト。
なお、こちらはGoogle検索で見つけた企業ですので、削除希望があればすぐに対応いたします。
Webflowのサイトと判別するためにはWebflowチェッカーというChromeの拡張機能を使用します。この拡張機能を使ってDiscordのサイトを見てみるとWebflowで作られていることがわかります。
このように世界ではWebflow導入の動きがかなり活性化しています。その背景にノーコードでも使いやすく高性能であること、十分な資金力、ユーザーの熱意が揃っていることが大きな力を呼んでいると考えられます。2024年時点ではAIの力もかなり拡大していますが、まだまだWebflowの存在を否定するものではなく、将来的なWeb管理や運用の面では今後も安定した業績を保てると考えています。（2026年追記: AIによる制作が広がった2026年現在もWebflowはノーコードツールとして健在で、当社もWebflow制作を継続しています）
Webflowは無料でサイト作成に必要なほとんどの機能を使用できます。まずは触ってみて必要に応じて課金していくのがおすすめです。僕自身も最初の3ヶ月は無料でサイト運営をしていました。もし何か困ったことがあればWebflowコミュニティーや制作依頼などもお受けしているのでご相談くださいませ。
よくある質問
Webflowは無料で使えますか？
一定の範囲まで無料で使えます。まず触ってみたい場合は無料プランから始めて、公開時に有料プランを検討すれば十分です。
コードの知識がなくても使えますか？
HTMLやCSSの知識がなくても、マウス操作で直感的にデザインからサイト公開まで行えます。学習はWebflow公式の「Webflow大学」（当ブログに日本語解説版あり）から始めるのがおすすめです。
Webflowでできないことはありますか？
PHPは使えません。ただし必要な機能の多くはWebflow APPで提供されており、カスタムコードの実装で対応できる範囲も広いです。
作ったサイトのコードは取り出せますか？
HTML・CSS・JavaScriptをZipファイルで出力できます。ツールの乗り換えやサイトの自己管理ができ、万が一の際も自社でコードを保有できます。
