あのGoogleの親会社アルファベットも投資している、今最も注目を集めるサイト制作ノーコードツール『Webflow』。
ノーコードといえば、日本ではStudioやWixが有名ですが、ここ数年でWebflowの注目度が大きく伸びています。その理由は、ノーコードによる手軽さは残しつつも、圧倒的な多機能さによって従来のノーコードでは満たせなかったサイト要件に対応できる唯一無二のノーコードツールであるためです。
しかし、その多機能さと日本語対応していないツールであるがゆえに「難しい」「よくわからない」と感じている方も多いのではないでしょうか。そこで、これを見ればWebflowに関して一発で把握できるように、Webflowに関する機能を網羅的に解説していきます。
堀尾 尭史（ほりお たかふみ）
Funwork株式会社 代表取締役社長
早稲田大学在学中、就活塾を運営。大学卒業後は、アクセンチュア株式会社に入社し、ITコンサルタントとしてCRMシステムの拡張PJに従事。
2019年７月に転職した人材系のベンチャー企業では管理本部長を務めたのち、2020年にWeb制作会社「Funwork株式会社」を設立。現在、UXデザインとWebflowを得意領域としたwebサイト制作を軸に事業展開中。
Webflowの構造
たくさんあるWebflowの機能の説明をする前に、まずはWebflowの構造について解説します。
Workspace（ワークスペース）
いわゆるツールの管理画面を指す言葉です。Webflow内で作成したサイトデータ（サイトプロジェクト）の管理をここで行います。
また、アカウント情報の管理や、支払い方法の管理、アプリケーションとの連携などを行います。自分のWorkspaceから他のWebflowユーザーを招待することで、共同作業メンバーを増やすこともできます。
Site Project（サイトプロジェクト）
Webflowで立ち上げたサイトデータをサイトプロジェクトと呼びます。
このサイトプロジェクトから、ノーコードでサイトをデザイン・構築できる「Designer（デザイナー）」という画面を立ち上げたり、簡単にサイトを更新できる「Editor（エディター）」というツールにアクセスしたり、サードパーティー製品と連携したり、サイト公開・SEOの設定を行ったりできます。
原則、１サイトプロジェクトに対して１ドメインを割り当てて公開します。
Designer（デザイナー）
Webflowのメイン画面である、ノーコードを含む強力な機能によってサイトをデザイン・構築することができる機能のことです。
ドラッグアンドドロップやクリックをメインに、ビジュアライズされた画面上でWebサイトを構築することができます。
Designer上の操作によって組み上げられたサイトは、裏側ではセマンティックなソースコードに変換されているため、SEOに有利に働いたり、ソースコードをエクスポートすることも可能です。
Editor（エディター）
Webflowの特徴の１つでもある、公開後のサイトを簡単に更新できるツールのことです。
どれくらい簡単かと言うと、実際に公開された画面に対して直接テキストの打ち換えや画像の差し替えを行うことができます。
また、記事や商品、コラムの投稿・編集もシンプルなUIで非常にわかりやすく操作できますので、Webに慣れていない方でもすぐに運用することが可能になっています。
Webflowの機能概要
ここからは、実際にWebflowでのサイト構築時に使用する各種機能について紹介していきます。
Elements（エレメント）
HTMLで構成されるサイトの要素のことです。
Divブロック、テキスト、パラグラフ、ヘディング、イメージなどの一般的な要素だけでなく、CMS Collection Listやフォーム用のパーツ、AdvancedにカテゴライズされるWebflow独自のサイトパーツ（ナビゲーションやタブ、スライダー要素など）があります。
Designerでのサイト構築はまず、このElementsを画面上に並べるところから始まります。
Style（スタイル）
一般的なサイト制作でいうところのCSSを制御する機能です。画面上に並べたElementsに対して、Style Selectorでクラス名を指定して、要素に対してデザインを施していきます。
StyleはおおむねCSS3に準拠していますので「Grid Layout」や「Flexbox Layout」「Border Radius」「Box-Shadow」「Aspect Ratio」といったスタイリングも制御できるようになっています。
他のノーコードツールと異なり、Class（クラス）やVariables（バリアブル）といった、設定したStyleを一括管理できる機能も備わっているため、非常に効率的にサイト構築を行うことができます。
Interactions（インタラクション）
JavaScriptを用いて実装するような、画面上のアニメーションを組み上げる機能です。
クリック、ページロード、スクロールといったトリガーを指定したら、あとはPowerPointのようにタイムライン上に動作させたい要素とその動きを指定していくだけで簡単にアニメーションを実装することができます。
このInteractionsを活用すれば、パララックスなどのスクラブアニメーションによってより重厚なデザインを実現したり、ナビゲーションの動きなどをホバー・クリックアニメーションで強化して、UXを向上させることもできます。
Components（コンポーネント）
WordPressで言うところのいわゆる再利用ブロックのことです。
ヘッダーナビゲーションなど、同じ仕様のパーツをサイト内のいくつもの箇所で使いまわす場合、コンポーネント機能によってインスタンス化しておけば、１つのインスタンスに対する変更が、他のインスタンスすべてに反映されるようになり、サイトデザイン管理が一気に楽になります。
また、インスタンス化していても、テキスト・画像・リンクなど一部の要素・Styleはインスタンスごとに個別で指定することもできます。
Custom Code（カスタムコード）
Webflowが他のノーコードツールと一線を隔す理由の１つになっている機能がこのカスタムコードです。
この機能によって、Webflowはノーコードツールでありながら自由にコーディングすることもできます。これによって、従来のノーコードツールでは機能上満たせない要件も、Webflowでならおおむね満たすことが可能になっています。
カスタムコードを組み込むことができる箇所は大きく分けて３か所です。
＜共通ヘッダー、共通フッター＞
サイト内の全ページに適用したいコードはこちらに記述することになります。
よく使われるシーンとしては、Google AnalyticsのタグやMAツールのスニペット、翻訳ツールのスニペットなどの記述が上げられます。
＜ページヘッダー、ぺージフッター＞
特定のページに対してカスタムコードを記述したいときに使用します。
＜Embed（エンベッド）＞
ページ内の任意の箇所にコードを記述したいときに使用します。
カスタムフォームやドキュメントビューワーの実装や、SVGを記述するような使い方まで幅広い用途で使用できます。
CMS
WordPressで言うところの投稿機能のことです。
最大１万アイテム（プランによってはそれ以上も可）もの膨大なコンテンツを管理することができ、１アイテムあたり最大60個の入力欄を設けることができます。
加えて、記事、商品、カテゴリー、タグなどさまざまな切り分けで最大40ものCMS Collectionを作成することができます。
設けられる入力欄はテキスト、リッチテキスト、画像、動画といった基本的な項目だけでなく、CMS Collection同士の連携や、API、RSSの連携も可能になっています。
CMSに登録されたデータは、Designer上で構築したページの各要素に接続することができ、ページ上での動的コンテンツの制御を可能にしています。
Layouts（レイアウト）
Elements機能の一部にLayouts機能があります。これは、Heroセクションや料金表セクション、フッターセクションなどサイトの一部がすでに組みあがっているテンプレートパーツを使用することができる機能です。
LibrariesというWebflowが公式に公開している、すでにデザインされた様々なテンプレートパーツ集をサイトプロジェクトにインストールすることで、そこに登録されているパーツを好きに使って効率的にサイトを構築することができるようになります。
多くのノーコードツールはこうしたテンプレートを使用する場合、パーツごとに制限が掛かり、デザインカスタマイズが利きませんが、Webflowはそういった制限なく、使用したパーツをいくらでもカスタマイズすることが可能です。
その他さまざまな拡張機能
Webflowには組み上げたサイトにさまざまな機能を追加することができる拡張機能が備わっています。
＜Logic（ロジック）＞
サイトにノーコードでワークフローを実装できる機能です。CMSのアイテムを作成・削除・更新したり、HTTPリクエストを作成したり、メール通知するなど、さまざまなアクションをワークフローによって起動させることができます。
しかし、条件設定やアクションには限りがありますので、通常はZapierやMakeといったワークフローに特化したサードパーティー製品をWebflowと連携し、ワークフローを実装することが多いです。
＜Users（ユーザー）＞
ノーコードで会員管理機能をサイトに実装できる機能です。会員の新規登録、ログイン機能だけでなく、通知メールの設定や、会員のみ閲覧できるページに設定することなど、会員サイトに求められる基本的な機能を実装できます。
しかし、カスタマイズできる範囲に限りがありますので、より複雑な要件を満たす場合は、会員機能に特化したサードパーティー製品とWebflowを連携させる必要があります。
＜Ecommerce（イーコマース）＞
Webflowを用いてECサイトを立ち上げることができる機能です。PayPalによる電子決済を可能にし、商品管理や会員管理などを行うことができます。
ただし、世の中にはBASEやSTORES、ShopifyなどECサイトに特化したノーコードツールが多数存在しており、そちらの方がよりECの機能には特化しています。
よって、EC部分はBASE、サイト部分はWebflowといった形で構築プラットフォームを分けるほうが効率的な場合があります。
以上がサイト構築時に使用するWebflowの主な機能です。
他にも、AWS上の安全な環境で簡単にサイトを公開することができるHosting（ホスティング）や、サイトマップの自動生成・301リダイレクトの設定などができるSEOに関する機能、すでに出来合いのサイトデザインを無料or有料で使うことができるTemplates・Made in Webflow、Webflow専用の拡張機能として公開されているAppsなど、実に多くの機能がWebflowには備わっています。
これだけの機能がありながらも、洗練されたUIによって開発しやすい環境をWebflowは提供してくれています。
まとめ
Webflowは単なるノーコードでサイト構築ができるだけのツールではなく、実にさまざまな機能を使いこなすことによって、本格的なサイトを効率的に構築できることを紹介してきました。また、Webサイトに様々な機能を付与できたり、時にはコーディングによって、さらに強力なデザイン・機能をWebサイトに施すことも可能です。
Funwork株式会社では、こうしたWebflowによるサイト制作を黎明期より行ってきており、３年間で100件以上もの制作プロジェクトを請け負ってきました。
もし、Webflowにチャレンジしたいけど不安がある方や、Webflowを触ってみて質問がある方がいらっしゃいましたら、いつでもご相談下さい。また、もちろん制作のご依頼もお請けしております。
当社はWebflowによるWebサイト構築だけでなく、UXデザインに精通しているため、お客様が設定するサイト目的にコミットしたサイトを、設計工程からお手伝いすることが可能です。
UXデザインによる理にかなった設計とWebflowによる効率的な構築で、ハイコストパフォーマンスなサイト制作をお約束いたします。
Funwork HP：https://www.funwork2020.com/
お問い合わせ：https://www.funwork2020.com/contact
合わせて読みたい
