HPリニューアルを振り返る HPリニューアルを振り返る

この記事は約5分で読めます。

リニューアルの経緯

一番は、「古くなった」。google+の残滓がそのままだったから

なぜリニューアルに至ったのか。他にもいろんな理由はあるけど、一番大きいのはこの辺り。前回の見た目に切り替えたのが、恐らく2018年。それも、前から継ぎ足しやコピペで作ってきた部分もあるから、都合4年ぐらい前のコードとかが理解が浅いままそのまま入っていたものも多々あって、色々手を入れたいとは思いながら気付けば2019年の年末から2020年の年始になってしまった、と。

当時は「遅くても構わない」と思った構成にしていたけれども、今から振り返るとズレてたなというのもあり。SNS、特に外部記事のシェア絡みで無視しにくい変化が起こっているのに、そのままにしていたものも多々あったので、その辺りもそろそろバッサリやりたい気持ちもあった。

あとは、昨年末からのサーバゴソゴソ、メール周りゴソゴソも同じ理由だけど、この辺りでそういう「後方の気になること」を片付けて、ある程度納得しておく、納得できていなくても「この程度なら我慢できる」レベルにしておかないと、集中して前に向かえないだろうな、というのもある。

現状の仕上がりもコンテンツのコントロール、ソースコードのリファクタリングを含め、まだまだやりたいことは多々あるモノの、現状でほったらかしにしておいても、前ほどは気にならないし、テコ入れするにしても小さな範囲で処理できそうだし、メインで取り組むものが出てきても、それを走らせながらでも十分お付き合いしていけるレベルには持ってこれたと思う。

前のリニューアル以降身につけた技術や新たに気づいたことなんかも盛り込みたかったし、2020年以降やっていくことの整理にもつながったかと思うので、概ね良いのではというのが自己評価。

今回の施策1.自己批判

自分に求められていること、「仮面ライターとは何か?」を整理

トップページの見せ方や、コンテンツの整理をするにあたり、まずは自分はどうみられているのか、あるいはどういうスタンスで世間と関わっているか、周りと関わっているかを極力冷静に考えてみた。

そ(自己批判)の結果、「Web屋さんだから」あるいは「ライターと掲げているから」と関わってくるようになった人、他と比較してどうだからと声をかけていただく方はあまり多くない、あるいは良い関係を築けなかったことの方が多いような気がした。あくまでも、自分は自分だから、仮面ライターは仮面ライターという存在だから声をかけていただける、あるいはそれを踏まえた上でお付き合いいただけている方々との方が関係が良好、ええカッコした部分を見てくれる人よりは、変な人枠、ネタキャラ枠で認識していただいている方がお互いに良い気がしたので、その答えを元に色々バサッと削ってやった。

関連記事にサムネイルは出なくて良いし、サイドバーにもコンテンツはもりもりじゃなくて良いし、トップページにカッコつけたつもりの文章は要らない or あっても意味ないし、プロフィールもええカッコしたテキストじゃなくて良い。実績も別に今のところ見て欲しいものではないし、サービスもあってもなくても関係なさそうだし。

一番のモバイルファースト、高速表示に寄与しそうなコンテンツの削除、情報の削ぎ落としを思いっきりやってやりました。

あとは、どうせブログが中心になるだろうから、PCでのグローバルナビ、上部固定ナビバーも辞めた。本当は上にスクロールしたら出てくる下固定バーにしたかったけど、アクションバーとの兼ね合いで常時表示する形に納まったけど、レスポンシブに変化する要素も極力削って、基本的にはモバイルから考えていって、情報の取捨選択を実施しました。

SNSへのシェアボタンもね、数字がプラスに働かないと思ったし、URLのコピペでOGPは出るしと、見送り。埋め込み系のタイムライン等々も、表示速度を落とすほどのメリットは感じなかったので入れない判断を下しました。

今回の施策2.機能の追加と削除

検索流入する人、SNSから流入する人が求めていそうなことを中心に、要件整理

登校日だけじゃなくて、更新日時も気になるだろうし、古くなっていたら「古いかも」という情報も欲しいし、「n分で読めます」もプラグインなしで入れられるならそっちの方がいいし、目次や目次の前に「はじめに」な枠もあると便利だろうし。

コメントはあってもなくても一緒な気がするし、その手の要素ならごそっと外そうか、とか。速く表示することとのトレードオフを考えながら、要らないものは要らないとバサバサカット。目次も目次でプラグインでやらず、動的に生成されるように組んでみたけど上手く動いてるかな? データ属性でスムーズスクロールとか変態な機能も動いてるといいんだけど、今はパターンマッチの周辺が上手く機能してなさそうだ。気が向いたら、そのうち直そう……。

今回の施策3.高速表示、headerとfooterの簡素化

CSSのプリロード対応やら、WebフォントCDN読み込みの調整やら、最近のフォント事情やら。色々やったった

量産用のプロジェクトでも使いそうな仕様を色々組み込んでみたり、画像の遅延読み込みもプラグインをやめてみたり、headerやfooterでやってたことをfunctionsでやるように変更したり、量産しやすいようにファイルの分割を考えたり。

実はこのあと、ヘッドレスCMSというか、さらなる高速化を目指した学習も検討しているのだけれども、最後の最後に来て、この1年で学んだこと以上の学習を、今回のリニューアルで得るというか、色々試行錯誤で勉強しながら今回のリリースに至っています。

クリティカルCSSを用意すると大変だから、ローディング用の処理を別にして読み分けたり、本体のCSSもWebフォントも下の方で読み込ませたり、メールフォームを使わないところではjQueryも読ませないとか、pre_get_postsもゴソゴソしたり、サブループのクエリを調整したり、アイコンをウェブフォントにしてみたり。仕入れた情報は思いっきり導入して、そこそこハイパフォーマンスが出せるテーマに仕上がりました。

AMP化も多少スピードが上がればいいなと、CSSの読み込み方を変えたり、AMPでも使えるものを新しく知ったり、組み込んだり。構造化マークアップの色々も刷新して、パンくずも含めて変更したり。本当、色々やりました。

リニューアルした結果、とりあえず90点台

Nginxのゴソゴソ、Brotliの導入等もあり、高速表示は叶えられました

PageSpeedInsightで、調子が良ければ97点とか99点とかも出るように。まだまだサーチコンソールで色々言われるから対応はしなきゃいけないけれども、ツールとしてはいい線行けたんじゃないでしょうか?

今回のサイトではやらなかった、ライト/ダークモードの切り替え機能とかも、今後作るサイトでは盛り込んでいきたいな。

あとはコンテンツの整理やら、各コンテンツのブラッシュアップやらをやる気が起きたらやっていくという感じで、ユーザー体験の向上、サイトの品質向上に、一歩ずつ取り組んでいきたいと思います。

サクッとまとめるつもりが、また3000字弱。まだまだ順次書き散らすので、よろしくお願いします。