より良いWebコードを書く

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

おかしいですよね?

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

どうやって尋ねる?

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

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

Webflow レビュー:概要

あなたがおそらく今までに理解したように、 Webflow あなたの典型的なウェブビルダーではありません。

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

Webflow

しかし、間違いはありません。 Webflow の同類と競合しません Wix 影響により Weebly。 さまざまなユーザー層をターゲットにしたさまざまな機能セットを提供します。

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

紛らわしい? はい、知っています。 だから私は時間をかけてすべてを鋭く評価しました Webflow ウェブサイトのデザインからコンテンツ管理システムに至るまで、提供する必要があります。

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

Webflow レビュー:機能

ウェブサイトのデザイン

Webflow 間違いなく、いくつかのことがあります。 しかし、そのコードレスWebデザインツールは、常にここでの主要な製品です。

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

Webflow デザイナー

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

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

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

そして、形成するのは本当です、 Webflow は、そこにある最も単純なビルダーのXNUMXつではありません。 そのインターフェースは非常に強力ですが、一見複雑に見え、それに応じてロープを学ぶのにいくらかの努力が必要かもしれません。

初心者のための、 Webflow 完全にコードレスな設計プロセスのような錯覚を引き起こすことはありません。 したがって、すぐに飛び込んでキャンバスに図形を描き始めることを期待しないでください。 このようなアプローチでは、カスタマイズ機能が大幅に制限されます。

したがって、ここのシステムは、Webサイトを構築するときに、コーディングのいくつかの側面を巧みに組み込んでいます。 紹介するつもりなら square たとえば、ページの中央に新しいものを追加する必要があります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 API

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

さて、それは基本的に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の価格体系は、一部のユーザーにとっては複雑に見える一方で、他のユーザーはその包括的なアプローチを賞賛しています。

それに伴う複雑な比較プロセスのために、単一のプラットフォーム上で多数のパッケージを嫌うタイプの場合は、次のことがわかるかもしれません。 Webflowの価格設定は少し面倒です。 しかし一方で、異なるユーザーレベルに適した複数の価格設定オプションを好む場合は、ここで物事がどのように編成されているかが気に入るはずです。

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

Webflow パッケージ

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

フリーランサー向け:

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

  • 10か月あたりXNUMX件のフォーム送信
  • 50 CMSアイテム
  • 500毎月の訪問
  • 2静的ページ
  • Free 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?

すべてを考慮し、私たちは拍手を送る Webflow 提供するため:

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

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

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

それでは、すべてをまとめましょう。 私はあなたがそれに同意するに違いない Webflow は、汎用性と制御の向上を求める開発者、設計者、および機関向けに作成された高度なWeb構築システムです。

あなたの考えは?

ボグダン・ランセア

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