国内No.1のレシピ動画プラットフォーム「クラシル」および国内No.1のライフスタイルメディア「TRILL」を運営するdely株式会社様。今回、ちょっと社は「クラシル」から生まれた、キッチン用品や調理家電など幅広いジャンルの商品の選び方やおすすめ商品を紹介する情報サイト「クラシル比較」の制作をお手伝いしました。

制作の経緯や、ちょっと社にご依頼いただいた理由について、エンジニアの野々山様に、担当エンジニアの高崎とお話をおうかがいしました。

野々山

「クラシル」の中で、キッチン用品や調理家電の紹介記事を展開したことが始まりです。この記事フォーマットのコンテンツが伸びたので、新しくサブドメインに記事コンテンツサイトを立ち上げつつ、料理以外のジャンルにも広げていくプロジェクトが立ち上がりました。

サイトを新たに作るのであれば、「クラシル」とソースコードを分離して、インフラやフロントエンドのフレームワークなどの技術選定について本体よりもさらにモダンなもので進めましょうという話になりました。

野々山

今回、Webサイトのフレームワークを「Next.js」で決定したのですが、一番の理由は著名なフレームワークなため、ナレッジの豊富さや、今後の人材採用で強みが発揮されると思ったからです。そして、Next.jsに強みを持つパートナーで調べると、ちょっと社さんがヒットしました。

いくつかの企業について調べていく中で、ちょっと社は、Jamstackなどのフロントエンド技術に特化して発信する企業として異彩を放っていました。これからクラシル比較で多くのコンテンツを配信していく中で、Jamstackのような技術や知見は避けては通れないと感じていましたので、実績と知見のある御社にと思って依頼しました。

野々山

事業会社特有の性質だと思いますが、クラシル比較は事業部内に種別の違うステークホルダーが複数います。プロダクトの主軸になる機能開発を進めたいプロダクトチーム、記事の執筆や配信の管理をしたいコンテンツチーム、特殊な排他条件を捌くことを必要とする広告チーム・ビジネスチームなどです。

基本的にクラシル比較の開発は少人数でのアジャイル開発で、プロダクトの基礎となる機能開発においては、デザイナーのモックアップを起点として開発の設計が行われます。しかし、機能開発以外のタスク、例えば・ビジネスチームからの開発要望・広告担当者の配信要望への対応・その他緊急度の高い対応などは、ステークホルダの要望の緊急度の高さや抽象度の高さが異なり、単にアジャイル開発と言ってもその「性質」が異なります。

このタスクごとの「性質」の相違は、社外のエンジニアが参画する上で混乱を招く要素だと不安視していました。しかし、ちょっと社は、この違いに真面目に向き合って適応してくださり、実際思っていたより遥かに不安が杞憂だと思ったときは、本当にありがたかったです。

2つ目が、単純にアウトプットの量です。実は、今回の開発はサイトのリリースだけでなく、裏側のCMSの部分もゼロから開発しています。55営業日しかない中でサイトとCMSの両方の開発を行ったわけですが、過密な開発スケジュールの中、進行スケジュールや温度感をしっかり守って取り組んでいただき、大変感謝しております。

リリース後も、機能の追加・修正が行われましたが、アウトプット量を落とすことなく、プロダクトの状況に応じて、柔軟にチームの配置が最適化されたのも印象的です。例えば、「CMSのある機能について大きな改善が必要だが、Webサイトのデザインも継続して更新したい」という状況のとき、弊社デザイナーとちょっと社の高崎さんの2人タッグという超ミニマム体制なチームで後者の継続課題に望むことができ、結果、delyのエンジニアは前者の問題改善にフルコミットで取り組めました。正直言って、この時期は大変助かりましたし、この柔軟さには感嘆しておりました。

クラシル比較は、シンプルなメディアとしての側面に加え、独自の機能を持たせてオンライン上での購買体験における新しい価値を作っていきたいと考えデザインしており、見た目以上に複雑な実装が点在しています。そのため、仕様が思ったより複雑になることがあります。その中で高崎さんから「こうしたら実装的にもよさそうです」だったり、「デザインではこうなっていたけどこの方が良さそうだったので、こうしませんか？」などのご提案をいただくことが多く、本当に助かっておりました。

高崎さんとのやりとりを通して、より良いものが作れているという実感があります。

高崎

とても嬉しいお言葉をいただきありがとうございます。実装を考慮してデザインしていただけたことはもちろん、それまでの指示系統がわかりやすく、開発しやすい環境をつくっていただけたことがあってこそ注力できたと思っています。

高崎

ホスティングサービスを提供するVercelと国内初のパートナーシップを締結していることもあって、Vercelサイドと密に連携して本プロジェクトのランニングコストの試算などをご提案できたことがひとつです。

また、Next.jsのナレッジが社内に多数あることから、私だけでなくメンバーと相談して解決に導けたケースもありました。

野々山

インフラ周りの申請においては、御社のサポートがあってスムーズに進みました。開発を委託している会社にインフラの部分を調整していただくなんて聞いたことがないです。笑

細かな試算を含めてホスティングサービス側と密に連携できることはないので本当に助かりました。おかげで意思決定がしやすかったです。

また、今回はNext.jsの先導者に教えを乞うという意味合いで御社に依頼したところもあるのですが、delyにとってもナレッジを貯める良い機会になったと思っています。

高崎

個人的にはNext.jsのバージョン13.4系、App Routerが出始めて間もない頃に採用したことだと思いますがいかがでしょうか？

野々山

同感です。これまでのPages Routerではなく、App Routerという新しいアーキテクチャを採用したことがひとつですね。今時点では、既存のPages Routerでつくられたものはたくさんありますし、当然ながらナレッジも多くて有利です。

でもこれからApp Routerの時代になる数年先を見た時に、PagesRouterを採用したままな状況が、デメリットを表出させることは明らかだったため、思い切ってApp Routerを採用しました。

たとえナレッジが少なくて今は不利だったとしても、何も作れない訳ではないというスタンスで意思決定をしました。実際、公式ドキュメントからのキャッチアップを含めて前向きに取り組めましたし、慣れれば簡潔なフレームワークなので、採用して後悔したなどは一切ないです。

もうひとつのチャレンジはやはり独自開発したCMSの中にある「記事エディター」です。コンテンツチームの要望で、執筆体験の向上のために、「Notionみたいに書けるエディターが欲しい」というものがあり、これを実現するために、Editor.jsをエンジンに採用し、クラシル比較で登場する独特なUIをEditor.jsで呼び出し・編集できるように、専用のReactコンポーネントを掛け合わせて、完全独自のWYSIWYGエディタを作りました。

アーキテクチャを簡素にするために、Next.jsの範疇だけで開発したいけれど、要件によってはそれが不可能な部分はどうしても出てくる。スピーディーな価値提供と、開発・改修のしやすさとの両天秤に悩みながらも、新しく、そしてナレッジのない技術を用いてしっかりUI/UXを良くする取り組みができたと思っています。

ライターや編集担当からのフィードバックも好感触で、自社専用のCMSを作る決断をして良かったですし、改善を含めて技術的なチャレンジでした。

野々山

おかげさまで社内からは良い評価をもらってます。スタートからリリースまで55営業日という日程の中、オンスケジュールで進行しリリースを達成できたことは謙遜なく誇って良い部分かと。

フレームワークをNext.jsにしたことで、クラシル比較での主要機能は格段に開発しやすくなりました。そのため、新機能をテンポよく検証・リリースすることができるのも大きいです。

また、クラシルのドメインを継承したこともあってSEOも順調に伸びています。足元を見てこれからも一歩一歩しっかりと前進していきます。

野々山

ちょっと社と、高崎さんに対して信頼感と安心感があり、やるべきことに集中できたと感じています。急な仕様変更においても良い意味で遠慮なく依頼できましたし、すぐに対応していただけたことも含め、安心して開発に集中できました。

クラシル比較は、これから独自の機能や価値を提供するフェーズに入っていきます。昨今はVUCA時代と呼ばれることもあり、良いと思った機能がウケなかったり、状況が変わってしまうこともあったりして、プロダクトを挫折なく成長させることは難しいと言えます。

そんな時代を生き抜いていくには、屈することなくフィードバックと改善のサイクルをいかに早くするかが不可欠です。そのためには、開発者がそのサイクルに、チームでグルーヴを持って楽しむ必要があると思っていて、それが、令和以降のエンジニアに必要な力だと思っています。

ちょっと社にはそのグルーヴ感を含め、他社からは得られないものがあります。これからもサポートは不可欠だと思っていますので、ぜひよろしくお願いします。

---

クラシル比較