ノーコードツール「Webflow」とは？出来ることやSTUDIOとの違いを解説

WebflowとはWebサイト制作に使用できるノーコードツールです。

幅広いタイプのサイトをノーコードで制作できることが特徴ですが、一方で日本語に対応していないといったデメリットもあります。ツールの特徴を知らないと、導入後に「思っていたものと違っていた」ということになりかねません。

本記事では、Webflowの使い方や同じノーコードツールであるSTUDIOとの比較、料金プランを解説します。

Webflowとは

Webflowとはノーコードツールの一種です。ノーコードツールとは、プログラミングに関する知識がなくてもシステムを開発できるツールのことです。

機能別に用意されたパーツを、マウスで移動させることによってサイトを制作するので、Webサイト制作の初心者やコーディングの技術がない人もプロジェクトに参加させられます。

WebflowとSTUDIOとの比較

Webflowと同じノーコードツールにSTUDIOがあります。

あわせて読みたい

ノーコードツール「STUDIO」とは？特徴や料金、使い方を解説！ 自社のWEBサイトを作りたいけど、専門技術がないから作れないと困っている方は多いのではないでしょうか。 Webサイトを作るには専門知識と技術が必要ですが、「STUDIO」...

STUDIOは日本語に完全に対応しており、完成度の高いテンプレートや画像が数多く収録されており、サイトを簡単にレスポンシブ化できます。一方で、コード編集機能がないのでカスタマイズの自由度は高くないのが特徴です。

それに対して、Webflowはコードを編集できるので自由度が高く、開発環境やサーバーの設定が必要ないので作ったサイトをすぐに公開できます。

作りたいサイトや運用目的と照らし合わせ、どちらを選ぶか検討しましょう。

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

Webflowの特徴を知ることで他のツールと比較検討がしやすくなり、どのツールが自社の希望条件にとってベストか判断できます。

本章では、Webflowメリットとデメリットを解説していきます。

Webflowのメリット

Webflowのメリットは以下の3つです。

自由度が高い

Webflowは自由度の高さが魅力のツールです。

ノーコードツールの中には、テンプレートにない機能の追加やコードの編集ができないことにより、自分の思い通りのサイトデザインができないツールがあります。

しかし、Webflowの有料版では作成したWEBサイトのコードを編集できるので、HTMLとCSSの知識がある人にとっては高い自由度をもったツールになります。

環境設定の必要がない

Webflowは環境設定の必要がありません。

Webサイトを公開するには独自ドメインやサーバー契約が必要になります。ドメインとはサイトの住所のようなものであり、サーバーはサイトのデータを保管する倉庫のようなものです。

それぞれ用意するには手間がかかるので、なるべく早めにサイトを公開したい場合は煩わしく感じるでしょう。Webflowではドメインやサーバーを用意せずにWebサイトを公開できるので、公開までが非常にスピーディーです。

更新作業がしやすい

Webflowは更新作業のしやすさも特徴のツールです。

コンテンツ更新が可能なCMS機能が搭載されているので、ブログやコラム記事の投稿や更新がしやすくなっています。

Webflowのデメリット

Webflowのデメリットは以下の2つです。

学習が必要

Webflowの機能を使いこなすにはツールの機能やHTMLとCSSの理解が必要です。

Webflow Universityというサイトでは、ツールの使い方やチュートリアルの解説動画が公開されています。日本語版もあるので、困ったときはこれらを頼るのも良いでしょう。

説明文が全て英語

Webflowはアメリカの企業が提供しているツールなので、説明文やメニュー文が全て英語で書かれています。

英語が理解できないと説明文の意味がわからないので、作業が効率的に進まない可能性があります。

Webflowの料金プラン

Webflowの料金プランには、サイトプランとアカウントプランの2種類が存在します。

サイトプランはサイト1点ごとに月額料金が発生し、アカウントプランは登録アカウントに月額料金が発生するようになっています。

サイトプラン

プラン	Basicプラン	CMSプラン	Businessプラン	Enterprise プラン
料金	15ドル/月12ドル/年	20ドル/月16ドル/年	40ドル/月36ドル/年	Webflowに問い合わせ
独自ドメインの使用	可	可	可	可
ページ数	100ページ	100ページ	100ページ	カスタム
サイト訪問数	25,000/月	100,000/月	1,000,000/月	カスタム
CDN帯域量/月	50GB	200GB	400GB	400GB +
検索機能	なし	あり	あり	あり

アカウントプラン

プラン	スタータープラン	Liteプラン	Proプラン
料金	無料	24ドル/月16ドル/年	42ドル/月35ドル/年
プロジェクト数	2個	10個	無制限
クライアント請求	可	可	可
公開機能	最大2つの静的ページと50のCMSアイテム。	最大100の静的ページと50のCMSアイテム。	最大100の静的ページと50のCMSアイテム。

出典:Webflow公式サイト

Webflowの使い方

Webflowを使用する手順は以下の通りです。

登録

Webflow公式サイトからアカウント登録します。

右上の「Get started」をクリックし、Googleアカウントかメールアドレスで無料登録を済ませましょう。

テンプレートでサイト制作

続いてテンプレートを使ってサイトを制作します。

登録後に表示される開発画面にはチュートリアルの案内が表示されるので、Get startedをクリックして受けておきましょう。

その後に表示されるテンプレートから好きなものを選び、編集画面へと移行します。

テキスト編集

テンプレートに用意されているテキストをクリックし、青枠内の文字を削除します。サイトに表示させたい文字を入力するにはサイドバーのAddパネルから「Elements」を選びましょう。

画像の差し替え

画像を差し替えたり追加したりするには、同じくAddパネルからElementsを選び、任意の画像を選択またはアップロードします。

StyleパネルでCSSの設定ができるので、こちらで要素の並び順やサイズを調整しましょう。

サイト公開

サイトを公開するには画面右上の「Publish」ボタンをクリックします。

無料のドメインで公開するか独自ドメインを使うかを選べるので、選択後に「Publish to Selected Domains」をクリックしてサイトを公開しましょう。

Webflowでサイト制作を効率化させよう

WebflowはノーコードでWebサイトを制作できるツールであり、サーバーが不要だったり作れるサイトの幅が広かったりなどの魅力があります。

説明文が英語で書かれていてWEBサイトの専門知識が必要な場面もあるので、英語ができずWebサイトについてもあまり詳しくない場合は、他のツールを使うか外注を検討しましょう。

また、システム開発の外注先選びでお困りの方は、弊社までお気軽にご相談ください。 当社がこれまで支援してきた開発事例の共有、企画・コンサルティング、要件定義や実際の開発支援まで包括的にサポートさせていただくことが可能です。

システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。