ShopDD

Now Loading

Now Loading

RSS Article

Now Loading

Article

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

shopdd_design_template4_001.png

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

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

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


shopdd_design_template4_017.png

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

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

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

テンプレート画像の廃止


shopdd_design_template4_018.png

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

shopdd_design_template4_011.png

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

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

shopdd_design_template4_020.png

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

動的ローディング


shopdd_design_template4_019.png

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

shopdd_design_template4_002.png

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


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


shopdd_design_template4_001.png

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

レスポンシブWeb


shopdd_design_template4_006.png

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

shopdd_design_template4_021.png

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

新着記事&RSS Feed


shopdd_design_template4_004.png

新着記事は画像を含めたスライドショーを採用しました。また、以前のテンプレートではボタンを押さないと表示されなかったRSS Feedを見やすい位置に配置しました。記事の人気で青いバーの値が増えていきます。ちなみにこのRSSはNetaGearに表示しているものと同じものになります。

NetaGear
http://netagear.net/

記事リスト


shopdd_design_template4_003.png

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

コメント


shopdd_design_template4_005.png

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

ソーシャルボタン


shopdd_design_template4_007.png

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

shopdd_design_template4_008.png

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

文字サイズと画像サイズ


shopdd_design_template4_009.png

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

画像の表示


shopdd_design_template4_010.png

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

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


shopdd_design_template4_012.png

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

shopdd_design_template4_014.png

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

表示速度


shopdd_design_template4_015.png

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

shopdd_design_template4_016.png

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


今回の個人的感想!


impression_canvas_001.png

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

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

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

Related article

COMMENT TO THIS ENTRY

とても見やすくなりました!

10400

HTML5+CSS3はやっぱりいいですね!

shopDDの記事は毎日確認させてもらってるので、
見やすくなってありがたいです♪


10401

>ちなみに以前のテンプレートではこれだけの画像が使われ提案した。
誤字発見しました

10402

>>10402
ご報告ありがとうございます。早速修正いたします。

10403

おぉ白い

10404

更新ないな~と思ってたらサイトが一新されてた。
コメント横の数字表記が格好いい♪

10408

なかなか、「なう ろーでぃんぐ」が終わらず、表示してくれません。私のパソコンが悪いのかな?

10409

重くてつらい。。。
原因はチョロメかPCか回線か?
ちな、スペック
ちょろめ:最新
PC:これ7+メモリ8+グラボどろどろ
回線:感電の1Gbps
う~ん

10433

Most Popular

Now loading...

MENU



Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...