システム開発・運用やAWS構築など企業のDXを支援する日本オープンシステムズ「実績紹介」ページ

CASES

AWS導入・運用サービス WEBシステム・モバイルアプリ開発 ICTコンサルティングサービス 性能向上 モバイル マスコミ

ニュースサイトのフロントエンドをリプレース

 

新聞社様のニュースサイトの開発を行った実績をご紹介します。既存サイトのリプレース要望に対して、私達はデータを表示する機能(フロントエンド)を担当しました。デザイナー様と協力してサイトデザインを統一すると共に、コンテンツへの導線・分類を整理し、直感的なURI設計(情報の位置を特定できる使いやすいアドレスの仕組み)になるように再構築しました。また、携帯端末での表示を最適化し、記事が表示されるまでの速度を向上させました。

 

クライアント情報

課題

  • UIデザイン、アーキテクチャ(サイトの構成や設計)を携帯端末に最適化させたい
  • 表示速度を向上させたい
  • コンテンツのジャンルを構造化させたい

効果

  • フレームワークにNext.jsを採用することで、セキュリティを担保しつつトレンド技術を押さえ、モバイル対応と高速化を実現
  • コンテンツのジャンル分けに中間データベースを導入する事で、直感的なURIに変換する仕組みを導入

【背景】ニュースサイトの全面リニューアルの要件とは

お客様にて、既存のニュースサイトをデータ蓄積(バックエンド)とデータ表示(フロントエンド)を複数段階で刷新することを計画されています。他社様にて実施したデータ蓄積機能はすでに完成しており、我々としてはデータ表示部分の機能開発、新サイトへのリプレースを担当しました。お客様からはこれまでにも、既存ニュースサイトに対して、PWA(Progressive Web Apps)化する対応や、お知らせのプッシュ配信機能などをご依頼いただいていた経緯から、大規模なサイトリニューアルについてもお声がけいただきました。

サイト全体のデザインを一新し、より価値の高いサイトにするための要望として、お客様から以下を伺いました。

  • サイトの閲覧は、スマートフォン利用を念頭におき(モバイルファースト)、サイト構築の技術面もトレンドを押さえたい
  • 各ページの表示速度を高速化して、利用者の満足度を向上したい
  • 複数のCMS(記事を投稿するシステム)で作成されたデザインや、記事のカテゴリを統一化・最適化したい

【ソリューション】モダンなフレームワークを提案することで迅速なリニューアルを実施

モバイル対応、SEO対策

構築に当たっては、システム開発のフレームワークにNext.jsを使用しました。Next.jsはパソコン向け、スマホ向け等の静的なドキュメントをサーバー内で生成するため、ニュース記事などを閲覧するサイトに適しています。また、検索ロボットが理解しやすいコンテンツを生成するため、検索エンジン最適化(SEO)にも有利になり、多くの読者が来訪するきっかけをつくります。


Google ChromeのLighthouseによるページの分析結果でも高得点を獲得できています

ジャンル表示の再構築

リニューアル前のサイトで利用されていた記事のジャンルについては、デザイナー様からの要望を受け、既存のジャンルを新サイト用に最適化・構造化するための差分吸収・調整用データベースを新設しました。これによってサイト全体でのコンテンツの構成や、ジャンルの統一感を実現することができました。

表示速度の向上

サイトの表示の速度は CDNにAmazon CloudFront、フレームワークにNext.jsを導入することで、一度表示された記事はキャッシュデータから配信されるため非常に高速な閲覧が可能になりました。

【効果】サイトリプレース後は集客数・会員数が増加

サイト公開後に問題は発生していません。リプレース後、無料会員数が大幅に増加し、有料会員数も順調に増加しているとのことです。

【まとめ】日本オープンシステムズにお任せください

PRポイント

  • 私共はサイトのリニューアル、リプレースにおいてお客様の要望をヒアリングした上で、開発手法、ツールを厳選しスケジュール感に合わせたご提案を行います
  • データベースなどバックエンドだけでなく、データ表示のフロントエンドについてもお困り事などをご相談ください
  • 他新聞社様のニュースサイトの構築実績もございます

関連サービス

CONTACT US

お問い合わせ

TOP