chot Inc.

chot Inc.

CASE

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

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

株式会社ドワンゴ

株式会社ドワンゴ

デザインセンター センター長 木村 雅幸(ジェイ)様

日本有数のコンテンツ配信事業者である株式会社ドワンゴ。動画配信サービスを中心とした「ニコニコ」を運営するほか、リアルイベントとして「ニコニコ超会議」など多くのイベントを開催しています。また2016年には株式会社KADOKAWAと「N高等学校」を開校し、教育事業も展開されています。


今回はドワンゴ様がちょっと社のJamstackをご導入いただいた背景について、デザイン統括を担当する木村 雅幸(ジェイ)様に当社代表の小島がお話をうかがいました。

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

左:弊社代表小島、右:ジェイ様

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

ジェイ様:結構前から知り合いの知り合いという程度でしたよね。最初にお仕事を依頼したのはそこからだいぶ時間が経ってからで、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高等学校のサイトにおいては社内にフロントエンドなどのエンジニア領域専門のメンバーがいないなかで、エンジニア領域を御社にお任せできるようになったことで、企画側としてやるべきことが明確になりました。例えば生徒数に対してサイトをどのように設計するかなど、より戦略的なことに取り組めるようになったことは非常に助かっています。

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

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


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


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

左:ジェイ様、右:弊社代表小島

back to Case