【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の主な特徴です。
- ビジュアルプログラミング
- レスポンシブデザイン
- カスタムCMS
- バックエンドの自由度
- SEO対策とアクセシビリティ
- Eコマース機能
ビジュアルプログラミング
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サイトを作成できる
コーディングの知識がなくても、ドラッグ&ドロップ機能を用いてハイクオリティなwebサイトを作成できます。
また、リアルタイムでのビジュアルエディタにより、作成したデザインがどのように表示されるかをすぐに確認できます。
レスポンシブデザインに対応
Webflowでは、デバイスごとの表示を微調整することができます。
これにより、デスクトップからモバイルまでの全てのデバイスで最適なユーザーエクスペリエンスを提供できます。
ホスティングも一括して行うことができる
Webflowは高速で信頼性の高いホスティングを提供しています。
Webflowで作成したwebサイトは、AWS(Amazon Web Services)上でホスティングされ、FastlyのCDN(コンテンツデリバリーネットワーク)を通じて全世界に配信されます。
Webflowのデメリット
- 機能を理解するまで多少時間がかかる
- 月学費用がかかる
- 制限付きのeコマース機能
- プラグインと拡張機能の欠如
- 日本語には対応していない
機能を理解するまで多少時間がかかる
Webflowの機能は強力である一方、それらを全て理解して使用するには時間と実践が必要です。
特に、コーディングの経験がない人にとっては最初のうちは難しいかもしれません。
月学費用がかかる
高度な機能を使用するためには、比較的高い料金を支払う必要があります。
特に、webサイトを公開するためには別途「サイトプラン」が必要で、これがコスト面でのネックです。
この点では、WordPressは無料でできるというメリットがあります(ドメイン・ホスティング料は有料)。
制限付きのeコマース機能
Webflowはeコマース機能を提供していますが、まだ成長途上であり、Shopifyのような専門的なeコマースプラットフォームにはまだ及ばない部分があります。
プラグインと拡張機能の欠如
Webflowは豊富な組み込み機能を持っていますが、Wordpressのように、数多くのプラグインや拡張機能を提供しているわけではありません。
これにより、特定のニーズを満たすために、外部のAPIやツールを手動で統合する必要があります。
日本語には対応していない
最大の欠点と言ってもいいのが、現状(2023年8月時点)英語のみの対応で、日本語には対応していません。
Webflowの料金プラン
Webflowでは、個人利用からビジネス利用まで様々なニーズに合わせたプランを提供しています。
まずはアカウントプランに加入し、アカウント作成後、サイトプランに加入します。
項目 | アカウントプラン |
---|---|
料金 | 無料から利用可能 |
プラン数 | 4種類 |
概要 | まずはアカウントプランに入会する必要あり |
サイトプランには一般用とeコマース用の二つがあり、どちらかに加入する必要があります。
項目 | サイトプラン(一般用) | サイトプラン(Eコマース用) |
---|---|---|
料金 | 無料から利用可能 | $29〜 |
プラン数 | 5種類 | 3種類 |
概要 | アカウントプランに入会後、一般用とEコマース用どちらかに加入する必要あり | アカウントプランに入会後、一般用とEコマース用どちらかに加入する必要あり |
アカウントプラン
まず、Webflowを利用するにはアカウントプランに加入する必要があります。
以下がアカウントプランの種類です。
項目 | Starterプラン | Coreプラン | Growthプラン | エンタープライズプラン |
---|---|---|---|---|
月額料金 (年間契約) | 無料 | 約2,755円 ($19) | 約5,075円 ($35) | 問い合わせる 必要あり |
利用者数 | 1人まで | 3人まで | 9人まで | 無制限 |
サイト数 | 2サイト | 10サイト | 無制限 | 無制限 |
Starterプラン
無料で利用可能。
基本的な機能を使用して2つまでのプロジェクトを作成できますが、Webflowのブランドが表示され、一部の機能は利用できません。
コアプラン
無料プランの制限を解除し、最大10のプロジェクトとコードエクスポート機能を利用できます。最大3人まで同じ機能を利用できます。
Proプラン
無制限のプロジェクトと高度な機能(例えば、White Labeling)を利用できます。
最大9人まで同じ機能を利用できます。
エンタープライズプラン(価格非公開)
ほとんどの機能を制限なして利用できます。
以上のプランはいずれも「アカウントプラン」で、Webflowのデザインツール自体の使用料金をカバーします。
webサイトを公開するには、さらに「サイトプラン」が必要となります。これらは公開したいwebサイトごとに購入する必要があります。
サイトプラン(一般用)
アカウントプランに加入したら次にサイトプランに加入する必要があります。
一般用サイトプランの種類は以下の通りです。
項目 | Starterプラン | Basicプラン | CMSプラン | Business プラン | Enterprise プラン |
---|---|---|---|---|---|
月額料金 (年間契約) | 無料 | 約2,030円 ($14) | 約3,335円 ($23) | 約5,655円 ($39) | 問い合わせる 必要あり |
独自ドメイン | × | ○ | ○ | ○ | ○ |
CMS機能 | 50 アイテム | × | 2,000 アイテム | 10,000 アイテム | 10,000+ アイテム |
帯域幅 | 1GB | 50GB | 200GB | 400GB | – |
Starterプラン
無料で利用可能。
勉強用として適しています。
50のCMS機能を利用できます。
Basicプラン
静的なwebサイトに適しています。
CMSやeコマース機能は利用できません。
CMSプラン
WebflowのCMS機能を利用できます。
ブログやニュースサイトに適しています。
ビジネスプラン
大規模なwebサイトや高度なCMS機能が必要な場合に適しています。
エンタープライズプラン
ほとんどの機能を制限なして利用できます。
サイトプラン(Eコマース用)
Eコマース用サイトプランは3つあり、無料のプランはありません。
それぞれの詳細は以下の通りです。
項目 | Standardプラン | Plusプラン | Advancedプラン |
---|---|---|---|
月額料金 (年間契約) | 約4,205円 ($29) | 約10,730円 ($74) | 約30,740円 ($212) |
Eコマース機能 | 500アイテム | 5,000アイテム | 15,000アイテム |
CMS機能 | 2,000アイテム | 10,000アイテム | 10,000アイテム |
特徴 | サイトプラン(一般用)のCMSプランと同じ | サイトプラン(一般用)のBusinessプラン と同じ | サイトプラン(一般用)のBusinessプラン と同じ |
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 | WordPress | |
使いやすさ | ○ | △ |
カスタマイズの自由度 | ◎ | ◎ |
テンプレートの質と量 | △ | ◎ |
プラグインとエクステンション | △ | ◎ |
価格 | △ | ◎ |
ホスティング | ◎ | × |
Webflowは視覚的なデザインツールで、コーディングなしにWebサイトを作成できます。
一方、WordPressはより技術的でカスタマイズ性が高く、幅広いプラグインとテーマであらゆる種類のサイトに対応することができます。
Webflowはホスティングも提供しており、手軽に管理できますが、WordPressは自分でホスティングを選び、より細かく管理する必要があります。
まとめ
Webflowは、コードを書かずに美しいwebサイトをデザインするためにはもってこいのツールです。
特にデザインにこだわりたい方や、CMS機能を活用してコンテンツを効率良く管理したい方には最適な選択肢と言えるでしょう。
ただし、初心者にとっては学習コストが高くなる可能性がありますので、自身のスキルとニーズに合わせて最適なツールを選びましょう。