「サイトの高速化とブラックボックスの解消を実現できた」 さらなる成長へドワンゴがJamstackを採用した理由

課題と成果

事例サマリー

• クライアント：株式会社ドワンゴ

• 業種：コンテンツ配信・教育事業（ニコニコ動画・N高等学校・S高等学校 運営）

• 支援内容：WordPressからJamstackへのリニューアル・フロントエンド開発支援

• 技術スタック：Next.js / Vercel / microCMS / AWS S3 / Jamstack

• プロジェクト種別：大規模サイトリニューアル・外部開発パートナー

• 担当領域：イベント特設サイト制作・N高/S高サイト全体リニューアル・フロントエンド開発・保守体制構築

解決した課題

• 多数の制作会社が関わった結果、サイト全体が積み木状態に構築されブラックボックス化していた

• WordPressベースのサイトが経年劣化し、イベント開催時のアクセス集中に耐えられない状態だった

• サイトの読み込みが遅く、Core Web Vitalsのスコアが低下、離脱率が上昇していた

• 部署内にフロントエンド専門のエンジニアがおらず、技術領域の保守体制が構築できていなかった

chot Inc.が提供した価値

• WordPressで構築されていた既存サイトをJamstack＋microCMSを基軸とした構造に移行

• 表側のデザインを変えずに裏側の構造だけを刷新するリニューアルを実現

• ニコニコ超会議・ボカコレ・歌コレなど多数のイベント特設サイトを継続的に制作

• フロントエンド専門エンジニアとして外部パートナーに参画し、技術領域を継続支援

ちょっと社は「デザインからウェブの構造まで総合的に考えられる」

— 元々ジェイさんと僕はちょっと社を設立する前から知り合いだったんですよね。

ジェイ様：結構前から知り合いの知り合いという程度でしたよね。最初にお仕事を依頼したのはそこからだいぶ時間が経ってからで、2018年にN高にWebデザインスクールを作るタイミングでジョインいただきましたよね。

— 何で僕に声を掛けてくださったんですか。

ジェイ様：Webデザイン教育のコンテンツは巷にあふれていますが、その多くが見た目のデザインに終始しています。ですが、Webが何からできているかを考えれば、最終的にはコードをどのくらい理解しているかに行き着きます。その視点が抜け落ちた見た目のデザインだけでは、完全とはいえない。そうしたなか小島さんはご自身がエンジニアだったこともあり、実装も得意で、デザインとWebの構造を総合的に考えられる方だと認識していました。デザイナーもエンジニアも分業化が進む中で広く知識を持っていることはすごく高度なことだと思いますし、Webデザイン教育にあたっては適任だと考えたのです。

あと、小島さんは以前からコミュニティ活動に取り組んでいたし、色々なコネクションをお持ちだったので、お願いすれば仮にご本人でなくても誰か紹介してもらえるなど、何かしらアウトプットを返してもらえるだろうという期待からでした。

— その後ちょっと社を設立してから、本格的なサイト制作やリニューアルをご依頼いただきました。

ジェイ様：2021年のニコニコ超会議に合わせた特設サイト制作からご参画いただきましたね。ニコニコではライブ事業として、「ニコニコ超会議」のほか、「The VOCALOID Collection（ボカコレ）」「歌ってみた Collection（歌コレ）」など多数のイベントを開催しています。イベントを開催することで多くのユーザーさんに喜んでいただけている一方で、それに対するデザイナーのリソースを考えたときに厳しいなと感じることが多くて......。プロジェクトの優先度が高く、業務量の多い時期にデザイナーをアサインしてしまうと、後で供給過剰になってしまうからです。そうしたときに業務の流動性に対応いただける外部のパートナー企業として、御社が適任だと考えました。

高速なパフォーマンスを実現するためにJamstackを導入

— サイトをリニューアルする段階でJamstackを導入いただきましたが、その理由を教えてください。

ジェイ様：いまのWeb業界の課題は「高速なパフォーマンスの実現」だと考えています。若い世代はiOSやAndroidなどのアプリケーションに慣れ親しんでいるなか、Webでのパフォーマンスの遅さにネガティブなイメージを持っています。私たちの世代は「Webは待つもの」という時代を知っていますが、下の世代にはその常識が通用しないのです。

こうしたなか、ニコニコのイベントサイトには一度に多くのユーザーさんが訪れます。それに加え、ニコニコのAPIを引っ張ってきてランキングを表示させるなど、単なるLPではない複雑な連携が絡んでいます。私たちとしてもかなりコストをかけて取り組んでいるイベントに対して、サイトを訪れたユーザーさんに反応が遅いと思われることはかなりマイナスな状態なのです。そこで、たくさんのユーザーさんが訪れても高速なパフォーマンスを発揮でき、なおかつ取り入れやすいという観点からJamstackを採用することにしました。

— その後、教育事業での大幅なサイトリニューアルもご依頼いただきました。その経緯を教えてください。

ジェイ様：現在N高等学校・S高等学校合わせて在籍生徒数は約24,000人におよびます。これは当初の予想を大幅に上回る規模での急成長でした。そのなかで、生徒を集めるためにN高、S高ならではのプロジェクトのほか、塾やプログラミング教室など、さまざまなプロジェクトを一気に立ち上げていったのです。

当然、その成長やプロジェクトに対してデザイナーのリソースは足りていません。私たちだけでは手が回らないなか、保守体制が構築できないまま、多数の制作会社にお願いしながら構築していったのです。そのため、サイト全体が積み木のような状態で構築され、ブラックボックスができてしまいました。これによりサイトの更新に時間がかかったり、反映されなかったりという不具合も頻発し、イベント開催時にはアクセスに耐えられない状態でした。

一方でN高、S高では、さらなる成長のためにプロモーションをかけていきますし、コンバージョン率の向上も求められます。そのためにはサイトの高速化が重要な反面、サイトの読み込みが遅く、離脱が激しい状態になっていました。こうした状況を打開しつつ、今後成長していくためにも、サイトの状態を整理する必要があると考え、リニューアルに至ったのです。

エンジニア領域を任せられたことでより戦略的な企画に注力

— ご依頼いただいた際の弊社のパフォーマンスはいかがでしたか。

ジェイ様：今までの制作会社は表側に見えている見た目の問題のみを解決することが多かったです。ただ、積み木状態のサイト構築で問題も多岐にわたるなか、保守体制も構築できていなかったため、技術領域のサポートが必要な状態でした。

そうしたなか御社は、私たちが目指す世界観と現状起きている課題を総合的に判断いただき、事前調査にも取り組んでいただきました。緊急性の高い課題の解決と同時に、中長期の問題も打破できる内容でご提案いただいたことに加え、将来設計まで対応いただき、安心してプロジェクトをお任せできました。

最終的には、従来WordPressで構築していたサイトを、Jamstackを基軸とした構造に変更。表側のデザインを変えずに裏側の構造だけを移管する形でリニューアルを行いました。

— サイトリニューアルした結果はどうでしたか？

ジェイ様：企画サイドもデザイナーサイドも保守に対する明瞭化ができました。どこに不安定な要素があるかわからない状態で走り続けてきましたが、どこをどうすればこうなる、というサイトの構造がかなり整理できました。

また、N高等学校・S高等学校のサイトにおいては社内にフロントエンドなどのエンジニア領域専門のメンバーがいないなかで、エンジニア領域を御社にお任せできるようになったことで、企画側としてやるべきことが明確になりました。例えば生徒数に対してサイトをどのように設計するかなど、より戦略的なことに取り組めるようになったことは非常に助かっています。

— 最後に、今後さらに弊社に期待したいことを教えてください。

ジェイ様：優秀なフロントエンドエンジニアを抱えることは、エンジニアやデザイン組織を抱える企業にとって経営的に重要な課題といえます。加えてそうした人材の確保は今後ますます困難になっていくことが予想されます。人材の流動性を考えると、社内外問わず課題解決できる方ならお任せしていきたいです。そうしたなか御社は、すでにフロントエンドの専門家が多く在籍している会社だと感じています。

ディレクションについても、営業寄りのディレクターが多いなか、御社はエンジニア寄りの方が多い印象です。ほかの制作会社では、打ち合わせの内容を持ち帰られることが多かったのですが、これは大きな機会ロスだと感じています。一方御社は、打ち合わせの場ですぐに回答が返ってきて、そうした面でも信頼を寄せています。

今後は、綿密に連携しながら人材の流動性も担保できるような体制を構築していきたいと考えています。そのためにも御社との関係性をさらに深めていって、素早く流動的にアサインできる状態をつくっていきたいです。

関連する事例・サービス

同じ技術スタックの事例

「WordPressからNext.js・microCMSへ移行してコンテンツ更新の速報性とページ表示スピードが大幅改善」

株式会社ALBA様（ゴルフ総合メディアサイト「ALBA.Net」）

こんな課題をお持ちの企業様へ

「WordPressのサイトが重くなってきた、セキュリティ対応が毎年コストになっている」

「複数の制作会社が関わり、サイト構造がブラックボックス化している」

「社内にフロントエンド専門のエンジニアがおらず、技術領域を任せられる外部パートナーを探している」

「イベントや繁忙期にアクセスが集中してもサイトが落ちない構成にしたい」

よくある質問

Q. WordPressからJamstackへの移行は、既存コンテンツやデザインを引き継げますか？

はい。ドワンゴ様のN高・S高サイトのように、表側のデザインを変えずに裏側の技術基盤だけを刷新する移行アプローチが可能です。既存コンテンツの移行方針・CMS選定・フロントエンド再構築まで、chot Inc.では一貫してサポートしています。

Q. Jamstackにするとアクセスが集中したときの安定性は上がりますか？

はい。Jamstackの静的生成（SSG）を活用することで、HTMLをCDNで配信する構成になり、サーバーへの負荷が大幅に軽減されます。ニコニコ超会議のような多くのユーザーが一度に訪れるイベントサイトでも安定した高速表示が実現できます。

Q. 社内にフロントエンドエンジニアがいませんが、リニューアル後の運用・保守は大丈夫ですか？

はい。microCMSなどのヘッドレスCMSを活用することで、非エンジニアのスタッフでもコンテンツの更新・追加が行える環境を構築できます。また継続的なフロントエンド開発支援・エンジニア常駐の形でのサポートにも対応しています。

Q. WordPressのプラグインや既存機能はJamstackに移行できますか？

WordPressのプラグインはそのままでは使えませんが、同等の機能をNext.jsとAPIで実装することが可能です。まず相談会で現状のサイト構成・利用中のプラグイン・必要な機能要件をお聞きし、最適な移行プランをご提案します。

Q. 大規模なサイト（数百ページ・複数チームが関わる構成）にも対応できますか？

はい。N高・S高合計生徒数24,000人規模のサイトや、ニコニコ超会議をはじめとする多数のイベント特設サイトを継続的に制作・運用してきた実績があります。複数チームが関わる大規模構成のリニューアルもご相談ください。

Q. WordPressのまま高速化・セキュリティ対応する方法はありませんか？

はい、WordPressを維持したまま改善することも可能です。ただし根本的な解決には限界があるケースも多く、相談会でまず現状の課題をお聞きしたうえで、WordPressの最適化で対応できるのか、Jamstackへの移行が適切かをご提案します。