2023

年

月

日

WebflowとFramer を比較してみた

この記事では、海外で評価の高いWebflowとFramerを比較しました。ノーコードでサイトを運用すると、更新やテスト、分析・改善が素早くでき、管理も簡単です。フリーランスデザイナーにとっても、コーディング不要で開発が効率化できます。数あるノーコードツールの中で「どれを選ぶべきか」「日本語対応のSTUDIOか、世界で人気のWebflowやFramerか」と迷う方も多いでしょう。無駄な時間を避けるために、本記事が選択の参考になれば幸いです。

執筆者

Shohei Yano

この記事では海外で高く評価されている、WebflowとFramer を比較しました。

ノーコードで自社サイトを運用することはビジネスの成長に大きなメリットがあります。例えば、変更の速さ、テストの行いやすさ、分析から改善のスピード、管理の行いやすさなど。

フリーランスデザイナーは、コーディングを必要としないので従来よりも速い開発を行うことができます。

ワードプレス、STUDIO、Webflow、Framerなど沢山のノーコードツールがありますが”どのツールでは何ができて、何ができないのか””どのツールを使うべきなのか””日本語に対応しているSTUDIOか、世界で人気のWebflowかFramerどちらが良いのか”

触ってみたけど結局使えなかったなんて、無駄な時間は過ごしたくないですよね。

この記事では、WebflowとFramerの比較し、選択のサポートになれば幸いです。

WebflowとFramerの比較

まず、WebflowとFramerの基本的な違いを紹介します。

Webflowは、1行もコードを書かずにレスポンシブWebサイトを構築できるノーコードツールです。HTML/CSS、JavaScriptを視覚的に作成していくことができます。基本的なコーディング知識を用いて、デザイン通りのウェブサイト制作が可能です。さらに、Webflow は公開設定、セキュリティ、Webサイトのパフォーマンスそのものを細かく処理することができます。

Framer は、アプリやウェブサイトのプロトタイプの作成に役立つ、コード不要のウェブデザインプラットフォームです。Framerでは、FigmaやSTUDIOのような環境で作成し、デザインをコードに変換することができます。そして、PhotoshopやFigmaのようなツールとも連携しているので、簡単にプロジェクトを変換することができます。ISO27001の認証を受けているFramerは、様々なIT企業や組織で人気のあるツールです。

料金プラン

Webflowの料金

無料プランからサイトを構築することができ、webflow.ioドメインでの無料ホスティングが可能です。

サイトを公開する準備ができたら、4つのサイトプランから選択します。

ベーシック - シンプルなサイトのデプロイに最適 ($14 /月).
CMS - コンテンツ重視のサイトに最適（月額$23）
ビジネス - トラフィックの多いマーケティングサイトに最適（$39/月）
エンタープライズ - 大企業向けのサイトに最適（問い合わせ）

チームに適したワークスペースのプランも用意されています。

コアプランでは、3人のチームメンバーを招待することができ、1シートあたり月額$19です。
グロースプランは最大9席まで利用可能で、1席あたり月額$49です。
そして最近、フリーランサーや代理店向けのWorkspaceプランも追加しました。

フリーランサープランでは3席まで追加可能で、1席あたり月額$16です。
エージェンシープランは9席まで追加可能で、1シートあたり月額$35です。

そしてWebflowは3種類のECプランも提供しています。

スタンダード - 新規ビジネスに最適 ($29 /月)
プラス - 大量のトラフィックに最適 ($74 /月)
アドバンス - 急成長企業に最適（月額$212）

Webflowの価格については、こちらをご覧ください。

Framerの料金

Webflowと同様、Framerも無料で始めることができます。Framersの無料プランでは、100個のCMSアイテム、デザインエディタが使えて、月間1,000人のビジターが利用可能です。

そして独自ドメインを接続するサイトの公開開設準備が整ったら、2種類のサイトプランから選ぶことができます。

ベーシック - 個人サイトに最適で、毎月10,000人の訪問者
プロ - 商用サイトに最適で、毎月100,000人の訪問者

プロジェクトに対してオプションで、共同開発者を増やすことができるチームプランもあります。

そしてFramerにもエンタープライズ向けのビジネスプランがあります。

ビジネスサイト
オンボーディングセッション
専用Slackチャンネル
ベストプラクティスとウェブサイトのレビュー
デザインと技術サポート
ソーシャルプロモーション
カスタムサイトとエディター
チーム管理
チームオンボーディング
プレミアムサポート
エンタープライズグレードのセキュリティ
シングルサインオン
など、

ビジネスプランに関する情報はこちらをご覧ください。

仕組み

Webflowの仕組み

Webflowは、ノーコードでHTML5、CSS、JavaScriptを活用して、高度なウェブサイトを作成することができます。Webflowはシンプルであることを念頭に開発されているので、コーディングの知識がなくても直感的にサイトを作成していくことができます。

全く知識がない人でも、テンプレートを使用してウェブサイトを作ることもできます。ボタンをポチポチして構築するため、要素の編集や変更が簡単に行えます。

Webflow は、あなたのデザインを綺麗なコードに自動的に変換します。なので、カスタムコードを追加して既存のコードを微調整し、よりパーソナライズされたウェブサイトを作成することができます。

そして、Publishボタンをクリックするだけで、全世界に公開することができます。

Framerの仕組み

Framerはデザインツールとウェブビルダーをミックスしたもので、他のデザインソフトウェアと統合することができます。そして、注意すべき点は、Framerはクラスを使用しないので、各レイアウトを個別に作成する必要があります。日本のSTUDIOに似ています。

カスタマーサポート

開発者は、検証とデバッグに最大50％の時間を費やしていることをご存知ですか？

開発は大変で、問題が起きた時のストレスは計り知れません。ノーコードツールを使っていても、どこかで行き詰まることはあります。そんなとき、迅速なサポートがあれば安心ですね

Webflowのサポート

Webflowはメールで問い合わせをすることができ、回答を得るまでに最大2日間待つことがあります。また、Webflowにはコミュニティフォーラムがあり、他のユーザーと交流することができます。

そして学習するための、Webflow Universityがあります。初心者から上級者までのチュートリアルが用意されており、有料級の動画教材があります。

最近は日本の利用者も増え、エラー解決に関する記事も増えていますし、私たちも記事や動画を作成しています。

Framerのサポート

年中無休のサポートを提供していませんが、3つの方法でサポートを受けることができます：

お問い合わせフォームで、問題を報告したり、プラットフォームの改善の連絡をすることができます。プロジェクトサポート - Discordコミュニティで、Framerユーザー同士がプロジェクト情報交換をしています。アカウントサポート - アカウントおよび請求に関する質問を解決するためのEメールサポートです。

そして、多くの無料チュートリアル動画が用意されています。

Webflowの注意点

他のノーコードツールに比べて専門知識が必要で難易度が高く、使いこなすまでに時間がかかります。

しかし、その分使いこなせるようになるメリットが非常に多いです。Webflowを使用すると、高パフォーマンスでSEOに最適化されたウェブサイトを作成することができます。そのパフォーマンスはワードプレスより高いことがわかっています。Webflowでは用意されていない高度な機能もありますが、コードを記述したり他のツールを連携することが解決ができます。コーディング経験者は一瞬で魅了されること間違いありません。