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

初期(2019)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tsumiki

More Decks by tsumiki

Other Decks in Programming

Featured

Transcript