フジテレビジョンをキー局とするニュースネットワークによる総合ニュースメディア、FNN.jpプライムオンライン。fnn-news.comとホウドウキョクという2つの母体となるサイトの資産を活かしつつ、「テレビニュースとの新しい付き合い方」をテーマにした、まったく新しいメディアを立ち上げるプロジェクトに、シフトブレインが参加しました。バックエンドの担当だけでも数社が携わる、かなりの大規模、かつ長期にわたるプロジェクトです。

私たちの担当は、サイトの情報設計、UIデザイン、フロントエンド開発と多岐にわたります。チームにはシフトブレインのメンバーのほか、COMPASSの中水氏がプロジェクトマネジャーとして加ってくれました。

情報設計とプロトタイピング

プロジェクトの最初の課題は、まったく構造の異なる2つのサイトをいかに融合し、新しいサイトとしてまとめ上げるか、というものでした。シフトブレインのチームは、まだコンテンツ構成やCMS仕様などが固まっていない初期段階からプロジェクトに参加し、サイトのインフォメーションアーキテクトの役割を担当。この段階では手描きのペーパープロトタイプをもとにチーム内で検討を重ねました。

UIデザインにおいても、クライアントと議論しつつプロトタイピングを繰り返し、双方納得のいくデザインを目指しました。たとえば、当初のデザイン案はいかにもニュースメディア然とした堅いイメージのものでした。そこから、クライアントからの要望として出てきた「新しさ」「フレッシュ」といったキーワードを手がかりに、より「テレビらしさ」を盛り込む方向で試行錯誤した結果、カラフルで丸みのあるデザインにたどり着いたのです。

クライアントであるフジテレビジョンの皆様からは、当初からUIとフロントエンドの専門家として全幅の信頼を寄せていただき、つねに建設的な意見の交換をしながら、良好なコラボレーションが実現できました。

UIの一貫性

UIの設計と実装においては、なによりもまずサイト全体を通じた一貫性を重視しました。そのための指針のひとつとして、Googleのビジュアル言語であるマテリアルデザインをデザインに取り入れています。たとえば「エレベーション」という考え方を採用し、記事カードやヘッダーなどコンポーネントの重なりをシャドーによって表現しています。また、UIのアニメーションもマテリアルデザインのモーション設計を参考にしており、デュレーションやイージングに一貫性を持たせることができました。

継続的改善

サイトのローンチ後も、新規コンテンツの追加や、サイト設計の改善、UIのリファクタリングなどに継続的に取り組んでいます。たとえば、記事の「カードUI」の使い勝手の向上や、リポーター（著者）ページの新規追加、系列各局ページの再構成などのアップデートを実施しました。現在も、アクセス解析の結果などを踏まえながら、より多くのユーザーにとって有益かつ快適に利用できるものにすべく、改善の準備を進めています。