キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

キャリコがブログカスタマイズするときに気をつけてる5つのこと

      2014/10/10

寒さを凌ぐために唐辛子を食べてるキャリコ( @calicocatxyz )です。

厚着して外に出ても寒いのにイギリス人は半袖で歩いてたりします ^^; シェアハウスの人となんでだろうって話したら、体温が高いからだということがわかりました。熱を発生させる筋肉の量が多いから体温が高いとのことで、今日から筋トレ&唐辛子で寒さを乗り切ります♪

さて、本日のエントリーですが STINGER5 のカスタマイズも一通り終わったからその報告と、カスタマイズする上でキャリコが気をつけてることを紹介したいと思います。

Ads by Google

客観的に見て見やすいかどうか

ネットサーフィンをして色んなブログを徘徊してるとき、ここがこうだったらいいのになとか、このサイトのデザインは素晴らしい!などと感じるときがあります。それを自分のブログに落とし込んだら見やすいブログになるんじゃないか?そう思ったのがきっかけで訪問者になったつもりで自分のブログを見るようにしています。

それで出来上がったのが今のキャリコの形で、しばらくこのデザインでやっていこうと思います。ここに行き着くまでにどのようなことに気を付けてデザインをしたのか?これからお話します。

1. 基調となる色を決める

色でサイトのイメージというのは変わると思っています。STINGER5 はもともと背景が灰色でメインコンテンツが白、そして文字色が黒でリンク色が青という構成になっています。それぞれの色が与える印象もありますし、インターネット上の暗黙のルールというのもあります。キャリコはこの基本となる4色をそのまま使っていますが、その理由を説明します。

灰:グレー

上品でお洒落、穏やかで控えめ、落ち着いた雰囲気を与えるといった心理効果があります。灰色は他の色との協調性が高くてどんな色にも馴染み、自己主張せず周囲の色を引き立てる調和の色です。この色があることによってどんなアイキャッチ画像でも、ごちゃごちゃせずにスマートに見せられます。キャリコでは背景や h4 タグなどに使っています。

白:ホワイト

清潔な印象を与える心理効果を持つ白は、信頼感や清潔感といったクリーンなイメージなので高い好感度があります。また、暗い色を引き立てるから灰色や黒との相性もよくて視認性もよくなります。

黒:ブラック

黒は周囲の色を引き締めて目立たせる効果があり、心理効果としては高級感を与えるというのがあります。STINGER5 の文字色は #000 の黒ではなく、#333 の濃いグレーを採用しています。白背景に真っ黒の文字だとコントラストが強くて目が疲れることがあるので、キャリコは変更せずに使っています。ほかにはタイトル画像の文字や購読ボタン、 h3 タグのアイコンなどに使用しています。

青:ブルー

空や海など広大な自然のイメージがあり、好む人が圧倒的に多く、嫌う人が少ないという特徴を持った色です。ほかには信頼、誠実、知性、爽やか、クール、好感度が高い、などがあります。キャリコではこれ以上の色を増やしたくなかったので、差し色として h2 タグの背景やファビコン、検索ボタンなど要所で使用しています。

2. ブレないテーマを決める

これは統一感を大事にするということです。これがズレることによってブログがごちゃごちゃして見えますし、無意識に違和感を感じてしまい内容に集中することが出来ません。キャリコでは『 透明感 』『 洗練 』『 シンプル 』というテーマを意識して作っています。

背景画像は固定する

背景に画像を使用してないサイトは基本的に単色なので、いくらスクロールしても背景は動いてるように見えません。それが画像を使用すると背景が動いてしまうので、固定することによって同じような効果を意識しています。

画像と記事一覧のリンクホバーを設定する

オンマウスしたときに透けるような効果をもたらす設定をして透明感を演出しています。そのために人気記事一覧のランキング順位も透過処理をしています。( これは #333 だと色が強すぎてしまうというのもあって… )

3. 各ブラウザでの表示確認をする

CSS でのデザインが終わったら必ず各ブラウザで表示確認をしています。訪問者がどのデバイスで、どのブラウザで見てるのかという部分を意識してるのですが、これは Google Chrome の拡張機能を使うと便利です。

Chrome ウェブストア
User-Agent Switcher

Android の携帯から Firefox を使って見た場合とか、iPhone から Chrome を使って見た場合など、様々なシチュエーションから見ることが出来ます。いちいちブラウザを開く必要もないし、携帯から確認する手間も省けます。この機能が面白くて IE6 とか Windows Phone に固定したままネットサーフィンをしたりしてます。

4. 画面を拡大、縮小してみる

ここまでする必要があるのかって感じですが… キャリコは旅の途中でパソコンが壊れてしまい、クスコで直したら画面の解像度が 800×600 から変更できなくなってしまいました。OS もスペイン語でキーボードの配置も変わって使いにくいことこの上ない仕様です。仕方なくそのまま使っているのですが、これが功を奏して意外な発見をすることが出来ました。

STINGER5 のようにレスポンシブデザインなら問題ないのですが、そうじゃないサイトだと必ず横スクロールバーが出現してしまいます。これは解像度の問題だから仕方がないのですが、縮小してみるとサイトのデザインが崩れたり、追随する SNS ボタンやトップページに戻るボタンがメインコンテンツにかぶっている、酷いときには50%にまで縮小しないと見られないなんてサイトもありました。

恐らく世の中には縮小したまま閲覧してる人もいるのではないか?そう思って float 要素で回り込みをさせた場合、カラム落ちしても狙い通りに表示されてるか、っという部分まで確認するようにしてます。

5. STINGER5 とわかるように

原型を崩さずにカスタマイズするのがキャリコの美学としてますが、もちろんいじり倒した STINGER5 のブログを見るとカッコいいなって思ったりもします。これは好みの問題になると思いますが、細かいデザインに『 おっ! 』と感じてもらえたら嬉しく思います。

まとめ

ブログカスタマイズには何が正解というのはありません。しかし、どんなにデザインが良くても見づらければ訪問者はすぐに去ってしまうので、そういった部分は意識した方がいいと思います。なーんて偉そうに言ってもキャリコのブログを見づらいと思う人もいるわけで…やっぱり最終的にはコンテンツが充実してるか、質の良い内容になってるかになりますね ^^;

この記事が良かったと思ったら、いいね!やシェアお願いします♪

ライター紹介

キャリコ 統括、ライターの猫たちを束ねるボス

キャリコの創設者であり、助手には書けないようなネタをお届けします。

 - ウェブデザイン ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

見せます!キャリコの STINGER5 カスタマイズ履歴のすべて

こんにちは、キャリコ( @calicocatxyz )です。 敬遠してた Wor …

アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける

暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。 部 …

アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法

SNS でのフォロワーさんが増えてきて喜んでるキャリコ( @calicocatx …

Photo credit : http://usb.brando.com/
アナタは大丈夫?デザインが崩れてるブログほどダサいものはないと思う

どうも、ネットサーフィンが大好きなキャリコ( @calicocatxyz )です …

パソコンの場合
ブログの右下にあるページ上部に戻るボタンは要らないんじゃないかって話

最近は押していない、キャリコ( @calicocatxyz )です。 記事を見終 …