Webサイトのスタイルガイドを作成：誰が働いているかに関係なく、制御下にある制御ブランドを制御します。

ウェブサイトデザイナー、ビジネスオーナー、およびすべてのマーケティング担当者！これらの問題に遭遇したことはありますか...代わりに美しく設計されたウェブサイトは、互換性がない、ロゴが伸びている、またはテキストと音声とトーンさえ異なる方向に異なっている部分がありますか？ [Cite_start]これらの問題は、初心者だけでは新しいものではありません。しかし、組織やチームでは、多くの人が働いているか、常にチームを変えることが頻繁にあります。 [引用：137、138、139]

顧客が「顔が安定していない」ウェブサイトを見つけるようになった場合、想像してください。このように、そのように待ってください。ブランドの信頼性はすぐに低下しました。それ以上にプロセスが遅くなります。チームは座って「どちらが正しい基準ですか？」と議論しなければならないからです。または「このボタンで使用する必要がありますか？」これらのことは、「世界の問題」であり、デザインとマーケティングの両方の仕事を「つまずく」「ジェスチャーではないでしょう？

しかし、心配しないでください！今日は、「ロックを解除する」のに役立つ「秘密兵器」を知るようにします。これらの問題は**「ウェブサイトスタイルガイド」**または「ウェブサイトスタイルマニュアル」です！ [Cite_start]それはあなたのウェブサイトの設計に役立つ緑の印刷物です。誰が作品をキャッチするようになるかに関係なく、頭からつま先まで「同じ標準」、[Cite：137、138、139]この記事は単なる理論ではなく、「マニュアル」は実際に独自のスタイルガイドをすぐに作成するのに役立ちます。 「制御下のブランドを制御できる」ことを証明した直接的な経験の例と秘密が本当にあります！

イラストのプロンプト：「人々は、互換性がない色とフォントでウェブサイトを見ることに混乱しています。1つのページには多くの種類のロゴがあり、反対側は整然と見えるウェブサイトを示しています。画面の両方と同じ標準を持っています」

[cite_start]

人生の本当の問題：ウェブサイトに「ポーターブランド」がないとき[引用：23、24、25]

[cite_start]

ウェブサイトの時代には、顧客とのコミュニケーションにおける「顔」と「重要なチャネル」があります。私たちが遭遇し、デザイナー、マーケティング、ビジネスオーナーの両方に頻繁に頭痛の種を作成する傾向があります。これらの問題です。 [引用：137、138、139]

• 「スイングデザイン...原則のない人のように！」：いくつかのウェブサイトがモダンに見えることに気づいたことがありますか？しかし、別の顔に行くと、それは古く見えますか、それともフォントが同じページで変更されるように変更されますか？ [Cite_start]これは単なる美しさではありません。しかし、それは顧客に混乱し、あなたのブランドが「プロフェッショナルではない」と感じさせます[Cite：157]
• [Cite_start] 「チームは一致しません...中央標準がないためです！」： 3人のデザイナーが同じWebサイトで作業していると仮定します。明確なスタイルガイドがない場合、1人がこの青い色合いを使用できます。他の人はその色合いを使用します。 1人がこのようなアイコンを使用します。別の人は他のタイプを使用します。最後に、出てきた作品は「乱雑」であり、1つではありません。 [引用：145]
• 「再び解決して解決します...終わりではなく、終了できません！」：新しい部品を編集または追加する標準的な時間がない場合は、ウェブサイトに参加して、「どんな使用ですか？」と再び決定する必要があります。 [Cite_start]時間を無駄にしてお金を失って[Cite：147、148、149、151]
• 「ブランドは信頼できないように見えます...一貫性の欠如のためです！」：一貫性（Consnence）は信頼性の中心です。あなたのブランドが一貫性のない形で通信している場合、顧客は覚えて信頼することが困難です。ブランディングに焦点を当てた企業のウェブサイトのウェブサイトの場合。

[cite_start]

私がよく遭遇する古典的な問題は、「このウェブサイトはフレンドリーだ」と顧客に感じさせる「美しく見えるが明確なアイデンティティがないウェブサイトの外観」です。私は強いブランドを感じませんでした。 [引用：157]

イラストのプロンプト：「さまざまなデザインのウェブサイトと一貫性のないものを示すコンピューター画面の前にある寺院に座っている人の写真は、さまざまな要素を指している矢を持っています。」

[cite_start]

なぜその問題があるのか：「理解」が一致しない場合[29、30、31、32]

[cite_start]

上記の問題は、意図した人のために起こりません。ほとんどの場合、それは仕事で欠落している「ギャップ」、つまり「誰もが一緒に保持する中心的な基準」から来ています。 [引用：145]

主な理由を見てみましょう。それは私たちのウェブサイトを簡単に「失った」にします：

• 明確な「青写真」は、計画なしで家を建てるようなものです。各作成者は彼自身の理解に従いました。最後に、家は概念に従って出てきませんでした。ウェブサイトも。スタイルガイドがない場合、どうあるべきかという「グリーンプリント」はありません。
• [cite_start] 「解釈」ブランドは同じではありません。ブランドについて話した後でも、それぞれの人が「ブランドの色」を「使用する」または「書かれたトーン」を解釈する時が来るときは異なります。これは、作業がまったく矛盾している[Cite：145]
• 「Circulating Team」：特に、スタイルガイドなしで新しい人々が入ってきたときに仕事を支援するためのフリーランスがある大規模な組織やプロジェクトでは、時間がかかります。、標準システムを頻繁に持っているWebflow代理店との連携とは異なります
• 「誰も所有していない」ルール：これらの基準を決定して世話をすることに直接責任を負わないことは何度もありません。明確なコミュニケーションを引き起こさず、誰もが戻って見るために参照がありません
• 「小さな詳細」を見下ろしています。重要：一部の人々は、スペース、段落の使用、またはアイコンのサイズは小さな問題であると考えるかもしれませんが、これらの小さなことは一緒に「ユーザーエクスペリエンス」（UX）が良く一貫しています。

イラストのプロンプト：「チームメンバーの多くは混乱しています。互換性のない概念がたくさんあり、「このフォントを使用できますか？」などの質問があります。または「このボタンの色は大丈夫ですか？」頭の上に浮かぶ」

[cite_start]

残っている場合、それがどのように影響しますか：ウェブサイトは「ブランドの遺跡」になります[Cite：35、36、37、38]

[cite_start]

Webサイトスタイルガイドの作成を無視することは、少しの効果ではありませんが、予想できないようにビジネスの成功を「腐食させる」ことができます。 [引用：166、167]

• 「否定的な信頼性」：それについて考えてください。あなたのウェブサイトがビネットに見える場合、顧客はどのように感じますか？ [cite_start]彼はあなたのブランドが「標準なしで注意を払わない」と「信頼できない」と見ます。
• [cite_start] 「顧客を混乱させてから去る」：良いウェブサイトは、ユーザーを「ガイド」して目標にスムーズに到達する必要がありますが、レイアウトが一貫していない場合は、ボタンは異なる場所にあります。色が変わりました。顧客は混乱し、イライラし、最終的にWebページを押し下げます。それは不幸な変換損失です[Cite：168]
• [Cite_start] 「作業効率」：チームは、非標準作業、非エンド、および重複した作業についての議論で時間を無駄にしなければなりません。明確な基準点がないため、これらは非常に高い「隠されたコスト」です[Cite：147]。
• 「費用のエスカレート」：頻繁に調整する必要がある場合、またはウェブサイトの開発と世話をするコストを体系的に修正するために誰かを雇う必要がある場合、必然的に上昇します。
• 「ブランドは弱いです...市場では傑出していません」：強力で記憶に残るブランドを持つ高い競争の時代には重要です。しかし、あなたのブランドがユニークで、一貫性があり、一貫性がない場合、多くの競合他社がいる市場で「飲み込む」ことができます。ブランディングと販売を望んでいる企業Webサイトを作成している場合これは心です。

イラストのプロンプト：「壊れているように見えるウェブサイトの画像が散らばっているデザインパーツと「失われた信頼」または「失われた信頼」メッセージが画面に表示されます。」

[cite_start]

解決策はありますか？そしてどこから始めればいいのか：あなたのブランドのために「コンパス」を作成します[Cite：41、42、43、44、45、46]

言及されたすべての問題の解決策は、「包括的なWebサイトスタイルガイドの作成」です。これは簡単です！ウェブサイトのすべての要素の「ルール」または「標準」を決定することです。デザイナー、開発者、またはコンテンツライターが一貫性と最も効果的に働くことができるかどうかにかかわらず、関与するすべての人を作るために

そして、それはどこから始めるべきですか？簡単なステップを見てみましょう。すぐに申請できること：

1。ブランドの「主な心」（ブランドコア）を決定する

• ビジョンとミッション：あなたの目標は何ですか？なぜこれをするのですか？
• 主な価値：あなたのブランドは何ですか？
• ターゲットグループ：誰とコミュニケーションをとっていますか？彼らはどんな人ですか？
• ブランドアイデンティティ：競合他社と違うものは何ですか？
• すべてのデザインとコミュニケーションがこれらのことを反映する必要があるため、これらはすべてのスタイルガイドの「基礎」になります。ブランドのブランドの声とトーンを理解することは、このステップの重要な部分です。

2。ウェブサイトの「重要な要素」を指定します。

スタイルガイドで明確に決定する必要があるのは、次のとおりです。

• [cite_start]ロゴ（ロゴ）：サイズ、プロポーション、さまざまな背景、空きスペース、ロゴ（クリアスペース）、do's and don（cite：42、44]での使用
• [Cite_start]色（色）：パレット、メインカラーとセカンダリカラー（プライマリおよびセカンダリカラー）、およびCTA、背景色、フォントカラーなどの各色の色コード（HEX、RGB、CMYK）を指定し、[Cite：42、44]。
• [Cite_start]タイポグラフィ：各部品で使用されるサイズ、重量、およびラインの高さでトピック（見出しH1-H6）とコンテンツ（ボディテキスト）にWebサイトで使用されるメインフォントとセカンダリフォントを指定します[Cite：42、44]
• アイコンと画像（アイコンと画像）：画像のムードトーンを含むアイコンのスタイル（フラット、ライン、塗りつぶしなど）、ソース、および使用される画像の種類（実際の人、ストック画像、絵画など）を定義します。
• [Cite_start]ボタン（ボタン）：ボタンのデザイン（色、形状、サイズ）、ボタンのさまざまなステータス（通常、ホバー、アクティブ、無効、CTAコピー[Cite：42、43、44]
• [cite_start] form（forms）：情報の設計、ボタンの送信、エラー/成功[Cite：42、44]
• [Cite_start] Voice＆Tone（音声トーンとコミュニケーショントーン）：ブランドのブランドが顧客にトーン（フレンドリー、楽しい、知識など）でどのようなブランドを通信するかを指定します。これは、ウェブサイトにコンテンツとメッセージを書くために非常に重要です[Cite：42、44]
• その他の要素：レイアウト（グリッドシステム）、ホワイトスペース、アニメーション、またはさまざまなコンポーネントを使用するルールなど

3.適切なツールを選択します。

シンプルなPDFドキュメントでスタイルガイドを作成したり、以下などの専門ツールを使用したりできます。

• Figma：Design Systems （外部リンク） ：これは、設計システムを作成および管理する機能を備えたUI/UXデザインに人気のあるツールです（スタイルガイドの一部です）。
• Invision：Design System Manager （外部リンク） ：チームが設計システムを体系的に作成、管理、および普及させる別のプラットフォーム。
• Webflow CMS（特定の要素の場合）： Webflow CMSを使用して、色、フォント、アイコンなどのWebサイト上の繰り返しコンポーネントのスタイルガイドを保存および管理できるため、誰もが簡単に使用できます。

4。コミュニケーションと執行

スタイルガイドを完成させました。チームの全員にアクセスし、これを完全に理解し、トレーニングを受け、推奨し、全員が標準セットに準拠していることを確認するためにチェックし続ける必要があります。

イラストのプロンプト：「多くのハンド画像が同じWebサイトプロジェクトで作業しており、テーブルの中央に開かれている「Webサイトスタイルガイド」があります。これは、誰もが参照され、FigmaとInvisionのロゴを横に持っている青写真のようなものです。」

[cite_start]

かつて成功していた本物からの例：「一貫性」が「自信」を作成するとき[Cite：49、50、51、53]

Webサイトスタイルガイドが「強力」である方法を明確に確認するため。テクノロジーのテクノロジー企業の実際のケーススタディ（私には仕事の機会があります）の例を挙げたいと思います。

「スタイルガイドの前...都市を支配するカオス」：以前は、この会社は急速に成長していました。多くの開発チームと設計チームがあります。各チームはさまざまな方向に動作します。その結果、彼らのウェブサイトとアプリケーションにはさまざまな「顔」があります。一部の部品は、arialフォントを使用しています。一部の使用ロボットサイズは等しくありません。 CTAボタンは多くの色であり、「プレスするボタンは何ですか？」と混乱している多くのサイズがあります。コンバージョン率は1.5％を超えることはなく、多くの場合、新しい顧客がウェブサイトからすぐに出てきます。ウェブサイトが「体系的ではない」と「信頼できない」と感じているからです

「ミッション...成長の基準を作成する」：同社は、「ウェブサイトスタイルガイド」と「デザインシステム」の作成に投資することを決定します。ロゴの使用、カラーパレット、タイポグラフィシステム、icongraphy、ボタンの状態から、コンテンツの音声とトーンまで、すべてを指定することにより。チームは、これらの基準を徹底的に収集、分析、設定するのに約3か月かかります。すべての要素が使いやすく一貫していることを確認するために、実際のユーザーとのテストと同様に

「結果...ビジネスゲームを完全にめくる！」：完全なスタイルガイドを発表し、新しい標準に従ってウェブサイトとアプリケーションを調整した後。結果は「驚くべき」です！ 6か月以内：

• [Cite_start]変換率は200％以上増加しました！顧客がより簡単で自信を持っているので、1.5％から4.5％まで[Cite：240]
• [Cite_start]限界率は30％減少しました！ユーザーはウェブサイトに長く登録されています。スムーズで一貫した経験のため[引用：241]
• [Cite_start]開発時間が40％減少しました！チームはより速く作業できます。明確な参照基準があるため、重複作業の議論または解決に時間を無駄にしないでください[Cite：241]
• ブランドイメージは強くなっています。ブランドはより専門的で信頼性が高く見えます。新しい顧客を引き付けることを容易にし、古い顧客が戻ってきてサービスを繰り返し使用します

これは、Webサイトスタイルガイドに「投資」することは「美しさ」であるだけでなく、「ビジネスのための大きなリターン」を生み出す「投資」であるという明確な例です。これが、 UX/UIデザインサービスが非常に重要であることです。

イラストのプロンプト：「変換率と大幅に増加したブランドイメージを示すグラフ。

[cite_start]

フォローしたい場合、何をすべきですか？ （すぐに使用できます）：チェックリストは「問題」Webサイトスタイルガイドを作成しました[Cite：56、57、58、59]

独自のウェブサイトスタイルガイドを作成する準備ができましたよね？これは、すぐに使用できるチェックリストです。小規模または大規模なプロジェクトであろうと、1つのファイルを開くことをお勧めします。これらのトピックに従って情報の追加を開始します！

1。ブランドコアエッセンシャル

• ロゴ：
  • メインバージョン、セカンダリバージョン（フルロゴ、アイコンなど）、および白黒バージョンを定義します
  • 許可されている最小サイズと最大サイズを指定します。
  • ロゴの周りの空きスペースを指定して、ロゴをクリアするようにします。
  • ロゴの使用に対する禁忌（ストレッチをしていないなど、ブランドではない色を変えないでください）
• カラーパレット：
  • ヘックス、RGB、CMYKを使用して、ブランドのメインカラー（プライマリカラー）を定義します。
  • さまざまな使用法のために二次色を定義します
  • ボタンの色のcall-to-call-to-action（cta）、さまざまなステータスの色（成功、警告、エラーなど）、テキスト色の色を設定します
• タイポグラフィ：
  • 使用するメインフォントと予約フォントを指定します
  • ラインの高さと文字間隔で、見出し（H1、H2、H3、H4、H5、H6）にフォントを設定します。
  • ボディテキスト、キャプション、およびさまざまなボタンのフォントサイズを設定します。
  • 各コンテキストでフォントの使用を指定します（H1など、トピックでのみ使用）

2。メインUI（ユーザーインターフェイス）要素

• ボタン：
  • プライマリボタン、セカンダリボタン、およびその他のボタン（ゴーストボタン、リンクボタンなど）
  • 色、サイズ、形状、およびさまざまなステータスを指定します（通常、ホバー、アクティブ、無効）
  • ボタン上のテキストを決定します。 （大文字、フォントサイズ）
• フォーム（フォーム）：
  • 入力フィールド（テキスト、電子メール、番号）、ドロップダウン、チェックボックス、ラジオボタンの設計
  • フレームの色、テキストの色、プレースホルダー、エラー/成功ステータスを指定します
  • ポットの形を決定する（上、側面、側面など）
• アイコン：
  • 使用されるメインアイコンを指定します（Font Awesome、マテリアルアイコン、カスタムアイコンなど）
  • アイコンのスタイル（ライン、塗りつぶされた、デュートンなど）と適切なサイズを決定します。
• 画像：
  • 許可の種類を設定します（実際の写真、イラスト、ストック写真）
  • 使用される画像の色の色調、スタイル、感情を指定します。
  • 人々を使用するためのガイドライン（さまざまな人種など、本当の感情を示す）

3。コンテンツとコミュニケーション）

• 音声＆トーン：
  • コミュニケーションにブランドの個性を設定する（フレンドリー、専門家、コメディ、インスピレーション）
  • 使用するか、使用してはならないブランド（ブランド固有の用語）の特定の語彙を指定します。
  • 略語、数字、日付、および段落マークを使用するためのガイドラインを設定します
• トピックとコンテンツを書く：
  • 見出しを書くためのガイドライン（短い、企業、刺激）
  • ボディコピーの書き込み（短い段落、読みやすい、箇条書きの使用）
  [cite_start]
  • コンテンツ内の内部リンクと外部リンクの使用[Cite：12]

4。構造とレイアウト（レイアウトとスペース）

• グリッドシステム：レイアウトが整然と整備されるように、Webページに要素を敷設するために使用されるグリッドシステムを定義します。
• 空白：ウェブサイトのさまざまな要素間の標準距離を決定して、風通しが良くて読みやすいように見えます

このチェックリストを手に入れたとき、それはあなたとあなたのチームがより直接的に働くのに役立ちます。そして、これは私たちが質の高い仕事の作成において保持する企業のウェブサイト開発サービス

イラストのプロンプト：「正しいチェックリスト画像は正しい。各アイテムの横にデザインとコンテンツに関するアイコンが「あなたのウェブサイトスタイルガイドチェックリスト」を備えています。

[cite_start]

人々が不思議に思う傾向があり、答えを明確にする傾向がある：ウェブサイトスタイルガイドの問題を解決する[引用：62、63、64、65、66、67、68]

ウェブサイトスタイルガイドの作成に関する一般的な質問をまとめました。すぐに自信を持って準備ができているようにするために！

Q1：どの程度詳細ですか？あなたはすべてを着る必要がありますか？

A：プロジェクトのサイズと関係者の数に応じて。小さなプロジェクトまたはいくつかのチームの場合、ロゴ、色、フォント、音声＆トーンなどの最も重要なパーツのみを指定することから始めます。ただし、大規模な組織または複雑なWebサイトの場合、すべてのUI/UX要素で詳細にカバーする必要があります。原則は「誰もが一貫して動作させるのに十分な詳細です。推測する必要なく」

Q2：ブランドがまだ安定していない場合、Webサイトスタイルガイドを作成するにはどうすればよいですか？

A：ブランドが実際に「ブランドアイデンティティ」または「ブランドアイデンティティ」を明確に決定することから始めることを実際に示唆していない場合、ビジョン、ミッション、主要な価値、ブランドの個性など。これらは、スタイルガイドの他の要素の基礎となるか、最初に「最小VIPLE製品（MVP）」スタイルの作成を開始し、その後、ブランドがより明確になったときに徐々に開発します。

Q3：Webサイトスタイルガイドは、デザインシステムとどう違うのですか？

A：Webサイトスタイルガイドは、さまざまな要素のルールと標準を収集する「マニュアル」のようなものです。色、フォント、ロゴ、ライティングスタイルなどのWebサイトで使用されます。設計システムは「より大きく、より複雑です」。これは、「原則」と「ツール」を備えた「再利用可能なコンポーネント」のセットであり、デザイナーや開発者がデザインシステムに1つのボタンを作成できるようにする「ツール」です。準備が整ったコードがあります。ウェブサイトスタイルガイドは、ウェブサイトで特別に説明されているデザインシステムの一部です。

Q4：スタイルガイドを作成した後、次に何をしなければなりませんか？

A：創造はほんの始まりに過ぎません。より重要なことは、「使用する」と「メンテナンス」です。

• チームの全員にコミュニケーションをとります。理解：関係者全員に会議、トレーニング、またはドキュメントを送信するか、編成します。
• 使用に適用：現在のWebサイトを確認し、スタイルガイドに調整します。
• 参照ツールとして使用：スタイルガイドを押収するための新しいデザインまたは開発があるたびに
• 定期的にレビューと更新：ブランドが変更または新しいテクノロジーを持っているときは、常にスタイルガイドを確認して更新する必要があります

イラストのプロンプト：「人の写真は自信を持って微笑んだ。アイコン、質問、回答が浮かんで、テーブルに「ウェブサイトスタイルガイド」の本を持っている」。

[cite_start]

概要理解しやすい +やりたいと思う：「ブランドを制御できます...販売を制御できます！」 [引用：71、72、73、74、75、76]

元気ですか？ [cite_start]この記事が** "webサイトスタイルガイド"が複雑なドキュメントであるだけでなく、「ブランド」が制御下にあり、「ビジネスの成長」につながるのに役立つ投資であることを明確に見させることを願っています[Cite：279、280]

[cite_start]

オンラインビジネスコンペティションが激しい時代には、ユーザーにとって「信頼できる」「信頼できる」「信頼性の高い」ように見えるウェブサイトを持っています。競合他社[Cite：281]で際立っていることが重要です。Webサイトスタイルガイドは、これらのことを実際に実現する鍵です。新しいWebサイトの作成を開始したばかりの場合でも、既存のWebサイトを改善する方法を探していますか

[cite_start]

「一貫性」は「信頼性」であり、「信頼性」は「販売」であることを忘れないでください[Cite：281]。待ってはいけません。強力なウェブサイトスタイルガイドを使用して、オンラインでブランドの「潜在能力を解除する」！

「やる」時が来ました！

関連するチームを収集することから始め、必要なスタイルガイドの範囲を設定し、その後、私が提供するチェックリストに従って各部分に徐々に詳細を追加します。これを手伝うために専門家を開始する方法または必要な方法がわからない場合

Vision X Brainが「エキスパートパートナー」になって、「コントロール下のブランドを制御する」と「ビジネスをアップグレードする」のに役立つ「Webサイトスタイルガイド」を作成するのに役立ちたいですか？ここをクリック！専門家に無料で相談してください！義務はありません！および組織開発サービスを作成するUX/UIデザインサービスを知りたい場合は、詳細を確認するために立ち寄ることができます。私たちはあなたのウェブサイトを助ける準備ができています。 「印象的な結果を作成してください」！

イラストのプロンプト：「より高い販売グラフと「ブランドの構築、販売を後押しする」メッセージまたは「一貫性ドライブの成功」とともに安定して整然と見えるロゴブランド画像」

‍