JAMstack×WordPressで開発。サイトリニューアルの裏側を直撃

D2C dotは、2020年5月にコーポレートサイトをリニューアルしました！

2017年に社名変更のタイミングでリニューアルした以前のサイトは、担当させていただいた案件をメインに紹介するポートフォリオサイトのような構成になっていました。

▼以前のサイトがこちらです。TOPページは案件のみが表示される構成でした。

それから約3年が経ち、当時50名ほどだったメンバー数が、現在は130名を超えるまでに成長し、さらに幅広く多彩なスキルを持つメンバーで構成されるようになりました。そのため、担当させていただく案件の数も右肩上がりに増え、相談・依頼内容の幅も広がり、自ずと募集する職種や求める人物像の幅も広がり続けています。

会社の成長に合わせて、コーポレートサイトも変えていった方がいいよね！という声が社内で起き始めたことや、新たな広報メンバーも加わり、広報活動をもっと活発にしていきたい！という私の意思もあり、今回のコーポレートサイトリニューアルが実現しました！

≪今回のサイトリニューアルのポイント≫
・インターフェイスのコンセプトは｢わかりやすくて使いやすい｣
・サイトの役割は①採用②会社紹介の2点に絞る
・上記の役割によるJOIN US（採用）ページの拡充
・広報担当者がサイトを更新できるよう管理ツールを導入

▼リニューアルしたサイトがこちらです！

TOPページでは、経営理念である「伝えたいコトを伝わるカタチに」を英訳した、“Bring your Message to LIFE”というコピーと、“多種多様な人たちが集まり、様々な関わりあいを重ねて変化していく”ことを、有機的に色を変えるグラデーションで表現しています。

弊社代表のnoteでもリニューアルについて紹介しています。

今回の記事では、開発面を中心にフロントエンドエンジニアの松下とサーバーサイドエンジニアの鈴木翔太に、元エンジニアで現在人事を主務とする北郷と広報の長岡で話を聞きました。

｜新しい技術を試せるチャンスとして取り組んだリニューアルプロジェクト

―コーポレートサイトリニューアルについての与件から、どのように開発方法を検討されたのでしょうか？

松下：まずディレクターメンバーが中心になり、与件からサイトの構成を落とし込み、開発方法もあわせて検討したのですが、結果、機能面とデザイン面でのやりたいことが担保されていれば、どのように開発するかは開発部側で選択できることになりました。それなら、新しい技術を試してみたい、挑戦したいと思い、個人的に気になっていたJAMstackを使った開発を鈴木さんに提案しました。

―松下さんからの提案に対して、鈴木さんから反対意見などは無かったのでしょうか？お二人ともクライアントワークとの同時並行になるかと思いますので、限られた時間の中で対応することを考えると、慣れている開発方法の方が負担が少ないと思うのですが。

鈴木：それは全然無かったですね（笑）実は松下さんから聞いて初めてJAMstackのことを知りました。調べてみたところ、今回のリニューアルでも対応できそうなことが分かり、私自身も試してみたいと思いました。クライアントワークに支障が出ないよう開発していくので、業務量は増えますが、その分最新の技術を使って開発できることを自分のモチベーションにつなげて取り組みました。

松下：クライアントワークだとスケジュールや要件などの制約がありますが、自社サイトなら比較的自由に開発することができるので、新しい技術を試せるチャンスだと思い提案しました。

―自社サイトの制作を、新しい技術を試す場、挑戦する場としてプラスに転換し前向きに取り組んでいただけたことが分かりうれしいです！

｜ゴールはJAMstackを使った開発

―リニューアルプロジェクトのメンバーの中でも、松下さんと鈴木さんは特に連携が必要なポジションだったかと思います。お互いがスムーズに開発を進められるよう意識したことはありますか？

松下：鈴木さんとは、今まで同じ案件に携わり一緒に開発を行う機会が多かったので、既に良い関係を築けていたと思います。気を遣わなくても意図を汲み取ってくれるだろうという安心感や信頼感がありました。

鈴木：そうですね、もともとクライアントワークでコミュニケーションを取っていたので、変に気を遣うことなくスムーズに連携できていたと思います。

松下：1点だけ、開発を始める前に最終的な開発のゴールは決めてお互いの認識をあわせることをしました。今回ですと「JAMstackを使って開発すること」です。あとはフロントエンド側、サーバーサイド側それぞれで必要な開発を進めていきました。

―実際開発してみていかがでしたか？初めての開発手法だと戸惑うこともあったのではないでしょうか？

松下：そうですね。Vue.jsに基づいたフレームワークであるNuxt.jsを使用したのですが、Nuxt.jsを静的サイトジェネレーターとして使う中で、これまでの知見をそのままでは活かすことができない、JAMstackとしての最適解が見つからない、といった点で苦労しました。

鈴木：サーバーサイド側も開発を進めていく中で問題が発覚し、焦る場面が何回かありました。

今回CMSはWordPressを使用したのですが、元々WordPressはJAMstack用に作られていないんですよね。使用できるようにするためにカスタマイズが必要になるのですが、そこにまず戸惑いました。

また、WordPressを動作させるサーバーは管理画面にAPI機能を持たせているので、サイト閲覧者がサーバーへアクセスする必要がありません。それで、IPアドレスによる制限をかけているんですが、制限をかけると、そのサーバーに対して外部のサービスや人はアクセスできなくなります。
ビルドはAWSのCodeBuildで行っており、CodeBuild上で動くコンテナはIPアドレスを持てないので、CodeBuildからWordPressのAPIにアクセスできないことが発覚しました。

調べた結果、WordPressがのっているサーバーと同じVPC内でCodeBuildを実行させることができると分かり、無事解決することができました。
この時は開発方法を変更しないといけないかと思い、焦りましたね。

｜この先のチームのことも考慮した技術選定

―なぜJAMstack用に作られていないWordPressを選んで開発されたのでしょうか？

松下：今回、私や鈴木さんが新しい技術を試したいというだけでなく、今後はクライアントワークでもJAMstackを使っていきたいと思っていました。WordPressは以前からあるCMSで、いろんな人の知見が詰まっています。サイト更新担当になる人も、WordPressの管理画面を触ったことがある人は多いので、レクチャーの時間が短くすむのも利点です。今回のプロジェクトだけでなく先のことを考えた結果、まずはWordPressで開発しようと思いました。

―今回の開発で1番大変だったことは何でしょうか？

松下：新しい技術での開発だったというのもありますが、ちょうど私たちがクライアントワークの納期が集中している時期と重なってしまい、十分な時間を確保できないなかでの開発だった点ですね。クライアントワークと自社サイトリニューアルそれぞれに割く時間配分が大変でした。

鈴木：役割的に、松下さんが作業に取り掛かる前に、WordPress側とWordPressのAPI環境を用意しておかないといけなかったのですが、私もがっつり納期と重なってしまい、なかなか時間が確保できませんでした。クライアントワークにも支障がでないように、かつ松下さんに空き時間ができないよう開発していかなければならず、やはり時間配分や進行管理に割く工数が大きく、そこが一番大変でしたね。

松下：ただお互いとても大変な状況ではありましたが、私も鈴木さんも、他の開発部のメンバーを巻き込み協力してもらうことができました。開発部のメンバーには、何より感謝しています！

―開発部全体で忙しい時期だったかと思いますが、皆さん協力してくれたのですね。

鈴木：私の場合、チーフの大浪さんに協力してもらいました。大浪さんはAWSやWordPressの知見が豊富なので、協力してもらえるとめちゃくちゃ助かるんですよね。ただ、単純に「教えてください」と頼んでしまうと自分の学びが減ってしまうので、「こういう設計にしますが、大浪さんとしてはどうですか？」と投げかける形で巻き込みました。開発時間が無いとはいえ、自分で考え・決めることはやめたくないと思い、進め方は意識しました。

松下：フロントエンド側では、東京オフィスだけでなく沖縄オフィスのエンジニアにも声をかけ協力してもらいました。D2C dotのメンバーは自分が担当していないことであっても、相談すると前向きに協力してくれる人が多いのが魅力ですよね。

鈴木：たしかに。開発部のメンバーに限らず、今回のリニューアルプロジェクトに携わっているメンバーにも感じました。クライアントワークではないからと言って惰性で取り組むのではなく、皆熱意を持って真剣にプロジェクトに向き合い取り組んでいました。その姿勢に自分も感化された部分はありましたね。

―今後はどのような開発に取り組んでいきたいですか？

松下：今回のJAMstackの開発をきっかけに、他の開発部のメンバーからも質問や議論が生まれ、社内の開発手法として磨いていこうという話が出てきています。新しい取り組みのきっかけを作ることができ、挑戦して良かったなと感じています。今後は他のメンバーと一緒に、JAMstackに関連するサービスや言語の技術検証・研究を行っていきたいと思っています。そして、クライアントワークでも使えるようになりたいですね。

鈴木：私も、引き続きJAMstack×WordPressについて理解を深めながら、JAMstackに最適化されたCMSを使った構成も経験したいと思っています。どのCMSが1番ベストなのか、依頼者のニーズに1番あった組み合わせは何なのか、提案できるようにしていきたいです。

―松下さん、鈴木さん、ありがとうございました！

D2C dotは、案件の多様性に対応するため、募集する人材にも多様性を求めています。1つのことしかやらないというよりは多くのことをやりたい、多くのことを経験してきたからもっと成長したい、という方が活躍しやすい環境です！

コーポレートサイトにエンジニアメンバーのWORK STORYを公開しています。