NNA

ブランド戦略を定め、顧客体験を向上させたメディアサイトのリニューアル

クライアントのニーズ

• 会社の事業課題を踏まえた、サイトリニューアルを行いたい
• 2016年のリニューアル以降、サイト全体としては軽微な修正しか行っておらず、ユーザビリティ改善に向けたデザイン変更が求められていた
• ユーザーが持つ課題や自社分析、競合分析などを踏まえて、サービスの提供価値を明らかにしたい

グッドパッチの対応

• 社内や顧客へのインタビューからNNAの強みや弱み、課題を整理。ロードマップとプロジェクトステートメントを作成し、サイトリニューアル後まで含めたマイルストーンを提案
• ユーザー体験を重視しながらも、事業KPIの達成を両立させるサイト設計を実施
• 実装に向けた技術選定や工数見積もり、データモデルの選定を実施
• プロダクト開発やデザインプロセスへの知見が少ないクライアントに対し、勉強会を実施

今後の構想や現時点での成果

• メディアリニューアル後はページセッションが29%増加し、新規契約申し込みも50%増加
• プロジェクト終了後「問題点の抽出→改善検討→実装→検証→調整」といったサイクルを回す習慣が根付いた

「NNA POWER ASIA」はアジアのビジネス情報を発信するニュースサイトです。共同通信のグループ会社であるNNAが運営しており、アジア12か国の地域に拠点を展開し、30年以上の歴史を持っています。

グッドパッチに相談があったのは2020年の秋。2016年のリニューアル以降、サイト全体としては軽微な変更しかできておらず、ユーザビリティ改善に向けたデザイン変更が求められていました。

Webページのリニューアルに加え、ユーザーが持つ課題や自社分析、競合分析などを踏まえて、NNA自体の提供価値を明らかにしたい──そう考えたことが、グッドパッチに依頼した理由だったといいます。

サイトリニューアルに入る前に、まずはNNAが持つ価値を明らかにするため、グッドパッチは3つの方向からアプローチを行いました。

まずはNNA社内のインタビュー。経営陣やメディア運営メンバー合わせて約20人にインタビューを行いました。2つ目はユーザー、すなわちNNA読者へのインタビュー。最後は競合他社の分析も含めたマクロな環境分析です。

分析やインタビューの結果として見えてきたのは、「現地記者の多さ」とそれを生かした「記事内容の詳しさ」など他誌には模倣困難な強み、そして「アジアに進出（活躍）する日本企業の力になりたい」というNNAのありたい姿でした。

グッドパッチはNNAの強みやありたい姿を伝えるため、「プロジェクトステートメント」を提案。サイトリニューアルを通じて目指すべき姿がはっきりしたことで、団結してプロジェクトを進めることができたほか、現場のメンバーもNNA POWER ASIAに対する自信が持てたといいます。

ユーザー（読者）がアジアでビジネスを成功するために、NNAができることは何か──。

グッドパッチはサイトリニューアルを通じて、NNAがユーザーに提供すべき価値を整理した上で、リニューアル後まで含めたマイルストーンを作成。リニューアルで目指す状態の認識を関係者間で揃えることができました。

本プロジェクトでは、デザイナーがNNAの価値を定義するフェーズにも関わっていたことで、メディアが向かいたい方向性やKPIとの整合性を保ちながら、リニューアルの設計を進められました。

戦略作成の段階でNNAのどの強みにフォーカスするべきか明確化できており、コンテンツの配置や設計、整理に迷いが生じなかったといいます。

具体的には、まずNNA POWER ASIAのユーザーや有料サービス契約社が増加する仕組み（グロースサイクル）を考え、それを達成するためのユーザー体験を「体験構造図」として作成しました。これにより、ユーザー体験をプロジェクトの優先事項に置きながら、数値指標（KPI）を意識し続けることができます。

その後、サービスを通じてユーザーに得てほしい理想的な体験（コア体験）を選定し、KPIにつながる機能施策をコア体験に沿う形で提案。コア体験が崩れないよう、機能施策を各画面に適切に振り分けました。

リニューアルの影響はメディアのユーザーだけでなく、記事を作る記者や広告を出稿するクライアントなど多岐にわたります。

そのため、デザインの方向性を決める上では「営業の方がどのように広告を売っているのか」や「記者の方がどのような指針で記事を書いているのか」といったことを理解するため、サイトリニューアルプロジェクトの担当者以外にも、社内の多くの方から意見を聞きました。

また、NNAの情報はPDFとWebサイトの2通りの受け取り方ができます。現在はPDF版を利用するユーザーが半数以上ですが、サイトリニューアルを通じて、Webサイトを利用するユーザーの割合を増やし、今後のプロダクトの成長に生かしたいと考えていました。そこでPDF版を意識したデザインを提案し、PDF版のユーザーが抵抗なくWebサイトを使ってもらえるようにしました。

デザインのトンマナを示すデザインコンセプトは、戦略策定の際に生まれたプロジェクトステートメントをベースに作成しました。これにより、NNAが目指すブランドイメージに沿ったUI設計・ビジュアル設計が可能に。さらにグッドパッチがプロジェクトを離れた後も、デザインのクオリティを保てるよう、デザインガイドラインも作成しています。

以上の施策を積み重ねたことで、ユーザー体験とKPIを両立しながら、ブランドイメージにも寄与するサイトリニューアルが実現できました。

今回のプロジェクトでは、デザイン部分についてはグッドパッチが担当し、メインの開発はNNAの開発パートナーが行うという体制になったため、開発フェーズへの接続をグッドパッチのエンジニアが担当しました。

開発パートナーへの引き継ぎにあたっては、要件やタスクに優先順位をつけてリスト化した「プロダクトバックログ」を作成するなど、開発のプランニングを行ったほか、フロントエンド部分の技術選定を行いました。

今回はリニューアルにあたって、フロントエンドの技術刷新を実現しつつ、開発のしやすさも加味して「Next.js」を採用。メディアという情報量が多いサイトであるため、レスポンスのスピードもこだわったといいます。最終的にトップページと記事詳細のページの実装までをグッドパッチが担当し、その他の部分を開発パートナーに引き継ぎました。

また、接続と同時に行ったのが、プロジェクトチームへのインプットです。NNAの方々はこれまで外注で開発を進めてきており、自分たちが主体的に開発に関わる方法を模索していました。そのため、プロジェクトの終盤でグッドパッチメンバーからNNAのプロジェクトチームへプロダクト開発についての勉強会を実施しました。勉強会は好評で、今後自社で開発を主導するための知識やマインドセットを共有できたと考えています。

開発を終え、NNA POWER ASIAがリニューアルされたのは2022年10月でした。リニューアル前後で数値を計測したところ、ページセッションが29%増加。直帰率も50%以上の改善が見られ、サイト内を回遊しているユーザーが増えたことを実感したとのこと。新規契約申し込みも50%増加し、NNAのビジネスにも貢献できました。

さらにプロジェクトを通じて、プロジェクトチームのスタンスにも変化が起こりました。今回のプロジェクトを進めるにあたってNNA側で組成されたチームは、さまざまな部署から集まった方々で、デザインプロセスやサイトリニューアルのプロセスなども知らない状態からのスタートでしたが、一連のプロセスを経験したことで、プロジェクト終了後「問題点の抽出→改善検討→実装→検証→調整」といったサイクルを回す習慣ができたといいます。

今後はリニューアルしたサイトを通じて、アジアにおけるビジネスのヒントを読者に与えられるよう、さらなる施策を展開していくとのことです。

今回のサイトリニューアルプロジェクトを振り返り、NNAの岡崎さんからこのような言葉をいただいています。

• プロジェクトの振り返り
  プロジェクトにはさまざまな部署のメンバーが参加し、それぞれの立場で意見が出てくる中、どう意見を集約していくのかが問題でした。
  プロジェクトの初期に社員のインタビューとユーザーインタビューをしたことで、サイトの向かうべき方向性が示され、プロジェクトメンバー内の目線が揃ってきました。
  この段階を経たことで、意思決定の場でも、自分たちの立場を超えた判断ができるようになったと思います。

• コミュニケーションの改善
  グッドパッチさんがプロジェクトに参加したことで、劇的に変わったのはチーム内のコミュニケーションです。それまでは意見を言える人と言えない人がはっきりと分かれていましたが、キックオフ当初から、グッドパッチさん主導のフランクなコミュニケーションが始まり、自然とその雰囲気がNNAのチーム内に浸透していきました。

• 仕事をする上でクライアントが感じたグッドパッチのバリュー
  NNAのプロジェクトに、自分ごととして本気で向き合ってくれていると感じていました。
  プロジェクトに伴走してくれている間、多くの問題が発生しました。「これはNNAの問題」と切り離すこともできた場面でも、何度も個別にミーティングを開いていただき、問題を構造化し、明らかにすべきものを見つけ、解決の道筋をつけてくれました。
  今でもその経験は、メンバー個人個人の業務の中に生きており、問題を解決するスキルと粘り強さが身についたと思います。

デザインストラテジスト：村中 元、萩原 みすず
UXデザイナー：松村将太
UIデザイナー：浅野未央、飯塚まり子（AW）、関口京子（AW）
エンジニア：大角将輝、鈴木魁人
プロジェクトマネージャー：服部真人、毛利慶二朗
クオリティマネージャー：栃尾行美