2020年7月にウェブプロダクションまとめサイトである「good productions」をリリースしたデパートを取材させていただきました。

なぜ、今これを作ったのか？

今井取締役を中心に、開発の中心人物であるテクニカルディレクターの板鼻さんとフロントエンドエンジニアの毛利さんにもお話を伺いました。

そこには、時代の流れを読み、新しい技術の獲得に貪欲なデパートの姿が見えてきました。

なお、デパートではコロナ禍で新しい働き方の一環としてリモートワークを実施しているため、取材はリモートで行われました。

POINT!
■プロジェクトを通して独自ノウハウを蓄積
■使ってみてわかった「NuxtJS」と「microCMS」の課題と学び
■新技術の今後の活用と展開

ーー今回開発された「good productions」とは、どういったものなのでしょうか？

今井：「good productions」はウェブプロダクションのまとめサイトで、国内の優れたWeb制作会社やデザイン会社の企業情報や実績をまとめて紹介しています。

ーーなぜ、今「good productions」を作ったのでしょうか？

今井：プロジェクトを立案した背景は2つあります。

1つ目は、弊社のフロントエンドエンジニアの毛利くん。今年の目標を決めるときに、「エンジニアリング×フロントエンド」の部分をもう少し強くしたい、という要望を出していました。その中で、毛利くんから「こういうものを作ってみたい」という提案をもらい、実案件ではあまり実現しないものを作り、ノウハウを蓄積しましょう、ということになりました。

2つ目が、某Web制作会社のまとめサイト。弊社のウェブサイトへの流入を調べていると、このサイトから何件かアクセスがありました。内部的なコンテンツも構造もそれほど難しくなく、しっかりと設計すれば集客できる、と感じました。

また、世の中にはBtoBのウェブプロダクションのマッチングサイトはたくさんあるのですが、どうしてもお金を払っているところが優先されていて、本当に必要なものが必要なところに紹介されていない、という印象を受けていました。

こういった理由から、中立の立場で情報提供をしたいと考え、弊社で開発することにしました。

ーー内部的にはどういった技術を使用しているのですか？

今井：フロントエンドの技術とヘッドレスCMSを使いたい、という理由から「NuxtJS」と「microCMS」という技術をベースに使用しました。

ーーディレクターとして、実務ではどのように活かせる技術なのでしょうか？

今井：現在主流のCMSではコンテンツに見た目的な要素（View）が混ざっていますが、今後はマルチデバイス化に伴い、コンテンツとViewの分離が進むはずです。それにより、従来CMS側で行っていたコントロールをView側で行うことが必然的に多くなると思います。会社としては、（サーバー側でコンテンツとViewを作る従来の）CMSよりも、（Viewの処理を行う）フロントのフレームワークを扱えるようになることが重要になってきます。今回のプロジェクトを通して、その知識をかなり蓄積できたと感じています。

ーー「NuxtJS」についてもう少し詳しく教えていただけますか？

今井：全体の設計やどの技術を使うかといった大枠を決めたテクニカルディレクターの板鼻さんから説明をお願いします。

板鼻：現在、JavaScriptのフレームワークであるNuxtJSが流行っています。どういうフレームワークかというと、APIやアプリのデータの取り扱い、操作、編集、そしてそれをブラウザに表示させるところを機能として備えています。また、アプリのようなUXを実現するための非同期遷移・スムーズな移動やユーザーのアクションに対するレスポンスを可能にします。昔は自前で用意しなければならず手間がかかっていたものが、最初から用意されていて使い勝手がよくなっています。

今井：開発も早くなり安定性もあり、とてもイージーです。

ーー「good productions」の開発を通してどういったことを学びましたか？

今井：NuxtJSは、非同期のシングルページアプリケーション（SPA）、例えば「rakumo」のようなサイトの開発に向いていると思います。逆に「good productions」のようなサイトには向いていないということが実際に開発してみてわかりました。

JavaScriptでページを描画するとSEO対策にならないため、現時点ではサーバー側でページを生成する必要があります。今回は、Googlebot（クローラ）に対しては静的なページを表示できるように実装しました。APIからデータを取得しなければならない場合でも、こういう使い方がある、という提案はできると感じています。

ーー今回開発を担当されたフロントエンドエンジニアの毛利さん、このプロジェクトを通して感じたことを教えてください。

毛利：今までのjQueryなどのライブラリと比べて圧倒的にやりやすいな、と思ったのがCMSから取得してきたデータを描画に連携して表示させる部分でした。今回は、microCMSから記事のJSONデータを取得してきてNuxtJSで加工していますが、microCMSのデータの加工をフロント側でやるのは思ったより大変でした。CMS側でデータを作ったものを取得してフロントで表示するだけ、という風にできると、フロント側は書くことが少なくなり負荷が減ると思いました。

また、NuxtJSのプラグインはjQueryのプラグインなどと比べて使いづらいと感じました。まだノウハウがあまりたまっていないため、特殊な使い方をしたいときにわからないことが多く、時間がかかってしまいました。

今井：NuxtJSはどういう案件に向いていますか？

毛利：ランディングページ （LP）を作る場合などにNuxtJSを使うのはオーバー過ぎると思います。データをAPIなどで取得して描画する、というような場合はNuxtJSを使うとやりやすいと思います。

今井：ディレクター側の目線では、検索系やレコメンドエンジン系、顧客接客ツールのカスタマイズ、マイページなどに向いてると思います。

ーー今回使用した新技術で今後どのような展開を考えていますか？

今井：今回開発した「good productions」をこのまま展開するには課題がありますが、CMSをmicroCMSからWordPressなどに変更すれば提案できると思います。また、メディアの移設などは楽になるのではないかと感じています。今後はコンテンツ制作やオウンドメディアなども展開していきたいと考えていますので、この経験が活かせると思います。

ーー最後に

今回は、コロナ禍で新しい働き方の一環としてリモートワークを実施しているデパートをリモート取材させていただきました。

時代の流れを読み、常に新しいことに挑戦し続けるデパートの皆さんの姿から、たくさんの刺激を受けました。

今までの経験を活かし、新たな挑戦を通して自己の成長を目指したい、という意識の高いディレクターやクリエイターの方には、これ以上ない職場ではないかと感じました。