【CMS】webflowとは？使い方や無料で使える範囲について徹底解説

Webサイトを作成するための選択肢は多様化しており、特にCMS(Content Management System)の使用率は手堅いものがあります。

CMSの中でも安定の人気を誇っているのが「Webflow」です。

すーさん

本記事では、Webflowの使い方、特徴、メリット・デメリットについて詳しく解説します。さらに、多くの人が利用しているWordPressとの比較も行います。

Webflowとは

Webflowは、2013年にサンフランシスコで設立されたCMS・Web制作ツールで、デザイン、開発、ホスティングを一つのプラットフォームで行うことができます。

Webflowでは、ユーザーは実際にHTMLやCSSのコードを書かずに、ユーザーインターフェースを使ってWebサイトのデザインと開発を同時に行うことができます。

これらの特徴から、Webflowはwebデザイナーやデベロッパーだけでなく、企業や個人ブランド、eコマース店舗など、さまざまなユーザーに利用されています。

Webflowの世界での使用率

一部の統計(上記画像)によれば、Webflowは全世界で人気のCMSの中でもアクセス数の多いサイトで利用されていることがわかります。

WordPressよりもです。

さらに、BuiltWithというウェブテクノロジー情報サイトによると、Webflowは2021年には約40万のwebサイトで使用されており、その数は年々増加傾向にあると報告されています。

また、アメリカやイギリスなどの先進国での使用率が特に高く、特にスタートアップ企業やデジタルエージェンシーでの採用が多いとされています。

Webflowの特徴

以下、Webflowの主な特徴です。

ビジュアルプログラミング

Webflowはビジュアルプログラミングを採用しており、HTMLやCSSのコードを直接書くことなく、ドラッグ＆ドロップの操作でwebサイトをデザインすることができます。

これにより、デザインの経験があるがコーディングの経験がない人でも、クオリティの高いwebサイトを作成できます。

レスポンシブデザイン

Webflowのデザインツールはレスポンシブデザインに対応しています。

デザイナーはさまざまなデバイス（デスクトップ、タブレット、モバイルなど）に対応するデザインを一つの管理画面で編集できます。

カスタムCMS

Webflowでは、カスタムフィールドを作成し、それに基づいてコンテンツを作成できるCMSを提供しています。

これにより、デザイナーは自分のニーズに合わせてコンテンツのフレームワークを設計できます。

バックエンドの自由度

Webflowはwebサイトのホスティングも提供していますが、自分でバックエンドを設定することも可能です。

これにより、独自のAPIやデータベースを接続するなど、より高度なカスタマイズが可能となります。

SEO対策とアクセシビリティ

Webflowでは、ページのメタデータやOpen Graph設定、301リダイレクトなど、基本的なSEO対策機能を直接編集することができます。

さらに、webサイトのアクセシビリティを確保するためのツールも提供しています。

Eコマース機能

Webflowでは、独自のeコマースプラットフォームを提供しており、製品ページのカスタムデザインやショッピングカート、支払い処理などを行うことができます。

これにより、Webflowだけで完全にカスタマイズ可能なオンラインストアを作成できます。

Webflowのメリット・デメリット

以下、Webflowのメリットとデメリットです。

Webflowのメリット

コーディングの知識がなくてもwebサイトを作成できる

コーディングの知識がなくても、ドラッグ＆ドロップ機能を用いてハイクオリティなwebサイトを作成できます。

また、リアルタイムでのビジュアルエディタにより、作成したデザインがどのように表示されるかをすぐに確認できます。

レスポンシブデザインに対応

Webflowでは、デバイスごとの表示を微調整することができます。

これにより、デスクトップからモバイルまでの全てのデバイスで最適なユーザーエクスペリエンスを提供できます。

ホスティングも一括して行うことができる

Webflowは高速で信頼性の高いホスティングを提供しています。

Webflowで作成したwebサイトは、AWS(Amazon Web Services)上でホスティングされ、FastlyのCDN（コンテンツデリバリーネットワーク）を通じて全世界に配信されます。

Webflowのデメリット

機能を理解するまで多少時間がかかる

Webflowの機能は強力である一方、それらを全て理解して使用するには時間と実践が必要です。

特に、コーディングの経験がない人にとっては最初のうちは難しいかもしれません。

月学費用がかかる

高度な機能を使用するためには、比較的高い料金を支払う必要があります。

特に、webサイトを公開するためには別途「サイトプラン」が必要で、これがコスト面でのネックです。

この点では、WordPressは無料でできるというメリットがあります(ドメイン・ホスティング料は有料)。

制限付きのeコマース機能

Webflowはeコマース機能を提供していますが、まだ成長途上であり、Shopifyのような専門的なeコマースプラットフォームにはまだ及ばない部分があります。

プラグインと拡張機能の欠如

Webflowは豊富な組み込み機能を持っていますが、Wordpressのように、数多くのプラグインや拡張機能を提供しているわけではありません。

これにより、特定のニーズを満たすために、外部のAPIやツールを手動で統合する必要があります。

日本語には対応していない

最大の欠点と言ってもいいのが、現状（2023年8月時点）英語のみの対応で、日本語には対応していません。

Webflowの料金プラン

Webflowでは、個人利用からビジネス利用まで様々なニーズに合わせたプランを提供しています。

まずはアカウントプランに加入し、アカウント作成後、サイトプランに加入します。

サイトプランには一般用とeコマース用の二つがあり、どちらかに加入する必要があります。

アカウントプラン

まず、Webflowを利用するにはアカウントプランに加入する必要があります。

以下がアカウントプランの種類です。

Starterプラン

無料で利用可能。

基本的な機能を使用して2つまでのプロジェクトを作成できますが、Webflowのブランドが表示され、一部の機能は利用できません。

コアプラン

無料プランの制限を解除し、最大10のプロジェクトとコードエクスポート機能を利用できます。最大3人まで同じ機能を利用できます。

Proプラン

無制限のプロジェクトと高度な機能（例えば、White Labeling）を利用できます。

最大9人まで同じ機能を利用できます。

エンタープライズプラン(価格非公開)

ほとんどの機能を制限なして利用できます。

以上のプランはいずれも「アカウントプラン」で、Webflowのデザインツール自体の使用料金をカバーします。

webサイトを公開するには、さらに「サイトプラン」が必要となります。これらは公開したいwebサイトごとに購入する必要があります。

サイトプラン（一般用）

アカウントプランに加入したら次にサイトプランに加入する必要があります。

一般用サイトプランの種類は以下の通りです。

Starterプラン

無料で利用可能。

勉強用として適しています。

50のCMS機能を利用できます。

Basicプラン

静的なwebサイトに適しています。

CMSやeコマース機能は利用できません。

CMSプラン

WebflowのCMS機能を利用できます。

ブログやニュースサイトに適しています。

ビジネスプラン

大規模なwebサイトや高度なCMS機能が必要な場合に適しています。

エンタープライズプラン

ほとんどの機能を制限なして利用できます。

サイトプラン（Eコマース用）

Eコマース用サイトプランは3つあり、無料のプランはありません。

それぞれの詳細は以下の通りです。

Standardプラン

50のEコマース用機能、200のCMS機能を利用できます。

Plusプラン

5,000のEコマース用機能、10,000のCMS機能を利用できます。

Advancedプラン

15,000のEコマース用機能、10,000のCMS機能を利用できます。

上記の料金はすべて年間契約の場合の月額料金です。

具体的な金額やプランの詳細は、Webflowの公式ウェブサイトで確認できます。

Webflowのアカウント設定

以下にWebflowのアカウント設定の詳細をご紹介します。

ステップ①：アカウントの作成

まずはWebflowの公式サイトにアクセスしましょう。

「Get started for free」ボタンをクリックし、新しいアカウントを作成します。

アカウント作成には、有効なメールアドレス、パスワード、フルネームが必要です。

ステップ②：メール認証

アカウント作成時に入力したメールアドレスに認証メールが送られてきます。

そのメールに記載されているリンクをクリックして、メールアドレスの認証を行います。

ステップ③：プロフィール設定

メール認証後、ダッシュボードにアクセスしてプロフィール設定を行います。

アバターの設定、氏名、ロケーション、職業など、公開する情報を設定できます。

ステップ④：無料か有料プランの選択

Webflowでは、プランを選択することで機能を拡張できます。

無料プランでも十分に機能は利用可能ですが、プロフェッショナルな利用を考える場合は有料プランを検討しましょう。

ステップ⑤：新規プロジェクトの作成

プロフィール設定が完了したら、新規プロジェクトを作成しましょう。

「New Project」ボタンをクリックし、テンプレートを選んだり、新しくデザインを始めたりします。

以上が基本的なWebflowのアカウント設定です。

設定はすべてブラウザ上で行え、特別なソフトウェアをインストールする必要はありません。

Webflowの使い方

ダッシュボードの理解

Webflowを開始すると、まずダッシュボード画面に行きます。

ここでは、新しいプロジェクトの作成や既存のプロジェクトの管理、さらにはアカウント設定などが行えます。

プロジェクトの作成

「New Project」ボタンをクリックして新しいプロジェクトを開始します。

ここで、ブランクの新規プロジェクトを開始するか、またはWebflowが提供する様々なテンプレートから選ぶことができます。

デザインエディターの理解

プロジェクトを開始すると、Webflowのデザインエディターにアクセスします。

左側のパネルは、ページのエレメントやコンテンツを追加する場所です。

右側のパネルでは、選択したエレメントのスタイルを編集できます。

エレメントの追加

左側の「Add Elements」パネルから、さまざまなエレメントをページに追加できます。

これらのエレメントはドラッグ＆ドロップで追加でき、独自のレイアウトを自由に作成することができます。

スタイルの編集

エレメントを選択すると、右側の「Style」パネルがアクティブになり、ここでエレメントのスタイルを編集できます。

色、フォント、マージン、パディングなど、CSSと同様のプロパティを視覚的に調整することができます。

ページの作成と管理

上部の「Pages」パネルでは、新しいページを作成したり、既存のページを管理したりすることができます。

各ページには独自のSEO設定やカスタムコードを設定することができます。

レスポンシブデザインの確認

上部のデバイスアイコンをクリックすると、さまざまなデバイスサイズでのデザインをプレビューできます。

この機能を使用して、レスポンシブデザインを最適化しましょう。

サイトの公開

全てのデザインと設定が完了したら、「Publish」ボタンをクリックしてサイトを公開します。

また、サイトのURLをカスタマイズすることも可能です。

Webflowで作られたサイト例

Webflowを使って作成されたウェブサイトは、そのビジュアル性とユニークなデザインで知られています。

WebflowのShowcaseでは、世界中のクリエイターがWebflowで制作したウェブサイトを見ることができます。

Bonsai

Bonsaiはフリーランスのクリエイター向けのプラットフォームであり、そのウェブサイトはWebflowで作成されています。

サービスの紹介、料金プランの表示、登録などが提供されています。

URL: Bonsai

Bond

BondはFintech企業であり、そのウェブサイトもWebflowで作成されています。

サービスの紹介、製品の詳細、お問い合わせフォームなどが提供されています。

URL: Bond

Yes Theory

Yes Theoryは冒険と自己成長をテーマにしたYouTubeチャンネルおよびコミュニティであり、そのウェブサイトもWebflowで作成されています。

エピソード、イベント、商品などが紹介されています。

URL: Yes Theory

Dropbox Sign

HelloSign(現ドロップボックスサイン)は電子署名サービスを提供する企業で、そのウェブサイトはWebflowを使用して作成されました。

明るい色合いとシンプルなデザインが特徴で、使いやすさと視覚的魅力を兼ね備えています。

URL: Dropbox Sign

Otter

OtterはAI音声認識テクノロジーを提供している企業であり、そのウェブサイトもWebflowで作成されています。

製品の説明、価格プラン、デモなどがあります。

URL: Otter

WebflowとWordPressの違い

以下は、WordPressとWebflowの主な機能と特性を比較した表です。

WeblowとWordpressの比較表

Webflowは視覚的なデザインツールで、コーディングなしにWebサイトを作成できます。

一方、WordPressはより技術的でカスタマイズ性が高く、幅広いプラグインとテーマであらゆる種類のサイトに対応することができます。

Webflowはホスティングも提供しており、手軽に管理できますが、WordPressは自分でホスティングを選び、より細かく管理する必要があります。

まとめ

Webflowは、コードを書かずに美しいwebサイトをデザインするためにはもってこいのツールです。

特にデザインにこだわりたい方や、CMS機能を活用してコンテンツを効率良く管理したい方には最適な選択肢と言えるでしょう。

ただし、初心者にとっては学習コストが高くなる可能性がありますので、自身のスキルとニーズに合わせて最適なツールを選びましょう。

すーさん

webデザイナー/webエンジニア

TwitterInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！