ブログデザインを変えたら、アクセス数が倍になりました。

さて、このブログを初めてから約1年が経とうとしています。

このブログは元々「シンプリシティ」というブログテンプレートをダウンロードさせて頂き、そのCSSを色々いじってデザインを編集していました。

このたび、別に運営しているサイトのデザインを編集したことで、このイロログのサイトもデザインを一新、ガラリと変えてみました。

まだまだ改善の余地はあるかと思いますが、具体的にどういうことに気を付けてデザインをしたのか、忘備録として記録していきます。

ちなみに、資料がほとんどなくて申し訳ないですが、以前はこんな感じでした。

変更前
人気記事一覧

変更した点。

ロゴデザインを変更した。

以前は正直即興で作ったようなデザインでしたが。

※以前のロゴ。こうやってみるとなんかテキトー。

このたび、ロゴデザインをこのように変更してみました。

ロゴ

イロログ=いろいろなブログ記事がおもちゃ箱に入っているイメージで、ボックスのデザインは変わらず。

ですが、文字のカラーの部分をナビカラーの通常バージョンとホバーバージョンに変え、全体的にカクカクとした書体の「OCR A Std」を使用し、ボックスのイメージを表してみました。

色とりどりのボックスのカラーは、様々なジャンルのブログ記事を表しています。

お知らせコーナーを設けた。

ブログとして投稿した記事はトップページで反映されますが、固定ページなどはトップページに反映されないので、記事を更新してもなかなか気づきにくいページです。

そこで、こういったお知らせコーナーを設置し、変更があった箇所をすぐ知らせれるようにしました。

お知らせ

リンクバナーの上下左右の余白を大きくし、リンクをバナー全体に設けた。

トップページの記事本文へ飛ばすリンクバナーを、スマホで表示した場合、上下左右と余白を十分に設けてみました。

PCだとリンクへ飛ぶボタンは小さくてもそこまでストレスではないですが、スマホなどの幅の狭いデバイスで閲覧した時、このリンクのボタンが小さいとなかなか押せないときが多々あり、若干ストレスになります。指が太い人だとなおさらです。

そこで、スマホなど小さなデバイスで表示された時に、このボタンが十分に押せるよう余白と横幅をたっぷり設けてみました。

バナーデザイン

そしてリンク部分は、文字だけでなくボタン全体に貼りました。これ重要です。

文字だけにリンクを貼ってしまうと、余白に触れた時にサイトへ飛べず、結局二度手間になります。

これはトップページに限らず、ナビ画像やアーカイブなど、なるべく色々な場所に適用するようにしました。

ちなみにボタン全体にリンクを貼るには、a要素をブロックにしてあげると全体にリンクが張られます。

・・・正直参考になるかわかりませんが、一応上記画像のバナーのCSSを貼っておきます。

/*記事を読むボタン*/
.entry-read a{
width:120px;
display:block;/*ブロック要素に*/
float:right;
margin-top:10px;
color:#FFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
text-align:center;
padding:5px 8px 5px 8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration:none;
background-color: #F8B62D;
/* box-shadow */
box-shadow:0px 2px 0px 1px #E39B06;
-moz-box-shadow:0px 2px 0px 1px #E39B06;
-webkit-box-shadow:0px 2px 0px 1px #E39B06;
border-color: #E39B06;
position:relative;
}

ナビをトグルからボタン型に&大パネルと小パネルを付けた。

ブログを見ればおわかりかと思いますが、トグルボタンからナビボタンを配置し、大きなパネルを1コ、小さなパネルを3コトップページに配置しました。

パネル

トグルボタンって、あまり慣れてない人からするとなんだかよく分からないんじゃないかと思うんですよね。

そして大パネルには、このサイトの説明文を入れてみました。

ちなみに、左下の歯のブログは自身の矯正治療の様子を掲載したブログに飛ぶようになっております。

このパネルも、いずれはもうひと工夫していきたいところです。

フッダーの余分な項目を削除。

以前はフッター部分にタグやアーカイブ、カテゴリーなど、色々なものをごちゃごちゃおいていました。

ですが、現在は自己紹介文とカテゴリー、ナビボタンを配置するぐらいで、あとはすべて削除してみました。

フッターはどのみちスマホでは見れないので、正直あまり色々置きすぎても意味をなさないと思い、思い切ってシンプルにしてみました。

フッター

リンク部分は、ぼちぼち増やしていくつもりです。

記事中の人気記事表示を10に増やし、cssでデザイン。

人気記事は以前も掲載していましたが、CSSでデザインを編集していなかったせいか、どうも存在感がありませんでした。

そこで、表示記事数を10に増やし、スクロールのボタンのデザインも変えてみました。

高さを調整してスクロールさせることで、一定の高さで10の記事が見れるようにしました。

人気記事

記事タイトル下のアーカイブやカテゴリーを色やデザインを使用し分かりやすくハッキリさせた。

記事部分のタイトル下に、投稿日とカテゴリーが載っていますよね?

以前はただ白背景に文字が載っているだけの、どちらかというとのっぺりしたデザインでしたが。

日付部分

※画像は歯のブログのものです。資料がなくてスミマセン。

私のサイトは背景がブラウン調だからか?前のデザインだとどことなくのっぺりとした印象になっていました。

そこで、ロゴに使用されているボックスのカラーを薄く色を落として使用し、項目ごとに色を変えてみました。

カテゴリー

カラーでわけたので、日付とカテゴリーの違いが分かりやすくなった気がします。

以前は白背景に文字が並んでいただけだったので、正直どこからが日付でどこからがカテゴリーなのか分かりずらかった気がします。

その他。

その他にも、サイドバーのバナーデザインを項目ごとにまとめて生理したり、h2やh3のデザインを変えたりと、とにかく余白を十分に取り、見やすく分かりやすくを心がけデザインをしてみました。

まとめ。

まだまだ改良の余地はあるかと思いますが。こういうデザインは時代によっても変わってきますからね。

正解がないというか終わりがないというか。そこが魅力でもあるんですけどね。

ですがデザインの本質とは、「相手がいかにストレスなく使用できるか」。

つまりは相手に対する思いやりの気持ちだと思うんですよね。

これだけは時代が変わっても唯一変わらない本質だと思うわけです。

なんだかシメにはいってしまいましたが、今日もありがとうございました!

 

スポンサーリンク