社内の採用サイトを microCMS・Next.js・AWS Amplifyを使ってリプレイスした話

ジャムジャム！！Jamstack_6【初心者歓迎LT会】で話した内容です。
社内の採用サイトをmicroCMS・Next.js・AWS Amplifyを使ってリプレイスした時のことを話しました。

ジャムジャム！！Jamstack_6【初心者歓迎LT会】
https://jamjamjamstack.connpass.com/event/240403/

使用した技術というよりは、Jamstack化した理由や得られたメリットを中心にまとめました。

スライド37ページ目の補足記事はこちらです。
https://karukichi-blog.netlify.app/blogs/recruitment-site-replace

Transcript

1. 社内の採用サイトを microCMS・Next.js・AWS Amplifyを使ってリプレイスした話
2. カルキチ副島 フロントエンドエンジニア@ショーケース Twitter: @karukichi_yah GitHub: https://github.com/Yota-K 経歴 2020年4月にエンジニアになったので、エンジニアとしての実務経験は2年弱で す。 1社目ではWordPressを使ったサイト構築と社内ツール（PHP・Laravel）の開発に 携わっていました。 2020年5月からショーケースにジョインして、現在は自社SaaSアプリのフロントエ ンド開発（TypeScript・React、たまにVue）及び、技術選定に携わっています。 プロフィール
3. 今回の題材について
4. 社内の採用サイト WordPressから、microCMSを用いたJamstack構成にリプレイスを行いました。
5. リプレイスを行った経緯
6. 1, 表示崩れが目立っていた エンジニアではない人がサイトの構築に携わったこともあり、PCとスマホで見た時 の見え方しか考慮されておらず、表示崩れが目立っていた。 企業の顔である採用サイトがこれでは良 くないっ...！
7. こんな表示崩れが起きていました...
8. 横並びにはなっている けど左右の間隔が揃っ ていない ぱっと見ボタンだと分 からない
9. 表示崩れ
10. 幅が狭すぎて読みづらい Twitterのボタンと見出しが くっついちゃってる
11. 背景画像が繰り返してしまっている
12. 2, 見た目だけではなく、内部的な不備も目立っていた 内部的な不備としては、主に以下のような問題が発生していた。 • コンソールエラーが大量に発生していた • 動作しないページ内リンクが複数あった • 存在しないページがsitemap.xmlに登録されていた • メール送信のスパム対策を怠っていたため、スパムメールが大量送信される事 案が発生したことがあった 内部的、SEO的、セキュリティ的な面の不備が目立っていた！
13. 3, HTML・CSSの知識がある人しかサイトの更新がで きない状態になっていた CMSとしてWordPressを使用していたものの、テンプレートファイルを直接編集し てコンテンツの更新を行っていたため、HTML・CSSの知見がない人がサイトの更 新を行うことが困難な状態になっていた。
14. 4, 社内のサーバ代削減 月のPV数が1500程度にも関わらず、月平均で6000円程度と、PV数に見合わない 無駄なコストが発生していた。
15. リニューアル前のコスト 採用サイト 費用 7月 57.78USD・・・6602.75円 8月 57.75USD・・・6598.28円 9月 56.00USD・・・6398.34円 月の費用（平均） 6,532円
16. サイトのリニューアルに使用した技術
17. 採用サイトをリニューアルするのに使用した技術 • WordPress • PHP • AWS ◦ EC2 ◦ EBS ◦ Route53 ◦ WAF ◦ SES • microCMS • TypeScript • React • Next.js • Vanilla-Extract • AWS Amplify Before After
18. microCMS
19. 主な選定理由 ✔ HTML・CSSの知識がない人でもコンテンツの編集を行えるようにした かったから。 ✔ APIスキーマを自由に組むことができ、サイトの改修にも柔軟に対応で きると考えたから。 ✔ 法人でも無料プランで運用でき、アクセス数が増えたら有料プランへの 移行も可能だから。
20. TypeScript・React・Next.js
21. 主な選定理由 ✔ ヘッドレスCMSとの相性がいいから。 ✔ Next.jsのAPI Routesを使いたい処理が必要だったから。 →メールの送信処理で使用。 AWS SDKを使用してSESからメール送信できるようにしています。 ✔ 今後TypeScript・React・Next.jsを社内のフロントのコア技術として 採用することを考えており、上記の技術に触れられる環境を作るため。
22. Vanilla-Extract
23. Vanilla-Extractとは？ CSS in JS系ライブラリの一種。 CSSの記述をTypeScriptかつ、JSの オブジェクトスタイルで記述を行う ことができるため、型補完をフル活用 して、スタイルの記述を行うことが できるのが特徴。 style.css.ts
24. 主な選定理由 ✔ Scoped CSSを用いて、メンテナンスしやすいCSSを書きたかっ たから。 ✔ サイトの改修に関わるのはエンジニアのみのため、オブジェク トスタイルで記述できたほうが作業効率がいいと考えたから。 ✔ 興味本位。
25. AWS Amplify
26. 主な選定理由 ✔ 今後開発予定のサービスでAmplifyを採用する可能性があった ため、Amplifyの知見を社内に残しておきたかったから。 ✔ 社内のインフラは基本的にAWSで管理されており、リソースの 管理を複雑にしたくなかったから。
27. ただ、リニューアルするだけなら WordPressのままでもできたのでは？？
28. WordPressからmicroCMSに移行した 最大の理由は...
29. エンジニアと運用者側で編集できる部分の明確な線引き をしたかったから 改修前のサイトはエンジニア以外の人がサイトの構築・改修に携わっていたことも あって、表示崩れをはじめ、内部的、SEO的、セキュリティ面など様々な問題が発 生していた。 各々の作業領域を明確化することで、上記のような問題の再発を防ぐことができる のではと考えた。
30. お互いの担当業務が明確じゃないとこんなことが起こる 可能性があります 表示崩れまくってるし、 エラーいっぱい出てる し、どうしてくれるん じゃい！！ サイトの更新か... とりあえずここをこ ういじってこうすれ ばいけるんじゃ ね！？！？ エンジニア 運用者 お互いの作業領域が明確に なっていないと...
31. お互いの担当業務を明確にすることで、サイトの品質を 保つ事に繋がる CMS側で編集できない 部分は自分たちにお任 せあれ！ CMS側で編集可能な 部分の更新だけやれ ばいいのかー！ HTML、CSS、JavaScript などはエンジニアが編集する。 エンジニア 運用者
32. リプレイスをすることによって 得られた成果
33. 得られた成果を書く ✔ 運用者（人事）の方から、「編集しやすくなった」、「サイト が見やすくなった」とお褒めの言葉をいただいた。 ✔ サイトの運用にかかるコストが削減できた。 ✔ 社内でReact・Next.jsなど、モダンなフロントエンド技術が積 極的に導入されるようになった。
34. リニューアル後のコスト 月のコストを0円に抑えることに成功！ 🎉 ※Route53のホストゾーンやドメイン代の料金は除く 採用サイト 費用 2月 0USD・・・0円 月の費用（平均） 0円
35. 今日紹介できなかったこと
36. 紹介できなかったこと ✔ microCMSを社内に導入する上でやったこと ✔ リニューアルを行う際に技術的に大変だった部分
37. 今回執筆仕切れなかった部分はブログにまと めたのでブログの方をご覧ください。
38. ご静聴ありがとうございました