ブログを始めて18ヶ月が経ちました。ブログ立ち上げの直後にちょこっとだけイジっただけで、残りの1年余りは同じデザインを使っていました。でもCSSなどの記述がごちゃついてきたので思い切ってブログのデザインを一新することにしました。
今まで使っていたデザイン
それがこれだ！
言わずと知れた有名テーマ。ネットで調べ物をしていた時なんかでも、結構ののテーマを使っているブロガーさんがいます。
このテーマの良い所は導入するだけの一発で自分のブログのデザインがかなりおしゃれになるって所です。「細かいデザインはおまかせで！」って人はこのテーマが非常に便利です。
でも、中見出しをカスタマイズしたいとか、更新日時をイタリックにしたいと色々こだわりだすとCSSが困ったことになります。モバイルとPCで異なるCSSを設定しなければならなかったのです。
モバイルとPCのCSS管理が超大変！
基本的に私のブログのNENZOPもPOZNENもスマホなどのモバイル端末からのアクセスが70％程を占めています。そうなってくるとスマホ向けレイアウトを重要視したくなりますよね。
でもブログのデザインってPCからしか変えられなくて、モバイル端末向けのプレビューも正直使いやすいとはいえない…もっと厄介なことにPC向け・モバイル向けの2つのCSSをあの使いにくい（失礼）CSS編集ウィンドウで編集しなければならない！
これは困ったぞ！となっているとPCとモバイルの両方を同一のCSSでデザイン管理出来るレスポンシブルデザインのはてなブログのテーマがあることを知りました。「これ幸い」とばかりにさっそくそのテーマをインストールしました。
今回から使っているテーマ
それがこれだ！改めて見るとはてブ数スゴイな、おい。
詳しくこのページにかかれていることを忠実に実行すれば、それだけでかなりいい感じのサイトのデザインになります。あとは色味を調整したり、ブログのグローバルリンクをいじればOKでした。
デフォルトでグローバルナビゲーション（タイトル下のメニュー）がついているのもいいですね。これをつけると付けないとでは直帰率が違います。
あと何と言ってもレスポンシブルデザイン！モバイルとPC向けのCSSを一括管理できるってのが何より便利です。他にもAdSenseの広告ユニットもモバイルとPC向けの2種類を準備しなくても良くなったので、広告の解析も楽ちんになりました。
その他のデザイン
デザイン的にはこれでも十分なのですが、さらに実施したデザイン施策として画面下に表示されるメニューバーです。ぶっちゃけ読者の可読範囲を狭めているので賛否はあるかと思いますが、人気記事なんかは下までスクロールしないと見られないわけなので、少しでも目に入る範囲に導線を！ってことで今回配置しました。
メニューバーの導入はこちらの記事を参考にしました。
リンクと文言の編集だけで、ほぼコピペでOKだったです。
次に見出しのCSSの編集ですね。見出しのデザインに関してはこの記事を参考にしました。
最後にサイト全体のカラーの調整ですね。ここはまだ色々やっている最中なので、この記事を書いている段階ではまだほとんどグレー一色です。白黒テレビでもお楽しみいただけるレベルの無彩色サイトになっています。
色の配色はベースカラー・メインカラー・アクセントカラーの3つを選ぶのが基本だと言われています。配色センスのない私にとってこのスライドは非常に参考になりました。
あとはサイト全体のバランスを考えながら配色をいじるだけです。多用しているボールド＋赤字の表現をどうしようかなぁ…
気になるPVや収益の影響
デザインが与えるPV数や収益性への影響ですが、デザイン変更が上手くまとまればいい良い影響があると言って間違いないでしょう。
同じコンテンツでも提供される場所って大事ですもんね。全く一緒の味・値段のコーヒーを場末の小汚い喫茶店で飲むより、清潔なカッフェーで飲むほうが良いですよね。
私が運営しているPOZNENというサイトではグローバルリンクを付けただけで前月より5〜10％ほどPV数が伸びました。PVが伸びればそれだけ収益性も向上しますので、デザイン変更ってかなり強力な施策だと言えるでしょう。
ただ、CSSや外部リソースをモリモリにしたサイトは表示速度が遅くなりがちです。今回のデザイン変更でも、モバイルとPC向けの別々のCSSではなくなったものの、前回よりCSSの量が増え、サイトスピードに影響しています。
チェックはこちらからどうぞ → PageSpeed Insights
にしてもサイトデザインってやりだすときりないですよね…でもデザインをあれこれいじっているときって、夢中になってしまいますよ！
