NBCのホームページのリブランディングに見る「マルチブランド」デザインの重要ポイント

アメリカの3大ネットワークの一つであるNBC(全国放送会社)がホームページやブランドをリニューアルしました。
今回NBCが作成したホームページは、他のメディアには見られない手法でリブランディングされています。

1つのホームページを作り直したのではなく、3つの関連メディアを新たに作るという手法です。

「マルチブランド」を基盤としたメディアは、デザインにも多くの共通点があるので、多くのデザイナーやマーケターが注目しています。

はなぜ、NBCはこのようにメディアをいくつもの形に分けたのでしょうか。
そして、メディアを分けることによって、UXにどのような影響があるのでしょうか。

今回は、NBCのホームページのリブランディングに見る「マルチブランド」デザインについて考察してみます。
複数のブランドを同時展開していく特徴やメリットなどを確認していきましょう。

NBCの「プロダクトイテレーション」

▲ 左：BETTER / 右：MACH

NBCは今回のリブランディングで、MACH、BETTERをすでに立ち上げ、そしてまもなくリリース予定のTHINKという3つのWebサイトを立ち上げます。
MACHは宇宙や科学、テクノロジーをメインに、そしてBETTERは食事やダイエット、キャリア形成や資産形成などのトピックを取り扱っています。

このように*「マルチブランド」展開(いわゆる「横展開」)*を行なうことで、開発プロセスが手早くなり、パフォーマンスが高くフレキシブルなデザインを行うことが可能になります。

こうした横展開のデザイン反復を行うことを*「プロダクトイテレーション」*(イテレーションは「反復」の意味)と呼び、よりスケーラビリティの高い設計や開発を行うことができます。
スケーラビリティが高くなるのは、デザインをシリーズ化することで新しいプロダクトをシリーズに乗せて展開することができるからです。

MACHやBETTERはもともとユーザーテストと広告主の反応調査のために一時的に立ち上げられたテストサイトに過ぎませんでした。
しかし、内部・外部ともに肯定的なフィードバックが見られたため、NBCのプロジェクトチームは横展開でデザイン工程を進めることにしたと言います。

最終的には、こうしたMACHやBETTERを単なるポップアップサイトにするのではなく、THINKも含めてNBCのデジタルプロダクトシリーズに統合する形で進めていきました。

外部エージェンシーとの共創とチームビルディング

ポップアップサイト(メインサイトの脇で立ち上げられたプロモーション用のサイトなど)を立ち上げるのはよくあることですが、NBCは会社の歴史も長く、古いデザインシステムの上に新しいブランドを立ち上げるのには限界があるとデザインチームは感じていました。

時代に合わせて、より多くの動画、より多くのビジュアルアセット、より柔軟なコンテンツ作成、よりダイナミックなキュレーションシステムが必要でした。

また、メディアサイトのスピードに合わせたコンテンツの作成と消費の循環をサイト全体でよりスムーズにして、広告もプレミアムなオファーを提供できるものにして、ブランドに浸透したコンテンツをシームレスに統合する必要がありました。

もちろんNBCはアメリカ国内最大級のメディアなので、内部にプロダクトデザインや開発に関するリソースやスキルセットは揃っていました。

ただ、16週間という短納期に間に合わせつつ、全く新しいデザインシステムとフレームワークを立ち上げるために、外部のクリエイティブエージェンシーであるCODE AND THEORYと協力することにしました。

これにより、3分の1がCODE AND THEORY、残りがNBCのデザインチームという構成になりました。
主要な役職は、デザインから開発まで、ペアを組んで進捗を管理していました。
こうして生まれたのが、MACH、BETTER、そして間も無くリリースするTHINKです。

なぜプロダクトイテレーションが重要なのか？

実はNBCニュースにはすでに3つのブランド(MSNBC、TODAY、NBCNews)の3つの主要ブランドが存在していました。
しかし、それぞれに固有のビジュアルランゲージ、ユーザーエクスペリエンス、コンテンツマネジメントが存在していました。

さらに新しいブランドを加えると、今度はさらに複雑なものになってしまうのは分かっていたし、こうした尖ったデザインや単独のシステムが増えるとすべてがスピードダウンし柔軟に対応できないとデザインチームは判断しました。

そこで、デザインチームが行ったのは、*「from the outside in」(外から中へ)*と呼ばれるデザイン手法を採用しました。
これは、デザインやコンテンツ戦略の観点で数ヶ月で開発できるテンプレート化した新しいデザインから作る、という戦略です。

つまり、プロダクトイテレーションを前提として、フォントファミリーやカラーパレット、画像の取り扱い方やコンテンツシステム、アイコンから全体のレイアウトまでを初めに取り決めたのです。

その意味では、フォントやコンポーネント、コンテンツタイプまで決めてしまうのは、フレームワークの作成に似ているかもしれません。
例えば、Googleが提唱するマテリアルデザインというのも、初めにコンポーネントやデザインなどの外枠の思想から始まっています。

初めにこうした外枠が決まってしまえば、あとはイテレーションを行うだけでシリーズ化したサイトを作成することができるのです。

プロダクトイテレーションで押さえておきたいこと

それでは、汎用性の高い横展開のブランドを作り上げたいときには、どんなことに気をつければよいのでしょうか。
NBCの事例から、プロダクトイテレーションのポイントをまとめてみましょう。

1. 「外から中へ」のデザインアプローチ

Source: NBC

自由に、そしてリスクを最低限に押さえてデザインを始めるのが一番です。
そのためには、コンテンツありきというよりも、汎用性の高い大枠のデザインから始めていきます。
外堀のデザインができてから、細かなパーツや小さなセクションをデザインし始めていきます。

2. ブランドに統合されたロゴデザイン

Source: NBC

NBCであれば孔雀のロゴを使っていますが、これから横展開でブランドを並立させていくにしても、統合されたロゴデザインを持っていたほうがよいでしょう。

MACH、BETTER、THINKはそれぞれにブランドカラーを持っていますが、ロゴデザインのコンセプトは直角三角形で共通しており、サイトをスクロールするとピーコックが三角形に変わるアニメーションロゴでブランドの統一イメージを保っています。

3. 共通したボタンやロゴ

ブランド個別の色だけでなく、共通で使用する色(NBCのサイトであればグレースケールの色)をグローバルカラーとして決めておきましょう。
また、グローバルカラーと同様に、どのようなフォントを使うか、どのようなボタンを使うか、大きさはどうするかなど、デザインのガイドラインを決めておきましょう。

4. ビデオの取り扱い方も決めておく

NBCが立ち上げたのはメディアサイトなので、多くの動画を取り扱いたいと考えました。
HTML5で作成した読み込みの早いビデオプレイヤーを採用し、ユーザーを没入感のある体験に誘い込むための工夫がされています。

また、ビデオの長さも60秒未満と取り決め、モバイルユーザーでもすぐに読み込め、注意を削ぐような長さにしないことも決めています。
もちろん、自動再生はしません。
すべて、ユーザーによるクリックやスワイプで作動するように設計しています。

まとめ

NBCの事例からも分かるように、Webサイトのプロダクトイテレーションによって、より高速で、素早いローンチが可能になります。
SEO上も一貫した評価を受け、トラブルシューティングにも対応しやすくなります。

多くのWebサイトを立ち上げようと思っている場合は、このプロダクトイテレーションの考え方は非常に役に立つでしょう。
一つひとつユニークなサイトを作るのも一つの選択肢ですが、保守点検にかかる労力が分散されてしまいます。

すでにいくつものサイトが立ち上がっている場合には、これを機にリデザイン・リブランディングを行うのもいいでしょう。
一つのブランドに統合して横展開していけば、Appleのホームページのように洗練されたブランド構築が可能になるかもしれません。