ノーコードWebデザインのWebflowの利点–ケーススタディ

公開: 2022-03-11

デザイナーと開発者のコ​​ラボレーションのでこぼこの道をスムーズにするために、無数のデザインツールアドオンが考案されました。 それでも、典型的なWebデザインのワークフローは、非効率性に満ちており、創造性を阻害し続けています。 ノーコードの新世代のビジュアルWebデザインツールは、デザイナーを従来のWeb開発の創造的な束縛や退屈な作業から解放することを約束します。

最近、多くのノーコードWeb開発プラットフォームが、まるで天国のマナのようにデザインランドスケープに登場しました。 「コードの壁を打ち破る」ことを熱望している設計者は、ついにユートピア的なコードレスの未来の現実を認識することができます。 星が揃うと、詳細な仕様を持つフロントエンド開発者に設計を渡す必要がなくなります。 デザイナーは、アートボード上に要素を視覚的に配置し、安堵のため息をついて「公開」をクリックする自由があります。

コード設計ツールが登場する前は、設計者はすべてを実装するためにフロントエンド開発者に依存する必要がありました。 Webサイトのテキストを別のフォントサイズに変更するには、数日かかる場合があります。 小さなマーケティングWebサイトや単純なランディングページの場合でも、デザイナーはデザインを送信し、座って、指を交差させ、すべてがピクセル単位で完全に戻ってくることを祈ります。 プロセスは、ペンキが乾くのを見るようなものでした。

機会を感じて、「ノーコード」ウェブサイトビルダーは今どこにでもあります。 実験的なものもあれば、堅牢で有能なものもあります。 それでも、無制限のクリエイティブコントロールを提供することになると、多くの人がまだ配信不足です。 ほぼすべてが柔軟性のないテンプレート駆動型プラットフォームであり、中小企業を対象としています。

ほとんどのプロのデザイナーは、コードに触れることなく、絶対的なクリエイティブコントロールを使用して、レスポンシブサイトをすばやく設計および構築する機能を切望しています。 ノーコード開発プラットフォームの戦場が、エディターX、Bubble、Ceros、Webflowなど、少数の深刻な競争相手で溢れかえっているため、その日は急速に近づいている可能性があります。

Webflowは2013年に争いに加わり、長年にわたって成熟した製品に進化してきました。 Y Combinatorのスタートアップアクセラレーターの卒業生として立ち上げられたWebflowは、ノーコードWebデザインの展望を崩壊させ、「誰もがドキュメントを作成するのと同じくらい簡単に強力で柔軟なWebサイトを作成できる」世界を構想しています。

Editor Xのインターフェースは、Webflowの設計とは大きく異なります。
WebflowのライバルであるEditorXのノーコード設計インターフェース。

利害関係者から賛同を得るための方法

設計者がこれらのプラットフォームの機能を発見すると、あらゆる規模の企業がノーコードWeb設計ツールを採用することで利益を得ることができることにすぐに気付きます。 特にリソースが限られている小規模なチームにとっては、大きなメリットがあります。 それでも、新しいWebデザインツールに夢中になるだけでは十分ではありません。 利害関係者は、切り替えを承認するように説得される必要があります。

デザイナーはどのようにしてそれを実現しますか？ 私はB2Bスタートアップの製品デザイナーであり、1人の開発者がコア製品に焦点を合わせていました。 同社はマーケティングWebサイトを必要としていましたが、開発者向けのリソースがありませんでした。 私たちは難問に直面しました。開発者なしでWebサイトを構築するにはどうすればよいでしょうか。 Webflowを調べて習熟した後、私はそれを一人でできることに気づきました。

私は週末を月曜日の利害関係者会議のためにWebflowで設計を実装するのに費やしました。 会議中に、私はWebflowsの利点について説明し、デザインからコードへの移行、レスポンシブデザインの作成、および何かの迅速な変更がいかに簡単であるかを示しました。 Webページのデザインと立ち上げには、ほんの数日しかかかりません。

また、WebflowのCMS機能とSEOを簡単に組み込むことができることも紹介しました。 次に、開発者を雇うという追加コストなしで、すべてを実装する1人の設計者のコスト削減について説明しました。 それらは売られました。

これは、完全なクリエイティブコントロールを取り戻す機会でもありました。 私はもはや、Sketchでモックアップを作成し、開発者にデザインを渡す単なるデザイナーではありませんでした。 この新しいパラダイムは、私をWeb開発の大国に変えました。私は、サイトの設計、構築、テスト、微調整、SEO、A / Bテストの組み込み、および公開を行うことができました。 それは力を与えてくれました、そしてそれは私に会社でより強い声を与えました。

Webflowの利点には、使い慣れたインターフェイスが含まれます
Webflowの利点には、オールインワンのビジュアルWeb開発インターフェイスが含まれます。

Webflowデザインのケーススタディ

Upvestでは、同社のコア製品の設計に加えて、ビジュアルブランディングも担当していました。 これには、頻繁な更新に対応する必要のある会社のレスポンシブWebサイトが含まれていました。 Upvestは初期段階のスタートアップであり、製品はまだ進化していました。 そのため、途中でさまざまなマーケティングページを作成してA/Bテストを行う必要がありました。 また、CMSシステムを使用してブログ記事を投稿し、さまざまな販売促進のための専用のランディングページを立ち上げる必要がありました。

さらに、複雑な問題は、会社が初期の間にいくつかのピボットを行っていたことでした。 それは、APIの販売から、ブロックチェーンウォレットの構築、不動産会社への「資産トークン化」の提供にまで及びました。 その結果、私たちが前進するにつれて、私はWebflowでさまざまなランディングページをデザインする必要がありました。

WebflowCMSを使用したWebflowデザインのランディングページ クリックするとフルサイズの画像が表示されます。
一連の会社のWebサイトのWebflowデザイン。

Webflowの使用を開始するのは比較的簡単でした。 チュートリアルは、WebflowUniversityを通じて提供されます。 私は数日で私たちのマーケティングウェブサイトの最初のバージョンを設計して構築しました。 ドラッグアンドドロップインターフェイスは使いやすく、さまざまな画面サイズのデザインを調べるのはクリックするだけでした。 Webflowを使用して、レスポンシブレイアウト用のボックスモデルを使用してページを正しく組み立てることについても多くのことを学びました。

Webflowの利点には、ドラッグアンドドロップインターフェイスを使用してページをデザインする機能が含まれます
Webflow Designerは、レスポンシブサイトを構築するためのコードインターフェイスを備えていません。

みんながウェブサイトのビジュアルブランディングに同意したら、私はウェブフローで私たち全員が従うことができるスタイルガイドを作成しました。 また、後続のページビルド用にさまざまなクラスと再利用可能なシンボルを設定しました。 Webflowのシンボルは、SketchのシンボルおよびAdobeXDのマスターコンポーネントと同じように機能します。 シンボルが更新されると、プロジェクト内のそのコンポーネントの他のすべてのインスタンスが更新を反映します。

Webflowの使用方法-Webflowスタイルガイド

最初のウェブサイトの立ち上げ後、私はウェブフローにますます慣れてきました。 さまざまな指標を追跡するために、GoogleTagManagerやHotjarなどの測定ツールをインストールする方法を学びました。 さまざまなマーケティング資産を組み立てる速度も向上しました。 同社は、製品の進化に合わせてさまざまなレイアウトとコンテンツをテストする必要がありました。Webflowを使用すると、開発者に頼ることなく、デザインを変更してすばやく稼働させることができました。

Webflowデザインにより、迅速なWebサイトの設計と開発が可能になります クリックするとフルサイズの画像が表示されます。
スタートアップ企業のウェブサイトはWebflowでデザインされています。

Webflowはサイトをプレビューするためのステージングリンクを提供するため、利害関係者は設計の進化を確認し、即座にフィードバックを提供できます。 調整が形式化されると、Sketchなどの設計ツールに戻るのではなく、Webflowで直接変更を加えて、サイトをステージングに公開できます。 出力はすべてコードであり、すぐにステージングサイトに投稿され、次のレビューの準備が整います。 すべてが順調に進んだら、サイトを会社のドメインに公開しました。

Webflowの基本には、ステージングサーバーに公開する機能が含まれます
利害関係者のレビューとフィードバックのために、ブログデザインをWebflowのステージングリンクに公開します。

他の多くのデザイナーと同様に、私の好みのデザインツールはSketchです。 準備ができたら、レビューのためにさまざまな利害関係者とデザインを共有します。 彼らがそれらを承認したら、私は先に進んでそれらをWebflowに実装します。 しばらくすると、Webflowに慣れ、Sketchを使用する必要がなくなりました。 新しいプロジェクトがあるときはいつでも、私はWebflowに直接入ります。 この新しいワークフローは、資金不足のスタートアップに多くの時間とお金を節約しました。 たとえば、リードを生成するためのマーケティングキャンペーンのために、次のランディングページを完全にWebflowで作成しました。

ウェブフローとは-リードを獲得するためのランディングページのデザイン
Webflowランディングページの設計。

ブログのニーズについては、Webflowの基本を関係者と共有し、CMSの使用方法を示しました。 彼らがそれに慣れると、彼らは自分たちでブログ記事をアップロードしていました。 WebflowのCMSコレクション機能を利用して、私はすでにシステムをセットアップしていました。 記事のコンテンツを追加して公開する必要がありました。

Webflow CMS クリックするとフルサイズの画像が表示されます。
ブログ投稿がWebflowCMSでCMSコレクションとして設定されると、新しいコンテンツを簡単に公開できます。

Webflowを設計プロセスに組み込む

Webflowを設計プロセスに組み込むのは簡単です。 さらに、特に最後に、多くの従来の設計手順を排除できます。 開発者の引き継ぎはありません。 この最後のフェーズを排除するだけで、かなりの時間を節約できます。つまり、「レッドライニング」や仕様の煩わしさがなくなります。

デザイナーがSketch/XD / Figmaを使用したワイヤーフレーミング、プロトタイピング、およびUIデザインに慣れている場合は、そのワークフローに慣れている可能性があります。 ただし、特に小規模なプロジェクトの場合は、 Webflowに直接アクセスしてデザインを組み立て、ステージングリンクを使用してブラウザーでライブテストすることを検討することをお勧めします。 スコープによっては、Webflowでプロジェクトを構築するのに他の方法よりも時間がかかる場合があるため、ニーズのバランスを取ることがすべてです。 A / Bテストや多変量テストなどの設計実験では、Webflowに直接アクセスして、そこで設計、構築、テストすることも理にかなっています。

Webflowの利点には、開発者に仕様を提供する必要がないことが含まれます
コードWeb開発プラットフォームがないため、設計者から開発者への仕様は必要ありません。

設計者は、さまざまなWebflowテンプレートのホストから選択し、それらをカスタマイズすることで、プロジェクトをすばやく開始できます。 すべてのテンプレートは、コードを記述せずにWebflowを使用して構築されているため、Webflowのビジュアル開発インターフェイスを使用して完全にカスタマイズできます。

デザインを構成するコンポーネントはWebflowシンボルに変換でき、それを再利用して後続のページを数分で組み立てることができます。 Sketchと同様に、デザイナーはシンボルを設定し、各コンポーネントにバインド可能なフィールドを作成し、各インスタンスにコンテンツのオーバーライドを追加できます。 これは、デザイナーが見出し、画像、テキストブロックを含むコンポーネントを作成し、異なるコンテンツのページ間で再利用できることを意味します。

Webflowは、設計システムを構築するための優れたツールでもあります。 シンボルのコンテンツオーバーライドの最近のリリースでは、ブランドの視覚的アイデンティティやコアバリューを損なったり薄めたりすることなく、チームがより迅速にデザインを構築できるようにするデザインシステム全体を作成できます。

アイデアを人々が使用できるものに変換するために必要な時間とコーディングの専門知識を削減するコードツールはありません。 物事を構築するためにプログラマーになる必要はなくなり、さまざまな背景や視点から新しいメーカーの波に力を与えることができます。 The Rise ofNoCodeのProductHuntの創設者であるRyanHoover

Webflowテンプレートを使用することは、Webflowの基本をマスターするための良い方法です。
Webflowテンプレートを使用することは、Webサイトのデザインプロセスをすぐに開始するための優れた方法です。

WebデザインのためのWebflowの利点

インターフェイスはさまざまなデバイスでの編集とプレビューをシームレスに統合しているため、WebflowでレスポンシブWebサイトをすばやく作成できます。 ワンクリックで、デザイナーはデスクトップ、タブレット、モバイルでサイトがどのように表示されるかを確認でき、各画面のレイアウト、コンポーネント、フォントを調整できます。

Webflowの利点：

  • 圧縮されたタイムライン。 アイデアから設計、プロトタイピング、およびMVPへのより速いパス。
  • Webflowは、デザインとコンテンツのギャップを埋めます。 ライター、編集者、マーケターがWebサイト全体のコンテンツを即座に更新できるようにします。
  • 設計者は、Sketchや別のプロトタイピングツールをスキップして、Webflowで忠実度の低いまたは高いプロトタイプを作成できます。 プロトタイプがテストされると、それらは迅速に最終製品に変換され、Web上で公開されます。
  • 複数のサイトとランディングページを構築、ホスト、および維持します。
  • HotjarやGoogleTagManagerなどの測定ツールを組み込みます。
  • マーケターやその他の非技術者の参入障壁を低くします。
  • Webflow Editorを使用して、ページ上で他のユーザーがコンテンツを簡単に編集できます。
  • Webflow eコマースにより、オンラインビジネスの迅速な設計と拡張が可能になります。
  • Webflowは、チームテンプレートを使用して設計の一貫性と速度を提供します。
  • 設計者は、実際のコンテンツを使用してサイトを構築し、WebflowのCMSコレクション（他のチームが技術的なスキルがなくても使用できるコンテンツテンプレート）を利用できます。
  • 自動サイトバックアップ（バージョン管理）およびステージングURL。
  • サイトをWebflowでホストする必要はありません。 すべてのWebサイトは標準のHTML、CSS、およびJavaScriptでコーディングされているため、サイトをエクスポートして任意のホストにアップロードできます。
  • Webflowを終了するときに、HTMLファイルおよびCSSファイルとともに、将来使用するためにデータベースをエクスポートできます。

Webflowチュートリアルのライブラリを調べることで、Webflowの利点を詳しく調べることができます。

概要

Web開発用のコードを廃止することで、無数のビジネス上のメリットを実現できます。 標準以下のDIYWebデザインツールを超えるWebflowは、ほとんどのプロフェッショナルなWebデザインのニーズに適した魅力的なソリューションを提供します。 プラットフォームは進化を続けており、さらにエキサイティングな開発が進んでいます。

私は2か月足らずで、Webflowを使用して会社のWebサイトを単独で設計し、立ち上げました。 Webflowは、設計プロセスに前例のない柔軟性を提供し、コードを気にすることなく、よりクリエイティブな制御を提供します。 迅速でコードのないWebデザインワークフローは、立ち上げへのより迅速なパスを提供し、従来のWeb開発と比較して生産コストを半分に削減しました。

学習曲線は急ではありません。 数週間で、Webflowのすべての詳細をチュートリアルで十分に習得できます。これで、本格的なWebサイトをまとめることができます。 デザイナーがWebflowを学ぶと、Web開発の従来の方法に戻ることは決してありません。

コードWebデザインツールはここにありません。 それらが提供する価値と柔軟性は疑う余地がありません。 ノーコード開発は、テクノロジーが参入障壁ではなく、作成を可能にし、促進する必要があるという基本的な信念に基づいています。 Webflowを使用すると、設計者はより短時間で精巧な製品を設計および構築できます。 これは、設計者がビジネスのスピードに追いつくのに役立ち、コーディングできない人に機会の世界を開きます。 乗船する時が来たのかもしれません。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

Toptal Designブログでさらに読む：

  • ポストフラッシュ時代のウェブアニメーション
  • シンプルさが鍵–最小限のWebデザインを探る
  • レスポンシブデザイン–ベストプラクティスと考慮事項
  • ブルータリストのWebデザイン、ミニマリストのWebデザイン、そしてWebUXの未来
  • すべてのトレンドは価値がありますか？ Webデザイナーが犯す最も一般的なUXの間違いトップ5