およそ3年半ぶりにサイトのデザインをリニューアルしました。前回のリニューアルの時の記事が2017年2月に残っているので、正確には3年8ヶ月間、これまでのデザインでブログを書いてきたことになります。前々回は4年使ったという記録が残っているので、だいたい4年周期。今年はオリンピックが開催されなかったけど、オリンピックイヤーにデザイン変更しているようです。こういう記録を残すのも貴重なのかもしれませんね (^^;)
https://ryu.jpn.com/archives/4587
今回のリニューアルでは、これまでのテーマだった「モノトーン」「ミニマル」「アイキャッチを背景に使って変化を加える」というポイントは活かしつつ、以下を目的として行いました。
- ページの読み込み・表示スピードを高める
- ナビゲーションを充実し、回遊性を高める
- サイト名に縛られず、テーマカラーを「ネイビーブルー」に変更する
これらのテーマを実現するために行ったことと、その結果について記載する前に、以前までのデザインの記録を残しておきます。
リニューアル前の旧デザイン
上記がリニューアル前の旧デザインのTOPページです。TOPページでも投稿ページでも、とにかくアイキャッチ画像を大きく配置してビジュアル中心のデザインとし、カラーはモノトーンに、レイアウトはシングルカラムでミニマルな構成に拘って作りました。あまりにもミニマルだったので、途中でページごとの変化を加えたくて、背景画像にもアイキャッチ画像をレイアウトするマイナーチェンジを行いました。
https://ryu.jpn.com/archives/6819
狙いの通り、ミニマルで飽きることなく、かつアイキャッチ画像による変化も楽しく、永く使いたいと思えるデザインでした。ただ、どうしても上手くいかなったのがページ表示の高速化で。。無料のテーマに大分自分で手を入れてカスタマイズしたので、無駄なソースやスタイルシート、JavaScriptの参照、プラグインの利用が多くなってしまい、改善が難しくなっていました。
これらを解消するべく、新しいテーマを導入してリニューアルを行いました。
リニューアルの目的のために行ったことと結果
まず、テーマは国産の有料テーマ「Swell」を使いました。有料テーマにすることで、多くのカスタマイズはスタイルシートやHTML、PHPを触ることなく実施できるので、無駄なソースを増やすことなく進めることができます。また、プラグインも内包、もしくはリコメンドがあるので、余計なプラグインを増やすことなく、これまで使ってきたプラグインの削減にもつながります。なにより、軽量化やSEOを前提として作り、配布しているのが有料テーマです。この力を借りて、表面だけでなくバックエンドもシンプルに、ミニマルにしたいと思い導入しました。
（本当は高速化の実績をGoogleのPageSpeed Insightsで比較しようと、リニューアル前後を記録に残してあるのですが、数字は良くなくて。。体感的には早くなっていいるので、数字が追いついてきたら改めてレポートします。）
同時に、ウィジェットで使えるナビゲーション機能も多々用意されているので、こちらも余計なソースを書いて対応することなく、テーマの機能の範疇で充実したナビゲーションと回遊性の高さを実現できました。
最後にテーマカラーです。今までは「Green」というサイト名に縛られて、緑色のテーマカラーに縛られてきましたが、、今回はボクが一番好きな「ネイビー」をテーマカラーにしました。以前にサイト名も「NavyBlue」しようか、なんて記事を書いていましたが、愛着あるサイト名は変えずに、サイト名に縛られることなくテーマカラーだけ変えることにしました。
https://ryu.jpn.com/archives/6572
まだまだ手を入れたい箇所があったり、前述の通り、目に見える数字で改善できていない点もありますが、金曜に思い立ち、週末に夜なべして作ったデザインはなかなか気に入っています。きっとまた、少なくとも4年間は一緒にすごすサイトデザインです。気持ちよく、永く、付き合っていきます : )