ブログリニューアルの実装についての雑感

morita

この記事は Gaji-Labo Advent Calendar 2019 6日目の記事です。

Gaji-Labo 森田です。久しぶりにブログを書きます。
さて、11月末にこのブログをリニューアルしました。リニューアルがアドベントカレンダーに間に合ってよかったです!

リニューアルした経緯や想いなどは、ブログをリニューアルして、気持ち新たに新しい目標に向かいます に山岸が書いてくれました。
なので、今回はリニューアルの実装について行ったこと・思ったことを書きます。

ブログシステムは引き続きWordPress

WordPressロゴ

ブログシステムは引き続き WordPress を使っています。

弊社コーポレートサイトは GatsbyJS + Netlify で作られているので、ブログもHeadless CMSなどを採用し Jamstack 構成でいくという案もあったのですが、原稿の書きやすさや、誰でも書ける環境を考慮した結果、やはりWordPressを利用させてもらうことになりました。引き続きお世話になりますっ。

ブロックエディタは慣れるととても書きやすいですし、この選択は正解だったと思っています。

業務では React や Vue.js のフロントエンド支援を主にしているので、久しぶりにWordPressを触りましたがやっぱり楽しいですね。WordPress 大好きです。

テーマ

リニューアル前は自社製の Rails ブログをデザインそのまま WordPress 化したものだったので、正直あまりマークアップやテーマ構成が良くなかったのですが、今回はシンプルな構成でテーマを構築できてとてもわかりやすくなりました。

プラグイン

今回プラグインを大幅に減らし必要最小限にしました。
後述のページスピードのためもありますが、プラグインはどうしてもバグ対応やアップデートがプラグイン開発者様に依存することになるので、なるべくテーマにプラグイン同等の機能を内蔵することで依存度を減らしました。
とはいえ JetPack など便利なプラグインは使わせてもらっています。

(2020.02.06修正) JAMStack を Jamstack 表記に変更しました。

サーバーの変更

Xserverロゴ

サーバーは 某VPS から エックスサーバー に変更しました。

VPS から共用サーバーに変えるということで使い勝手が下がるのではと思われるかもしれませんが、弊社ではむしろ逆で管理しやすくなりました。

VPS を使うとどうしてもサーバーの知識が必要になります。
サーバーエンジニアがいない弊社ではVPSを触れる人間が限られてしまうので属人性が上がってしまいます。
例えば、サブドメインの設定や公開鍵の登録、SSL証明書の有効期限切れなどが起こると特定の人間しか対応できなかったのですが、そのあたり管理画面で諸々設定できるので誰でも管理ができるようになりました。

また、エックスサーバーは共有サーバーとしてはかなり WordPress が速いサーバーなので手間をかけずにある程度の高速化が実現できました。

ページスピードの追求

先ほども書きましが、コーポレートサイトは GatsbyJS で作られているのでSPA(Single Page Application) でとても高速にページが表示されます。
これはユーザーエクスペリエンスとしてはとても重要と考えます。

弊ブログは WordPress なので、基本的にお世辞にも表示が速いとは言えません。
なので、なるべくその速度差を無くせるようにしました。

と言っても、行ったことはマークアップやCSS設計を適切にし、テーマはなるべく簡易な構造やコードにし、WordPress特有の不要なコードの読み込みを極力減らしオーバーヘッドを無くし、画像を最適化する。というシンプルなことを愚直にしただけです。

PageSpeed Insights

シンプルなデザインやエックスサーバーの恩恵もあり PageSpeed Insights のスコアはモバイル98点、パソコン100点にすることができました。(時間帯により多少増減するみたいです)

PageSpeed Insightsでパソコン100点

現状、キャッシュプラグインやコード・画像の圧縮系のプラグインは使っていないので、そのあたりも使用しモバイルも100点を目指します。
勿論、PageSpeed Insightsのスコアが全てではないので、さらに諸々パフォーマンスを向上できればと考えています。

個人的にはブログもGatsbyJSでSPA化したり、Shifterで静的化もしてみたいですね。

まとめ

リニューアルはこれで終わりではなくここからです。
雑感を書いていたら、あれやこれやとやれていないところが気になってきてしまったので、随時改修・アップデートをかけていきより良いブログにしていきます。

弊社、WordPressの実装も得意としておりますのでご相談くださいませ。

Gaji-Laboでは、React+Reduxが得意なフロントエンドエンジニアを募集しています

弊社ではフロントエンドのエンジニアさんを随時募集しています。現在は特にReact+Reduxの設計・実装に強いフロントエンドエンジニアさんを求めています! 大きな会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるフリーランスの方やパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


morita

投稿者 森田 壮

ディレクターとして適切な技術提案やコミュニケーションを出来るように心掛けています。エンジニアとして主にフロントエンド全般、CMS構築や開発環境の構築などを得意としています。
Macやエディタ、開発環境などを最適化することにいつも燃えています。