Uiデザイン

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

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

c＃不和ボットコマンド

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

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

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

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

Webflow 2013年に争いに入り、何年にもわたって成熟した製品に進化してきました。の卒業生として発売 YコンビネータのスタートアップアクセラレータであるWebflowは、ノーコードWebデザインの展望を破壊することを望んでおり、「誰もがドキュメントを作成するのと同じくらい簡単に強力で柔軟なWebサイトを作成できる」世界を構想しています。

EditorXのインターフェイスはWebflowの設計とは大きく異なります

Webflowの競合企業、エディターX のコードデザインインターフェースはありません。

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

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

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

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

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

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

asp net mvc web api

Webflowの利点には、使い慣れたインターフェイスが含まれます

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

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

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

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

フルサイズの画像を表示するにはクリックしてください。

一連の会社のWebサイトのWebflowデザイン。

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

Webflowの利点には、ドラッグアンドドロップインターフェイスを使用してページをデザインする機能が含まれます

Webflow Designerは、レスポンシブサイトを構築するためのコードインターフェイスを備えていません。

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

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

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

フルサイズの画像を表示するにはクリックしてください。

スタートアップ企業のウェブサイトはWebflowでデザインされています。

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

Webflowの基本には、ステージングサーバーに公開する機能が含まれます

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

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

Webflowとは-リードを得るためのランディングページの設計

Webflowランディングページの設計。

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

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

Webflowテンプレートを使用することは、Webflowの基本をマスターするための良い方法です。

使用する Webflowテンプレートウェブサイトのデザインプロセスをすぐに開始するための優れた方法です。

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

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

初心者のためのcプログラミングを学ぶ

Webflowの利点：

圧縮されたタイムライン。アイデアから設計、プロトタイピング、およびMVPへのより速いパス。
Webflowは、デザインとコンテンツのギャップを埋めます。ライター、編集者、マーケターがWebサイト全体のコンテンツを即座に更新できるようにします。
デザイナー Webflow、Sketchをスキップ、または別のプロトタイピングツールで、忠実度の低いまたは高いプロトタイプを作成できます。プロトタイプがテストされると、それらは迅速に最終製品になり、Web上で公開されます。
複数のサイトとランディングページを構築、ホスト、および維持します。
次のような測定ツールを組み込む Hotjar または Googleタグマネージャー。
マーケターやその他の非技術者の参入障壁を低くします。
ページ上で他の人がコンテンツを簡単に編集するには、 Webflowエディター。
Webfloweコマースオンラインビジネスの迅速な設計とスケーリングを可能にします。
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を使用すると、設計者はより短時間で精巧な製品を設計および構築できます。助けになるデザイナービジネスのスピードに遅れずについていき、コーディングできない人々にチャンスの世界を開きます。乗船する時期かもしれません。

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

s法人vsc法人vsパートナーシップ

•••

ApeeScapeデザインブログの詳細：

基本を理解する

Webflowの費用はいくらですか？

Webflowには、無料の試用プランと、さまざまなニーズに合わせて「サイト」および「アカウントプラン」と呼ばれるさまざまな有料プランがあります。主な違いは、サイトがWebflowによってホストされているかどうかです。プランの範囲は、ドメインを使用した基本的なサイトプランで、月額$ 16から、最上位のWebfloweコマースプランの月額$ 212までです。

Webflowは良いですか？

ウェブデザインツールが良いかどうかは主観的です。そうは言っても、Webflowは柔軟なWebデザインツールです。その利点には、コードを記述せずにレスポンシブサイトを視覚的に設計し、CMSシステムと連携する機能が含まれます。 Webflowの統合には、HotjarやGoogleタグマネージャーなどの測定ツールも含まれます。

Webflowは何に使用されますか？

デザイナーやマーケティング担当者を対象としたWebflowは、ビジュアルWebデザイン用に発明されたノーコードWebデザインツールです。レスポンシブウェブサイト、ランディングページ、eコマースサイト、ブログなどのデザインに使用できます。 Webデザインツールだけでなく、CMS（コンテンツ管理システム）も備えており、ホスティングプラットフォームでもあります。

どの企業がWebflowを使用していますか？

多くの有名企業がWebflowのランディングページとマーケティングWebサイトを使用しています。いくつか例を挙げると、CBS、MTV、HelloSign、Intuit、IDEO、Dell、Zendesk、Getaround、Autodesk、および楽天です。これらの企業のマーケティングおよび設計チームは、開発者なしでWebflowでWebサイトを実行することにより、サイトをより迅速に更新します。

Webflowは安全ですか？

Webflowは、さまざまな脅威からの保護を提供します。攻撃から完全に安全なインターネットサービスはありませんが、Webflowは、最も一般的な攻撃を軽減するための高度なDDOS保護対策を講じています。 Webflowは、ホスティングインフラストラクチャに関する継続的なサードパーティの監査により、高度なセキュリティ慣行に準拠しています。