フロントエンド開発者がウェブフローを使うべき7つの理由

ウェブフローは Web 開発の面倒な部分を取り除き、開発者がデザインをより速く制作することに集中できるようにします。

目次


Barrett Johnson

この記事は、CSS tricksの創設者であるChris Coyierへのインタビューに基づいています。インタビューの全文とデモは下記からご覧ください。


Web開発でなぜWebflowなのか?

フロントエンドの開発者であれば、"なぜウェブフローなのか?"と疑問に思うかもしれません。この記事では、ウェブフローを使ったビジュアルコーディングを始めるべき7つの理由を紹介します。

1.プロフェッショナルのために作られたツール

ウェブフローはコードの力を視覚的なキャンバスに取り込み、デザインすることで、コードを使わずウェブサイトを構築することができます。
lattice's 2020 home page
人材系スタートアップのLatticeは、Webflowを利用して制作マーケティングサイトを構築し、ハンドコーディングの開発作業に頼らずに更新を行っています。

開発者がすぐに理解できるウェブフローのUI(ユーザーインターフェイス)

Webflowの導入で難しいのは、他のプロフェッショナルなデザインツールと同じように、使いこなすまでに多少の学習が必要なことです。
特に、HTMLやCSSの基礎を学んだことのないデザイナーやマーケティング担当者であれば、なおさらでしょう。しかし、これらHTMLとCSS の知識をすでに持っている開発者にとっては、ウェブフローを理解するのは簡単です。

ウェブフローの UI は HTML と CSS のコントロールに直接対応しており、左側に要素(例:div ブロック、リンク、テキスト)、右側に CSS のスタイリングコントロールがあります。つまり、コードエディターで CSS を記述するときと同様のメンタルモデルをウェブフローで構築するときに使用することになります。

webfow's designer UI
ウェブフローは、HTMLとCSSを視覚的なUIで表現します。div、リンク、テキストなどのWebプリミティブを左からドラッグし、右からクラスと実際のCSSプロパティでスタイルを指定します。

また、UIコントロールはHTMLやCSSに直接マッピングされ、クラスを使って構築するため、ウェブフローサイトの背後にあるコードは、手でコーディングするのと同じくらいクリーンです。

radial gradients in Webflow
放射状グラデーション:ウェブフローでは楽しいが、CSSを手書きする場合はあまり楽しくない。

この機能は、CSS を覚えるのが大変なスタイルを作成するときに特に役立ちます。たとえば、デザイナーが大好きだと思われる放射状のグラデーションをボタンに付与する場合などです。

2. クラスと再利用可能なスタイルが魅力

CSS の力を借りてウェブフローで要素を視覚的にスタイリングすることは素晴らしいことですが、それらのスタイルをサイト全体で再利用したり更新したりしたい場合はどうしたらよいでしょうか。CSS のように、ウェブフローはクラスをコアコンポーネントとして構築されています。つまり、ウェブフローはサイトの構築だけでなく、保守や更新も簡単に行えるということです。

CSS スタイリングは、デザインにおけるビジュアルの見栄えに影響を与えます。ウェブフローでは、これらのCSSスタイリングをコードで変更する負担がありません。サイト全体の変更も、ビジュアルなインターフェースで簡単に行えます。各要素にスタイルを設定し、変更すると、その変更が瞬時に反映されます。特定の要素に対してサイト全体の CSS スタイルを作成することも、必要に応じて個々の要素を完全に制御することも可能です。

editing styles in Webflow
クラスでスタイルを編集し、そのクラスを使用しているすべての要素を更新します。これで CSS が完成です。

3. フレックスボックスや CSS グリッドのような最新のレイアウト ツール

ウェブフローでビジュアルに作業することは、レイアウトの選択肢が制限されることを意味するものではありません。それどころか、ウェブフローはフレックスボックスや CSS グリッドのような最先端のレイアウトシステムを第一級の市民として扱い、好きなようにサイトを構築するための完全なコントロールが可能です。

css grid in a visual canvas
FTPや煩わしい設定もなく、クリックするだけで公開できます。

4. ワンクリックでパブリッシング

ウェブフローは、単に視覚的にコードを書くだけでなく、パブリッシングとホスティングのプラットフォームとして組み込まれています。つまり、ゼロからウェブサイトを公開するまでにかかる時間は、手作業でコーディングする場合の何分の一にも満たないのです。視覚的にデザインを構築したら、公開をクリックし、サイトをライブでプッシュすることができます。

publish in Webflow with one click
No FTP, no annoying setup — just click to publish.

5. WordPressより柔軟で強力なCMS

lattice's resources for humans magazine
 Lattice はウェブフローを使用して、カスタムコンテンツマーケティングハブ "Resources for Humans" を構築しています。

ウェブフローのCMSは、ウェブフロー特有のビジュアルデザインコントロールと、特定のフォーマットや投稿タイプに縛られないCMSの柔軟性を組み合わせた、非常に柔軟で強力なツールです。ウェブフローでは、サイトが必要とするあらゆる種類のコンテンツを自由に作成し、そのコンテンツを中心にデザインをゼロから作り上げることができます。

cms collections in Webflow
WebflowのCMSでは、カスタムフィールドを定義し、それらのフィールドをデザインテンプレートに直接接続することができます。

コンテンツ・エディターの視点から見ると、Webflowサイトのコンテンツの編集や更新は、簡単かつ直感的に行うことができます。Webflowのエディターは、同僚やクライアントがページ上でコンテンツを編集・更新するためのシンプルなUIを提供し、煩雑なダッシュボードにログインする必要がなく、パブリッシングを過度に複雑化させません。

6. 完全にカスタム化されたインタラクションやアニメーションの構築

okalpha's website built in Webflow
代理店Ocalphaのホームページは、スクロールベースのアニメーションを使って目立たせています。

Webflowのインタラクション&アニメーションツールでは、以下のような一般的なトリガーに基づいてアニメーションを制御することができます。

  • ページのロード
  • クリック
  • ホバー
  • スクロール位置
  • マウスの位置

... などなど

これは、HTML や CSS には慣れているが、JavaScript の複雑さに頭を悩ませている(あるいは勉強を遅らせている)ウェブサイト開発者にとって、特に素晴らしいニュースです。ウェブフローは、Webサイトのアニメーションやインタラクションのパワーを直接ビジュアルツールボックスに取り込み、Webデザインのこの領域全体をより視覚的にクリエイティブでアクセスしやすくすることを目的としています。

7. Webflow University で学習できる

ウェブフローのようなプロフェッショナルグレードの新しいツールを学ぶのは大変なことですが、私たちはそのことを理解しています。Webflow Universityでは、そのような学習プロセスを楽しく、親しみやすいものにするために、最高の教育用ビデオと教材を作成するために多大な投資を行ってきました。

最後に:デザイナーとデベロッパーはコードを書くべきだ - ただし視覚的に

一日の終わりに、私はよくWebflowをコーディングの別の方法と表現します。デザイナーはコードを書くべきか」という昔からの疑問が出てきたとき、私は「そうだ、デザイナーはコードを書くべきだ - ただし、視覚的に」と答えるべきだと思います。

Webflowのテーゼは、デザイナーは仕事をするために複雑な視覚的ツールを学ぶことに慣れているが、ウェブデザインの領域では、制作に特化したツールは皆無に等しい、というものです。
Webflowは、フロントエンドの開発をビジュアル化することで、このギャップを埋めようとしています。つまり、Webflowのデザイナーはコードを書いていなくても、Web制作を考える際に同じメンタルモデルを経由して、デザインするメディアを直接操作していることになるのです。
最終的には、デザイナーと開発者が共通の言語を話すようになり、その結果、より速く製品を出荷できるようになるのです。

コードを一行も書かずに、完全にカスタム化された、制作に適したウェブサイトや、超高忠実度のプロトタイプを構築することができます。ウェブフローだけです。