WebFlowを使用した拡張設計システムを作成します。

人生の本当の問題：なぜ大きな組織の組織があるのですか？ 「デザインコントロール」はここにありませんか？

このように感じたことはありますか？マネージャーまたはチームリーダーとして、あなたは会社のウェブサイトとアプリケーションを見て、ため息をつく必要があります...なぜ各製品は異なる企業とは異なるように見えるのですか？チームAは、濃い青色のボタンを使用します。 BチームはBright Blueを使用し、Cチームは青いボタンを備えた新しい機能をリリースしました！これは、「デザインの不一致」またはデザインの一貫性のないデザインと呼ばれる問題です。これは、大規模な組織が定期的に遭遇しなければならない悪夢です

問題はそれだけではありません。想像する：

• デザイン：新しいプロジェクトを開始するたびに、新しいUIキットを座ってデザインする必要があります。標準化されるべきものを作成するための時間を無駄にします
• 開発者：基本的なコンポーネント（ボタン、フォーム、カードなど）のコードを繰り返し作成する必要がありますが、1回だけ作成して使用できます。
• プロダクトマネージャー：すべてのチームがデザインの「最新バージョン」であることを理解するための頭痛とコミュニケーション？
• ユーザー（End -Ser）：異なるように見える製品を使用する場合は混乱します。ブランドの信頼性と良い体験を減らします。

これはすべて、不足している組織の症状です。 「痛みを伴う問題であり、巨大な組織の成長を維持するデザインの単一の真実源は、発見段階の重要性を、長期的にこの問題を軽減するのに役立ちます。

‍

イラストのプロンプト：オフィスで混乱を示すインフォグラフィックスタイルの絵画。さまざまなデザイン、ボタン、色を示すコンピューターの前に座っている多くのデザイナーと開発者がいます。麺で混乱を伝え、基準がありません

‍

なぜその問題があるのか：「体系的ではない」ソース

多くの人々は、この問題はチームの無知によって引き起こされると考えるかもしれませんが、実際にはそのルーツはより複雑であり、それは脱落し、組織のサイズには適していない「作業方法」によって引き起こされます。主な理由が何であるか見てみましょう。

1。サイロ作業：各チームは、まるでそうであるかのように別々に働きます。マーケティングチームには独自のプロジェクトがあります。制作チームは、独自の機能も開発しました。各人には、デザインの決定を一緒に接続するコアがありません。結果を「さまざまなスタイルの異なる人々」

2。「真実の単一のソース」はありません。多くの組織には「スタイルガイド」がある場合がありますが、それらのほとんどはPDFファイルまたは「死んだ」スライドの形であり、つまり、実際の作業を更新せず、開発者が実際に使用するコードに接続することはできません。 Figmaデザイナーですが、開発者は更新しません。最後に、Webで表示されるものは、とにかく最新のデザインと一致しません。

3。非効率的なハンドオフ：従来の作業プロセスは「デザインデザイナー - >デイブにファイルを送信する - >デイブを構築する」です。このプロセスには、「解釈」と呼ばれる大きなギャップがあり、距離、フォントサイズ、さらには正確な色など、開発者が推測します。ジョブが遅くなり、簡単にエラーが発生します

4.適切なツールの欠如：設計（設計）と開発（開発）中の個別のツールの使用は、問題の重要なルートです。設計とコードが「言語」や「プラットフォーム」に同じようにない場合、常にそれを維持することはほとんど不可能です。これは、多くの組織が大規模な組織向けのWebflow Enterpriseのような完全なソリューションを探し始めているポイントです。

‍

イラストのプロンプト：サイロスケジュール画像、3つのチーム（デザイン、開発、マーケティング）が別のサークルにあります。また、中央に異なる方向に矢印があり、「スタイルガイドv.1（時代遅れ）」と書かれたPDFドキュメントが放棄されています。接続されていない作業を伝えます

‍

残っている場合、それはどのように影響しますか：単に「ウェブサイトは美しくない」よりも災害。

慢性的なデザインに一貫性のない問題を残すことは、「美」だけでなく、「ビジネス番号」と「コーポレートカルチャー」に真剣に影響を与えます。

1.コストは高く、時間の無駄があります（コストと無駄な時間）： 1年後にチームは何時間無駄にしますか？ 「同じものを繰り返し作成する」と「一致しないデザインの編集」。これらの従業員の時間と給与は、組織が無駄に支払わなければならない費用です。

2。時間市場の遅い：競合他社は2週間で新機能をリリースすることができますが、チームはボタンの色についてのみ座って議論するため、1か月かかる場合があります。システムの欠如は遅くなります。そして、それはビジネスチャンスを失うことを意味します

3。ブランドの価値を減らす（ブランドの希釈）：一貫性は強力なブランド構築の中心です。顧客が各チャネルで異なる経験を持っているときはいつでも、ブランドの信頼と団結は徐々に減少します。

4.ユーザーエクスペリエンスの低下：ユーザーは、Webまたはアプリが「簡単」で「推測する」ことを期待しています。しかし、もう一方の顔は青いので、ユーザーが常に再び学習する負担を生み出します。使用中のエラーにつながる可能性があります

5。チームの燃え尽き症候群：座って同じ問題を解決するために働きたい人はいません。または、デザイナーと開発者の両方がイライラし、落胆すると繰り返し仕事をします。、この問題が重要であることを理解しているWebflow AgencyまたはFreelancerの間で最終的に選択する従業員の職場の雰囲気と辞任率に影響します

‍

イラストのプロンプト： 2線グラフ画像は、上昇している「コスト」です。そして、別のラインは、下に急落した「開発速度」です。大きなブランドのアイコンがあります。そして、多くの次元で否定的な影響を伝えるために混乱するユーザーの顔

‍

解決策はありますか？そして、どこから始めるべきか：「WebFlowでスケーラブルな設計システム」を推奨したい

これのすべての解決策は、「設計システム」の作成です！しかし、通常の設計システムだけでなく、組織とともに成長および拡張できる「スケーラブルな設計システム」であり、「WebFlow」はそれを作成するのに最も最適なツールです。

設計システムは何ですか？最も簡単な理解について話すことは、組織内の誰もが何でも作成できる「ブランドのレゴツールボックス」です。しかし、結果は常に同じブランドになります。同じボックスのコンポーネントを使用すると、デザインファイルだけでなく、デザインとコードを結び付ける「リビングシステム」です。

では、なぜそれはウェブフローなのですか？この問題を解決するために特にWebFlowが作成されたためです。

• 真実の単一の真実源：色、フォント、距離、複雑なコンポーネント（Navbar、スライダーなど）から1つの場所ですべてを作成できます。中央で更新すると、すべてのコンポーネントが自動的に更新されます。
• 再利用可能なコンポーネント：これは心です。すでにすべてを設定している「今すぐ購入」ボタンなどの「コンポーネント」を作成できます。このボタンを使用するたびに、新しいボタンを作成する必要はありません。Web上のすべてのボタンのテキストまたは色を変更したい場合は、メインコンピューターを修正して、 WebFlowコンポーネントこちらをご覧ください。
• デザインを開発と接続： Webflowデザイナーで表示および設計したものは、ユーザーがWebページで実際に表示するものです。デザイナーとデイブの間の「解釈」ギャップをゼロに減らしました。両方のチームが同じツールで作業しているためです
• 変数： WebFlowを使用すると、カラースウォッチ、グローバルフォント、および最新のものはスペースやサイズなどのさまざまな値のCSS変数を設定でき、サイト全体のスタイルを簡単に調整でき、これまでにありません。

最良の始まりは、完全な設計システムの基盤となるWebflowに生きたWebサイトスタイルガイド

‍

イラストのプロンプト：インフォグラフィック画像には、箱の蓋にウェブフローロゴが付いた「ツールボックス」を示しています。ボタン、フォーム、色、フォント、カードが整然と配置されているというサインがある「レゴピース」があります。そして、デザイナーと開発者の手は同じ部分を取り出しました

‍

かつて成功していた本物の例：「TechCorp」がWebflow Design Systemでゲームをひっくり返すとき。

より明確にするために、私は会社の解決ケース「TechCorp」を持ち上げたいと思います。

問題（混乱）：以前は、TechCorpは多くの問題を経験していました。各製品チームは独自のWebサイトを作成し、製品AとBのランディングページをさまざまな企業とはまったく異なるように見せました。マーケティングチームは、ユーザーがなじみのないWebサイトと混同されているため、すべての新しいコンダクション率を待たなければならないため、キャンペーン用のマイクロサイトを作成するのに1週間かかります。

ソリューション： のチームを使用して、WebFlowで「集中設計システム」の作成に投資することを決定します彼らは、すべてのUIシステムを監査（色、フォント）と、Heeler、Pricing Tableなどの最も一般的に使用されるコンポーネントを作成します。証言セクションは、中央のシステムに保存されます。

結果（結果）：新しい設計システムの使用を開始してからわずか3か月後。結果は非常に印象的です：

• 新しいWebページを70％に開発する時間を短縮します。マーケティングチームは、開発チームを調整せずに新しいランディングページを作成でき、既に利用可能なコンポーネントをドラッグするだけです。
• ブランドの一貫性は100％増加しました。すべてのページと、同じTechCorpブランドと同じように感じられた新製品です。
• 船内の新しい従業員は2倍高速です。新しいデザイナーと開発者は、「マニュアル」と「ツール」が明確な「ツール」があるため、すぐに仕事を開始できます。
• コンバージョン率平均は15％増加しました。よりスムーズで信頼性の高いユーザーエクスペリエンスのためです。

これは、「別々の作業」から「同じシステムでの作業」への変更の力です。

‍

イラストのプロンプト： Compare前後。最初の側は、まったく一致しない3-4のWebサイト画面を示しています。混乱があります。画面画面を表示した後、美しく整然としたデザインを持つように調整されたWebサイト。グラフで「生産性」が上昇します

‍

フォローしたい場合、何をすべきか：WebFlowでスケーラブルな設計システムを作成するための5つのステップ（すぐに使用できます）。

組織のために整然としたシステムを作成する準備はできましたか？これは、WebFlowですぐに開始できる5つの主要なステップです。

ステップ1：監査と財団）
新しいものを作成する前。私たちが持っているものを知っている必要があります。組織のすべてのUIを収集します。 （UI監査）を確認し、どのコンポーネント（ボタンの数、スタイルの数）をリストします。組織の「中央標準」とWebFlowプロジェクトの基本設定を開始します。

• グローバルな色：メインの色、色、色の色、文字の色、ブランドのさまざまな通知をグローバル見本に追加する
• フォントを設定します（タイポグラフィ）： HTMLタグを介して標準とする見出しスタイル（H1-H6）、段落、リンクなどを指定します。
• 間隔システムを設定します。覚えやすい番号（8ポイントグリッドなど）を構成で使用します。すべてがサイト全体で一貫した距離を持つようにマージン/パディング

最初に使用される最小で最も頻繁に使用されるコアコンポーネントを作成しそれぞれを作成し、すぐにWebflowの「コンポーネント」に変換します。

• ボタン：すべてのステータスを作成します（プライマリ、セカンダリ、無効、ホバリング）
• フォーム（フォーム）：入力フィールド、テキスト領域、チェックボックス、ドロップダウン、およびフォームバットンを作成します。
• カード（カード）：ブログの郵便番号、製品カードなどのディスプレイ用のデザインカード

ステップ3：複雑なコンポーネントとセクション（ビルドパターンとセクション）を作成します。
ステップ2からより大きく頻繁に使用されるパーツにコアコンポーネントを持ち込みます。これらは、多くの場合、次のような「Webページのさまざまな部分」であり、繰り返し使用できます。

• Navbarとフッター：すべてのページで利用できる必要があるWebサイトのヘッドと最後のコンポーネントを作成します。
• 価格表：簡単に編集できる価格テーブルを設計します。
• ヒーローセクション：マーケティングチームが選択できるさまざまなヒーローを作成します。

ステップ4：作成ページの作成テンプレートを作成します。
完全なセクションがあると、最初のページ、当社に関するページ、製品/サービス、ブログページ、ページなど、頻繁に使用されるさまざまなタイプのページの「テンプレート」として組み立てられます。お問い合わせ。テンプレートを持つことは、新しい顔を作成するのに役立ちます。ほんの数分でできます

ステップ5：ドキュメントと統治、
同じプロジェクトで「ガイドセンター」またはウェブサイトスタイルガイドとなるページを作成します。このページには、すべてのコンポーネントに「何があるのか」と「いつ」が、チームの全員を使用するときに表示されます。 （非デザイナーでさえ）簡単に見て理解することができます。、あなたの企業ウェブサイトの開発がに役立ちます

‍

イラストのプロンプト：インフォグラフィック画像は、左から右に5つのステップを示しています。各ステップにアイコンが付いています：1。監査メガネ（監査）、2。LEGO（コンポーネント）、3。セクション（セクション）、4。ドキュメント（テンプレート）、5。

‍

人々が不思議に思う傾向がある質問とクリアされた答え

明確な答えと理解しやすいWebflowで設計システムを作成することについての一般的な質問をまとめます。

Q1：スタイルガイドの違いは何ですか？
A：スタイルガイドは、ブランドの顔（ロゴ、色、フォントなど）のようなものである「ルール」のようなものですが、通常は安定したドキュメントです。設計システムは、繰り返し使用できるスタイルガイド（再利用可能なコンポーネント）とギルドを組み合わせた「リビングシステム」です。 「行動」し、「実際にコードに接続する」ことができるバージョン

Q2：Webflowと一緒にFigmaを使用する必要がありますか？
A：「非常に推奨」！最良の作業プロセスは、Figmaを使用してアイデアを探索し、ワイヤーフレームを実行し、非常に柔軟であるため、初期探索でUIを設計することです。その後、結論がしたがって、まだWebflowに「生きているシステムの作成」をデザインすると、誰もが使い続けることができる真の真実の源になります。 Figmaの設計システムの詳細については、より明確な作業を確認してください。

Q3：小さなチームまたは中小企業の会社には設計システムが必要ですか？
A：「必要」ですが、大規模な組織ほど複雑である必要はない場合があります。たとえそれがいくつかの単純なグローバルスタイルとコンポーネントであっても、「中央システム」を早期に作成し始め、将来の成長のための良い基盤を築くのに役立ちます。これは、大きな日にすべての新しいシステムを「解体」するために戻ってくる必要がないのに役立つインテリジェントな投資です。

Q4：Webflowで設計システムを維持することは難しいですか？
A：完全に個別のシステムメンテナンスよりも簡単です。ブランドのメインカラーを変更するなど、更新したい場合は、WebFlowのグローバルスウォッチを修正することができ、すべてのコンポーネントとすべてのページの色がそれに応じて自動的に変更されるためです。重要なのは、チーム内のすべての人に変更を制御および伝達する1-2の「メンテナー」（メンテナー）を持つことです。

‍

イラストのプロンプト：大きな質問マークアイコン（？）と短い質問と回答のある電球（！）を備えたQ＆Aスタイル画像。上記の重要な問題を要約して、それを面白くて消化しやすく見せます

‍

簡単に理解しやすい時間 +時間のための要約！

Webflowで設計システムを作成することは、単なる「トレンド」ではなく、組織全体の作業方法を変更するのは「戦略的投資」です。これは、混乱、重複、遅延から「体系的および速度システム」への変更です。

組織が受け取るのは、単なる「良い」ウェブサイトではなく、拡大できる「デジタル資産」であり、幸福に効率的に連携するチーム、そして最も重要なことには「競争の利点」であり、誰よりも顧客に良い製品と経験を提供できるからです。

組織以外に組織の可能性をもう保持させないでください！今日から規制を作成し始めたことは、将来の持続可能な成長の基盤を築くための最も重要なステップです

カオスをシステムに変える時が来ました！今日からWebFlowにスケーラブルな設計システムを作成する計画を開始します。問題がもっとエスカレートするのを待たないでください！

基盤を築き、組織のための強力な設計システムを作成するのに役立つプロのパートナーを探している場合。 Vision X Brain Teamは、Webflowを使用してWebサイト開発を専門としています。これは完全にコンサルティングとサービスです。あなたのために特別に企業のウェブサイトを満たすシステムを作成するには、今日の無料相談のためにお問い合わせください！

‍