BuzzFeed Newsがリニューアル！新しいWebサイトを徹底解剖

世界中からニュースを集める新しいウェブサイトを発表したことで、少しは成熟したかのようにみえるニュースメディア『BuzzFeed News（バズフィード・ニュース）』。エンターテイメント系のコンテンツでおなじみのBuzzFeedは、ニュースサイトの立ち上げと共に、よりシリアスなジャーナリズムやルポルタージュを紹介するメディアとして成長してきました。

そして、新聞等の印刷報道、文学、作曲に与えられる米国で最も権威ある賞であるピューリッツァー賞を受賞してからは、BuzzFeedはバズった人気記事を紹介するだけでなく、日々読むことのできるニュースメディアとしての立ち位置を確立しました。

現在、BuzzFeedは新しいドメインとブランドアイデンティティを使用しています。この記事では、BuzzFeed Newsの新しいWebサイトのデザインとUIを、細かく解剖していきます。

ミニマルなデザイン

BuzzFeedの新しいWebサイトは、ミニマルなデザインを心がけているように思います。元のWebサイトに比べると非常にシンプルで、十分なホワイトスペースが用いられており、ニュース記事が詰め込まれている印象はありません。

ホワイトスペースはウェブサイトの全体に効果的に配置されており、サイトの構成も大幅に改善したといえるでしょう。

テキストと画像の組み合わせが巧妙なことも、読み手の注意を上手く惹きつけます。良いバランスを保っているため、サイト全体の統一感があります。メインスクープは中央に配置され、読み手がわざわざ探し回ることなく、簡単に見つけられます。

新しいBuzzFeedニュースサイトでは、黒、赤、灰色、白、という限られたカラーパレットや、控えめな画像と適切なテキストをウェブザインに使用しています。The Guardianなどのニュースメディアは、ややごちゃごちゃとした印象を受けがちですが、リニューアル後のBuzzFeedにはそれがなく、すっきりと落ち着いています。

ナビゲーションとレイアウト

一方、BuzzFeedニュースサイトのレイアウトは、他の一般的なニュースメディアに比べてそこまで目新しいものではありません。エレガントな良いデザインを提供することで、読み手の期待を高める方法は他の多くのメディアサイトと同様です。

その意味で、リニューアル後のBuzzFeedは、あくまでも従来型のニュースメディアにとどまっているという言い方もできます。 The Interceptにみられるような驚きはなく、気を紛らわすことなくシンプルにニュースのみに集中させる印象です。

中心に大きなコンテンツをおき、小さなコンテンツがその周りに配置されているコラムレイアウトは、US Newsなどのデジタルニュースメディアに典型的なものです。

唯一既存のニュースメディアと異なっている部分といえば、カテゴリーナビゲーションを無くしたことでしょう。

「文化」「政治」「エンターテイメント」など従来型メディアにみられるカテゴリーバーはなく、トレンドストーリーからカテゴリーを選ぶことになります。素早くトレンド情報のみ知りたい、という場合は、大変役に立つ機能ですが、ニッチな記事を探している人には不向きといえるでしょう。

BuzzFeedのプロダクトマネジャーであるSam Kirklandは、これは意図したうえでの決定であるとTechCrunchで語っています。メディアの内部構造や、私たちが普段ニュースを読む方法を考慮すると、このカテゴリーのバナーはあまり意味をなさないというのです。

それでは、ユーザーはどのようにニュースのタイプを選べば良いのでしょう？従来型のニュースメディアに慣れているユーザーは、ここでつまづくことになります。

スクロールダウンをしてサイドパネルをみると、ようやくここで大まかなカテゴリーを選択できるようになっています。しかし、ここで注意が必要です。サイドパネルでカテゴリーのリンクを選択しても、リンク先に必ずしも詳細なニュース記事が掲載されてるとは限らないのです。ニュースに合わせ、典型的なBuzzFeedらしいエンタメ系のコンテンツが混ざっているページに飛んでしまいます。

ジャーナリズム系のニュースに合わせて、典型的な軽々しいBuzzFeedのコンテンツが混ざったページにとばされる機能は、無視できません。実際に、BuzzFeedのエディターの一人は、ユーザーリサーチにとってこの機能は問題であると語っています。

セリフロゴとタグライン

ロゴは無難な印象です。TypeMatesによるカスタムデザインですが、Mediumのロゴの複写に見えることも事実です。サンセリフ、ボールド、落ち着いた様子は、シリアスなジャーナリズムやルポルタージュのニュースメディアに相応しいものといえるでしょう。

新たに付け足された赤いドットも非常に好印象です。赤いドットがビデオの録音ボタンのようにも見えます。ニュースを録音する、という意味合いでしょうか。こうしたジャーナリズムらしさを強調するデザインは素晴らしいといえるでしょう。

タグラインに関しても、“Reporting to you（あなたへのレポート）”というコピーは非常に直接的かつパーソナルな印象を与え、好印象です。

全体として、マストヘッドは良くデザインされているといえるでしょう。

コンテンツデザイン

コンテンツはあくまでも読み切れる量で提供されています。ホワイトスペースのおかげで、新しいユーザーも圧倒されることなくニュースを楽しむことができます。ヘッドラインは短くて読みやすく、ページには素早く目を通せます。

前述したように、レイアウトそのものは保守的です。そのため、このサイトでのデザイン革命は期待しない方が良いでしょう。

記事内に目を通すと、コンテンツはわかりやすいように階層化されています。大きなヘッドラインに続き、サブラインとメイン画像などが続きます。

▲慣習にとらわれない、BuzzFeedニュースのビジュアルナビゲーション

少し変わっているのは、トレンドトピックのナビゲーションの下には、他の記事への画像が複数並べられたナビゲーションストリップが配置されていることです。しかも、これらはBuzzFeed Newsの記事へのリンクではなく、既存のBuzzFeedのコンテンツです。画像の上にカーソルを合わせると、記事のタイトルが表示される仕掛けになっています。

タイポグラフィーとフォント

テキストは適切で読みやすいといえるでしょう。フォントはsans serif Basierとserif Pensumを使用しており、ページ上で上手く相互補完されています。

フォントサイズのスケールも適切で、コントラスト比も全く問題ありません。

まとめ

気を紛らわす要素やコメントを消し去ったことは、調査に基づいたシリアスなニュース機関として認知されるために正しい選択だったといえるでしょう。ニュースに特化した新しいウェブサイトを作った、という意味で良い仕事をしたと思います。

新しいレイアウトは、ユーザーにとって目を通しやすいものになっており、耳障りな視覚要素もなく、シンプルなデザインは新しいアイデンティティの確立に役立つはずです。

課題としては、新しいデザインが他のブランドとの区別をつけるのに十分かという点でしょう。現状では、シリアスなニュースと一緒に通常のBuzzFeedのコンテンツが混ざっており、非常に混乱を招きやすくなっています。しかし人々は、実はそれを望んでいるのかもしれません。

（筆者：Justinmind　翻訳：Mariko Sugita）