Webサイトのデザイン、構築、CMS実装、リリースを一貫して行うことのできる、サイト制作ノーコードツール『Webflow』。国内で1.8兆円、グローバルで35兆円規模と言われるノーコード市場の中でも、近年高い注目を集めているノーコードツールです。現に、22年3月行った資金調達シリーズCでは、Googleの親会社アルファベット社などから、約150億円もの出資を受けています。
これまでの制作プロセスを大きく変え、サイト構築に革命を起こすと言われているWebflowについて、その機能やメリットを徹底解説していきます。
Webflowはこれまでサイト制作をするためにエンジニアが行っていた、HTMLやCSS・JavaScriptのコーディング作業を無くし、Webデザイナーやマーケター、企業のWeb担当者など、コーディングの知識がない人でもサイト制作ができるように設計されたノーコードツールです。
かくいう私もディレクターですが、サイト構築プロセスの一部を自分でやったり、お客様から頂いた軽微な修正依頼は自分で対応したりと、使い勝手の良さを日々感じています。
またWebflowで構築したサイトは、WixやStudioの様に専用のプラットフォームのみで稼働するわけではなく、WordPressへの移行や、FTPファイルでのサーバーアップロードもできる事から、構造的に他のノーコードツールとは全くの別物と言っていいでしょう。
先ずは、Webflowのポジショニングから見ていきましょう。
他のノーコードツールや一般的なCMSと比較して、Webflowは自由度・手軽さのバランスが非常にいいと言えます。(ユーザーのニーズなど状況による部分はありますが)
他のノーコードツールは逆に何かの分野に特化しているため、用途に応じて使い分ける必要があり、苦手な分野にも手を掛けようとすると、どうしても手間が掛かってしまいます。
Webflowの強みはバランスと申し上げました。
実際、Made in Webflowで有料・無料含めてかなり多くのテンプレートが公開されておりますし、デザインは基本的に自由に変えることができそのほとんどをドラッグ&ドロップ+クリックで設定することができます。また、外部ツールとの連携も豊富で、多機能なサイトを作ることもでき、スクリプトタグなどコーディングも可能なためカスタマイズ性も高いです。
次の章以降では、こうしたWebflowの特徴を6つの特徴に別けて解説していきます。
また、メリットだけでなくデメリットも解説することで、皆様の理解の助けになれれば幸いです。
Webflowはサイト制作のほとんどの制御を視覚的操作で行うことができます。
上記画像を見ていただければ分かる通り、Webflowは日本語対応していません。また、日本語の事例紹介やナレッジ紹介記事も少なく、不明点があったときに調べるのは一苦労です。(私の場合は、英語でGoogle検索を掛けてWebflow forumの投稿を翻訳して解消するようにしています)
基本的なWebflowの操作よりも、Webflowの細かな機能制限やちょっとしたデザインの作り方など細々と調べものが発生するため、Webflowを使いこなすうえでこうしたリサーチテクは必要となってきます。
前述したとおり、Webflowはインタラクション(アニメーション)をコーディングせずにサイトに実装することができます。
例えば、サイトでよくみられる下記のようなアニメーションはコーディング不要で実装出来ます。
他にも、マウスカーソルを充てたときのアニメーションや、クリック時のアニメーションなど様々なアニメーションを自分の意図する様に組むことができます。
イメージとしては、パワーポイントのスライドアニメーションを組む操作に近く、実装したい動きに加えて、その速さ、間隔なども制御できます。
インタラクションの機能は万能ではありません。基本的にイメージするほとんどのアニメーションを実装することができますが、この機能がJavaScriptに完全に代替することはできません。Webflowのインタラクションで実装出来ない挙動については、カスタムコード(コーディング)でスクリプトを記述する必要があるなど、一部コーディングが必要になる場合もあります。
Webflowには標準でCMS機能(WordPressで言うところの投稿機能)が備わっています。
これによって、サイト制作者はノーコードで、ブログやオウンドメディアなどの立ち上げが可能となります。
データベースの枠組みはWebflowが標準で用意してくれていますので、そこに必要なデータを入れるだけでデータベースが完成します。
あとは、特徴1で紹介したデザイナー画面で視覚的にデザインを作成し、タイトル、本文、画像など必要に応じてデータベースの項目と接続するだけで、CMSコンテンツの完成です。(もちろんこれらの接続作業は全て、クリック操作で行えます。)
記事の詳細ページもデザイン可能で、見出しや太字、引用マーク、リンクの設定、動画の埋め込みなどを行うことができます。
簡単にブログページの制作ができるものの、本文の中に入れられるコンテンツの種類には限りがあります。
例えば、表(tableタグ)や目次(アンカーリンク付き)に準ずる標準機能はありません。従って、標準機能外でブログに機能を持たせるためには、カスタムコード(コーディング)で実装する必要があります。
Webflowは前述のデザイナー画面(開発者向け画面)とは別に、簡単にサイトの更新が行える編集専用の画面(Editor)が用意されています。
これは、クライアントにも共有可能なため、テキストの修正や画像の差し替えなど軽微な修正であれば、Webの知識が全くない方でも簡単に行うことができます。
この機能は、単にサイトの更新を簡単にさせるだけでなく、アクセス解析に基づきリアルタイムでサイトを更新することができるなど、マーケティングにおいて非常に強力な機能となっています。
また、コラムやお知らせ、ブログなどの投稿コンテンツも簡単に追加・編集・削除できるため、Webに詳しくない方でも簡単に、サイト運用が可能になっています。
一見便利に見えるEditor画面ですが、その機能は大きく制限されています。
例えば、コンテンツの追加・削除、テキストやボタンの色変え・拡大・縮小などは開発者用の画面(デザイナー画面)で行う必要があります。従って、当社のお客様の中ではデザイナー画面を操作してサイトを更新していく方もおり、こうしたお客様のために無料サポートを実施しています。
Webflowでは、テスト用にサイトを公開できる環境を無料で提供しています。これによって、構築中のサイトをボタン1つでブラウザから確認することができます。
このテスト環境のURLを知っている人はパスワードなど不要でいつでも見ることができるため、『構築内容の確認→フィードバック→修正』のサイクルを大幅に高速化させてくれます。
また、サイトを独自ドメインで本番公開する場合も、Webflowが標準で用意してくれている環境にボタン1つで実行可能です。Webflowはユーザーに対してAWSをホスティング環境として用意してくれているため、セキュリティは非常に高く、安心してサイトを運営することができます。
このホスティング機能はサイト改修するときにもその利便性を強く感じます。例えば、FTPでサイト公開している場合、修正と反映の都度ファイルアップの作業が必要となり、また、テスト環境もサイト運営中は必ず用意しておかなければなりません。ベンダーロックを防ぐためにクライアント側でこれらの情報を保持しておく必要があり、管理も手間が掛かります。
しかし、Webflowであれば、インフラはどんなサイトでも同じです。また、テスト環境と本番環境がほぼ一体となっている(公開先URLをチェックボックスで選択して切り替え)ため、改修工数も効率化されます。
WebflowはWordPressとは異なり、オープンソースではありません。従って、独自ドメインでサイト公開する場合は月額費用が掛かります。
Webflowの設定している料金体系は次の通りです。
※表示金額は年間契約です。また、他にもプラン毎の制限があるため詳しくはWebflowの公式サイトをご覧ください。
※上記のほかにECサイトを公開する場合は別でプランが用意されています。
構築した要素の流用性の高さはWebflowの最大の特徴と言ってもいいと思います。
簡単に言えば、一度Webflow上で構築した要素は、コピー&ペーストでWebflowのどのサイトデータにも移すことが可能です。
これは、サイト間含めて自由に移動させることが可能となっています。
また、コピー&ペーストしたパーツは移動先でいかようにもカスタマイズが可能です。
従って、Webflowのテンプレートやすでに構築済みのサイトデータをベース(もしくは良いとこ取りして)にしてサイト構築するなど、構築作業を効率化することができるのです。
これは、一部毎にコピペすることが難しいスクラッチ開発や、流用パーツのカスタマイズが難しいノーコードツールとは一線を画した、非常に画期的な機能です。
Webflowのメリットは様々ありますが最大のメリットは構築時・改修時の工数を大幅に減らせることでしょう。
Webflowは次の2つの観点から工数を削減することができます。
1つ目はシンプルにノーコードでサイト構築できるため、通常のコーディング作業よりも作業量が圧縮されます。これは0からサイト内の要素を1つずつ作り込んでいく場合だけでなく、Webflowの場合、上述の通りパーツの流用とカスタマイズが容易です。
従って、トンマナを保持したまま、あるページの要素を別ページで流用できたり、レイアウトを別サイトから流用し、トンマナをそのサイトのものに合わせるなど、細かく作業効率を上げることができます。
このメリットは特に作業ボリュームが多くなる、大規模サイトやメーカー企業のサイトで大きくなります。
現に器具メーカーのお客様は、他社で200万円だったお見積が、当社では120万円と、仕様を制限することなく40%も発注費用を抑えることができました
日本では「ノーコード=小中規模サイト」のイメージが強いですが、こうした点から、アメリカでは大規模サイトでもWebflow導入が進んでいます。
2つ目はインブラウザデザインという手法を用いることで、デザイン作成に掛かる工数を圧縮することができる点です。
インブラウザデザインとは「ワイヤーフレームをベースにサイト構築をしながら、デザインの作り込みも同時に進める手法」です。
これによって、XDやfigma、イラストレーターなどで作成するいわゆるデザインカンプの作成が不要になるため、その分の工数を圧縮することができるのです。
この手法のメリットは工数圧縮だけでなく、細部までお客様のご要望を取り入れることができる点もあります。
サイト制作でよく起こるのが、デザインカンプ上では検出できなかった要望が、構築後のサイト確認時に上がってくることです。デザインカンプ→サイト構築の順序で制作を進めてしまうと、こうした要望の反映が納期上・工数上難しい場合があります。
しかしインブラウザデザインは、お客様が実際にブラウザ上でサイトを確認するため要望を上げやすく、デザイン変更を前提に構築作業を進めているため、後々の変更も利くのが特徴です。
こうした柔軟性の高い構築手法で効率的にサイト制作できるのもWebflowならではのメリットです。
2つめのメリットはWebマーケティングにおけるPDCAサイクルを高速化できる点です。
今までWebマーケティングにおいてWebサイトを改善させていく際には下記プロセスを経なければ、変更出来ない場合が多かったと思います。
「マーケターがデータ分析及び改善案を企画」→「デザイナーが改善案を仕様書に記載」→「仕様書に基づきエンジニアがサイト修正」
これによって、ステップごとに工数が掛かるだけでなく、担当者間でコミュニケーションコストも掛かり、加えて伝言ゲームのごとくマーケターの改善アイデアがサイトに忠実に反映させることが難しい状況でした。こうしたステップを経ていく中で時間も経過してしまい、次の改修チケットが切られ、改善事項がたまっていくという悪循環を生み出す危険性もあります。
しかしWebflowではマーケター自身が(あるいはマーケターとデザイナーだけで)サイト改修することを可能にします。
これによって、各ステップで掛かっていた工数及びコミュニケーションの工数は圧縮され、マーケターの意志を最大限尊重してサイト改修を行うことができます。
また、試行回数を増やすことができるためより多くのデータを収集し、より良い改善に繋げていきやすくなります。
こうしたユーザーの動向からコンテンツ改善までを高速で回していくマーケティング手法を「リアルタイムマーケティング」といい、アメリカではこうしたマーケティング手法が主流になっています。
実際に、Webflowを活用したリアルタイムマーケティングによって、コンバージョン率を65%アップさせた事例もあり、PDCAサイクルのスピード感は今後のマーケティングにおいて非常に重要になっていくでしょう。
サイト制作においてクライアントが最も気にするポイントの一つである「SEO」に関しても、Webflowは応えることができます。
Webflowで設定できる主なSEO対策は次の通りです。
上記は、一般的に制作されているWebサイトと同様の仕様であり、WebflowはSEO対策機能が十分に備わっていると言えます。
また、Webflowはノーコードで操作した設定を、セマンティックで正しいコードへと変換してくれるため、検索エンジンに対しても高いパフォーマンスを発揮します。
加えて、サイト改善も容易であるため、アクセス解析に基づき細かく修正を行っていきやすいツールになっています。
こうした特徴から、当社で制作したサイトの多くはSEOにおいて効率的な運用と、十分なパフォーマンスを発揮しています。
例えば、コロナを機に初めてWebサイトを持ったある接骨院では、対策キーワードの多くで検索結果10位以内を獲得しました。
リリース当初は公開2か月でメインとなる1キーワードで検索順位1位を獲得しただけでしたが、そこから改善を重ねつつ、補助金によるリニューアルも挟み、今では約10キーワードで検索順位10位以内を獲得しています。
国内実績がまだまだ少ないWebflowですが、実は大手企業でも徐々に導入が進んでいます。
ここではその中でも3社ピックアップしてご紹介します。
オルビス株式会社が2022年2月に公開したビジョンサイト「Portal to the Future」はWebflowで制作されています。
その他の国内Webflow導入事例はこちらからご覧ください。
ここまで解説してきた内容を最後下記にまとめます。
Webflowはサイト制作のあり方を根底から変える力を持った次世代型ノーコードツールです。
Webflowがもたらす効果は様々な部分に影響し、この投稿だけでは語り切れないほどです。
特に、もしWebflowにご興味があり、サイト制作・運用の拡張性、柔軟性、スピード感に関心がある方は、是非一度お問い合わせください。デモも交えつつ具体的な利用イメージが湧くようにご説明させていただきます。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営