運営しているサイトの「ノマド的節約術」をデザインリニューアルしました!

ちなみにデザインの変更は通算4回目で、今のデザインはバージョン5になりますね。前回のデザインは2015年7月から長く使っていて、4年半お世話になりました。
おかげで今があるのですが、さらに前に進むために今回また全面的にリニューアルすることに。
なんとか2019年中には公開したいと思ってたのでホッとしました…!
リニューアルに際して、どんなこと考えてたのかをあらためてまとめておきます。
サイトリニューアルは1年3ヶ月かかりました
ちなみに、サイトのリニューアル自体を考え始めたのは2018年の夏頃で、2018年9月ぐらいからデザイナーさんにお願いして一緒にデザインを考えることに。
打ち合わせを重ねつつ1ヶ月半ぐらいでデザイン案ができて、このままコーディングを進めていけば2019年の春ぐらいには出せるかなと思ってました。
実際にコーディングを進めていただき、上がってきたデザインを見たときに、なんだかしっくりこなかったんですよね。
デザイン案のときはめっちゃいいって思ってたのに、いざ実際の画面で見るとなんとなく違和感がある…そんな感じでした。
途中まではテストやフィードバックをしていましたが、やはりしっくりこなかったので、一旦ストップすることに。
その後また別のデザイナーさんに案を考えていただき、今のデザインにだいぶ近づきました。
ちなみに上がってきたデザインはもっと雰囲気が良かったのですが、技術的なところとデザインのリソースが定期的に必要になる仕組みだったので、一時的に断念しています。
多少は妥協して、現在のデザインになった感じですね。そのため、まだ改善の余地がかなりある状態です!
この間、いろんな人とやり取りしました。本当にありがとうございます!
1回目のデザインを作ってくれて今は社員になっているIさん、ウェブデザイナー・ブロガー・ミュージシャンと多彩な大谷さん、シスウ株式会社さん、2回目のデザインを作ってくださった小林さんのおかげです。
リニューアル時にこだわった点
ということで、ここからはリニューアルするときに特にこだわったところを紹介します!
単純に見た目を変更しただけではないですので…!
サイト内検索の仕組みを変更
今回のリニューアルで、サイト内検索をGoogleから別のものに変えました。
Googleだと精度は高いんですが、サイト内検索するたびに広告が表示されてとにかく嫌でした!
以前はお金を払って広告を消せてたんですが、そのサービスも終了してしまったので、泣く泣くGoogleのサイト内検索を使ってました。でも、やっぱり広告が気になってしょうがなかったです。
ようやく広告を出さずにサイト内検索が使えるようにできてうれしいですね!
ただ、以前より検索の精度は下がってしまっているのが気になってるので、ここもいずれ改善できればと思います。
プロフィールバナーの作成と記事作成
これはリニューアル前から進めていて、ノマド的節約術を定期的に読んでいただいてたのなら気づいてたかもしれませんが、記事下のプロフィールのところにバナーを設置しました。
個人的に人の気配が見えるサイトが好きという理由で導入することを決めて、デザイナーさんにバナーを作っていただき、エンジニアさんにちょこっとコードをいじってもらい、気軽に設置できるようになっています。
▼こういうイメージですね。


ライターさん全員というわけではないんですが、定期的に書いてくださってるライターさんは、バナーを作り、ライターさん自身にプロフィール記事を書いていただきました。
記事を読んで、「誰が書いたんだろう?」って気になったときに人となりがわかる記事があればいいなと思ってのことです。
これは自己満足でやってるところが大きいですが、自分好みのサイトにしたいと思ったので、導入しています。
人の顔が見えるように。インタビュー記事へアクセスしやすくした
ノマド的節約術では、定期的にインタビュー記事も公開しています。でも、インタビュー記事って公開したときしか読まれないんですよね。
ノマド的節約術は、長く読まれる記事であることを意識して運営しているので、せっかく力を入れたインタビュー記事が埋もれてしまうのがもったいないと思っていました。
インタビューすると、いろんな人の顔が出ます。やはり人の気配がすると賑やかな感じがして親近感が出るんですよね。
ということで、記事の下のほうにインタビュー記事が横並びでズラッと出るようにしました。これは1回目のデザイン案のときに思いついたことで、すごくいいと思ったので今のデザインにも残しています。

関連記事を手動で入れる仕組みを作った
ノマド的節約術では、自分が生活していく中で興味が出てきたことや体験を役立つ情報に変換して書いています。
それを続けていく中で、数多くの記事ができて、ジャンルもどんどん広がっています。
そんな中、読み手が1つのテーマに興味を持ったときに、少しでも好奇心を満たせるようにと思って、ジャンルごとに関連記事が入る仕組みを作りました。
これは手動で入るように設定しています。技術的なやり方は詳しく言いませんが、WordPressの裏側のカスタマイズができるならだいたい想像つくかなという感じでしょうか。

記事がかなり多いので、今回のリニューアルでぜひとも実現したかったところですね。
HTML構造に徹底的にこだわる
自分なりにですが、HTML構造はとにかくこだわりました。
ある程度のデザインが出来上がってくると、確認やフィードバックをしていくのですが、見た目と同じぐらいHTML構造を細かく見てました。
ソースコードをひたすら見て、HTMLタグごとの意味や構造を確認しながら、正しいマークアップがされるように意識しています。
久しぶりにHTMLをガッツリ見てたので、このときにあらためてまた勉強になりましたね。
サーチコンソールで出てくる構造化エラーをなくす、ムダに重複しないようにする、細かすぎるぐらい確認していました。
一旦リニューアルで公開していますが、今後も技術の進化に合わせて定期的に直していくところになりそうです。
高速化、とにかくひたすらに高速化
HTML構造と合わせてチェックしていたのは、高速化できるようにすること。
ムダなコードが入っていないかを何回も確認しました。
サーバーはAWSを使っていることもあるので、1バイト・1HTTPリクエストでも増えると転送量が増えてしまうと、その分だけお金がかかります。
いらないコードは書かずにとにかく削るように指摘しまくりました。今の自分はもうコードを書かないので、完璧ではないと思いますが、明らかにムダだと思えるのはだいぶ減ってると思います。
jQueryは使っていません。重いしムダなコードだらけですからね。
あと、リニューアルとは別にサイト全体をHTML化して、PHPが動かないようにもしました。PHPとかMySQLの処理がなければ、その分だけ処理速度が改善されますからね。
まだまだ改善します!
というわけで、ざっくりとノマド的節約術のリニューアルについてのこだわりを紹介してきました。
ある程度は形になって満足していますが、まだ改善できるところも多く、今後も開発を進めていきます。
特にアナウンスすることはないと思いますが、地味にノマド的節約術が改善されていくと思いますので、今後もお金に困ったときに寄り添えるサイトにしていけたらと思います!
そうそう、リニューアルにあたってサイトのキャッチコピーも変えました。
「お金を知って、心にゆとりを。」
お金の仕組みやサービスなどを知れば知るほど生きやすくなってきた実感があるので、こんなキャッチコピーにしてみました。
参考:ノマド的節約術はこちら
コメント