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

iteration.jpeg

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

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

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

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

material.png

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

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

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

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

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


Source: NBC

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

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

logo.gif
Source: NBC

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

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

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

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

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

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

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