---
title: メディアリニューアルした話
tags: 
author: [Tsumiki](https://convert.docswell.com/user/tsu-miki)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y76LZK9DJV.jpg?width=480
description: WordPressの既存テーマで作成されていたメディアを独自テーマでリニューアルした話
published: December 23, 25
canonical: https://convert.docswell.com/s/tsu-miki/5QXV2W-media-renewal
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/Y76LZK9DJV.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G751WPN8E4.jpg)

初期(2019)


# Page. 3

![Page Image](https://bcdn.docswell.com/page/9J21Q65V7R.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DEYZW9KQ7M.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJN39LR2J8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YE9924MDE3.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GE895QL57D.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LELWYXL3JR.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JM9NLMMEW.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PJRGDKVLE9.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PEXX1LW6EX.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3EKW2LVGED.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L73143M5J5.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/87DXQ46YEG.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VJPPLMY2J8.jpg)

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


