1. Home
  2. サイト運営情報
  3. アップデート
  4. サイトのデザインをリニューアルしました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

激安特価商品情報サイトの激安ShopDDを作りました!

激安特価商品情報サイトの激安ShopDDを作りました!

激安情報についてはこのブログで度々紹介していたのですが、この度激安・特価情報を専門に取り扱う新ブログの激安ShopDD(Gekiyasu ShopDD)を作成しました。こちらのブログ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

NetaGear RSS News

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倍くらい表示速度が向上しました。今回のバージョンアップでだいぶストレスがなくなったのではないでしょうか?

今回の個人的感想!




みなさんお久しぶりです。ここ最近サイトの記事の更新を停止して、新デザインのサイトテンプレートを作成していたのですが、新しいデザインはいかがでしょうか?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...