サイトのデザインをリニューアルしました！

2014.08.252020.06.28

みなさんお久しぶりです。ついに本日よりShopDDがリニューアルし、5年ぶりの新デザインとなるテンプレートVer3が公開となりました！ここ最近はずっと記事の更新を停止して新デザインのサイトテンプレート製作を進めていました。今回は今までのデザインとは別にゼロベースで作成し、今までと比較して大幅なバージョンアップを行っています。

大きな変更点としてはデザインをシンプルなものにリニューアルしたほか、内部コードをhtml5に変更、テンプレートから画像の使用を廃止したことによりサイト読み込み速度が高速化しています。レスポンシブWebデザインを採用。その他にも文字サイズ、画像サイズなどを以前と比較して大きいものに変更し、今まで以上に記事が読みやすくなっています。

テンプレートの内部構成の変更点

まずは内部構成の大幅な変更について説明したいと思います。今回テンプレートの改造に当たって、大きく3つの変更を行っています。それはHTML5+CSS3、テンプレートに画像の使用を廃止、動的ローディングです。

今回コードを書くにあたって以前のxhtmlからhtml5+css3に変更しました。今はもうxhtmlのサイトはあまり見なくなりましたね。そんなわけで時代の流れに従ってhtml5で作成しました。

その他に今回からサポートブラウザをchrome、Firefox、Opera12、IE9以上としました。最新のjQuery2を採用したのでjQuery2が動作しないIE8は当サイトのサポートからも外しました。今どきIE8を使っている人はいないと思いますが、Microsoftの公式発表で2016年1月にはIE8のサポートがきれるということで早めに打ち切りとなります。ちなみにIEに関してはIE11以上を推奨です。

テンプレート画像の廃止

css3の普及により、画像を使わないテンプレートでも表現の幅が広がっているのでテンプレートの画像を廃止する方向にしました。このあたりは画像を一切使わないCSS3で作ったサイトであるNetaGearの精神に近いです。ちなみに廃止を謳っていますがタイトル画像だけはどうにもならなかったので画像を使いました。

今回テンプレートから画像を排除した代わりにWeb Icon Fontsを使用しています。画像よりも軽い上に、フォントサイズを変更するだけで自由に大きさを指定できるので、これを使うことでかなり表現の幅が広がっています。ソーシャルリンクなどのアイコンっぽいやつはみんなWeb Icon Fontsを使用しています。

Web Icon Fonts http://webiconfonts.appspot.com/

ちなみに以前のテンプレートではこれだけの画像が使われていました。これをCSS Spriteを使用することでかなりhttpリクエスト数は減らしていましたが、それでもこれだけの画像が読み込まれていると考えると、この読み込みがなくなる事で相当な軽さになります。

動的ローディング

ここは前回から引き続きの動的ローディングです。読み込みに時間がかかる部分を非同期通信による動的ローディングすることで、テンプレート読み込みを優先して表示を高速化します。最近ではTwitterやFacebookなどのソーシャルリンクがあるのですが、この部分が思いのほか表示を遅らせる原因になっているので、この部分も非同期で独自に読み込む形にしました。

Now Loadingとなっている部分が動的にロードされるようになっています。この動的ローディングはスクロールしてコンテンツ部分が近づくと自動的にロードしています。なので、下の方にある見ないかもしれないコンテンツはロードされず、必要なときに読み込むことで無駄なロードを減らしています。

テンプレートの外部構成の変更点

サイトのデザインを白を基調としたシンプルなものにしました。それに伴いサイトの横幅を今の時代に合わせて大きめに設定しました。以前のテンプレートでは横幅狭く、いろいろなものを設置していたのでごちゃごちゃしたイメージが強かったのですが、今回のテンプレートではかなりすっきりとしたと思います。

レスポンシブWeb

ブラウザサイズを変更すると自動的にレイアウトが変更されます。2カラムから1カラムになるので、閲覧環境によって最適なサイズでサイトを表示することができます。

今までスマホ向けの表示はありましたが、タブレット向けはなかったので今回対応しました。ちなみにNexus7などのタブレットで見てみると1カラムで最適化されてかなり見やすくなっています。今後はぜひタブレットでもShopDDを見てみてください。

記事リスト

記事はボックスで配置しました。画像をメインにシンプルにしたことでかなり見やすくなったと思います。

コメント部分もシンプルに変更。以前はURLやタイトル、パスなど入力項目が多かったものを名前とコメントの2項目でコメントができるようになりました。ちなみにコメントにはAjaxを使用して非同期で投稿できるようにしてあります。

ソーシャルボタン

シンプルにしたかったのでソーシャルボタンは今回隠す方向にしました。ちょっと分かりにくいかもしれませんが、画像右上にあるプラスボタンを押すと表示されます。。

今まで記事の最初と最後にしか表示されていなかったのですが、記事の左側に常に表示されるShareボタンも設置しました。これでいつでも簡単に記事をシェアできるようになりました。

文字サイズと画像サイズ

記事内の文字サイズと画像サイズを大きくしました。以前のテンプレートでは文字サイズがかなり小さかったのですが、今回の横幅拡大に伴い、見易さを重視して文字サイズと画像サイズを大きくしました。

画像の表示

画像の表示もlightbox風の表示にしました。最初はlightboxを使おうかと思ったのですが、ソースコードを見る限り、このサイトでは使わない機能が多々あったので、必要最低限の機能だけで自分で実装しました。そのおかげでかなりコード量を減らすことができました。オーバーレイ表示は画面遷移しないので非常にいいですね。

読み込み量とHTTPリクエスト数

こちらは以前のテンプレートの読み込み量とHTTPリクエスト数です。HTTPリクエスト数が150、読み込み量が1347KBでした。

こちらが今回の新しいテンプレートです。HTTPリクエスト数が41と1/3に、読み込み量が652KBで1/2になっています。以前のテンプレートよりもかなり減らすことができました。

表示速度

以前のテンプレートでは表示速度は平均で6.20秒でした。これだとだいぶ待たされる感じがすると思います。

新しいテンプレートではなんと平均2.23秒です。つまり以前の3倍くらい表示速度が向上しました。今回のバージョンアップでだいぶストレスがなくなったのではないでしょうか？

今回の個人的感想！

みなさんお久しぶりです。ここ最近サイトの記事の更新を停止して、新デザインのサイトテンプレートを作成していたのですが、新しいデザインはいかがでしょうか？5年ぶりのデザイン一新ですからね。

サイトのリニューアルの構想自体は3年くらい前からあったのですが、なかなか進んでいませんでした。デザインの原案は半年くらい前に出来上がっていたのですが、コーディングのほうを時間があるときにちょっとずつ進めてやっと完成に至りました。本当はもっと早い段階で公開できる予定でしたが、なんだかんだでかなり時間がかかってしまいました。

現状まだバグがありそうですが、もし何か問題がありましたらコメントで報告していただけると幸いです。