pockelab_renew

ブログをリニューアルした際の考察や後日のアクセス関連の経過などのまとめ

  • このエントリーをはてなブックマークに追加

2013年10月1日に本ブログ「ポケットラボ」をリニューアルいたしました。

これからブログを作りたいと考えている方や、リニューアルしたいと思っている方などに少し参考になればと思いリニューアルした際の考察や、後日アクセス関連の経過などをまとめました。

リニューアル前後のデザイン

前回(リニューアル前)のデザイン

Pocketlab

僕は、まだまだピヨッコですが、デザイナーとして仕事をしています。このブログ自身もデザインやWeb関係のことを書いているブログなので、デザインは毎回、その時のトレンドになっているデザインや技術を取り入れれていけたらいいなーとことを意識しながらリニューアルしています。

実際の仕事だと自分の好き勝手にできるわけではないので、せめて自分のブログだけは自分の好きなように作ろう!と色々試してみよう!ということでリニューアルいたしました。

前回のリニューアル時には、デザイン面では「ノイズテクスチャ」が流行っていたり、1pxの細かいラインやリアルなシャドーなどが流行っていたので、少し取り入れたデザインにしておりました。技術的なところでは、レスポンシブデザインをやっと取り入れておりました。

今回(リニューアル後)

Pocketlab renewal

今回のデザインでは、少し乗り遅れた感がありますが全体的にフラットデザインを取り入れ、グラデーションやリアルなシャドウ、テクスチャなどはすべて取り払いフラットなデザインにいたしました。2013年に入り、色々なところで(主に海外のサイト)でフラットデザインを取り入れているWebサイトがとっても多く、どれもとっても素敵だなーと感じており、自分の好みのデザインでしたので、今回はフラットデザインを採用させていただきました。

前回のデザインと大きく変わったのは、アイキャッチ画像やメインビジュアルの画像をとっても大きく使っているところです。前回までのアイキャッチ画像は、個別の記事の先頭の画像を自動的に取得して表示しているものでした。今回は、個別に1記事づつアイキャッチを制作して設定するため、効率よく記事で伝えたいことをアイキャッチやメインビジュアルで表現できます。

Illust pocketlab kaso

上記が各個別記事になりますが、メインビジュアルを大きく使っています。今回、この大きく画像を使うとところの理由としては「アクセスの大半が検索から来て、各個別の記事にたどり着く」ところにあります。アクセスしてきて、文章が読まれなく離脱されなくなるのは悲しいですよね。そのため、ビジュアルを大きく使い少しでも興味を引かせたい!ビジュアルから検索から自分の探している結果のイメージを結びつかせたいという思いで、今回大きくビジュアルを使用しております。(後ほど詳しく書きますが、嬉しいことに滞在時間、PV数が増加いたしました!)

 

デザインする際に参考にしたサイト・ツール

■Fat UI Colors

フラットデザインにとっても合う色の一覧になっているサービス。

■Flat UI pro 

■ウェブ業界で流行しているフラットデザインの利点と欠点

■Google Visual Assets Guidelines

グーグルさんによるフラットデザイン(アイコン)のガイドライン

フラットデザインって、グラデーションがなくて、シャドウも使ってなかったらいいんでしょう?と最初は思っていましたが色々とあるみたいですね。かと言ってもフラットデザインに定義などはないかと思いますが!

デザイン以外では

今回は、ヘッダー部分のカテゴリ、ソーシャルボタン、各記事の矢印(▶)、日付、アイコンなど一部の英字部分では、Webフォントを使用しております。アイコンの箇所に関しては、画像で作るよりWebアイコンを使用した方がレスポンシブWebデザインにする際に断然ラクだなーと感じました。アイコンの種類などもとても豊富なので、困ることはまずないかなーと思います!

タイトル、本文の部分では、日本語のWebフォント自体フリーではあまりないのでデバイスフォントにしましたが、一部の英字はフリーのWebフォントを使用いたしました。

Pocketlab webfont iconfont

アイコンフォント

探せばたくさんあるかと思いますが、今回は「Font Awesome」を利用させていただきました。

Web フォントでアイコン表示。 Font Awesome 使ってみた

導入方法はとっても簡単で上記のブログ様をみていただけばすぐにわかるかと思います! 

Webフォント

Webフォントは「google Font」より探して使わせて頂いております。

今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ

 こちらも上記ブログ様を見て頂ければすぐに導入できると思います!

極力、画像を使わないように

今回ももちろん、レスポンシブWebデザインに対応しております。GoogleさんがレスポンシブWebデザインを推奨していたり、スマートフォンユーザーが日本でますます増えていることを踏まえるとやはり対応した方が断然いいですね。

どうしても記事内にたくさん画像を使うようになり、スマートフォンで観覧する際に表示スピードが遅くなってしまうのを極力抑えたい、というわけでサイト内の画像を使うところ抑えていきたいということで今回はアイコンフォントやWebフォントを導入いたしました。またボタンなどもCSS3によって様々なデザインができるようになったので、CSSで表現できる範囲は極力画像を使わずいたしました。

デザイン部分では

Pocket lab rennesal after

アイキャッチ(サムネイル)を大きく表示

アイキャッチを大きくとった理由としては、ビジュアルから探している情報を見つけやすくしたい、というところにあります。

Pocket lab rennesal thum

WordPressで実装する際に、記事一覧ページと、記事ページに大きくサムネイルを使用したのですが両ページサイズが違い、一記事づつアイキャッチ画像を用意するのは少し大変かなーと思い、記事一覧では大きなサムネイルの右側だけ表示するようにしております。単純にoverflowを使いはみ出した部分は隠しているだけです。

リニューアル後のアクセス関連の経過

直帰率が大変な自体に!

リニューアル後に、Google Analyticsにてアクセスを見てみると直帰率がどんでもなく上がっておりました。最初のうちはデザインが見づらいのかなーなんて色々思っていましたが、訪問数も然程リニューアル前と変わっていませんでしたのでおかしい!と思い調べてみました。

原因はとっても単純でした。Wordpressのテンプレートに<!– ?php wp_footer(); ? –>を入れてなく、プラグインさん達が正常に動いてくれていなかった!ということで、wordpressで構築される方などプラグインが正常に動かないときはきちんと上記のタグが入っているか確認してみましょうー!すいませんでした。

300pocketlab_renewal_akusesu.jpg

上記を修正後は直帰率は正常に戻り、リニューアル前より直帰率は下がりました。

訪問数、PV数、滞在時間、伸びました

Pocketlab renewal access 2

リニューアル前2ヶ月前ほどから記事を書くことを出来なかったため、アクセスが伸びる事ができなかったのですが、とても嬉しいことにリニューアル後はページビュー数は1.5倍、滞在時間は1.3倍近く上がりました。

まとめ

今回のデザインの「大きくビジュアルを使う」ということで、訪問してくださるユーザーが探している情報が見つけやすなり、1記事づつ興味を持ち本文を読んでいただけるようになったのかな、と思っております。

これからもよろしくお願いいたします!

おすすめ記事

  1. 日本語が使える手書き風フリーフォントのまとめ
  2. 漢字も使える日本語のフリーフォントのまとめ
  3. photoshopでできる手書き風のデザインする色々な方法
  4. 宇宙を用いたwebサイト、webデザイン
  5. 魅力的なパワーポイントを作る際に参考になるデザインのいろいろ

関連記事

PAGE TOP