KOJIKA17

ブログをリデザインしました。
ついでにデザインについても考えてみた。

今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。 リニューアルしたポイントをまとめてみます。

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

よくある感じのデザインです。ポイントは以下の通り。

  • 2カラム
  • 赤、白、黒が基本色

1カラムにした理由。

ブログサイトでよく見かけるレイアウトは2カラムや3カラムのレイアウトが非常に多いように思えます。
また私自身も2カラム、3カラムのブログ構築しかしてきませんでした。

何が大切か?

このブログはまだ日が浅いですが、制作会社時代の社内ブログを含めれば、3, 4年ぐらいブログを書いています。 有難いことに最近は特に、はてなブログのホットエントリーに入ることもあり、何が一番大切かと言われれば、私の場合コンテンツが一番大切だと思います。
コンテンツがなければブログは成り立ちません。

そのコンテンツを一番生かせる形を考えた場合、不要な情報が入ってこない1カラムレイアウトが一番生かせるのではないかと考えました。
またコンテンツの領域が広がるので、大胆なデザインを行うこともできます。

コンテンツは生かせるが、ナビゲーションの問題はどうするのか?

1カラムレイアウトの場合、ナビゲーションの問題が発生します。
2カラム、3カラムであればファーストビューでナビゲーションがどこにあるかすぐに判断できます。
1カラムの場合ナビゲーションを上に持っていった場合、コンテンツのタイトルがナビゲーションに埋もれる可能性があります。
ナビゲーションを下に持っていった場合でも、ページに入った時のナビゲーションの一覧性が損なわれます。

ただし、そこまでナビゲーションが必要かという疑問もあります。
例えばRSS, twitter, 検索エンジンなど何らかの方法で"ブログリニューアルした"という記事を見に来たとします。
タイトルやキーワード、そのコンテンツのブランディング力に引かれて見に来られているのだから、まずサイトのタイトルを確認して、コンテンツを見ると思います。
サイトに来て早々、カテゴリやアーカイブをチェックしてから記事を見る人はあまりいないでしょう。

カテゴリやアーカイブをチェックする場合というのは、その記事が為になったり、面白かった、次のアクションのはずです。
そのアクションの時にナビゲーションを提供できればいいので、1カラムの下にナビゲーションを置いた方が動線の誘導をしやすいのではないかと考えました。
むしろ2カラム、3カラムでナビゲーションがあったとしても、コンテンツを下の方までスクロールすると、ナビゲーションが隠れて見えなくなってしまう場合が多々あると思います。それを解消するために、わざわざ"上に戻るボタン"などを設置して誘導させることになると思いますが、ユーザーに次のステップを踏ませて、上に戻ってコンテンツを見てもらう必要性が出てくるので効率的ではないような気がします。

今回の1カラムの構成

上記の点を踏まえて、ヘッダーにはロゴマークも踏まえたパンくずリストのみを設置しています。
ロゴマークも合わせたパンくずリストにすることにより、重複したナビゲーションリンクを減らす効果と無駄なスペースを有効活用できます。

コンテンツ部分はタイトルがが分かりやすく、記事が何分程度で読めるかも分かりやすくしました。
章や文節の幅も大きく取り、ゆったりと読みやすいように意識しています。

フッターはナビゲーション関係を全て持ってきました。
特に"関連記事"から他のページに移動するユーザーが多いので、リンクの色も他と目立つようにしています。

色について

白と灰色が基本ですが、ピンクやターコイズブルーのような明るい色を使用しています。

また今回は、#FFFFFF#000000のカラーを使用しないようにしています。
自然界で考えた時に、純粋な白、黒が存在するのか、と考えたからです。 一番明るい色でも#FEFEFE,一番暗い色で#111100を指定しています。
今後、キーカラー以外に一番明るい色と一番暗い色を予め設定しておけば色の設計もできるのではないかと思いました。
#FEFEFEはほとんど白に近いので、あまり意味がないように思いますが、サイトによっては同じ白や灰色でも全体を赤みがけたり、青みがっかた白などを使えるようになれば、もっと表現力が増すように思えます。

コーディングについて

今回のコーディングでは、なるべくデフォルトのCSSを使えるところはデフォルトを重視しています。
今回デフォルトのCSSでコーディングすることはずっと考えていたので、今回の為に、あのチートシートを作ったといっても過言ではありません。

デフォルトで使用したCSSはbodyやh1~h6のフォントサイズはデフォルトで使用し、p, ul, ol, li などの要素に至っては基本的にデフォルトのまま使用しています。
デフォルトを重視しているのでCSSリセットもかなり短くなりました。
さらにclearfixも色々考えて、かなり短くしています。

/*------ Re:CSS */
html,body,h1,h2,h3,h4,h5,h6,dl,dd,
article,aside,canvas,footer,header,hgroup,nav,section,figure,figcaption/* html5 LastCall? */
{display:block;margin:0;padding:0;} /*  [´・ω・`] display:block! */
em  {font-weight:700;font-style:normal;}
addr[title],dfn[title]  {cursor:pointer;text-decoration:underline;}
table {border-collapse:collapse;border-spacing:0;}
th  {text-align:left;}
img {border:none;height:auto;}
body{
  background-color:fbfbfb;
  font:"Meiryo","メイリオ","MS Pゴシック","ヒラギノ角ゴ Pro W3",Arial,helvetica;
  color:#565656;
  line-height:1.5em;
}

a  {color:#006AB5;}
a:visited {color:#72BB2A;}
a:hover {color:#444;}
a img:hover {opacity:.8;}
::after {display:block;clear:both;} /* クリアフィィィッッックス :゙;`;:゙;`;・o(ロ≦〃) */

今回はprefixを一切使っていませんが、ほとんど最新ブラウザ見れるようにしています。 なお、nth-childやMultipe BackgroundsなどCSS3を大量に使っていますので、IEだとおかしいところもありますが、ほんのり見れる形にはしています。
もし今、IEで見ていらっしゃる方が入れば、最新のモダンブラウザで見て頂くことを推奨します。

久しぶりに色々、突き詰めて考えると新しい発見があったり、今後の課題ができたりと面白いですね。
気が向けばtrackbackやコメントも書き込めるようにしようかと思っていますが、もしご意見がありましたら、Twitterで話しかけて頂ければ、できるかぎり答え致します。