今年のモバイルフレンドリー化に代表されるように、ウェブの世界にはしばしば、避けようのない大波が押し寄せてきます。そうした波に飲まれないために、仕方なくサイトのリニューアルをするというようなこともあるでしょう。今回このサイトでも、そうした波に乗るためだけの、コンテンツの改修をともなわないリニューアルを実施しました。

CMSをWordpressに移行

メインのコンテンツ部分を運用するCMSを、今まで10年近く使ってきた Movable Type 3.35から WordPress へと移行しました。理由は WordPress はSEOに強いという噂だから、というのはもちろん寒い冗談で、仕事上 WordPress を扱う機会が多くなってきたことを受けてのことです。これは自分でも使ってないとまずいな、と。

これまで使っていたMTの仕様は静的なHTMLファイルをサーバ上に保存するというもので、サーバへの負荷は小さくレスポンスも良く、正直なところとても気に入っていました。必要な機能は改造して追加すれば不便を感ることも特になく、10年近く前のバージョンをずっと使い続けることもできました。MTには何の不満もなく、むしろ大好きです。

しかしここ数年はリニューアル案件のたびに WordPress を採用、ここ1年だけでも5件ほど WordPress を使用したサイトを納品し、今も多言語サイト1件が進行中です。中小規模のサイトにおいては、WordPressは事実上のスタンダードです。こうなってくると、もう個人的な好き嫌い(僕はあまり WordPress が好きではない)を言っている場合ではありません。

というのも、僕はたった一人で働くフリーランスで、明日をも知れぬライダーでもあります。これは、僕にもしものことがあっても補充要員は存在せず、しかもそのもしものことが起きる可能性は人一倍高い、ということを意味しています。

リニューアル案件などを受ける際には、僕にもしものことがあってもクライアントが困ることがないように、情報が豊富で多くの人が扱えるCMSを選ばなければなりません。その意味で WordPress は最高で、必然的に採用頻度は高まり、その結果として僕自身もすっかり慣れてきたため、自分のサイトにも採用、というのが経緯です。

レイアウトを1カラムに変更

CMSの入れ替えにともなってデザインも変更しました。レスポンシブであることは従来と同じですが、PCなどの大画面用のデザインでもサイドバーのない1カラムレイアウトとしました。最近の仕事で手がけたリニューアル案件では、スマートフォンからのアクセスの比重が高いサイトを中心に1カラムが多く採用されていて、それらの作業の中でいくつかの気付きがあったためです。

  • ナビゲーションメニューの項目数は少なめのほうが離脱が減る
  • サイドバーのナビゲーションはあまり使われていない
  • モバイルファーストで設計すると、サイドバーはなくすほうが自然
  • サイドバーは広告枠(読者の注意を本文から逸らす)としては機能する

いくつものサイトのアクセス解析をよく見比べて(僕は職務上たくさんのサイトのアクセス解析を見ることができます)検討した結果、ゴチャゴチャしたナビゲーションをサイドバーに置くという従来の一般的なデザインは、思っていたほど効果的なものではないということに気付いたわけです。

とはいえサイドバーは広告枠としては有効(広告在庫を消化したいメディアサイトなどが典型)で、実際にこのサイトでもサイドバーの最上部に表示していた広告のクリック率はそれなりに高かったのですが、今回は思い切って排除することにしました。さすがに広告を表示するためだけにサイドバーを置くのはどうかと思ったためです。

なお今回はモバイルファーストで設計しましたが、このサイトはその性格上、アクセスのほとんどは大画面の端末によるもので、スマートフォンなど小型端末からのアクセスは少数です。今後もそう増えないでしょう。したがって徹底したモバイルフレンドリー化もモバイルファーストの採用も、特段の必要があってのことではありません。極言すれば単なる好みです。

常時SSL化

せっかくリニューアルするついでですから、常時SSL化も実施しました。常時SSL化の波はウェブ界隈において、モバイルフレンドリーの次に必ず来るビッグウエーブと言って差し支えないでしょう。昨年8月のGoogleの発表にも後押しされ、これから数年で中小のサイトにまで普及していくものと思います。

普及に向けた環境もだんだんと整ってきました。以前は非常に高価だった証明書も安くなり、無料のものも出てきて、さらにはサーバへの証明書のインストールすら不要なものさえ出てきました。僕が今回利用したのは CloudFlare の Universal SSL というもので、無料でかつサーバへの証明書インストールも不要というものです。

ほとんどの環境では問題ないものの、この Universal SSL を使用すると Windows XP のIEなど一部の環境で接続できなくなるといった互換性の問題もあり、一般的な商用サイトに導入するのは現時点では微妙なところではありますが、このサイトは単なる個人サイトですから、SSL普及期への過渡期的な措置(の実験台)としては面白いかな、と思い導入に踏み切りました。

読み込み速度の高速化

今回のリニューアルで最も強くこだわったのがパフォーマンスの向上です。というのも、冒頭で紹介したように今回のリニューアルでは、静的なHTMLファイルをサーバ上に保存する Movable Type から、動的にページを生成する WordPress へと CMS を変更したため、そのままではパフォーマンスの低下は避けられません。

Googleがページの速度をランキングに取り入れると発表したのは2010年のことですから、もともとチューニングはそれなりに施してありました。サーバ側に関しては現状以上は僕のスキルでは対応が難しい(次回サーバを引っ越すときに再チャレンジします)ため、今回のチューニングは、HTML、CSS、JavaScriptなどフロント側が中心です。従来の施策に加えて、新たに次のようなことを実施しました。

こうした結果、HTMLの読み込みとほぼ同時(リクエストから1秒以内)にレンダリングを開始、ページ全体は遅くとも2秒以内にレンダリングを終了(だいたい1.5秒以内)、最終的な読み込み完了まで2〜4秒ほど、というところまでチューニングできました。リニューアル前との比較で、サーバのレスポンスは0.2〜0.4秒ほど遅くなりましたが、全体としては1秒以上速くなっています。

今回はクライアントの案件ではなく自分のサイトですから、取り払えるものはすべて取り払うという思い切った方針で臨み、装飾も最低限にしました。このため結果としてかなり殺風景な見栄えになってしまいましたが、このサイトの趣旨からすれば許容できる範囲かなと思います。シンプルに、軽く、速く、というも、変化の波の一つでしょう。

ニュース配信機能の簡略化

このサイトではウェブ上から自動収集した最新のSEO関連情報の配信をしていますが、この機能を大幅に簡略化しました。この機能の実装には Pligg というオープンソースのソーシャルニュースCMS(Diggクローン)を使用していて、元々はソーシャル機能や投票機能など多彩な機能があったのですが、それらをすべて廃止して単にニュースを配信するだけにしました。

またニュースの自動収集も、それまでフィードアグリゲーションに使っていた Yahoo! Pipes がサービスを終了するというアナウンスを受けて、かなり単純な方法でピックアップするように仕組みを作りかえました。この結果、配信されるニュースのバリエーションが増え、TwitterFacebook での反応を見ると、以前より受けているようです。


WordPressへの移行、1カラムレイアウト化、常時SSL化、モバイルファーストと読み込み速度の高速化、フィードアグリケーションの単純化と、今回のリニューアルでは、時代の波に合わせた変更を多数加えました。このサイトは2002年開設の古くさいサイトですが、何とか時代に乗り遅れないように頑張っていきたいと思います。