WebflowとはWebサイト制作に使用できるノーコードツールです。
幅広いタイプのサイトをノーコードで制作できることが特徴ですが、一方で日本語に対応していないといったデメリットもあります。ツールの特徴を知らないと、導入後に「思っていたものと違っていた」ということになりかねません。
本記事では、Webflowの使い方や同じノーコードツールであるSTUDIOとの比較、料金プランを解説します。
監修者
竹村貴也
株式会社ファンリピートCEO
著書:「ChatGPTによるPythonプログラミング入門. AI駆動開発で実現する社内業務の自動化」
＼ ノーコード/ローコードやAI関連の情報をお届け ／
無料のBOLTメールマガジン
不定期でノーコード/ローコードやAI関連のお役立ち情報をお届けするメルマガです。
- ノーコード/ローコードの基礎・応用情報がわかる
- 個人利用やビジネスで生かせるAI活用方法がわかる
- 限定オファーや資料公開、ウェビナー情報がいち早く届く
ノーコード/ローコードを用いたシステム開発やAI利活用に興味がある方はぜひご登録ください！
Webflowとは
Webflowとはノーコードツールの一種です。ノーコードツールとは、プログラミングに関する知識がなくてもシステムを開発できるツールのことです。
機能別に用意されたパーツを、マウスで移動させることによってサイトを制作するので、Webサイト制作の初心者やコーディングの技術がない人もプロジェクトに参加させられます。
WebflowとSTUDIOとの比較
Webflowと同じノーコードツールに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サイトについてもあまり詳しくない場合は、他のツールを使うか外注を検討しましょう。
また、システム開発の外注先選びでお困りの方は、弊社までお気軽にご相談ください。 当社がこれまで支援してきた開発事例の共有、企画・コンサルティング、要件定義や実際の開発支援まで包括的にサポートさせていただくことが可能です。
システム開発を失敗しないために、弊社が相見積もりの取得までをサポートさせていただくことも可能です。むやみな営業電話などは決して行いませんので、まずは無料のご相談をお待ちしております。
