1. Home
  2. サイト運営情報
  3. アップデート
  4. サイトのデザインをVer3.5にアップデートしました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

今回紹介するのは縦横360°回転&細かな角度調節が可能なKeynice クリップ型USB扇風機です。USB電源で動作する小型な扇風機で、クリップを使うことでどこでも挟んで使えるほ...

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

ここ最近は機械学習にはまっていて、前々から気になっていたTensorFlowを試してみたいと思い、実際にWindowsにインストールしてみたので、その導入手順を紹介したいと思い...

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

今回紹介するのはスマートフォン用のBluetoothワイヤレスカメラリモコンです。Amazonで衝撃的な安さで販売されていたので試しに購入してみました。このBluetoothリモコンを...

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

先日アマゾンプライムデーセールが行われていた影響か、アマゾンでの荷物の出荷数が通常よりもかなり増えてクロネコヤマトの配送に遅延が発生しているようです。そんなわけ...

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的...

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

今回紹介するのは株式会社TKS 田中金属製作所が制作したマイクロナノバブルシャワーヘッド「Bollina Ninfa(ボリーナ ニンファ)」TK-7100-SLです。マイクロナノバブルと...

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりまし...

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

今回はAndroidでadb接続からスクリーンショットを取る方法を紹介したいと思います。通常のAndroidのスマホやタブレットでは電源ボタンと音量ボタンの長押しで簡単にスクリ...

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

今回はタブレットをいろいろな場所に自由に配置することができるタブレットアームを購入したので紹介したいと思います。先日の記事のタブレットをPCのサブディスプレイ化で...

NetaGear RSS News

Now Loading

Article

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

shopdd_template_ver3_5_002.png

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

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

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


UPDATE Ver3.5


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

RSSLoad


shopdd_template_ver3_5_012.png

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

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

モバイル対応


shopdd_template_ver3_5_007.png

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

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

ヘッダー


shopdd_template_ver3_5_002.png

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

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

パンくずリスト


shopdd_template_ver3_5_003.png

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

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

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

カテゴリ


Category+


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

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

SNS


shopdd_template_ver3_5_006.png

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

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

タグ付け


shopdd_template_ver3_5_005.png

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

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

リンクのアンダーライン


shopdd_template_ver3_5_004.png

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

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

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


Image Compression


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

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

不要な画像の削除


shopdd_template_ver3_5_009.png

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

shopdd_template_ver3_5_011.png

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

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

読み込み速度


Very Fast


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

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


Twitterカード


shopdd_template_ver3_5_008.png

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をよろしくお願いします。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...