サイトアイコン TECHNICAL CREATOR

サイト改修の秋なので、デザインのブラッシュアップと高速化を行いました

@yoshikikoji

芸術の秋、食欲の秋、読書の秋、スポーツの秋…サイト改修の秋。
ということでテクニカルクリエイター.comのデザインをブラッシュアップしたり高速化を行いました。

主に行ったのはこんな感じ

詳しく紹介します。

カテゴリの整理

あまり運営方針もなく自由気ままにやっていたため、記事の整理が全くできていませんでした。気づけば今日までで270以上の記事が公開されており、このままカテゴリを整理しないと収集がつかなくなってしまうと思い、改めて今までの記事のカテゴリをすべて整理して付け直しました。

さすがに270以上の記事があったので全部つけ直すのに1日半ほど要しました。

フッターやパンくずリストのリンクから、カテゴリ別の記事一覧を表示することができます。

タグの追加

今までカテゴリでしか分類されていなかったので、改めて「タグ」でも整理しています。記事ページのタイトル下に「#○○○」という形式で表示しています。

タグをクリックすると、タグ別の記事一覧を表示することができます。

関連記事の表示

関連記事って今まで表示していなかったので…今回サイトの回遊率を上げたくて対応しました。記事ページの下の方に行くと6記事のリンクが表示されています。見ているページと同じカテゴリの記事をランダムで6記事抽出して表示しています。

たまたま当サイトに辿り着いた方が、この関連記事をきっかけに目的以外の発見があれば幸いです。

いいねボタン・フォローボタンの設置

FacebookページやTwitterアカウントを運用しているのですが、サイト内からの導線が弱かったため、デザインの変更を行いました。いいね・フォローしていただけるとうれしいです。

広告表示位置の変更

これはPC版のデザインのみ。少し広告をいやらしく出すようにしました。スイマセン。貴重な収益源なのでご理解いただければと思います。

細かいCSSの変更

もともと最初はほぼbootstrapだけで作っていたのですが、いろいろこだわっているうちにbootstrapを徐々に外していっています。レイアウト全体や文字サイズの変更など細かくチューニング中です。

特に最近、深津さんがnoteにジョインされて、文章の読みやすさにこだわっていらっしゃるようなので、やっぱそこはこだわるべきだよなーと共感して、もう少し細かくチューニングしようと思っています。

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予...
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note - note（ノート）

PHPのバージョンアップ

恥ずかしながら筆者はサーバー側の知識に疎いので、当サイトのサーバーはレンタルサーバーのロリポップを利用しています。AWSとかを使っているわけではありません。

なので最近までサイトの高速化対応といえば画像のサイズに気をつけたりするぐらいでした。でもやっぱりサーバーのレスポンスは大事だよなーと思っていたので、このタイミングで何か出来ないか検討してみました。

利用しているロリポップでは2017年2月からPHP7.1が使えるようになっていました。PHP5.5からの切り替え方は特に難しくなさそうだったので試してみることに。

この度、『PHP7.1』をご利用いただけるようになりました。（※1）『PHP7.1』ではPHP5系と比較して、PHPプログラムの処理速度が向上しております。当社ベンチマークテストにおいては、『PHP5.6（モジュール版）』と比べて『PHP7.1（モジュール版）』は、レスポンスタイムが5.5倍高速化（※2）いたしました。現在『PHP7.1』以外のバージョンのご利用中...
『PHP7.1』に対応いたしました - ロリポップ！レンタルサーバー

PHP7.1のモジュール版を使いたかったのですが、2017年2月9日（木）以前から利用しているユーザーはCGI版のみの提供ということだったので諦めました。（問い合わせれば対応してもらえるぽい？）

切り替えは15〜20分ぐらいで終わりました。ロリポップの管理画面でポチポチするだけです。

これ、かなり体感的な速度改善になりました。今までWordPressの管理画面がかなり重かったのですが、サクサクとページ遷移できるようになりました。記事ページの表示も早くなりました。（具体的な速度は測り忘れました、すんません）

サイト全体のSSL化（HTTPSへの切り替え）

最近、はてなブロガー界隈ではSSL化が話題ですね。

はてなブログでは、ユーザーの皆様により安全にご利用いただくため、それぞれのブログをHTTPSで配信できる機能のリリースを予定しています。対応内容とスケジュールをお知らせいたします。
はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユー... - はてなブログ開発ブログ

まもなくChrome上での警告が強まるという話もあったり、SSL化していないサイトは検索順位で不利になっていくという話もあるので、このタイミングで対応しました。

この記事は Chrome セキュリティ チーム、Emily Schechter による Google Online Scurity Blog の記事 " Next Steps Toward More Connection Security " を元に翻訳・加筆したものです。また、...
Chrome の HTTP 接続におけるセキュリティ強化に向けて - Google ウェブマスター向け公式ブログ
セキュリティは Google の最優先事項です。Google は、 デフォルトで強力な HTTPS 暗号化を導入する など、業界でも最先端のセキュリティを Google サービスに導入することに力を注いでいます。これにより、たとえば Google 検索、Gmail、Googl...
HTTPS をランキング シグナルに使用します - Google ウェブマスター向け公式ブログ

ロリポップでは無料の独自SSLが用意されているので、これを利用しました。

ロリポップ！レンタルサーバーのご利用マニュアル 「独自SSL」 について説明したマニュアルページです。
独自SSLについて / セキュリティ / マニュアル - レンタルサーバーならロリポップ！ - ロリポップ！レンタルサーバー

ドメインのSSL化の作業自体はロリポップの管理画面でポチるだけで30分もかからずに反映されます。が、それだけではサイト全体のSSL化はできません。

一応やることはやったはずなのでgoogle検索結果への悪影響がないことを祈るばかり。SSL化したあと、Facebookのシェア数が全部ゼロになってしまいました（URLが変わったため）。引き継げるWordPressプラグインを見つけたので、試してみたいと思っています。

ロリポップのレンタルサーバー上でWordPressサイトをSSL化する方法は、こちらにまとめました。

画像の軽量化

久しぶりにGoogleのPageSpeed Insightsで速度計測を行ったところ、PCもスマホも真っ赤に警告が表示されてしまったので、いろいろいじりました。JavaScriptやCSSなどの調整も行ったのですが、一番効いたのは画像の軽量化でした。ふだんはWordPressプラグインの「EWWW Image Optimizer」というのを使っているので、画像をアップロードする際に自動で圧縮が掛かっていたのですが、それに甘えてアホみたいにデカイ画像や、それだけでは圧縮しきれないようなものまで使ってしまっていました。PageSpeed Insights上で警告された画像をあらかた圧縮すると、スコアがかなり改善されて、PCもスマホも「Needs Work」状態になりました。

さらに高速化を行いたいのですが、ボトルネックになっているのはWordPressプラグインが反映しているJavaScriptやCSSのようなので、プラグインをなくしていくか何かしら対応をしていこうかと思っています。

小さな改善を大事に

Webサービス・メディア・アプリなどは、お金さえかければドでかい投資とリターンが得られるのですが、僕の性には合わないw

今は、小さな改善をコツコツと積みながら、少しでもテクニカルクリエイター.comが誰かの役に立てるように運営を続けていこうと思います。

モバイルバージョンを終了