より良いWebコードを書く

これは私がかなり皮肉だと思うものです 多くのWebデザイナーは、Webビルダーに付属するシンプルさを気に入っています。 興味深いことに、Webビルダーの大部分は、基盤となるコードを自動化することにより、Webデザイナーや開発者の役割を排除するために作成されました。

おかしいですよね?

しかし、再び、一見逆のことをしているWebビルダーがいます。 デザイナーや開発者の役割を減らす代わりに、そのようなチームのために特別に最適化されたツールが付属しています。 彼らの主な目的は、高度なツールを使用して設計機関を促進することです。

どうやって尋ねる?

まあ、 ウェブフロー 著名な例のXNUMXつです。 そして、Webデザイン環境全体におけるその役割は、まもなく検討する予定です。 このWebflowのレビューでは、知っておく必要のあるすべての重要な機能、対応する弱点、およびプラットフォームを設計に活用するコストについて説明します。

しかし、最初に、正確にはWebflowとは何ですか?

Webflowレビュー:概要

おそらくこれまでに理解したように、Webflowは典型的なWebビルダーではありません。

2013年にリリースされたこのツールは、プロフェッショナルなコード不要のデザインツールと強力なビジュアルCMSを組み合わせたWebデザインソリューションとして販売されており、標準ビルダーの使いやすさも兼ね備えています。 だから、それはのようなウェブ構築ソリューション間の融合と考えてください ウィックス のようなCMSエンジン ワードプレス。

ウェブフロー

しかし、間違いはありません。 Webflowは以下のものと競合しません ウィックス Weebly。 さまざまなユーザー層をターゲットにしたさまざまな機能セットを提供します。

全体として、ここで最も魅力的なのは、コーディング全体に対するWebflowのスマートなアプローチです。 柔軟性を高めるためにコード編集をサポートしているのは、コードフリーのプラットフォームです。

混乱していますか? はい、知っています。 だからこそ、ウェブフローのデザインからコンテンツ管理システムまで、Webflowが提供するすべてのものを鋭敏に評価するのに時間をかけました。

そしてここに詳細があります…

Webflowレビュー:機能

ウェブサイトのデザイン

Webflowは、間違いなくいくつかのことです。 しかし、そのコードレスWebデザインツールは、常にここでの主要な提供物でした。

まあ、始める前にAdobe Photoshopの編集ウィンドウと混同してしまえば理解できるでしょう。 これらのXNUMXつは遠くから双子の兄弟のように見えるかもしれませんが、近づくにつれてかなり異なります。 より具体的に言うと、Webflowは主にCSSとHTMLで動作する自動化エンジンであることがわかります。

Webflowデザイナー

その上で、サイト要素を快適に導入し、コードを使用せずにそれらを適切に移動できます。 プログラミングビットは、Webflowの基盤となるフレームワークによって処理されます。このフレームワークは、設計プロセスを進めるときに、サイトのコードを体系的に作成および編集します。

他のコードレスのWebデザイナーを試したことがあれば、プログラミングビットを排除すると柔軟性が制限されるという犠牲を払うことになります。 興味深いことに、Webflowの設計ツールはこの傾向に従っていません。 だから、私はここで正直に言って、それが確かに市場で最も先進的な多用途のWebサイトビルダーのXNUMXつであることを認めます。

今、それに直面しましょう。 高度でシンプルなことは、ウェブサイト管理ツールに関して、火と氷のように知られているXNUMXつのことです。

そして、フォームに忠実に言えば、Webflowは、そこにある最も単純なビルダーのXNUMXつではありません。 そのインターフェースは非常に強力ですが、一見複雑であり、それに応じてロープを学習するために多少の努力が必要な場合があります。

手始めに、Webflowは完全にコードレスな設計プロセスの幻想を作り出しません。 したがって、すぐにジャンプして、キャンバスに図形を描き始めることを期待しないでください。 このようなアプローチでは、カスタマイズ機能が大幅に制限されます。

その結果、ここのシステムは、Webサイトを構築するときに、コーディングのいくつかの側面を巧みに組み込んでいます。 たとえば、正方形のミッドページを導入する場合は、新しい<を追加する必要があります。div> 要素、次に、その左下と右上のポイントをゼロとして編集し、固定配置します。

これはどういう意味ですか?

プログラミングの知識がなくてもWebflowを活用できますが、その強力な機能を包括的に活用するには、HTMLおよびCSSプロパティの基本的な理解が必要です。

ただし、それ以外の場合は、「コードを書かない」 登録時に選択してください。 その後、システムは自動化機能を拡張して、設計の大部分を処理します。

つまり、完全に空白のキャンバスから始めることができます。 ベースからすべてをカスタマイズできるので、これが私が好むアプローチです。

ただし、注意が必要です。 このオプションは、CSSおよびHTMLの経験がある設計者に任せてください。 さもなければ、物事を混ぜたり、プロセスのどこかに行き詰まったりするリスクがあります。

初心者をコーディングするための最良のアプローチは、Webflowの事前設計されたテンプレートを利用することです。 システムは200を超える魅力的なテンプレートを提供していることがわかりました。そのうち30は完全に無料です。 一方、有料のものは24ドルから​​79ドルの費用がかかります。

さまざまなテーマを徹底的に分析した後、構造と機能が異なるため、それらが著しく異なることに気付きました。 その後の編集プロセスでは、要素の背景、色、レイヤー、不透明度、回転、効果、位置、サイズなどを変更できます。

ホスティング

これは言うまでもありません。 そのWebflowは、今日のWebビルダーの大部分と同様に、サイトホスティングとカスタムドメイン、およびそのデザインパッケージを提供します。

Webflowホスティング

ただし、ここでは一般的な共有プランのアプローチを期待しないでください。 代わりに、Webflowは、「無限にスケーラブルなサーバー群」と表現する範囲内で、サイトを社内で維持することを選択します。

これは何を伴いますか?

さて、Webflowはたまたま世界中で100を超えるデータセンターを所有し、管理しています。 それを実行したCDNと組み合わせる アマゾンCloudFrontの プラス 早く その結果、あらゆるタイプのウェブサイトをホストするためのXNUMXつの強固なシステムが実現しました。

あらゆるトラフィックサイズの処理とは別に、Webflowはミリ秒単位のページ読み込み時間と99.99%のWebサイト稼働時間で最適なパフォーマンスを保証します。 AWSを利用したフレームワークは、企業サイトからの比較的大きなトラフィック負荷をサポートするための強固な基盤を提供する上で特に重要です。

また、Webセキュリティは必須であるため、WebflowのホスティングインフラストラクチャはHTTP / 2に準拠しており、ユーザーはサイトに関連するSSL証明書を取得します。

コンテンツ管理システム

ここでコンテンツとビジュアルデザインが出会います。 WebflowのCMSを使用すると、基本的にはサイトのコンテンツを入力および管理できます。 つまり、作成しているページにテキストやメディアを追加して編集できます。

また、複雑な構造の大規模なWebプロジェクトを管理している場合は、カスタマイズ可能なフィールドを備えた、コンテンツタイプ、チームメンバー、プロジェクトなど、コンテンツのアスペクトの手動調整をサポートするシステムの機能が特に高く評価されます。

まあ、これはすべてによって促進されます CMSコレクション- プライマリエディタウィンドウから直接アクセスできる機能。 新しいコレクションを生成したらすぐに、コンテンツのタイプを通過してフィールドを定義し、アイテムを紹介できます。 これらはその後、作成したページに統合された個別のWebページまたはリストとして採用されます。

Webflow CMS

混乱していますか? では、この例について考えてみましょう。組織の従業員を表示するページを作成するために、ソーシャルリンク、説明、名前、写真、従業員の名前などのアイテムを含む「チームメンバー」コレクションを紹介できます。

今、それは基本的にCMSバックエンドをカバーしています。 しかし、あなたは何を知っていますか? それがすべてではありません。 Webflowは、WordPressにWebflowエディターを使ってお金を稼ぎます。 ここでは、事前に選択されたタイプに基づいて、発行されたページに新しいコンテンツを追加します。

つまり、追加のプラグインをインストールしなくても、ポートフォリオ、記事、ブログ投稿などの動的コンテンツをサポートする包括的なWebサイトを取得できます。

コラボレーション

認めます。 大規模なWebデザインプロジェクトはエキサイティングです。 ただし、関係するすべての関係者の合理化に失敗した場合は特に、ますます煩雑になる可能性があります。

Webflowは一見これを熟考しており、複数のチームメンバーを持つWebデザイン代理店のコラボレーションを促進するために良い試みを行っています。 さらに、クライアント、サードパーティの設計者、請負業者などの他の関係者を招待することもできます。それらの役割とユーザー機能は、設定した対応する特権によって異なります。

Webflowコラボレーション

たとえば、クライアントを扱っている場合は、厳しく制限された使用権限でリアルタイムでプロジェクトをレビューするようにクライアントを招待できます。

とはいえ、すべてのサイト調整がリアルタイムで全体に反映されていることに気づきました。 これにより、共同で作業しているチームメンバーが、既に処理されたタスクを繰り返す必要がなくなります。

全体的な特徴

  • XMLサイトマップ
  • SEOメタタイトル、説明
  • 画像altタグ
  • ヘルプセンター
  • コミュニティフォーラム
  • 優先サポート
  • メールサポート
  • カスタムドメイン名
  • ステージングサイト
  • 瞬時の更新
  • カスタムURLリダイレクト
  • 24時間年中無休のウェブサイト監視
  • 読み込み時間が短い
  • Google Domains Purchases
  • ザピアの統合
  • MailChimp統合
  • Google Analyticsの統合
  • SEOの最適化
  • ホワイトラベルフォーム
  • CMSホワイトラベリング
  • サイトのパスワード保護
  • プロジェクト組織
  • ウェブサイトのバックアップ
  • カスタムエラーページ
  • カスタムファビコン
  • 直接クライアント請求
  • SNSコンポーネント
  • リッチテキスト
  • ライトボックス
  • 背景ビデオ
  • HTML埋め込みコード
  • ドロップダウンメニュー
  • グーグルマップ
  • スライダーとカルーセル
  • タブナビゲーション
  • カスタマイズ可能なWebフォーム
  • ウェブサイトエディター
  • フォーム送信レビュー
  • グラフのコンテンツを開く
  • SEOタグテンプレート
  • Zapier経由のCMSインポート
  • RSSフィード
  • CMS API
  • 3Dアニメーション
  • CSSスタイリングプロパティ
  • ウェブサイトテンプレート
  • 最適化された画像
  • Webフォントファミリー
  • グローバルカラースウォッチ
  • CSS3フレキシブルボックス
  • カスタムコードの追加
  • エクスポート可能なコード
  • CSSフィルター

Webflowレビュー:価格

一部のユーザーにとってWebflowの料金体系は一見複雑なようですが、他のユーザーはその包括的なアプローチを高く評価しています。

それに伴う複雑な比較プロセスのために、XNUMXつのプラットフォームで多数のパッケージを嫌うタイプの場合、Webflowの料金プランは少し扱いに​​くいかもしれません。 しかし、その一方で、異なるユーザーレベルに適した複数の価格設定オプションを好む場合は、ここでの構成が好きになるでしょう。

まず、Webflowは、フリーランサー、ソロデザイナー、デザインチームのXNUMX種類のユーザーをサポートしようとします。 各カテゴリには、さまざまな機能を持つ独自のパッケージセットがあります。

Webflowパッケージ

以下は各プランの簡単な説明です。

フリーランサー向け:

無料ステージング 完全に無料。

  • 10か月あたりXNUMX件のフォーム送信
  • 50 CMSアイテム
  • 500毎月の訪問
  • 2静的ページ
  • 無料のwebflow.ioサブドメイン

基本的なホスティング 月額$ 15が毎月請求されるか、月額$ 12が毎年請求されます。

  • 500か月あたりXNUMX件のフォーム送信
  • 25,000毎月の訪問
  • 100静的ページ
  • CDN
  • 無料のSSLオプション
  • ドメインの作成

CMSホスティング 月額$ 20が毎月請求されるか、月額$ 16が毎年請求されます。

  • 3コンテンツエディター
  • CMS APIアクセス
  • 2,000のCMSアイテムが利用可能
  • 1,000か月あたりXNUMX件のフォーム送信
  • 100,000毎月の訪問
  • 100静的ページ
  • CDN
  • 無料のSSLオプション
  • ドメインの作成

ビジネスホスティング- 月額$ 45が毎月請求されるか、月額$ 36が毎年請求されます。

  • 10コンテンツエディター
  • CMS APIアクセス
  • 10,000のCMSアイテムが利用可能
  • 無制限のフォーム送信
  • 1,000,000毎月の訪問
  • 100静的ページ
  • CDN
  • 無料のSSLオプション
  • ドメインの作成

フリーランサーのためのWebflow

デザイナー向け:

スターター- 無料。

  • 無料ステージング
  • クライアント請求
  • 最大2つの同時プロジェクト
  • 無料のサイト構築

ライト 月額$ 24が毎月請求されるか、月額$ 16が毎年請求されます。

  • コードのエクスポート
  • 強化されたステージング
  • クライアント請求
  • 最大10つの同時プロジェクト

プロ- 月額$ 42が毎月請求されるか、月額$ 35が毎年請求されます。

  • サイトのパスワード保護
  • ホワイトラベリング
  • プロジェクトの所有権の譲渡
  • コードのエクスポート
  • 強化されたステージング
  • クライアント請求
  • 無制限の同時プロジェクト

デザイナー向けのWebflow

クリエイティブチーム向け

チーム- 月額$ 42が毎月請求されるか、月額$ 35が毎年請求されます。

  • チームダッシュボード
  • サイトのパスワード保護
  • ホワイトラベリング
  • コードのエクスポート
  • 強化されたステージング
  • クライアント請求
  • 無制限の同時プロジェクト

大規模なチーム カスタム見積もり。

  • チームメンバーの一括価格
  • チームダッシュボード
  • サイトのパスワード保護
  • ホワイトラベリング
  • コードのエクスポート
  • 強化されたステージング
  • クライアント請求
  • 無制限の同時プロジェクト

チームのWebflow

誰がWebflowの使用を検討すべきですか?

すべてを考慮し、私たちは拍手を送る ウェブフロー 提供するため:

  • セキュリティ準拠のための無料のSSL証明書。
  • ページの読み込み時間を短縮するための無料の統合コンテンツ配信ネットワーク。
  • 次のような効果的なシステムと連携した高度なグローバルWebサイトホスティング アマゾンCloudFrontの 早く 高速のページ読み込み速度。
  • 動的なコンテンツ作成のための多目的に統合されたCMS。
  • さまざまなWebサイト要素をテストおよびレビューするためのステージング環境。
  • 高度なサイト管理に加え、アニメーションとスタイルの全体的な制御のために最適化されたCSSおよびJSマネージャー。
  • 空白のキャンバスまたは事前に設計されたテンプレートのいずれかから始まる柔軟なWeb構築プロセス。
  • サイトを構築するときにリアルタイムでエクスポート可能なコードを生成するモバイルフレンドリーなWebデザインツール。

それはさておき、その過程で私が遭遇した欠点は次のとおりです。

  • eコマースサイトをサポートするための限定機能
  • プログラマーを大いに支持する設計プロセス
  • 限られた数のウェブサイトテンプレート
  • 初心者のための急な学習曲線

今、すべてを一緒にバンドルしましょう。 Webflowは、多様性と制御の向上を求める開発者、デザイナー、および代理店向けに作成された高度なWeb構築システムであることに同意するに違いありません。

あなたの考えは?

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。