1ランク上のブログにステップアップするためのアドバイス

1ランク上のブログにするために、ヘッダ、コンテンツ エリア、ナビゲーション、見出し、コメント、フッタ、広告など各要素をステップアップするポイントをBlog Designから紹介します。

How to Blog Design Style Guide

How to Blog Design Style Guide

ヘッダ

ヘッダはユーザーがあなたのサイトに来訪した際、最初に目にするものです。

ユーザーの印象に残るように、ヘッダのデザインを他のサイトと異なるユニークなものにするのは非常に重要なポイントです。

ショーケース

サイトのキャプチャ

darkmotion

ヘッダをステップアップするポイント

  1. サイトのタイトルとタグラインを念頭に置き、ヘッダのデザインをします。ヘッダ以外の箇所はそのトーンに合わせてデザインを行います。
  2. ヘッダでは、ユーザーにサイトの目的が何であるかと伝える必要があります。
  3. ヘッダのデザインは、機能的でクリエイティブなものにしてください。一目でも見たユーザーが忘れがたいものにします。

コンテンツ エリア

コンテンツ エリアはユーザーがあなたのサイトにいる際、もっとも多くの時間を費やすところです。

コンテンツ エリアは、読みやすいようになっていることは基本です。そして、気を散らす余計なものがないか十分に気をつけてください。

ショーケース

サイトのキャプチャ

SimpleBits

コンテンツ エリアをステップアップするポイント

  1. 見出し、本文、リンク、強調(太字)などそれぞれの関係が分かるデザインをします。例えば見出しは、リンクや強調より目立たせます。
  2. コンテンツ内のデザインは一貫したものにします。
  3. リンクのデザインは、ユーザーの気を散らせない程度に、目立たせる必要があります。

プライマリ ナビゲーション

プライマリ ナビゲーションは、サイトの主要なエリアを繋ぐリンクのセットです。

通常はヘッダ、もしくは上部に配置します。これはたいていのユーザーがそこにあることを期待しています。

ショーケース

サイトのキャプチャ

A Lista Part

プライマリ ナビゲーションをステップアップするポイント

  1. プライマリ ナビゲーションのリンク数は少なくします。目安としては6, 7個以下です。
  2. プライマリ ナビゲーションはサイトの全てのページに表示されるようにします。
    もし、全てのページに必要としないなら、プライマリではなくセカンダリ ナビゲーションを検討してください。
  3. プライマリ ナビゲーションのリンクは通常、問い合わせ(contact)とサイトについて(about)があります。残りはあなたのサイトの構造やユーザーに伝えたいコンセプトに合わせて追加します。

セカンダリ ナビゲーション

セカンダリ ナビゲーションは、サイトの異なるセクションに導くリンクのセットです。

通常はサイドバーに配置され、プライマリ ナビゲーションがカバーしていない箇所へ簡単にアクセスできるようにします。

ショーケース

サイトのキャプチャ

Design Disease

セカンダリ ナビゲーションをステップアップするポイント

  1. プライマリ ナビゲーションと同じように、必要なもののみリンクを設置します。特に理由もなくセカンダリ ナビゲーションのリンクを増やさないでください。
  2. セカンダリ ナビゲーションを複数にする場合は、明確にエリアを分けます。
  3. セカンダリ ナビゲーションを配置する箇所に、無駄なものを設置しないようにします。かっこいいデザインのカレンダーはサイトをクールに見せるかもしれませんが、それがユーザーに必要なものか十分検討してください。

ヘッドライン

ヘッドライン(見出し)の目的は、ユーザーの関心をひきつけて、内容に目を通してもらうことです。

ショーケース

サイトのキャプチャ

I Love Typography

ヘッドラインをステップアップするポイント

  1. ヘッドラインを目立たせる一番簡単な方法は、テキストと異なる色を使用します。
  2. 本文と異なるフォントの種類を使用するのも、効果があります。
  3. サイズは大きくします。本文より少し大きいだけでは不十分です。一目で分かるほど、ヘッドラインは大きいサイズにします。
  4. ヘッドラインだけを目立たせるのではなく、周辺に配置している要素(日付など)との比較で目立たせることも非常に効果的です。

コメント

コメントは、サイトの記事に対して議論が行われ、あなたのサイトのコミュニケーションが促進される重要なところです。

コメントについて言及するためにナンバーを加えたり、多くのコメントをスクロールする際に分かりやすいように著者のコメントを目立たせます。

ショーケース

サイトのキャプチャ

Chris Shiflett

コメントをステップアップするポイント

  1. それぞれのコメントは独立しているようにデザインします。例えば色を交互したり、区切りに要素を配置したりします。
  2. 著者のコメントは目立つように、他のコメントとデザインを変更します。小さい変更ですが、色を変えるだけでも大きな効果があります。
  3. コメントでは、コメント自体から他の情報(名前や日付)を切り離します。これは、議論を走査することを簡単にします。

記事のフッタ

記事のフッタは記事の後、コメントの前に配置します。記事のフッタはおろそかにされがちですが、非常にもったいないことです。

ユーザーが記事を読んだ後に、サイトの他の重要なものに導く大きなチャンスで、非常に貴重なエリアです。

ショーケース

サイトのキャプチャ

FreelanceSwitch

記事のフッタをステップアップするポイント

  1. 記事のフッタは、完全に独立したエリアとして考えてください。これはユーザーに記事の一部と思われないものにします。異なる背景を使用するのも効果があります。
  2. 記事のフッタをデザインする前に、そこで何をするかを検討します。不必要なものを配置しないことで、より洗練としてものになります。
  3. 記事のフッタに加える最も良いものの一つに、関連した記事へのリンクがあります。記事に興味をもったユーザーが他の記事にも興味をもつきっかけになります。

フッタ

フッタはページの最下部に配置されます。フッタを目にするユーザーは、記事やコメントに一通り目を通したところでしょう。

ページの下部まで目を通してサイトに興味をもったユーザーに、フッタにコピーライトだけしか配置していないというのは非常にもったいないことです。セカンダリ ナビゲーションを配置し、サイトの他の内容に導きます。

ショーケース

サイトのキャプチャ

Web Designer Wall

フッタをステップアップするポイント

  1. フッタは、コンテンツと区別できるようにデザインします。ユーザーにフッタであることを伝えるとともに、目にとまるようにします。
  2. フッタには、記事を読んだユーザーが望むと思うリンクを配置します。「最近のコメント」など、この時点でユーザーの役に立たないような情報は避けます。
  3. 基本はシンプルです。そして有用であるということにフォーカスしてください。

広告

多くのサイトで広告が使用され、広告はデザインの上でも重要な要素になりました。何の考えもなしに配置された広告は妙に目立っており、サイトをひどく見せています。広告はコンテンツを圧倒せず、注意深く配置する必要があります。

ユーザーがサイトの広告によって気が散るようなら、サイトの内容を読むことが非常に困難でしょう。広告よりも、サイトの内容に優先順位をつけるべきです。

ショーケース

サイトのキャプチャ

Copyblogger

広告をステップアップするポイント

  1. 広告を配置する際は、サイトの設計段階で考慮にいれます。広告がサイトの中にフィットするようにデザインします。
  2. 広告で人気の高いのは、Google AdSenseや125x125のバナーです。これらをベースにフレキシブルなデザインにします。
  3. 広告がまだ入らないときは、ダミーのものを使用するとよいでしょう。
  4. 広告を目立たせるように設計する際は、内容に打ち勝たないようにするのを忘れないでください。サイドバーは一般的に広告を配置する良い場所です。

top of page

©2017 coliss