Webflow(ウェブフロー)を活用したWebサイト制作

今回弊社のWebサイトを新設するにあたり、Webflow(ウェブフロー)をインフラストラクチャに採用いたしました。ノーコードツールとしては非常に有名なこのWebflowですが、実際に利用してみて、素晴らしいの一言でした。

Webflowのビジョンには「We're enabling everyone to create for the web — and leading fulfilling, impactful lives while we do it.」と書かれています。実際にはウェブ制作の知識は必要なものの、少し勉強をすれば誰でもウェブサイトを構築できるよう様々な機能とサポートを提供しています。

Webflowについて

Webflow はWeb サイトを作成・運営を総合的に支援するクラウドサービスで、以前より存在するWixのようなGUIベースのサイトビルダーやWordPress(ワードプレス)のようなCMSのハイブリッドのようなサービスです。WordPressの場合はサーバーへのインストールやバージョン管理(現状はかなり自動化されている)など、ある程度の知識がないと難しい局面もありますが、Webflowではこれらの煩わしい作業は全てWebflow側で行ってくれるので、Webサイトの制作とコンテンツのアップデートに集中することができます。GUIベースで直感的に操作ができるように設計されており、豊富なテンプレートも提供しています。HTMLやCSSに対しての豊富な知識が無くともWebサイトを構築することができる様々な機能が提供されています。

Webflowの価格

Webflowにはアカウントプランとサイトプランの2つの価格設定があり、アカウントプランではチーム内の何人がWebflowを利用できるか、また何件のプロジェクトに利用できるかを決定し、サイトプランではより高いトラフィックやeコマース機能をアンロックすることで費用が決まります。一番安価なプランですと12USD/月額から利用でき、さまざまな機能やホスティングが付帯します。

Webflowの利便性

Wixと比較するとやや難易度は高いですが、わかりやすいガイドやQAを含む学習コンテンツが豊富な為、Webサイト制作に関わったことのある方でしたら即時に利用できます。そうでない方も直感的には操作できるUIで、ユーザーの事をしっかりと考えて構築された優れたシステムだと感じます。

Webflowの主要機能

ウェブフローは、コードレスで優れたWebサイトのデザインが可能なウェブデザインツール(Webflow Site Designer)、コンテンツ管理システム（Webflow CMS）、そしてホスティングの3つの主要機能を提供しています。

Webflow Site Designer

Webflow Site DesignerはHTML/CSSなどのコーディングを自動化するツールであり、ユーザーが自由に要素を追加、配置、スタイルを決めると、基本的にシステムが必要なコードを自動的に生成します。インターフェイスはやや複雑で、慣れるまでに時間がかかりますが、慣れてしまうとかなりストレスなく利用することができます。ただ、日本語へは正式にサポート対応(2021年7月現在)をしていないため、日本語の入力時に内容が消えてしまったりする事象がかなりの頻度で発生しますので、テキストエディターなどからコピーするような工夫が多少は必要です。

またデザインの自由度に関しても制限を敢えて設けています。Webflowは各ビジュアル要素の背後には必ずコードが存在することを意識しており、HTMLやCSSの仕組みに沿ってコードが煩雑にならないよう配慮がされています。それでもフルスクラッチでコーディングするよりは煩雑にはなるかと思いますが、利便性を考えると許容できる範囲だと考えています。

Webflow Site Designerは実際のCSSプロパティで構成しており、ツールの力を存分に発揮するためには基本的なHTML/CSSを理解している必要はあると思います。

構築に際してはまっさらなブランク状態から始めることも、テンプレートを利用することも可能です。Webflowには様々な業種・テーマから利用できるテンプレートライブラリが用意されており、無料から有料(40ドル~80ドル程度/1回)までご自身の気に入ったテンプレートを利用することができます。HTML/CSSのコーディング経験がある方でしたらブランク状態で初めても抵抗はないと思いますし、コーディングの経験がない方はあらかじめ用意されたテンプレートに手を加える方が抵抗なく構築することができると思います。

テンプレートにはアニメーションなどもデフォルトで設置されている為、知識が無くとも動的なWebサイトを構築することもできます。右サイドバーの上部にある雷のアイコン(Javascript の自動化ツールで)からアクセスできるInteractionsパネルでは、ページの状態やユーザーの特定の要素に対するインタラクション（ホバーやクリックなど）に基づいてアニメーションを追加することができます。

‍

コンテンツマネジメントシステム

Webflow CMSは様々なコンテンツタイプ（ブログ記事、プロジェクト、チームメンバーなど）をCMS Collectuons で定義することができ、複雑な構造を持つ大規模なウェブプロジェクトにも対応可能です。例えば、ウェブサイト上にブログを書いた人の情報を表示したい場合コンテンツタイプとして「Team Member」を追加して、社員の写真、名前、説明、ソーシャルリンクなどを表示するページを作成することができ、ブログ記事内に埋め込むというようなことができます。社員のプロフィールが変更された場合、全ての同一社員の記事の自己紹介を一括で編集できるという事になります。これらの組み合わせで作業の生産性を向上させることができます。ブログ投稿は一つの選択肢に過ぎず、ブログ以外のコンテンツエリアにも様々なコンテンツタイプが挿入できるので、定期的に更新が必要で、複数のページに横断する内容は手軽に一括アップデートができるようになります。かなり柔軟なCMSで、簡単かつ自由度高く、昔ウェブディレクターをやっていた頃の苦労を考えると、時代は進んだなあとしみじみ感じる瞬間です。Webflow CMSには最初から他言語対応のオプションが組み込まれていて、グローバルやインバウンドの集客目的のウェブサイト構築をする際にも利用できそうです。

‍

ホスティング

ウェブフローのホスティングサービスは構築は無料、ローンチする際にホスティン購入するという流れになっています。即ち構築している段階では無料という事になり、余計なアイドリングコストが発生しないことも魅力的です。また当然ですが独自ドメインも利用可能(ドメインは別途お名前.comなどで取得が必要)で、ホスティングプランもアクセス数に応じて課金されるため、余計なコストが発生しません。世界最大級のクラウドプロバイダー(Amazon Cloudfront、Fastly)の分散型インフラをベースにしているため、トラフィック需要に応じてシームレスに拡張することができます。分散型インフラストラクチャにより、トラフィックの急増や悪意のある攻撃にも対応し、ウェブサイトの読み込み時間の短縮し、100%に極めて近い稼働率を実現しています。また、追加費用なしでSSL（Secure Sockets Layer）証明書やコンテンツ配信ネットワーク(CDN)も利用できます(プランにより適用範囲が異なります)。これらのインフラストラクチャを自社で構築、運用するとなると相当なコストがかかり、数十ドルで月額利用可能なWebflowは極めて費用対効果の高いサービスと言えます。

‍

‍

Webflow公式サイト

https://webflow.com/

無料で利用開始できますので、是非この機会に触ってみてください。

‍

このメリット満載のノーコードツールWebflowはECバージョンも提供しており、次回このECバージョンの紹介を含み、更に突っ込んだ内容をご紹介したいと思います。01GROWTHではWebflowを活用したWebサイト構築やABテストの実施など、集客の効率化に向けた支援を行っています。ご興味のある方はぜひこちら初回無料のコンサルタント相談をご予約ください。

ご予約はこちら

https://www.01growth.com/contact/booking

‍