B2B業界のウェブサイトタイトルバーデザインの一般的な標準の分析

B2B 業界の Web サイトのフレームワーク設計と制作プロセスでは、タイトル バーの設計と制作が最も労力がかかり、ページ フレームワークの中で最も一般的です。ウェブサイトのロゴやナビゲーションバーのデザインは、ホームページと基本的にどのページも同じなので、作業量は比較するとはるかに少なくなります。ウェブサイトのホームページ、セカンダリ コラム ページ、ナビゲーション ページ、または最終的なコンテンツ ページであっても、優れたタイトル バーがあれば、読者はページのコンテンツを妨げることなく、読みたいコンテンツをいつでも簡単にすばやく見つけることができます。

1 B2B業界のウェブサイトタイトルバーデザインの一般的な基準

B2B 業界 Web サイトのタイトル バーのデザインは、一般的な商業ポータル Web サイトとほぼ同じです。ただし、B2B 業界 Web サイトの訪問者やユーザーの多くは、オフィスで勉強したり仕事をしたりしているため、より真面目な雰囲気が必要です。娯楽やレジャーよりも、ビジネス チャンス情報、業界ニュース、業界技術知識などのコンテンツが求められます。同時に、企業ウェブサイトのタイトルバーのデザインとは大きく異なります。ページはタイトルバーの色と形を通して製品の機能とブランド文化を強調する必要がないため、B2B業界のウェブサイトではタイトルバーの画像と色を弱め、訪問者のコンテンツへのアクセスに影響を与えないようにする必要があります。一般的な基準は次のとおりです。

1.1 タイトル バーの文字は、目立つようにするために、Web ページ上のほとんどのコンテンツよりも大きく太字にする必要があります。

おそらく、この基準は誰もが知っていると思うかもしれませんが、実際の仕事や多くの人から相談を受ける過程で、いくつかのWebサイトやデザイナーから、タイトルバーの文字がコンテンツの文字と同じサイズで、すべて12PXの太字になっているページを見たことがあります。意図せずにそうしたのかもしれませんし、すでに太字だと感じたのかもしれません。しかし、ここでわかるのは、まだ理論的なレベルにまで達せず、感覚で行っている人がいるということです。一般的なフォント サイズは 14PX、太字です。

中農ドットコムのホームページの情報欄のタイトル欄

上の写真に示すように、これは中国農業ネットワーク（www.ap88.com）のホームページの情報セクションのタイトルバーです。タイトルバーから、「農業ニュース」、「画像ニュース」、「農業資材情報」という文字がすべて、下の非推奨記事のタイトルの文字よりも大きくなっていることがわかります。現在選択されている部分が太字になっているため、訪問者は今見ているのが現在太字になっている農業ニュースセクションであることがわかります。したがって、タイトル バーを太字にして、大きなフォント サイズを使用することは、すべてのページ デザイナーと Web サイト テスターが明確に理解する必要がある基本的な標準です。もちろん、コンテンツ内の推奨タイトルのフォント サイズは、タイトル バーよりも大きくすることができます。

衣料品ウェブサイトのタイトルバーには、フォントサイズの増加、太字化、階層化の感覚がありません。

上の写真のように、これは衣料品のウェブサイトのタイトル バーです。標準化されていません。タイトル バーの文字は太字でも大きくもなく、ページに階層感がありません。この点では、新聞、定期刊行物、書籍がタイプセッティングにおいて最も優れています。訪問者がコンテンツをより簡単に見つけ、より良い読書体験を得られるようにするために、私たちはそれらから学ぶべきです。

1.2 タイトル バーがどのようにデザインされていても、言葉がどのような効果で使用されていても、それらは非常に明確で、派手なものであってはなりません。

ウェブページのテーマやコンテンツの種類に応じて、各ページのタイトルバーはさまざまな効果でデザインされます。ただし、どのようにデザインするにしても、訪問者が一目でわかるように、タイトルバーの文字が明確でわかりやすいものにする必要があります。見た目を良くしたり、より芸術的な効果を持たせたりするためだけに、文字を不明瞭にしたり目立たなくしたりすることはできません。

さらに重要なのは、B2B 業界の Web サイトのページはより真面目なものでなければならないため、タイトル バーの文字、画像、色も真面目なものにすべきだということです。派手すぎたり、美しすぎたりしてはいけません。シンプルでエレガントなものがよいでしょう。

某業界サイトのホームページ上の会員推薦タイトルバー

図（47）に示すように、これはある業界のウェブサイトのホームページにある会員推薦のタイトルバーです。タイトルバーの「会員推薦」という文字ははっきりしていません。実際には、文字を上下に中央揃えにしたり、背景色を暗くしたり、文字にいくつかの効果を加えたりといった簡単な調整をするだけで、より明確になります。

1.3 タイトル バーの広い領域に目立つ色を使用しないでください。また、タイトル バーが目立ちすぎてユーザーのコンテンツ検索の妨げにならないようにしてください。

B2B業界のウェブサイトのホームページ、第1レベルのコラム、第2レベルのコラム、コンテンツページ、その他のページでは、訪問者はページから興味のあるコンテンツを多く見つける必要があります。これは、特別なページや企業ウェブサイトとは異なります。特にブランド企業のウェブサイトはコンテンツがあまりないため、色、フォント、形状などを使用して製品のブランド特性を表現する必要があります。タイトルバーの背景色として大きな色の領域を使用し、大きなフォントサイズを使用できます。それは圧倒的になりすぎず、訪問者に雰囲気を作り出します。

中国ファッションネットワーク情報コラムタイトルコラム

図（48）からわかるように、タイトルバーには青が使用されています。タイトルバーが長すぎるため、非常に濃い青は使用できません。代わりに、青のグラデーションカラーが使用されています。これにより、タイトルバーの視覚的なインパクトが弱まり、訪問者がコンテンツに集中できるようになります。 「B2B 業界ポータル サイト計画に関する実践的研究レポート」でも述べたように、成功している B2B 業界 Web サイトのほとんどは優れたページ設計スキルを備えており、成功している業界 Web サイトからさらに学ぶ必要があります。

1.4 タイトルバーはコンテンツと統合され、視覚的に区別できる必要があります。

各タイトル バーの下のコンテンツは、細分化されたコンテンツを表します。タイトル バーの目的は、訪問者が興味のあるコンテンツをできるだけ早く見つけられるようにすることです。この目的を達成するには、コンテンツがタイトル バーと境界線で囲まれて全体を形成し、訪問者が見ている情報の種類を視覚的に区別できるようにする必要があります。

Sina Financeコラムのホームページスイッチのタイトルバー

図（49）に示すように、Sina Financeコラムのホームページのタイトルバーは、「商品・通貨」セクションから「ニュース速報」セクションに切り替わります。テキストが変わっただけでなく、テキストの下の背景も白くなり、下の内容と閉じた全体を形成しています。切り替えると、テキストの下の色は依然として水色のままとなり、全体が形成されません。

1.5 タイトル バーの角は丸すぎたり漫画のようであってはなりません。背景の色は明るすぎたり、楕円形は使用しないでください。

B2B 業界の Web サイトではより本格的なスタイルが求められるため、タイトル バーの角が丸すぎたり、背景に明るすぎるパターンを使用したり、楕円形にしたりすることは避けてください。長年の職務経験の中で、デザイナーが角を丸くしすぎた B2B 業界の Web サイトのタイトル バーをいくつか見てきました。このデザインは、非常に軽薄な雰囲気を与えます。角を少し丸くするだけで十分です。特徴的な企業ウェブサイトやブランドウェブサイト、またよく見かける QQ Space や 51 Space などの個人のホームページをデザインするときには、パーソナライズされたタイトルバーを使用できますが、B2B 業界のウェブサイトでは使用できません。ここで、ウェブサイトの位置付けとデザインが結びつきます。

上記の点は非常に明白で、誰にとっても単純なことのように思えますが、ほとんどのデザイナーはデザイン時に無意識のうちにこれらの基準に従うことができます。しかし、「B2B 業界ポータル Web サイトの設計と開発の実践研究レポート」では、上記の間違いを 1 つ以上犯すデザイナーが常に存在すると考えています。Web サイトの製品マネージャー、製品テスター、Web サイト管理者として、これらの詳細を理解し、製品開発プロセス中にこれらの問題をタイムリーに修正できなければなりません。

2 B2B業界のウェブサイトでよく使われる4つのタイトルバーの分析

以下は、参考までに私が収集した、さまざまな優れた B2B 業界の Web サイトで最もよく使用されている 4 つのタイトル バーです。

2.1 シンプルでエレガント

Alibaba のホームページにあるビジネス情報とマーチャント コミュニティのタイトル バー (スクリーンショット: 2011-10-18、現在は修正済み)

図（50）は、アリババのホームページのビジネス情報とマーチャントコミュニティのタイトルバーを示しています。このタイトルバーは簡潔でエレガントで、背景にグレーを使用し、タイトルバーの文字の色にオレンジと赤を使用しています。文字はタイトルバーを強調するために使用され、訪問者は文字を見るだけで一目で明確に理解できます。これは簡潔でエレガントなタイトルバーのタイプです。現在、このタイプのタイトルバーはさまざまなWebサイトで最も一般的に使用されています。背景には、ライトブルー、ライトレッド、またはライトグリーンを使用できます。たとえば、テンセント、NetEase、Sohuはすべてこのタイプのタイトルバーを持っています。

2.2 フォーカスタイプ

九正建材ネットワーク（www.jc001.cn）ホームページのタイトルバー

図（51）は、九正建材ネットワーク（www.jc001.cn）のホームページのタイトルバーを示しています。私はこのタイプのタイトルバーを強調目立つタイプと呼んでいます。非常に強い色を使用していますが、強い色はほんの少ししか使用されていません。残りの部分は白または明るい色です。これにより、訪問者は眩しすぎたり目立ったりすることなく、簡単に区別できます。このタイプのタイトル バーは、さまざまな Web サイトで最も一般的に使用されており、赤、黄、青、緑、黒のいずれかになります。

2.3 濃いインクと色

食品ビジネスネットワーク（21food.cn）の情報セクションナビゲーションページの右側にある2つのタイトルバー

図（52）に示すように、食品ビジネスネットワーク情報コラムのナビゲーションページの右側には2つのタイトルバーがあります。このタイトルバーは比較的短いため、背景色として暗い単色を使用できます。これにより、ユーザーにあまり影響を与えず、モジュールの小さな部分を強調し、ページの右側に配置されます。ただし、この種類のタイトル バーは、不適切に使用するとページの調和を壊してしまうため、注意して使用する必要があります。ページ上で少量使用するのは問題ありません。たとえば、背景に明るい色を使用することもできます。

2.4 美しくてファッショナブル

一部のウェブサイトでは、背景に明るい色の立体的な模様を使用しており、派手すぎず美しいです。このようなナビゲーション バーは、一部のファッション コラムや、製品の外観デザインを重視する業界で使用できます。衣料品などのギャラリー コラムも、この方法を参考に設計できます。これは現在の B2B 業界の Web サイトではあまり見られず、特殊なタイプのタイトル バーです。

「B2B 業界ポータル Web サイトの設計と開発の実践研究レポート」では、実際の作業で最もよく使用される 4 つのタイトル バー設計手法を紹介しました。名前は私が選んだもので、あまり正確ではありません。実際の申請プロセスでは、さまざまな優れたB2B業界のWebサイトや総合ポータルサイトのタイトルバーをよく参照する必要があります。実際、タイトルバーのデザインはB2B業界のWebサイトのものと似ています。企業サイト、ソーシャルサイト、エンターテイメントやゲームサイトのデザイン手法を学ばないでください。自分の業界やページの実際の状況に関連して、もっと参考にしてもっと革新してください。一般的に、1 つのページでは、最初の 3 種類のタイトル バーを組み合わせることができます。たとえば、長いタイトル バーには 2 番目の方法または最初の方法を使用し、短いタイトル バーの一部には 1 番目の方法を使用し、一部には 3 番目の方法を使用します。1 番目または 2 番目の方法をメインにして複数のタイトル バーを混在させると、ページがよりカラフルになります。ページ全体に 1 つのタイトル バーを使用することはできません。単調に見えてしまいます。

この記事の原作者：Li Xuejiang、コミュニケーションとガイドを歓迎します、QQ：1580658565。

元のタイトル: B2B 業界の Web サイトのタイトル バー デザインの一般的な標準の分析

キーワード: 分析、B2B、業界、ウェブサイト、タイトルバー、一般、標準、ウェブマスター、ウェブサイトのプロモーション、収益化