サイトのデザインをVer3.5にアップデートしました！

2018.04.122020.06.05

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化を図っています。ここ数ヶ月の間いろいろと検証しつつ、久しぶりにかなりコードをいじりました。

アップデート内容としてはコードの近代化と無駄の削除、高速化、モバイル対応が主になっています。デザインでは見やすさと利便性いう面に着目して、細かい追加と変更および修正を行いました。

テンプレートVer3.5の更新内容について

UPDATE Ver3.5

今回の更新では見た目よりも中身の速度重視のアップデートとなります。もちろん細部では見た目も変化しているところは多々ありますが、以前のテンプレートをベースにしているので大きく変化している部分は少ないです。細かい修正は省きますが、大まかに大きな変化がある部分について紹介したいと思います。

RSSLoad

サイト上部にあるNetaGear RSS Newsですが、こちらのロードを下までスクロールすると自動的に続きをロードするようになりました。デザインでは左側にジャンル毎に色分けを行い、ひと目でジャンルが分かりやすいようにしました。このジャンルはNetaGearと同じ色を使っているため、NetaGearを使ってる人には分かりやすくなったと思います。高速化の面ではサーバー側のプログラムを大幅に書き換えて、応答速度を大幅に改善しました。

ちなみにスクロールで続きをロードに関してはNetaGear側でも実装するか迷っているのですが、需要があればあっちでも実装しようかと思ってます。

モバイル対応

以前にもモバイル対応は行っていましたが、今までよりもちゃんとモバイル表示の最適化を行いました。今現在Googleがモバイルファーストインデックスを推し進めているため、よりモバイルでの表示の重要度が上がってきています。そういった意味でもモバイルの対応は急務であり、重要度はかなり高いと言えます。

このサイトのアクセスも半分くらいはモバイルになってきましたし、それだけモバイル端末でのアクセスが増えてきているんでしょうね。モバイル表示ではメニューは右上にまとめてシンプルなヘッダーになっています。

ヘッダー

ヘッダーを黒っぽい色にして、幅もコンパクトに変更しました。今まではヘッダー部分を大きく取っていたのですが、それを小さく変更しています。メニューの内容もコンパクトにして、TwitterやFacebook、RSSなどはアイコンでシンプルに纏めました。検索もメニューに入れたのでだいぶスッキリとしたデザインになったと思います。

タブレット表示では検索はボタンだけになっていますが、検索を押すとフォームが表示されるようになっています。

パンくずリスト

新たにパンくずリストを追加しました。パンくずリストでサイトのどのカテゴリーのどの場所にいるのかというのが一目で分かりやすくなっています。このパンくずリストはUXの向上とSEO的にもあったほうが良いので今更ながら導入しました。

パンくずリストなどでデータの構造化を行うことで検索エンジン的にも分かりやすく表示されるらしいので、これは作っておいて損はないです。

パンくずリストに関しては前々から知ってはいましたが、FC2ブログで実装するのは面倒でやっていませんでした。今は親カテゴリーと子カテゴリーを使えば良い感じのパンくずリストができます。

カテゴリ

Category+

上記のパンくずリストのために、全記事のカテゴリーを一新して、新規にジャンル分けして親子カテゴリーに変えました。こういうときでもないと変えないので頑張ってやりましたが、記事数が1354件もあると、こういう大幅な変更は中々苦労しますね。

カテゴリー分けに関しては、小カテゴリーができたことで今まで以上に細分化されました。あまりに増えすぎると管理が大変ということもあり、必要最低限に留めたつもりですが、親子カテゴリーで合わせて50個になってしまいました。

SNS

SNSボタンに関してはPocket、Feedly、Lineが追加されました。やっぱりモバイル端末では他の人に教えてあげる時にはLineボタンが有ると便利なので追加しました。それ以外にもPocketボタンを追加しました。なにげにPocketも使っている人が多いんですよね。こちらも利便性を考えてボタンを設置しました。

Feedlyに関してですが、私は最近気がついたのですが、意外に使っている人が多いんですよね。旧URLで3500、新URLで500と4000以上の人がこのサイトのRSSをFeedlyに登録して見ているんです。予想以上に多くてびっくりしました。こんなにFeedlyユーザーがいるなら簡単に登録できるようにボタンを設置したほうがいいと思い設置しました。

タグ付け

ブログの記事にタグ付けを行いました。カテゴリーよりも、より詳細な関連付けという意味合いで、類似の記事をブログ内で探すのに役立つと思い記事の下に追加しました。

ただ、正直なところまだ全ての記事でタグ付けは完了していません。今の所半分くらいはやりましたが、1350個も記事があってそれを一つ一つタグ付けはかなり大変で、予想よりもかなり時間がかかってしまっています。これに関してはもっと前からやっていれば違ったと思います。記事を書いたついでにやるならそれほど苦にならないですが、後からだと本当に大変ですね。

リンクのアンダーライン

これは記事を読む上で一番の変化かもしれません。リンクのアンダーラインを無くしました。これはWebの流れに従った形です。Googleでも数年前からリンクには下線をつけない仕様になっていますし、今はもうリンクが下線である必要はないと判断しました。

その代りではありますが、リンクの色を青にしてリンクにマウスカーソルを合わせた際にはアンダーラインを表示する形になっています。

読み込みファイルサイズ削減

Image Compression

トップページなど記事一覧ページでの画像の読み込みファイルサイズを大幅削減しました。今までは、FC2にアップロードした際に作られるサムネイルを使用しており、かなり重い画像を表示していたのですが、それらを最適化しファイルサイズを大幅に削減しました。

一覧ページでの画像の読み込み量に関しては画像10個で1.5MBくらいあったのですが、これを削減して0.2MBへと約1.3MB近く読み込み量を削減できました。これだけ削減すれば回線の弱いモバイル端末でアクセスする際にもかなり高速化できたのではないかと思われます。

不要な画像の削除

今までのテンプレートにはサイト上で不要なものがいくつかあったのでそれらは読み込み速度を高速化するために削除しました。できるだけ画像は少ないほうが高速化できるので、こういう細かい部分も削っていく必要があります。

サイトロゴ

サイトトップのロゴですが、以前までは画像を使っていましたが、今はブラウザのCSS3の対応が標準化してきていることを受けてロゴもCSS3で同じようにデザインしました。このテンプレートを作ったときも最初はロゴはCSS3でデザインしようと思っていたのですが、その時はまだIEなどがネックで同等の表示ができないという問題があり断念していました。今はもう画像を使わなくても同じようにロゴを再現できて良いですね！ロゴ画像は5KB削減できています。

感想の画像を削除

いつも記事の最後に付けてる感想の画像ですが、これを廃止しました。なにげにこの画像自体は8年前の記事から使っていたのですが、作った時は何も考えずに作っていたせいで画像のファイルサイズがこの一つだけで104KBもありました。こんな無くてもいいような画像で無駄に読み込みが遅くなるなんて、あってはならないということで削除して、代わりにCSSで画像っぽいものを表示する形に変更しました。アイコンフォントを使うことで画像っぽいものが簡単に作れるようになったのは良いですね。これならぱっと見では画像のように見えますし、CSSで書いているので容量もほぼ無いに等しいレベルなのでありがたいです。

それ以外にもテンプレートの何箇所か削減できる画像の部分を削減しました。画像を減らすことでHTTPリクエスト数を減らすことができてより表示が速くなっています。

読み込み速度

Very Fast

コンテンツのファイルサイズを全体的に引き下げ、JavaScriptやCSSを見直したことで読み込み速度もかなり改善しました。見た目で分かる部分で以前は上の方にあった新着記事コンテンツを動的ローディングで読み込む方式を取っていましたが、それをやめました。

上の部分は必ず読み込まれますし、それを動的にAjaxを使ってappendするのは処理的に重いので、無駄と判断しました。ファーストビューで見えない範囲については動的ローディングは引き続き使っています。こちらは全体の読み込み速度向上に貢献しています。

Twitterカード

Twitterカードの設定を行いました。これでTwitterでの表示が画像つきで見やすい形で表示されるようになっています。ちなみにTwitterカードの設定方法は以下のコードをhead内に記述すればOKです。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Twitter_id" />
<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="記事のタイトル">
<meta property="og:url" content="記事のURL">
<meta property="og:description" content="記事の要約">

コンテンツの正規化

Very Fast

コンテンツの正規化を行いました。FC2ブログではモバイルやスマホなどURLの後ろに?mode=m&no=1355などURLクエリーが付く形のページが多数存在しています。これが存在することのデメリットとしては検索エンジンでこちらのページが認識されてしまうとページの表示が異なったり、同じコンテンツなのに違うURLというのはSEO的によろしくないのです。これをPCと同じURLへ統一するためにコンテンツの正規化が必要になるわけです。

コンテンツを正規化することでユーザーが検索してアクセスした際に正しい表示のURLへと導くことができるようになります。ちなみに追加したコードは以下の通りです。FC2ブログを使っている人はこれをhead内に入れればOKです。

<!--index_area-->
<link rel="canonical" href="<%url>">
<!--/index_area-->
<!--permanent_area-->
<link rel="canonical" href="<%url>blog-entry-<%pno>.html">
<!--/permanent_area-->
<!--category_area-->
<link rel="canonical" href="<%url>blog-category-<%cno>.html" />
<!--/category_area-->

今回の個人的感想！

久しぶりにサイトのデザインを変えました！ベースは以前のものを使っていますが、デザイン面でも細かい部分での修正と追加しています。特に以前よりデザインの近代化と利便性があがるようにしました。

今回のアップデートではモバイル対応と高速化を重視に行っています。以前にもモバイル対応を行いましたが、今までよりも最適化するように変更しました。高速化に関してはコードの見直しと無駄の削除、サーバー側のキャッシュなどを含めかなり細かい部分まで詰めて高速化を図りました。高速化の詳細については近々別記事を書こうと思っています。

一番大変だったのがカテゴリー分けを大幅に変更して、記事にタグ付けを行ったことですかね。タグ付けに関してはかなり時間を割いているのですが正直まだ半分くらいしか完了していません・・・。全記事が1354個あって、それを一つ一つみてタグ付けしていくのはかなりの重労働で、このままだと当分終わらない気がしたので、先にテンプレートを公開して、後々時間を見つけて残りを修正していく方針にしました。

それにしてもCSS3もだいぶ普及してきたおかげサイトを作るのもだいぶ楽になりましたし、表現の幅が格段に上がってくれたおかげで画像を削ることができたのは良いことですね。これからも引き続きサイトの表示を高速化できるようにいろいろ試してみたいと思います。引き続きShopDDをよろしくお願いします。