ケーススタディーic-root140年以上の歴史を誇る日本経済新聞社が、2018年11月26日に取引先のコンプライアンスチェック業務を支援する新サービス「日経リスク&コンプライアンス」をリリースしました。同サービスは、日経新聞のBtoB向け情報サービス事業の次世代を担う新規サービス群の1つ。現在、「日経リスク&コンプライアンス」に続き複数のサービスのリリースを控えています。rootは「日経リスク&コンプライアンス」と現在開発中の「日経ナレッジマネジメント(仮称)」のUI,UXデザインと今回のプロジェクトで開発している全サービスのロゴ策定、デザインシステムの設計に関わらせていただいています。今回は、本プロジェクトのPM兼開発マネージャーの齊藤祐也さんとデザインディレクターの永山寛樹さんをお招きし、root西村、古里を加えた4人でプロジェクトの振り返りを実施しました。柔軟で小回りの効くデザインパートナーを求めていた斎藤:今回のプロジェクトは、日経新聞のBtoB向け情報サービス事業の次世代を担う新規サービス群を立ち上げるプロジェクトです。そのサービス群の1つ、2018年の11月にリリースした「日経リスク&コンプライアンス」は、取引先のコンプライアンスチェック業務を支援するサービスです。他サービスは目下開発中で、全部合わせて1年以上に渡る長期プロジェクトです。西村:rootは今回、「日経リスク&コンプライアンス」と現在開発中の「日経ナレッジマネジメント(仮称)」のUI,UXデザイン、および全サービスを横断するサービスロゴのデザイン、デザインシステム構築の支援を担当させていただいています。rootには直接お問い合わせいただきましたが、どのような経緯でたどり着かれたのでしょう。永山:当時私たちは3つの条件のもと、パートナーとなるデザインファームを探していました。1つ目は、複数のサービスで一貫性のあるUIを実現するため、デザインシステムの構築が可能なこと。Bのサービスデザインの経験があること。3つ目は、長期プロジェクトにも耐えられる胆力があることでした。きっかけは、オプトさんの事例記事です。Bサービスを担当している。長期間関わり大きなプロジェクトでも最後までやりきる胆力がある。デザインを納品して終わりではなく、開発体制の内製化支援など、その後の展開まで考え支援を行なっている。他の実績も拝見し、デザイン力も申し分ないと感じていました。斎藤:当初はrootさんよりも規模の大きな会社を中心にパートナーを探していました。規模が大きいとどうしても動きが遅くなることがあります。私たちは、今回のサービスにおいて、早いサイクルでフレキシブルな開発体制を構築したかった。考えると、少人数で小回りの効くこと。事業に伴走するスタイルでデザインを提供するrootさんが適しているという結論に至ったんです。シンプルかつスケーラビリティのあるUI,UXデザインの提案(左:日本経済新聞社PM兼開発マネージャー・斎藤さん、右:日本経済新聞社デザインディレクター永山さん)斎藤:今回は1サービスでも1年がかりの長期戦です。スピード感と客観性を持ちつつ、サービスと向き合うためにも、プロジェクトは「調査」と「デザイン」の2つのフェーズに分けて別々に体制を構築。rootさんには、主に後半の「デザイン」を中心にお願いさせていただきました。西村:「日経リスク&コンプライアンス」のプロジェクトでは、全体のディレクションを日経新聞さん、要件定義に向けたユーザー調査とモックアップの設計までを別の協力会社さんが担当。rootはモックアップからプロトタイプへのブラッシュアップ、プロトタイプの検証、サービスのUI,UXデザインに携わらせていだきました。古里:私たちが関わったタイミングは、調査用のモックアップができ上がっている状態でした。モックアップは一画面あたりの情報量が多く、調査に向け情報を絞り込むところからスタートしましたね。情報の絞り込みは、日経新聞さんもすぐに賛成していただきました。永山:極力シンプルなものにした方が、ユーザーにとって良いサービスになると思ったんです。当たり前なのですが、自分たちが8時間貼り付いてサービスを作っていても、ユーザーも同じように8時間も使ってくれる訳ではない。実際使うのは、10分か5分、もしかしたら使わない日もある。インタビューをする中で、改めてこの事実と向き合い、わかりやすさを重視する必要性を再認識したんです。西村:ユーザーインタビューを交えたプロトタイプの検証後、UI,UXデザインの指針を打ち立てました。意識したのは、直感的に使えることです。「一画面に表示する情報は必要最低限に抑える」「色味にコントラストをつけ注視すべき情報を明確にする」など、「目視」や「判断」といった担当者依存の作業をできるだけ最小化しました。最終的には、トップで全ての情報を見せるのではなく、左側のタブに最低限の情報だけを乗せ、必要な情報だけを画面に表示するUIデザインと情報設計に落とし込みました。(初期のモックアップ)(rootが作成したデザイン)永山:「日経リスク&コンプライアンス」のデザインは、ただシンプルなだけではなく、デザインシステム化を前提としていただいています。実際、「日経リスク&コンプライアンス」のUIは現在開発中の「日経ナレッジマネジメント(仮称)」にも展開しています。「日経新聞らしさ」を意識し、複数サービスで一貫したロゴデザイン古里:今回のプロジェクトで、rootらしい価値を発揮できたと感じたのは、ロゴの制作です。複数のサービスが1つのプロジェクトであることを表現し一貫した世界観を持つことを示すロゴが求められました。ロゴにおける「日経新聞らしさ」とは何かを理解するために、既存で展開しているサービスのロゴを全て調査。それぞれ特徴のあるロゴをサービスの目的や事業領域等で整理し、今回のデジタル情報・サービス事業領域での見え方や展開のしやすさを考慮し、4パターンのデザインを提案しました。永山:4つのパターンをベースに、会議室でライブコーディングのようにデザインを詰めていきましたね。「日経新聞らしさ」とは何かを議論しながら、ロゴに落とし込んでいくプロセスを共有できたのは、思考の整理としても、とても良い体験になりました。(スライドに投影しながら、リアルタイムでロゴをブラッシュアップ)古里:ロゴに使う青色の色味を従来のサービスに混ざっても違和感が無いよう調整したり、既存の「NIKKEI」ロゴの角度を取り入れたりするなどして、これまでのサービスを並んでも違和感がないようなロゴになったと思います。(既存の日経新聞ロゴの角度をトレース)(最終的に決まったロゴ)斎藤:複数サービスで一貫したロゴデザインであるべきだということは、上司にロゴを提案する際にも伝え、「なぜこのロゴであるべきか」のロジックやストーリーも一緒に展開しました。背景のストーリーを付与できたことが、事業スピードにも貢献してくれました。Sansを書体に選定シンボル部分については、サービス名の頭文字を抽象化した図形を、Nikkeiロゴの一部(N)から土台を構成する平行四辺形に着目し、その平行四辺形のグリッドに配置したサービス名の頭文字を抽象化した図形は、三角、四角、丸などプリミティブな形状で構成し、これまでのサービスよりもモダンかつシンプルなものにした。デザイン原則として掲げている”次の決断へ導く”を自らが表現できるよう、未来を見据えたメッセージを込めた2つの形状が物理的に重なっているような見た目にすることで、原点である新聞(物理的な紙)を感じさせるような表現にしている。西村)西村:「日経リスク&コンプライアンス」が無事リリースされ、残りのサービスも着々と開発が進んでいます。デザインに関して、今後はどんな展開を考えているのでしょうか。永山:「日経リスク&コンプライアンス」は、これからお客さんに使っていただくフェーズで、今後新しい機能の追加も予測されます。機能が多くなっても、情報の粒度が整っていて、一目で何をしたらいいか分かるUIは保ちたいと考えています。全サービス共通の目標は、日経新聞の新しいデザインの基盤となるデザインシステムを作り上げることです。西村:プロジェクト自体はまだ道半ば。私たちもまだまだ尽力している最中ではありますが、我々は日経新聞さんが期待していたバリューを発揮できているでしょうか。リリース後の事業の姿や、そのときにデザインに求められる役割や価値を適切に理解されているおかげで、とにかく話が早い。1言えば10理解して返してもらえる印象があり、とても外部のパートナーとやりとりをしているとは思えない早さで議論が進んでいきましたね。Paper、InVisionを中心とした非同期コミュニケーションが中心で、いまだにオフラインで会うのは週に1回、1時間だけ。かかわらず、1年間スムーズに進んでいるのはすごいですよ。この環境でも安心できたのは、都度生まれる問題に対して本質的な課題を見極め、すぐに打ち返してくれるrootさんの瞬発力と経験値ゆえだったと思います。逆にrootさんとしては、1年間やってみていかがでしたか?西村:永山さんの言葉にあったように、同じ目線でプロジェクトを進めるパートナーとして関われたという印象は強かったですね。受発注の関係ではなく、思ったことは遠慮なく言わせていただけるフラットさがありました。「デザインを通じて、事業成長に貢献する」という言葉を掲げているように、リリースはゴールではなく、通過点でしかないという考えが我々の土台にあります。それが、今回日経新聞さんと上手くマッチしたのかなと感じています。永山:私自身、日経新聞に入社する前は制作側で働いていた経験もあり、パートナーとなるデザインファームとどう関係性を構築すべきかは何度も考えたテーマでした。主従関係は良い結果に結びつきません。対等な関係で、議論を重ねられるチーム作りはとても大切だと思っています。斎藤:一緒に仕事を進める以上、意見は積極的にぶつけ合うべきだと思っています。納品がゴールになってしまうと、パートナーの提案力が活かしきれません。今回、ロゴを作る際のライブコーディングのように、本質的な議論を積み重ねられる関係こそ、あるべき関係性だと思います。企画から運用・改善までWebサービス・アプリデザインの設計・制作を行うデザインスタジオです。rootでは、デザインのあり方をクライアント企業様とともに模索し様々なプロジェクトをデザインの力によって成長させることをミッションとしています。UI/UXデザインUIデザインがすごい!参考にしたいアプリ・ブラウザサービス5選!今回はユーザーの実際の動きを参考にしたUIデザインやアニメーションをうまく使ったUIなど幅広く選びました。UI/UXデザインWebデザイン制作のために、絶対に質問すべき64のコトクライアントのイメージどおりのページを作るのは、そう簡単なことではありません......。UI/UXデザインなぜデザインツール「Whimsical」はワイヤーフレームの迅速な作成に適しているのかWebサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。MOREお問い合わせ新規事業立ち上げやWebサービスの改善でお困りの方はお気軽にご相談ください。課題に応じたデザイン手法をご提案させていただきます。Reservedプライバシーポリシ。