WebflowとはWebサイト制作に使用できるノーコードツールです。
幅広いタイプのサイトをノーコードで制作できることが特徴ですが、一方で日本語に対応していないといったデメリットもあります。ツールの特徴を知らないと、導入後に「思っていたものと違っていた」ということになりかねません。
本記事では、Webflowの使い方や同じノーコードツールであるSTUDIOとの比較、料金プランを解説します。
＼ 年末までに限った無料特典 ／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム
【BOLTでは、こんなデモアプリがすぐに作れます】
- 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
- 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
- ご興味のある方は下記のフォームよりお申し込みください
Webflowとは
Webflowとはノーコードツールの一種です。ノーコードツールとは、プログラミングに関する知識がなくてもシステムを開発できるツールのことです。
機能別に用意されたパーツを、マウスで移動させることによってサイトを制作するので、Webサイト制作の初心者やコーディングの技術がない人もプロジェクトに参加させられます。
WebflowとSTUDIOとの比較
Webflowとよく比較されるノーコードツールにSTUDIOがあります。両者の違いを以下の表にまとめました。
| 項目 | Webflow | Studio |
| 対応言語 | 英語 | 日本語 |
| テンプレート数 | 多い（1000以上） | 少ない（40種類程度） |
| デザイン自由度 | 高い（CSS、HTML、JavaScriptのカスタマイズ可能） | 高い（コードエクスポートは不可） |
| コードエクスポート | 可能 | 不可 |
| CMS機能 | あり | あり |
| SEO設定 | 高度なカスタマイズが可能 | コンテンツごとのSEO設定可能 |
STUDIOについては、こちらの記事で詳しく解説していますので、あわせてご覧ください。
Webflowのメリット・デメリット
Webflowの特徴を知ることで他のツールと比較検討がしやすくなり、どのツールが自社の希望条件にとってベストか判断できます。
本章では、Webflowメリットとデメリットを解説していきます。
Webflowのメリット
Webflowのメリットは以下の4つです。
自由度が高い
Webflowは自由度の高さが魅力のツールです。
ノーコードツールの中には、テンプレートにない機能の追加やコードの編集ができないことにより、自分の思い通りのサイトデザインができないツールがあります。
しかし、Webflowの有料版では作成したWEBサイトのコードを編集できるので、HTMLとCSSの知識がある人にとっては高い自由度をもったツールになります。
環境設定の必要がない
Webflowは環境設定の必要がありません。
Webサイトを公開するには独自ドメインやサーバー契約が必要になります。ドメインとはサイトの住所のようなものであり、サーバーはサイトのデータを保管する倉庫のようなものです。
それぞれ用意するには手間がかかるので、なるべく早めにサイトを公開したい場合は煩わしく感じるでしょう。Webflowではドメインやサーバーを用意せずにWebサイトを公開できるので、公開までが非常にスピーディーです。
更新作業がしやすい
Webflowは更新作業のしやすさも特徴のツールです。
コンテンツ更新が可能なCMS機能が搭載されているので、ブログやコラム記事の投稿や更新がしやすくなっています。
複数人での同時作業ができる
Webflowのワークスペースプランでは、複数人のアカウントで同時にサイト編集が可能です。これにより、リアルタイムに共同作業を進めることができ、サイトの更新や変更も迅速に反映されます。
作業の進捗を他のメンバーとリアルタイムで共有できるため、リモート環境でのコミュニケーションの効率化にも有効です。また、他のメンバーが編集中の際には、作業の一時停止リクエストを送れるので、作業の衝突やデータの上書きも防げます。
Webflowのデメリット
Webflowのデメリットは以下の3つです。
使いこなすための学習が必要
Webflowの機能を使いこなすにはツールの機能やHTMLとCSSの理解が必要です。
Webflow Universityというサイトでは、ツールの使い方やチュートリアルの解説動画が公開されています。日本語版もあるので、困ったときはこれらを頼るのも良いでしょう。
本格的にWebflowを使うには料金が発生する
Webflowの無料プランでは、簡単なサイト作成や基本的な機能の利用が可能です。一方、複数のプロジェクトを運用したり、高度なカスタマイズを行ったりする場合は、有料プランへの切り替えが必要です。詳細は後述しますが、Webflowの料金プランは大きく2つあります。
- サイトプラン：各Webサイトごとに課金され、カスタムドメインの使用や公開、ホスティングなどの機能が提供されます。
ワークスペースプラン：複数のチームメンバーが同時にWebサイトを編集できるプランで、コラボレーションが必要なプロジェクトに最適です。
説明文が全て英語で書かれている
Webflowはアメリカの企業が提供しているツールなので、説明文やメニュー文が全て英語で書かれています。
英語が理解できないと説明文の意味がわからないので、作業が効率的に進まない可能性があります。
Webflowの料金プラン
Webflowの料金プランには、サイトプランとアカウントプランの2種類が存在します。
サイトプランはサイト1点ごとに月額料金が発生し、アカウントプランは登録アカウントに月額料金が発生するようになっています。
サイトプラン
サイトプランは、Webflowで作成したサイトごとに加入するプランです。サイト公開に必要な機能が備わっており、プロジェクトの規模に応じて、料金プランを選択できます。
「まずはWebflowを試してみたい」という方は、無料で利用できるSTARTERプランがおすすめです。さらに、高度な機能を使いたい場合は、BASIC以上にアップグレードしましょう。
サイトプランのメリット
- サーバーとドメイン管理が簡単：サーバー設定が不要で、ドメインを接続するだけでサイトを公開できる
- 高いセキュリティ：SSL化やセキュリティ対策が標準で提供され、セキュリティリスクを低減できる
- カスタマイズ性：301リダイレクト、カスタムコード、サイトマップ作成機能などが利用可能
- 拡張性：各プランでページ数やCMSアイテム数、フォーム送信数などが柔軟に拡張できる
ワークスペースプラン
ワークスペースプランは、複数人でのサイト構築や共同作業に適したプランです。このプランを利用することで、チームで効率的にサイト制作を進めることが可能になります。
また、ワークスペースプランは、「社内向け」と「フリーランス・代理店向け」のプランに分かれており、それぞれ機能や料金が異なります。（上記画像は社内向けプラン）
ワークスペースプランのメリット
- 効率的な共同作業：共同作業が可能になり、サイトのデザインをリアルタイムに編集できる
- コードの自由な使用：コードエクスポート機能により、作成したサイトの独自カスタマイズが可能
- チーム管理の効率化：ワークスペース内でプロジェクトごとに担当を割り振ることが容易
- プロジェクト管理の拡張性：クライアントやプロジェクトの数にあわせて、管理権限を拡張できる
Webflowの使い方
Webflowを使用する手順は以下の通りです。
登録
Webflow公式サイトからアカウント登録します。
右上の「Get started」をクリックし、Googleアカウントかメールアドレスで無料登録を済ませましょう。
テンプレートでサイト制作
続いてテンプレートを使ってサイトを制作します。
登録後に表示される開発画面にはチュートリアルの案内が表示されるので、Get startedをクリックして受けておきましょう。
その後に表示されるテンプレートから好きなものを選び、編集画面へと移行します。
テキスト編集
テンプレートに用意されているテキストをクリックし、青枠内の文字を削除します。サイトに表示させたい文字を入力するにはサイドバーのAddパネルから「Elements」を選びましょう。
画像の差し替え
画像を差し替えたり追加したりするには、同じくAddパネルからElementsを選び、任意の画像を選択またはアップロードします。
StyleパネルでCSSの設定ができるので、こちらで要素の並び順やサイズを調整しましょう。
サイト公開
サイトを公開するには画面右上の「Publish」ボタンをクリックします。
無料のドメインで公開するか独自ドメインを使うかを選べるので、選択後に「Publish to Selected Domains」をクリックしてサイトを公開しましょう。
WebflowでSEO対策はできる？
Webflowは一般的なSEO対策に必要な機能を備えており、効果的なSEO施策を実施できます。具体的には次の機能を利用することで、検索結果の順位上昇やユーザビリティの高いサイトを目指せます。
- レスポンシブ対応
Webflowは、モバイルデバイスやタブレットに最適化されたレスポンシブデザインを簡単に作成できます。 - 画像の圧縮や最適化
Webflowでは、画像の自動圧縮と最適化機能が備わっており、ページの読み込み速度を改善します。高速なサイトはユーザーエクスペリエンスの向上に繋がります。 - 301リダイレクト
旧URLから新URLへアクセスをリダイレクトする「301リダイレクト」が簡単に設定できます。 - 地域別の検索結果での表示改善
ローカルSEO機能を活用することで、ターゲットエリアでの検索順位を改善し、地域ごとの検索クエリに対応できます。
WebflowのSEO設定方法については、こちらの記事で詳しく解説していますので、あわせてご覧ください。
Webflowで作られたサイト事例をご紹介
Webflowを使ってどこまでクオリティの高いサイトを作れるのか気になる方も多いでしょう。ここでは、Webflowで作成された企業のサイト事例を3つご紹介します。
株式会社カケハシ
薬局向け電子薬歴SaaSを提供する株式会社カケハシは、自社のキャリア採用サイトをWebflowで作成しました。プログラミング不要のWebflowを利用することで、誰でも簡単に更新できるサイト構造が構築されています。
視差効果を用いたリッチな表現や、柔らかさとしなやかさを強調したデザインが特徴です。
HONDA F1 HISTORY
自動車メーカー大手HONDAのHONDA F1 HISTORYは、同社のF1の歴史をテーマにしたサイトです。Webflowのアニメーション機能を活用し、視覚的にインパクトのあるデザインが実現されています。
ページ全体にわたる動的な要素や、ビデオの統合がスムーズに行える点はWebflowの強みです。ブランドのストーリーを効果的に伝えることができ、ユーザーに魅力的な体験を提供しています。
Moneytree
Moneytreeは、資産管理アプリを提供する企業の公式サイトです。情報量が多いサイトですが、WebflowのCMS機能を活用することで、大規模なコンテンツも効率的に管理されています。また、画像の最適化やレスポンシブデザインにより、ユーザーがどのデバイスからでも快適にサイトを閲覧できます。
Webflowの使い方が学べる無料講座「Webflow University」
Webflow Universityは、Webflowが公式に提供するオンライン学習プラットフォームです。ビデオ形式の学習コンテンツを通じて、Webデザインの基礎から応用まで、幅広いスキルを習得できます。初心者から上級者まで対応しており、特定の機能やテクニックを深く理解できる内容が揃っています。
Webflow Universityの特徴
- 無料で幅広いコンテンツを学べる
- 実践的な動画でわかりやすい
- レベルに応じた学習が可能
Webflowでサイト制作を効率化させよう
Webflowは、高品質なWebサイトを制作できるノーコードツールです。サーバーの管理が不要であり、デザインの自由度も高いため、さまざまなタイプのWebサイトを簡単に作成できます。また、レスポンシブデザインやSEO対策も標準で対応しており、サイト運営における多くの手間を省くことができます。
ただし、Webflowは主に英語で提供されているほか、特定の操作にはWeb制作の知識が必要な場合もあります。STARTERプランは無料で利用できるため、本格導入の前に操作感を試しましょう。
もしWebflowを用いた本格的なWebサイト制作をお考えの場合は、当社にお気軽にご相談ください。これまでの開発事例をもとに、企画からコンサルティング、開発支援まで幅広くサポートいたします。まずは無料相談をお待ちしております。
