LT on the story of renewed web media

1. メディアリニューアルした話

2. 初期(2019)

3. リニューアル１回目(2020)

4. リニューアル２回目(2021)

5. リニューアル３回目(2022)←今回の話

6. 限られた時間の中で効率よく実装する

7. 開発の背景
• 元々、既存のWrodPressのテーマをカスタマイズして使っていた
• 表示速度が遅い
• カスタマイズ性が乏しい（デザインや機能がテンプレートに依存する）
→いちからサイトを作り直そう！

8. 制作期間
• 3ヶ月くらい
• 2022年3月 だらだら環境構築
• 2022年4月 ほぼ何もしてない
• 2022年5月29日 本格スタート！
• 2022年8月1日 リリース！

9. 技術検討の話
• 使った技術
• HTML・CSS・SCSS・JavaScript・WordPress（PHP）、webpack、
Docker
• ReactやVueを使ったヘッドレスCMSも検討したが、今の段階ではオー
バースペックと判断
• 予期せぬ落とし穴もありそう
→今後拡張もしやすいWordPressを使ったベーシックな形で実装

10. 開発の流れ
• 環境構築（Docker、webpack）
• コーディング（HTML・CSS・SCSS・JavaScript）1,5ヶ月
• CMS化（WordPress）1ヶ月

11. 工夫したこと１
• SPAではないけど、できるだけ表示速度を速くする！
具体例）
• CSS・JavaScriptの圧縮→webpack
• スライダーの軽量化→keen slider
• 遅延ロード

12. 工夫したこと2
• SEO対策
https://www.notion.so/SEO-092ef291c38748fd90c775b598bc31ad

13. 工夫したこと3
• 既存のテーマでできたことは、できるようにした
具体例）
• 目次機能
• PV計測・ランキング機能
• CV計測機能
• クイックタグ （マーカー、プロフィール、ボタンなど）

14. 意外と苦労したこと
• メニューや検索窓など地味に作るのに時間がかかった
• 既存のテーマの仕様に引っ張られて表示がおかしいものの調整
- 既存のテーマで出力されていたHTML要素が想定と違った
- 使われていたショートコードのカバー
• 全体的に既存のテーマで当たり前にできていたことが、自作するとできな
くなることが多かった
- 画像表示系など

15. 今後やりたいこと
• ヘッドレスCMSに挑戦
• ToBメディアでよくある資料請求の機能を作る