# 自転車保険サイトリニューアルに関する技術的アップデートについて

2Q-3Q で自転車保険サイトをリニューアルする計画。
技術負債の多い環境であるため、技術スタックのアップデートと同時にユーザビリティの大きな向上を目指している。

## 目次

- 現状の課題
- リニューアルの目的
- 技術的な現状課題
- 現サイトの技術構成
- アップデートの計画
- Jamstackのメリット/デメリット

## 現状の課題

### サイトがダサい

デザイン以前の問題。
誰のためのサイト？（ターゲティングができていない）

### アクセスがSEOに傾向しすぎ

オーガニックとダイレクトで90%を超える

### アクセスが年々減ってる

去年対比で30%減
ここ2年コンテンツがほとんど増えてない。
競合に対して検索順位も全体的に下がってる。

### コンバージョンを取るためのコンテンツしかない

検索順位が下がっているので、相対的に売上が下がってる
アクセスを増やすためのコンテンツがなく、メディアとして改善の余地あり

### サイトが遅い/直帰率が高すぎる

ページ表示スピードが検索順位に影響
ユーザビリティの設計がされておらず、ほぼランディングから直帰

### ドメイン&サーバー問題

https://jitensha-hoken.jp/ の下に、
保険（/insurance） と FRAME（/blog）でサブディレクトリとして存在しており、ドメインがイケてない。

サーバー内に２つのWPが構築され、同サーバーにドメインが振られており、どちらかのシステム構成をアップデートすることが困難。

## リニューアルの目的

### 上記課題の解決

アクセスが年々減っており、現状のコンテンツのリライトなど簡易なテコ入れだと成長が見込めない状況。（田村さん曰くやりきってる）
コンテンツやUXの導線から見直しつつ、自転車保険AFFサイトとしてもう一度成長させる。

### アップセル

合わせて、自転車保険に限らずライフプランに合わせた保険総合AFFサイトとしてアップデートしたい。

## 技術的な現状課題

### WordPressの限界

サイトスピードをQ1で改善したが、現状が限界。
かなり改善はされたが、WiFi以外の環境や携帯電話網の弱いところではストレスがある。

### 保険総合サイト化

WPだと総合サイト化のシステム構成に不向き

### 将来的なアップデート

会員機能など機能拡張を見据えるとWPでは不向き

### ドメイン&サーバーがイケてない問題

サブディレクトリをやめる

## 現サイトの技術構成

WordPress

## アップデートの計画

WordPressをバックエンドとし、フロントをJavaScriptフレームワーク（React）化することで、影響範囲を抑えつつ爆速にする。
同時に会員機能などWPにない機能拡張や、総合サイト化にも耐えうるシステム構成とする。
いわゆるJamstack。

## Jamstackとは？

「高速かつ安全で高い拡張性を持ったWebサイト・Webアプリを構築できるように設計されたアーキテクチャ（設計思想）」。

参考サイト
https://www.businessinsider.jp/
https://www.gizmodo.jp/
https://www.crunchtimer.jp/

## Jamstackの構成

### 一般的なCMS（WordPress）のシステム構成


### Jamstackの構成


JamstackではCMSのフロントを排除し、フロントはJavaScriptベースの静的システム構成とすることで、データベースのアクセスを除外し、超高速を実現する。
CMSの管理画面はこれまで通り使えるので、運営にも影響させない。

いわゆるヘッドレスCMS化するといいます。

### どんな技術を使うのか

#### これまで

WordPress（PHP・MySQL）

#### Jamstack

- バックエンド & 管理画面

WordPress（PHP・MySQL）は変わらず。
フロント表示用にAPI化するとともに、ヘッドレス化。

- フロントエンド

JavaScriptフレームワークであるReactで構築。
Next.jsでSSR（サーバーサイドレンダリング）する

使う技術：

React
Next.js
TypeScript
Docker
yarn
eslint
Vercel（サーバー）

など

## Jamstackのメリット/デメリット

### メリット

- 高速なページ表示が可能
- セキュリティリスクが低い
- 大量アクセスに強い

### デメリット

- 動的要素を扱えない
- ビルド（ページ生成）に時間がかかる
- 開発・変更に専門的なスキルが必要

## おわり

7月ぐらいにリニューアルできる予定なので乞うご期待！