CMS
PR

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

susan
記事内に商品プロモーションを含む場合があります

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

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

すーさん
すーさん

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

WordPress用のレンタルサーバーをお探しの方はこちらの記事がおすすめ

Webflowとは

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

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

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

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

Webflowの世界での使用率

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

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

WordPressよりもです。

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

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

Webflowの特徴

wordpress, cms - 【CMS】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のメリット・デメリット

wordpress, cms - 【CMS】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コマース用どちらかに加入する必要あり

アカウントプラン

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

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

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

項目StarterプランCoreプランGrowthプランエンタープライズプラン
月額料金
(年間契約)
無料約2,755円
($19)
約5,075円
($35)
問い合わせる
必要あり
利用者数1人まで3人まで9人まで無制限
サイト数2サイト10サイト無制限無制限
レート:$1 = 145円で計算

Starterプラン

無料で利用可能。

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

コアプラン

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

Proプラン

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

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

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

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

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

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

サイトプラン(一般用)

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

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

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

項目StarterプランBasicプランCMSプランBusiness
プラン
Enterprise
プラン
月額料金
(年間契約)
無料約2,030円
($14)
約3,335円
($23)
約5,655円
($39)
問い合わせる
必要あり
独自ドメイン×
CMS機能50
アイテム
×2,000
アイテム
10,000
アイテム
10,000+
アイテム
帯域幅1GB50GB200GB400GB
レート:$1 = 145円で計算

Starterプラン

無料で利用可能。

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

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

Basicプラン

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

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

CMSプラン

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

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

ビジネスプラン

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

エンタープライズプラン

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

サイトプラン(Eコマース用)

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

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プラン
と同じ
レート:$1 = 145円で計算

Standardプラン

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

Plusプラン

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

Advancedプラン

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

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

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

Webflowのアカウント設定

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

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

アカウント設定のステップ
  1. アカウントの作成
  2. メール認証
  3. プロフィール設定
  4. 無料か有料プランの選択
  5. 新規プロジェクトの作成

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

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

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

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

ステップ②:メール認証

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

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

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

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

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

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

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

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

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

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

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

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

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

Webflowの使い方

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

ダッシュボードの理解

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

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

プロジェクトの作成

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

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

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

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

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

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

エレメントの追加

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

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

スタイルの編集

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

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

ページの作成と管理

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

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

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

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

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

サイトの公開

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

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

Webflowで作られたサイト例

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

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

Bonsai

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

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

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

URL: Bonsai

Bond

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

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

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

URL: Bond

Yes Theory

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

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

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

URL: Yes Theory

Dropbox Sign

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

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

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

URL: Dropbox Sign

Otter

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

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

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

URL: Otter

WebflowWordPressの違い

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

WeblowとWordpressの比較表

WebflowWordPress
使いやすさ
カスタマイズの自由度
テンプレートの質と量
プラグインとエクステンション
価格
ホスティング×

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

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

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

まとめ

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

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

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

WordPress用のレンタルサーバーをお探しの方はこちらの記事がおすすめ
Twitterからの読者コメントをお待ちしています。
ブログ更新の励みになります!
ABOUT ME
すーさん
すーさん
webデザイナー/webエンジニア
30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成!
記事URLをコピーしました