B2B業界のウェブサイトのホームページをデザインして、良い第一印象を与える

本レポートの最初の 11 セクションでは、B2B 業界の Web サイトのページ デザインを要素ごとに分け、フレームワーク、色、ナビゲーション バー、タイトル バー、コンテンツ、広告デザイン、ボタン、検索ボックスなど、各側面について体系的に説明しました。このセクションでは、B2B 業界ポータルのホームページ デザインについて全体的な観点から説明し、ホームページにさまざまなデザイン要素を適用する際に注意すべき点について説明します。一般的な設計方法については、上記の 11 のセクションで説明されているため、ここでは繰り返しません。各要素のより詳細な設計方法を知りたい場合は、このレポートの最初の 11 のセクションを読む必要があります。

1. ホームページの全体的なスタイルはユーザーの習慣に合わせる必要がある

B2B 業界のウェブサイトのホームページの全体的なスタイルは非常に重要です。ユーザー訪問の大部分はこれらのページから始まります。ユーザーが検索エンジンからウェブサイトの内部ページを検索したとしても、ユーザーがウェブサイトに興味を持ち、ブックマークして詳細を知りたい場合は、ほとんどの訪問者がウェブサイトのホームページにアクセスします。デザイナーは、ユーザーが一目見ただけで、そのウェブサイトが、よく訪れる優れたウェブサイトに似ていると感じさせる必要があります。もちろん、独自の特徴も持つべきですが、違いが大きすぎてはならず、ユーザーの習慣に沿うものでなければなりません。これについては、前の章で詳しく紹介しました。

デザイナーは、さまざまな業界の最高の B2B 業界ポータルを参照して、約 20 個を選択する必要があります。デザインスタイルにおいて極端な新しさを追求する必要はありません。新しいものほどリスクが大きくなります。それを承認する人もいれば、そうでない人もいます。レベルが十分でない場合は、安全策を取るのが最善です。ホームページとしては、コンテンツのレイアウトに重点を置き、デザインレベルを示す方が良いでしょう。結局のところ、ユーザーはより価値のあるコンテンツを見つけるためにウェブサイトに来ます。

2 ホームページにおける色彩の使い方の分析と例

B2B 業界ポータルのホームページでは、グラデーションに単色を使用し、それを黒のテキストと組み合わせるのは適切ではありません。派手さはないけれど、単調すぎる印象になってしまう。この色使いは、企業の店舗や個人のスペース、特集ページなどをデザインする際の配色として活用できます。ホームページで使用する色は、一般的にメインカラーとして 1 色を選択し、次に対照的な色を 1 色選択します。グレーと黒という普遍的なマッチングカラーと組み合わせるのが最適です。たとえば、Alibaba のホームページでは、メインカラーのオレンジと青、そして普遍的なマッチングカラーである黒の 3 色のみを使用しています。

Alibaba ホームページのスクリーンショット (スクリーンショットの日付: 2011-10-5)

図（78）はアリババのホームページのスクリーンショットです（スクリーンショット日：2011-10-5）。画像から、アリババは青、オレンジ、黒の3色を使用していることがわかります。一般的に、Web ページを作成するときにどのような色を使用する場合でも、黒を使用し、黒と同じ色であるグレーを使用してそれに合わせる必要があります。これは基本的に、すべての商用ポータルのホームページ デザインの標準になっています。

3. ホームページのタイトルバーのデザインとレイアウト

一般的に、B2B 業界の Web サイトのホームページでは、あまり多くの種類のタイトル バーを使用しないでください。一般的に、3 ～ 5 種類のタイトル バーで十分です。多すぎると乱雑に見えます。実際の状況に応じて、詳細を変更することもできます。さらに、タイトル バーの背景画像は目立ちすぎず、タイトル バーのテキストを強調表示できます。ユーザーはテキストを見るだけで、このモジュールにどのようなコンテンツが反映されているか、それが必要なものかどうかを知ることができます。この設計方法は、商用ポータル Web サイトの設計で最も一般的に使用されています。

一般的に、タイトルバーは上から下まで統一されています。例えば、ホームページが左、中央、右のフレームである場合、左側のタイトルバーは同じです。中央の構造が変わると、タイトルバーのスタイルが変わることがあります。 B2B 業界ポータル Web サイトの設計と開発に関する実践的研究レポートの第 3 章のセクション 7 で述べたように、同じ種類のコンテンツでもタイトル バーを統一することができ、ユーザーにとってより調和がとれ、統一された印象を与えることができます。均一である必要はありませんが、乱雑になりすぎたり、凝りすぎたりしないように注意してください。

4. ホームページ全体のフレームワーク構造とページ幅のデザイン

B2B 業界のウェブサイトのホームページでは、全幅、左右、左中央右の 3 つのフレーム構造がよく使用されます。左右または左中央右のフレームを使用する場合、見た目が乱雑にならないように、通常は上部と下部の幅を一定に保つ必要があります。左右のタイトル バーは揃える必要があります。さまざまな理由でデザインがずれている場合は、ウェブサイト プランナーと連絡を取り、タイトル バーを左右に揃えるためにコンテンツを追加または削減してください。ホームページのフレームワークは、できるだけ調和がと​​れ、統一され、標準化されているように見え、ウェブサイト全体がより本格的で高級感のあるものになる必要があります。

フレームの幅は現在990PX程度が主流で、800PXの幅は全く考慮されなくなりました。現在ではワイドスクリーンのパソコンが増えています。 2008 年以降に発売された新しいコンピュータのほとんどは 1000PX を超える画面を備えているため、将来的にはより幅の広いページが採用される可能性があります。ただし、主流のポータルのほとんどは、依然として 990PX 程度の幅を使用しています。プログラムはユーザーの画面を判断することもできます。ユーザーがワイド画面を使用している場合は、左右に 2 つの連接広告を追加できます。

5.ホームページ上の各種広告のレイアウトとデザイン

B2B 業界の Web サイトのホームページは、最も多くの広告が掲載されるページです。雑誌と同じように、誰もが表紙や表紙に掲載されることを望んでいます。そのため、ホームページ広告のレイアウトは特に重要で、広告レイアウトが良くないと雑然とした印象になってしまいます。この部分の内容は、『B2B業界ポータルサイト企画実践研究レポート』第7章第7節「ウェブサイトメーカー広告企画のポイント」でも詳しく解説されています。広告が少なすぎると、ユーザーエクスペリエンスは良いものの、営業担当者が販売できる広告スペースがなくなり、Web サイトの収益に影響します。したがって、Web サイトにはユーザー エクスペリエンスを確保しながら多くの広告スペースが必要であり、デザイナーは広告レイアウト デザインに関する特定の基準を遵守する必要があります。

A. 広告の高さは高すぎないこと：ホームページ上のほとんどの広告の高さは60PX以下にすべきです。将来性を考えると50PXがベストだと思います。広告が少ない場合は、長めの広告を使って注目を集めることができます。最初から高さが高すぎると、広告をあまり多く載せることができず、売上に影響します。いくつかの広告の高さはもっと高くても構いませんが、75PX を超えないようにするのが最善です。第 1 レベルの列にある大きな広告は、広告の数が少なく価値が低いため、高く設定できますが、90 PX を超えないようにすることをお勧めします。

B. Flash デザインをできるだけ使用しない: B2B 業界の Web サイトの中にはホームページに多くの広告を掲載しているものもあり、デザインに Flash を使用すると、Flash が大量のリソースを消費するため、ホームページの起動が非常に遅くなります。幅の広い広告の場合は、Flash を使用してデザインすることもできますが、ホームページ上の Flash 広告の数は 10 個程度にしてください。より小さな広告の場合は、GIF アニメーションを使用してデザインするか、画像を配置することをお勧めします。

C. 広告のレイアウトは整然として統一されている必要があります。ホームページには多くの広告が表示される可能性があるため、ユーザーエクスペリエンスを考慮する必要があります。広告 1 行とコンテンツ 1 行など、コンテンツと広告を別々に配置するのが最適です。または、コンテンツが 1 行、広告が 2 行。こうすることで、ユーザーは広告内のコンテンツを探す必要がなくなり、より調和がとれ、統一された見た目になります。ユーザーが広告を見たいときは、自分で見つけることができます。さらに、コンテンツとは別に広告を配置することで、広告の効果も高まります。

中国建材ネットワークホームページ広告レイアウト

図（79）は、中国建材ネットワークのホームページ上の広告です。図からわかるように、広告は上部コンテンツと下部コンテンツの間に2列に配置され、高さ60PX、長さ235PXです。1列に4つの広告を配置できます。これにより、より多くの広告を配置しても効果が得られます。ユーザーが上部コンテンツと下部コンテンツを閲覧しているときに、クライアントの広告が表示される可能性があり、クライアントの広告に良い結果をもたらします。

B2B 業界のウェブサイトのホームページデザインについて私が言いたいことは以上です。タイトルバー、ナビゲーションバー、検索ボックス、ボタン、コンテンツリンクなどの特定の要素のデザイン方法は、前のセクションで非常に明確に説明されており、普遍的に適用できるため、ここでは繰り返しません。 B2B 業界の Web サイトでは、優れたホームページを設計することが非常に重要であることを誰もが理解する必要があります。第 1 レベルの列と Web サイト全体のほとんどのデザインは、ホームページを参照し、ホームページと一貫している必要があります。実際のデザインプロセスでは、デザイナーは類似業界の優れた Web サイトを少なくとも 20 件参照する必要があり、決して孤立して作業してはなりません。

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

元のタイトル: 良い第一印象を与えるために B2B 業界のウェブサイトのホームページをデザインする

キーワード: 良い仕事をする、B2B、業界、ウェブサイト第一、確立、良い、最初の印刷、この新聞、事前告知、ウェブマスター、ウェブサイトの宣伝、お金を稼ぐ