先週末(2012/03/30)からこのブログのビジュアルデザインをちょっと変更してみました。
私自身いわゆる「ウェブデザイン」とはものすごく遠い畑の人間なんですが、ブログを運営するに当たっては避けて通れないようなことだと思いましたので、なぜこういった変更を行ったか、ということについてちょっとだけ説明してみたいと思います。
【2012/04/05追記】YAT(@yat8823jp)さんがデザイン絡みでもの凄い分かりやすい記事を書いてくれたのでご紹介しておきます。
デザインする上で要素を目立たせるという事 – YATのBlog
注目点の表現を決める上で参考になりそうな具体例がたくさんありますので、ブログデザインなんかでも悩んでる人はちょっと見てもらうととても役に立つと思います。
なぜデザインを変えたの？
この変更を行うにあたって刺激になった記事が2,3ありまして。まずその紹介をしておきたいと思います。
ブログデザインをリニューアルしました | 毒舌プランナーの異論持論
デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素 – WEBCRE8.jp
昔のサイトのバージョンが見れる面白サービスでネタ帳を振り返ってみた*ホームページを作る人のネタ帳
一応断っておきますが、これはあくまで「ブログのデザイン変更を行うにあたって『私にとって』刺激になった記事」であって、今回の変更そのものとは何の関係も責任ありません、念のため。
さて、ブログの主商品はあくまでコンテンツであって記事の内容がしっかりしてることがまずは第一なんですが、デザイン（主にビジュアル的な意味で）を改善することで読者がもっと記事を読みやすくなったり、興味のあるであろう関連する記事をたどりやすくなったらいいなぁ、などと思いまして。
で、変更前と変更後を比べるとこんな感じになります（画像クリックで別窓拡大表示します）。
変更前
変更後
主な変更点を列挙すると以下の通りです。
- ブログのロゴ変更とサイズの拡大
- ブログヘッダーおよび全体の背景図柄を廃止
- ブログヘッダーにあったSNS・RSS関連のリンクをページ最下部フッターへ移動、そのリンクもボタン形式からテキストリンクに変更
- ブログヘッダーの検索ボックスを拡大
- 色調の統一
- 記事タイトルフォントのbold（太字）を廃止
- 記事ヘッダー背景色の変更
- 記事ヘッダーカテゴリ欄の強調
- 一覧ページの「続きを読む」を強調
- 記事内の見出し(h2,h3)の体裁を変更
他にも細々といじってるのですが、ざくっとこんなところです。
ちなみに全体の表示構造は何も変更してません。全幅を960pxとし最上部にブログ全体のヘッダー、最下部にフッターがあり、左2/3がメインの記事を表示、右1/3をサイドバーにサイト内リンクや広告関係の表示領域として割り当てています。
また当ブログのアクセス状況は、日によって波はありますが70%～80%程度は検索エンジン経由のユーザーであり、PV/UU(ユーザーあたりのページ閲覧数)=1.5前後であることを先に述べておきます。今回の変更のターゲットはこうしたユーザーさんにより多くページを見て頂く=情報を提供することです。その辺を踏まえまして。
変更したそれぞれの要素について
リストを上から順に見ていきます。
ブログヘッダー周りの変更
リストの1～4あたりです。メジャーブログでは結構ロゴが小さめだったりすることが多いです。あえて大きくしたのはこのブログのタイトルを覚えてもらうため。単純にそれだけです。
ブログタイトル【56DOCブログ】については私の昔からのハンドルを音写したものであることは極初期の記事に述べたとおりですが、このままだとなんと音読すればいいのかわからないのでカタカナをでかでかと併記しています。
正しく音読できることが重要かどうかはわかりませんが、はっきり脳内に印象付けるには短くてはっきり発音できるもののほうがいいだろう、と私は思っています。
背景やSNS関係のリンクボタンをヘッダーから廃したのはあまりに一度に色んな要素が目に飛び込んできて、どこに注目していいかわからないだろう、と感じたからです。これによってタイトルロゴがより鮮明になったと思うのですがいかがでしょうか。
また、ブログ内検索のボックスをかなり大きめ（横長）にとりました。先に書いたとおりアクセスの大部分が検索経由です。検索ユーザーはおそらく「能動的に何かを探している」率が高い人であり、一ブログ内でも目的の情報を見つけるまでさらに検索を行う可能性があるのではないかな、と感じたためこのようにしました。
色調の統一
リストの2,3,5あたりです。サイト全体の背景に薄いグレーの市松模様が以前のバージョンにはついていました。最初にコーディングしたときに全体のバランス見るのにそのような背景にしておいたのですが、今の今まで放置してましたｗ制作用の柄ですので読む人には全く必要ないので廃しました。
不要な背景や無駄に目立つリンクボタンや背景を廃したことで、本当に視線を向けて欲しいところを浮き立たせます。かつ色調を統一（今回は紫を軸にそれより赤めの色、青めの色を多少使い分け）することでサイト全体の「印象としてのつかみ所のなさ」を少しは改善できたのではないか、と思うのですがいかがでしょうか。
記事ヘッダー回りの調整
リストの6,7,8あたりです。以前のバージョンを見ると記事タイトル下のカテゴリやSNSリンクボタンを表示している帯背景がかなり暗く、背景色とのコントラストがきつすぎるように思えたので明度をあげました。
記事ヘッダーはまずその内容を把握するために目に飛び込んで欲しいところではあるのですが、タイトル文字のボールドや高コントラストの帯、その上にソーシャルボタンとあまりに見るべき要素が多いので、それぞれを個別に装飾を多くするとちょっと重たいというか、目立つもの同士がぶつかり合ってかえってどこの注目していいのかわからなくなってしまいます。
一方で記事ヘッダーのカテゴリ表示にはリンクを貼ってありましたが視覚的に埋もれてしまってあまり機能してなかったようなのでこれをもう少し際立たせたいと思いました。
繰り返しになりますが、能動的に何かを探しにきてるユーザーは関連情報を探して目を通す確率が高いでしょうから、記事ヘッダーの同カテゴリへのリンクは重要な部分だと思います。
カテゴリ表示を擬似ブロック要素で囲んでボタン化し、ネガティブマージンで記事の領域よりちょっとはみ出させることで、「紙面に張られた付箋」のような表現としています。記事ヘッダー全体としては装飾を減らす方向にしましたが、一覧ページ表示時にどこからどこまでが一塊の記事であるかを認識しやすくしたい、という意図です。
当ブログではブックマークをしていただいてのトップページからの流入というのはまだそれほど多くはないと思いますが、定期購読者が増えたときにはこのあたり、一覧ページでの視認性の良さも重要になるのではないかと思います。
記事ごとの表示の調整
リストの9,10あたりです。「続きを読む」ボタンはどんな形であれそれなりのものがあればいいんでしょうけど、以前のバージョンではアイキャッチ画像を入れるとそれに負けてしまっていたので、もう少し大きく表示して配置も中央にしました。一覧ページのスニペットというか「つかみ」のところで興味を持ってくれた人がすんなり本文を続けて読んでくれるような効果があるといいんですけど。
余談ですが旧バージョンの「続きを読む」やSNSリンクの各ボタンは画像ではなくCSS3で半透明な感じの表現にしてました。そんなtipsを雑誌や各デザイン系ブログで見てためしにやってみたかったのでそうした…んですけど、意味なかったですね。「読んだtipsはさっそく試したい」のが人情ですけど無節操にそんなことやっちゃいけない、といういい例です。
さて記事内の中見出し（h2）小見出し（h3）ですがborderプロパティでカラフルな区切り線やらリストマーカー表現したりしてたんですけど、どうにも「1つの文章」としての統一感がなかったのでやめました。
色調統一の一環として見出し文字自体を同系色で青側に少し遷移した色にしました。かつ中見出しは極めてコントラストの低いボーダーで囲い、背景もほとんど記事背景色に近いようなうっすらしたグラデーションだけ入れてあります（良く見ないとわからないかも）。小見出しもリストマーカー風のボーダーをやめてテキスト色のみの装飾としました。
全体としては今までどおり記事タイトル・中見出し・小見出し・テキスト本文と、それぞれの重さごとにフォントサイズを調整しています。この程度でも見出しだけの流し読みは可能だと思いますし、できれば今後も不要な装飾は省いて行きたいと思います。
その他
一部の擬似ブロック要素やフォントにtext-shadowプロパティを施しています。かつサイト内リンクで確実に踏んで欲しいところは:hover擬似要素でシャドウ色を変えてうっすらと光彩を放つようにしました（IE6ではもちろん表示されない。されないんだよ！）。またサイドバーのリンクはhoverでボールドになります。
リンクボタンはそれだけで「クリックすればページ遷移できるリンクである」ことを認識できるのがベストですのでhover表現については基本否定派なのですが、「これって押したら何らかのアクションあるのかなー？」というあまりweb慣れしてない人向けには多少意味があるのかな、と。アクセスする人全てが「ブログ読み慣れ」てるわけでもないでしょうから、そういった人向けにちょっとした「親切の誘導」があってもいいのかなと思いました。
また、サイドバー内のリストマーカー色を記事ヘッダーの「カテゴリ」リンクや一覧ページの「続きを読む」と同色にしています。こういったことで視線の誘導に繋がるかどうかはわかりませんが、不要な背景装飾を廃したうえでポイントとなる要素を同色にすることで多少は効果があれば、と思います。
その辺を踏まえてもう一度全体を見直すと
こんなラインでポイント間の視線の移動があり、その間に記事のタイトルやスニペット、サイト内リンクのリストなどがあって、興味を引けたところに注目してもらえる…というのが理想ではあるのですが、はたして思ったとおりの効果があるのかどうか。今後のアクセスの推移を見守りたいと思います。
ちなみに記事領域先頭のアドセンスリンクユニットの色調も当然ながら同じ色調にしています。色々とイヤらしいアレですが…一応「スポンサードリンク」と明記はしてますがペナルティの対象にならないといいんですけどね。
デザインのリニューアルはまとめて行うべき？
いつ、どのタイミングでデザインのリニューアルをすべきなのか。職業ブロガーでまとめてデザイン更新を行うことが出来るのが一番いいんでしょうけど、本業の片手間や自宅で自分の時間でコツコツブログやってる人にはなかなか難しいかもしれません。
私も今回の変更ではたまたま多少まとめて行いましたが、実は以前から細々したところは都度変更したりしています。行間や文字サイズ・ピッチの調整、ホワイトスペースのとり方、広告の配置、SNS関係のリンクボタンの意匠などなど。
ブログの根幹をなすのはあくまでコンテンツであることは先に書いたとおりですが、やっぱり長いことみていると色々自分でも気になるところはでてくるわけで、気付いたときに各部分をちょっとずつ修正加えて試行錯誤していくのも現実的な方法として悪くはないと私は思っています。
そうしていても、どうしても改善の行き届かないところがあって、その辺の積み残しをある時点でまとめて行うのがいいのではないでしょうか。実際ウェブデザイナーやコーダーではない門外漢にはそもそもコーディングの知識を得ることが大変なのですが、日々の小修正を行いつつそのなかでポイントを絞ってわからないことを調べ、コーディングの知識もちょっとづつ身につければよいのではないかと思います。
また本来であれば実際に運用している本ブログ以外にテストブログを用意してそちらでデザイン確認してから本ブログに反映できればいいんですが、今回は本ブログのテンプレを直接変更を行ってます。とくにFC2のように無料のレンタルブログなどでは1ユーザー1ブログしかもてない場合もありますので（忍者ブログでは複数もてますけど）その辺は難しいところもあるのですが、変更作業中にアクセスしたユーザーに「あれっ？」と思われないような気遣いも大切ですね。そんなわけで今回の変更作業中にアクセスしていただいた方、なんかおかしな感じになっちゃってゴメンナサイ。次回はちゃんとテストブログ用意してからやりたいと思います。
まとめ
いいデザインの何たるか、というのは非デザイナーの私が語るべくもありませんが、しかしそれがわからないことを情報の整理のまずさ、ユーザビリティの低さの言い訳になってはいけないと思います。分からないなりにも自分自身のブログをまじまじと眺めていればなにがしか感じることもあります。アクセスの大小の差はあれこうして世に情報を発信する以上、対象となるユーザーにいかに気持ちよく、スムーズにコンテンツに目を通してもらうか、必要な情報を提供するかということについてそれなりの努力は必要でしょう。
先に紹介したWEBCRE8.jpさんの記事 では「すべてのデザインには意味がある。」と締められています。なかなか私には理解の届かないところもありますが、当ブログのデザインを実際に改善し、一つ一つの要素を追うことで少しでもその辺の知識、理解を深めていければなぁ、と思っています。
とりあえず今回の変更はこういったところで、主たる目的は「アクセスの多い検索ユーザーが必要な情報にスムーズにたどりつける」「そこから関連する情報により多く目を通してもらう」ことでした。思ったとおりの結果が出るかどうか、あるいはユーザーにとって使いやすい・見やすいかどうかは分かりませんし、正直プロの方から見れば笑っちゃうような内容かもしれませんが、今自分の理解している限りのことをやってみました。
それでもまだまだ気になっているところはあります。ブログを書くのはある意味「自分ブランド」を確立するという面もあって、そういう意味では私のプロフィールやSNSリンクをページフッターに追いやったのはどうなのかなー、とかキーカラーに紫色を選んでしまったのは特に根拠もなく主に私の好みでしかないので、その辺がどう受け入れられるのかなー、とか。いやほんと、色彩のこととかどう決めればいいのか皆目検討もつかなくて困っちゃいます。世のデザイナーさんは本当にすごいと思います。
今回のような変更を頻繁にするのは時間的にも実力的にも難しいことではありますが、改善に終わりはありませんので今後も気付いたところはゴリゴリ修正して行きたいと思います。また実際に訪れていただいたユーザーに意見を行っていただくのが一番の近道だと思いますので、何かお気づきの点があればコメント欄あたりでもSNS経由でもなにかご意見をいただければなぁ、と思っていますので何がしかのリアクションをいただけると大変嬉しく思います。
コメント