Barrett Johnson
この記事は、CSS tricksの創設者であるChris Coyierへのインタビューに基づいています。インタビューの全文とデモは下記からご覧ください。
Web開発でなぜWebflowなのか？
フロントエンドの開発者であれば、"なぜウェブフローなのか？"と疑問に思うかもしれません。この記事では、ウェブフローを使ったビジュアルコーディングを始めるべき7つの理由を紹介します。
1.プロフェッショナルのために作られたツール
ウェブフローはコードの力を視覚的なキャンバスに取り込み、デザインすることで、コードを使わずウェブサイトを構築することができます。
開発者がすぐに理解できるウェブフローのUI(ユーザーインターフェイス)
Webflowの導入で難しいのは、他のプロフェッショナルなデザインツールと同じように、使いこなすまでに多少の学習が必要なことです。
特に、HTMLやCSSの基礎を学んだことのないデザイナーやマーケティング担当者であれば、なおさらでしょう。しかし、これらHTMLとCSS の知識をすでに持っている開発者にとっては、ウェブフローを理解するのは簡単です。
ウェブフローの UI は HTML と CSS のコントロールに直接対応しており、左側に要素（例：div ブロック、リンク、テキスト）、右側に CSS のスタイリングコントロールがあります。つまり、コードエディターで CSS を記述するときと同様のメンタルモデルをウェブフローで構築するときに使用することになります。
また、UIコントロールはHTMLやCSSに直接マッピングされ、クラスを使って構築するため、ウェブフローサイトの背後にあるコードは、手でコーディングするのと同じくらいクリーンです。
この機能は、CSS を覚えるのが大変なスタイルを作成するときに特に役立ちます。たとえば、デザイナーが大好きだと思われる放射状のグラデーションをボタンに付与する場合などです。
2. クラスと再利用可能なスタイルが魅力
CSS の力を借りてウェブフローで要素を視覚的にスタイリングすることは素晴らしいことですが、それらのスタイルをサイト全体で再利用したり更新したりしたい場合はどうしたらよいでしょうか。CSS のように、ウェブフローはクラスをコアコンポーネントとして構築されています。つまり、ウェブフローはサイトの構築だけでなく、保守や更新も簡単に行えるということです。
CSS スタイリングは、デザインにおけるビジュアルの見栄えに影響を与えます。ウェブフローでは、これらのCSSスタイリングをコードで変更する負担がありません。サイト全体の変更も、ビジュアルなインターフェースで簡単に行えます。各要素にスタイルを設定し、変更すると、その変更が瞬時に反映されます。特定の要素に対してサイト全体の CSS スタイルを作成することも、必要に応じて個々の要素を完全に制御することも可能です。
3. フレックスボックスや CSS グリッドのような最新のレイアウト ツール
ウェブフローでビジュアルに作業することは、レイアウトの選択肢が制限されることを意味するものではありません。それどころか、ウェブフローはフレックスボックスや CSS グリッドのような最先端のレイアウトシステムを第一級の市民として扱い、好きなようにサイトを構築するための完全なコントロールが可能です。
4. ワンクリックでパブリッシング
ウェブフローは、単に視覚的にコードを書くだけでなく、パブリッシングとホスティングのプラットフォームとして組み込まれています。つまり、ゼロからウェブサイトを公開するまでにかかる時間は、手作業でコーディングする場合の何分の一にも満たないのです。視覚的にデザインを構築したら、公開をクリックし、サイトをライブでプッシュすることができます。
5. WordPressより柔軟で強力なCMS
ウェブフローのCMSは、ウェブフロー特有のビジュアルデザインコントロールと、特定のフォーマットや投稿タイプに縛られないCMSの柔軟性を組み合わせた、非常に柔軟で強力なツールです。ウェブフローでは、サイトが必要とするあらゆる種類のコンテンツを自由に作成し、そのコンテンツを中心にデザインをゼロから作り上げることができます。
コンテンツ・エディターの視点から見ると、Webflowサイトのコンテンツの編集や更新は、簡単かつ直感的に行うことができます。Webflowのエディターは、同僚やクライアントがページ上でコンテンツを編集・更新するためのシンプルなUIを提供し、煩雑なダッシュボードにログインする必要がなく、パブリッシングを過度に複雑化させません。
6. 完全にカスタム化されたインタラクションやアニメーションの構築
Webflowのインタラクション＆アニメーションツールでは、以下のような一般的なトリガーに基づいてアニメーションを制御することができます。
- ページのロード
- クリック
- ホバー
- スクロール位置
- マウスの位置
... などなど
これは、HTML や CSS には慣れているが、JavaScript の複雑さに頭を悩ませている（あるいは勉強を遅らせている）ウェブサイト開発者にとって、特に素晴らしいニュースです。ウェブフローは、Webサイトのアニメーションやインタラクションのパワーを直接ビジュアルツールボックスに取り込み、Webデザインのこの領域全体をより視覚的にクリエイティブでアクセスしやすくすることを目的としています。
7. Webflow University で学習できる
ウェブフローのようなプロフェッショナルグレードの新しいツールを学ぶのは大変なことですが、私たちはそのことを理解しています。Webflow Universityでは、そのような学習プロセスを楽しく、親しみやすいものにするために、最高の教育用ビデオと教材を作成するために多大な投資を行ってきました。
最後に：デザイナーとデベロッパーはコードを書くべきだ - ただし視覚的に
一日の終わりに、私はよくWebflowをコーディングの別の方法と表現します。デザイナーはコードを書くべきか」という昔からの疑問が出てきたとき、私は「そうだ、デザイナーはコードを書くべきだ - ただし、視覚的に」と答えるべきだと思います。
Webflowのテーゼは、デザイナーは仕事をするために複雑な視覚的ツールを学ぶことに慣れているが、ウェブデザインの領域では、制作に特化したツールは皆無に等しい、というものです。
Webflowは、フロントエンドの開発をビジュアル化することで、このギャップを埋めようとしています。つまり、Webflowのデザイナーはコードを書いていなくても、Web制作を考える際に同じメンタルモデルを経由して、デザインするメディアを直接操作していることになるのです。
最終的には、デザイナーと開発者が共通の言語を話すようになり、その結果、より速く製品を出荷できるようになるのです。
コードを一行も書かずに、完全にカスタム化された、制作に適したウェブサイトや、超高忠実度のプロトタイプを構築することができます。ウェブフローだけです。