【連載特集 ニュースから選ぶトピック】No.3 B2Bウェブサイトデザインの変化

昨年から今年にかけて、ウェブサイトデザインの傾向や受賞デザインについての記事を掲載した。実際に、B2Bウェブサイトにおいて、デザインの変化や傾向がどのように表れているか、MarQ掲載記事内のWEBデザイン制作企業のサイトやその企業が制作したサイト、MarCom Award受賞企業サイトなどを見ていく。

特集

Bop Design

 

2017.1.12【KEY】アメリカ WEBコンテンツのトレンドと課題で、Bop Design社は昨年のトレンドとして、グラデーション、背景としての白、短いメッセージ、ユーザビリティ重視をとりあげている。

同社のWEBもまさににグラデーションが使用され、その色が赤、黄、青、緑など変わっていく。また、文字数は少なく分かりやすい。グラデーションは同社のように使われるだけではなく、写真の上にグラデーションのフィルター≪Axim, Inc.≫を重ねる、メニューやボタンにグラデーション≪Polyone corporation≫を使うなど、全体から細部まで色々なサイトに見出すことができる。

動く要素も同じように使い方が広がっている。使い方は、動画が流れその上で文字が動くテレビCMのようなタイプ≪Cooksey CommunicationsStudio Brand Collective≫、ほぼすべてのページでアニメまたはパワーポイントのスライドショーのような手法≪Eyeking≫、ページの一部にさりげなく使う≪Velocity Partners Ltd.≫などである。広告関係の企業は、ホームページ(最初のページ)で大きく使用して、その効果をアピールしている。

 

BeforeAfter

Bop Design社は、“Before + After B2B Re-Branding + Website Redesigns“というコーナーに、変更前と変更後の同社制作顧客WEBサイトのホームページとサブページを並べている。デザインワークの考え方も示され、どのような考えでどのように変化させたかを知ることができる。金融、バイオテク、エンジニアリングなど業種は違っていても、新しいデザインの多くに共通する変更点は、ホームページに各社の強みをシンプルに少ない文字数で示すことである。

たとえば、サンディエゴの貨物輸送会社American Cargoservice, Inc.の変更前のホームページは文字情報が多く強みが分からない。変更後は、文字情報を抑え、シンプルなインパクトのある写真を使い、一番の強みを訴えている。メニュー数も抑えているため、次に何を見るかが探しやすい。

このような変化は、他の変更例にも見られ、デザインにあたって、その企業の何を伝えるかというコンセプトを、同社が最初に決めていることが分かる。全体背景として多く使われている白は、段落分けのように区切りを作ってスクロール時に便利だ。一つの項目から次の項目へとコマが変わるように見ることができる。

 

eQuest

2017.2.1【アメリカ】B2B ウェブサイト部門でMarCom Award受賞サイトで紹介した、受賞企業アメリカのeQuest社のサイトも全体背景は白であり、右側のメニューの項目をクリックすると、その項目のまとめがシンプルに左側に示され、詳細が見たければ“Learn more”をクリックしてスクロールする。フリップするメニュー項目の“Learn more”で詳細に飛ぶこともできる。まとめの内容で充分であればスクロールせずに次の項目を選ぶことができる。ユーザーを迷わせずにナビゲートするホームページになっている。
サイトをデザイン制作したScott Design Inc.が、モバイルフレンドリーなウェブサイトというように、スマホ表示でもクリックやスクロールが分かりやすい。

ユーザビリティという点では、全体的に、上下・左右へのスクロールがしやすい工夫が感じられる。上下と左右どちらのスクロールが見やすいかは、個人個人判断が分かれるところであるが、左右は視線を動かす方向性とスクロールの方向性が同じになる。メニューについては、メニューボタンやタブが同じページに複数ある、大きくイラストがあり何を見るか分かるなど、ずらっと文字項目が並んでいるメニューよりも目立ち選びやすい。そのために、ホームページでは、項目数を絞りサブメニューに回して、見やすさを優先しているようだ。

【参考サイト】MarCom Awards Winners