社内の採用サイトを 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を使ってリプレイスした話
   

   View Slide

2. カルキチ副島
   フロントエンドエンジニア@ショーケース
   Twitter: @karukichi_yah
   GitHub: https://github.com/Yota-K
   経歴
   2020年4月にエンジニアになったので、エンジニアとしての実務経験は2年弱で
   す。
   1社目ではWordPressを使ったサイト構築と社内ツール（PHP・Laravel）の開発に
   携わっていました。
   2020年5月からショーケースにジョインして、現在は自社SaaSアプリのフロントエ
   ンド開発（TypeScript・React、たまにVue）及び、技術選定に携わっています。
   プロフィール
   

   View Slide

3. 今回の題材について
   

   View Slide

4. 社内の採用サイト
   WordPressから、microCMSを用いたJamstack構成にリプレイスを行いました。
   

   View Slide

5. リプレイスを行った経緯
   

   View Slide

6. 1, 表示崩れが目立っていた
   エンジニアではない人がサイトの構築に携わったこともあり、PCとスマホで見た時
   の見え方しか考慮されておらず、表示崩れが目立っていた。
   企業の顔である採用サイトがこれでは良
   くないっ...！
   

   View Slide

7. こんな表示崩れが起きていました...
   

   View Slide

8. 横並びにはなっている
   けど左右の間隔が揃っ
   ていない ぱっと見ボタンだと分
   からない
   
   
   

   View Slide

9. 表示崩れ
   
   

   View Slide

10. 幅が狭すぎて読みづらい
    Twitterのボタンと見出しが
    くっついちゃってる
    
    
    

    View Slide

11. 背景画像が繰り返してしまっている
    
    

    View Slide

12. 2, 見た目だけではなく、内部的な不備も目立っていた
    内部的な不備としては、主に以下のような問題が発生していた。
    ● コンソールエラーが大量に発生していた
    ● 動作しないページ内リンクが複数あった
    ● 存在しないページがsitemap.xmlに登録されていた
    ● メール送信のスパム対策を怠っていたため、スパムメールが大量送信される事
    案が発生したことがあった
    内部的、SEO的、セキュリティ的な面の不備が目立っていた！
    

    View Slide

13. 3, HTML・CSSの知識がある人しかサイトの更新がで
    きない状態になっていた
    CMSとしてWordPressを使用していたものの、テンプレートファイルを直接編集し
    てコンテンツの更新を行っていたため、HTML・CSSの知見がない人がサイトの更
    新を行うことが困難な状態になっていた。
    

    View Slide

14. 4, 社内のサーバ代削減
    月のPV数が1500程度にも関わらず、月平均で6000円程度と、PV数に見合わない
    無駄なコストが発生していた。
    

    View Slide

15. リニューアル前のコスト
    採用サイト
    費用 7月 57.78USD・・・6602.75円
    8月 57.75USD・・・6598.28円
    9月 56.00USD・・・6398.34円
    月の費用（平均） 6,532円
    

    View Slide

16. サイトのリニューアルに使用した技術
    

    View Slide

17. 採用サイトをリニューアルするのに使用した技術
    ● WordPress
    ● PHP
    ● AWS
    ○ EC2
    ○ EBS
    ○ Route53
    ○ WAF
    ○ SES
    ● microCMS
    ● TypeScript
    ● React
    ● Next.js
    ● Vanilla-Extract
    ● AWS Amplify
    Before After
    

    View Slide

18. microCMS
    

    View Slide

19. 主な選定理由
    ✔ HTML・CSSの知識がない人でもコンテンツの編集を行えるようにした
    かったから。
    ✔ APIスキーマを自由に組むことができ、サイトの改修にも柔軟に対応で
    きると考えたから。
    ✔ 法人でも無料プランで運用でき、アクセス数が増えたら有料プランへの
    移行も可能だから。
    

    View Slide

20. TypeScript・React・Next.js
    

    View Slide

21. 主な選定理由
    ✔ ヘッドレスCMSとの相性がいいから。
    ✔ Next.jsのAPI Routesを使いたい処理が必要だったから。
    →メールの送信処理で使用。
    AWS SDKを使用してSESからメール送信できるようにしています。
    ✔ 今後TypeScript・React・Next.jsを社内のフロントのコア技術として
    採用することを考えており、上記の技術に触れられる環境を作るため。
    

    View Slide

22. Vanilla-Extract
    

    View Slide

23. Vanilla-Extractとは？
    CSS in JS系ライブラリの一種。
    CSSの記述をTypeScriptかつ、JSの
    オブジェクトスタイルで記述を行う
    ことができるため、型補完をフル活用
    して、スタイルの記述を行うことが
    できるのが特徴。
    style.css.ts
    

    View Slide

24. 主な選定理由
    ✔ Scoped CSSを用いて、メンテナンスしやすいCSSを書きたかっ
    たから。
    ✔ サイトの改修に関わるのはエンジニアのみのため、オブジェク
    トスタイルで記述できたほうが作業効率がいいと考えたから。
    ✔ 興味本位。
    

    View Slide

25. AWS Amplify
    

    View Slide

26. 主な選定理由
    ✔ 今後開発予定のサービスでAmplifyを採用する可能性があった
    ため、Amplifyの知見を社内に残しておきたかったから。
    ✔ 社内のインフラは基本的にAWSで管理されており、リソースの
    管理を複雑にしたくなかったから。
    

    View Slide

27. ただ、リニューアルするだけなら
    WordPressのままでもできたのでは？？
    

    View Slide

28. WordPressからmicroCMSに移行した
    最大の理由は...
    

    View Slide

29. エンジニアと運用者側で編集できる部分の明確な線引き
    をしたかったから
    改修前のサイトはエンジニア以外の人がサイトの構築・改修に携わっていたことも
    あって、表示崩れをはじめ、内部的、SEO的、セキュリティ面など様々な問題が発
    生していた。
    各々の作業領域を明確化することで、上記のような問題の再発を防ぐことができる
    のではと考えた。
    

    View Slide

30. お互いの担当業務が明確じゃないとこんなことが起こる
    可能性があります
    表示崩れまくってるし、
    エラーいっぱい出てる
    し、どうしてくれるん
    じゃい！！
    サイトの更新か...
    とりあえずここをこ
    ういじってこうすれ
    ばいけるんじゃ
    ね！？！？
    エンジニア 運用者
    お互いの作業領域が明確に
    なっていないと...
    

    View Slide

31. お互いの担当業務を明確にすることで、サイトの品質を
    保つ事に繋がる
    CMS側で編集できない
    部分は自分たちにお任
    せあれ！
    CMS側で編集可能な
    部分の更新だけやれ
    ばいいのかー！
    HTML、CSS、JavaScript
    などはエンジニアが編集する。
    エンジニア 運用者
    

    View Slide

32. リプレイスをすることによって
    得られた成果
    

    View Slide

33. 得られた成果を書く
    ✔ 運用者（人事）の方から、「編集しやすくなった」、「サイト
    が見やすくなった」とお褒めの言葉をいただいた。
    ✔ サイトの運用にかかるコストが削減できた。
    ✔ 社内でReact・Next.jsなど、モダンなフロントエンド技術が積
    極的に導入されるようになった。
    

    View Slide

34. リニューアル後のコスト
    月のコストを0円に抑えることに成功！ 🎉
    ※Route53のホストゾーンやドメイン代の料金は除く
    採用サイト
    費用 2月 0USD・・・0円
    月の費用（平均） 0円
    

    View Slide

35. 今日紹介できなかったこと
    

    View Slide

36. 紹介できなかったこと
    ✔ microCMSを社内に導入する上でやったこと
    ✔ リニューアルを行う際に技術的に大変だった部分
    

    View Slide

37. 今回執筆仕切れなかった部分はブログにまと
    めたのでブログの方をご覧ください。
    

    View Slide

38. ご静聴ありがとうございました
    

    View Slide