人気ブログ20の共通点をレイアウトやデザインの参考にしよう
人気のあるブログのレイアウトやデザインを見ていると、結構共通点があります。共通しているということは、それぞれ重要な意味があるはずです。
例えば、超有名な以下のブログは、すべて２カラムで左にメインコンテンツがあります。
ということでウェブサイト作成のプロが作るブログの共通点を探ってみました。これが絶対正しいということはないですが、デザインやレイアウトの参考にはなると思います。
枠組みについて
まずは全体的な枠組みについてです。
1. 横幅は1000px前後
私がホームページを作り始めた頃は、横幅800pxが多かったのですが、ディスプレイは年々大きくなって、解像度も高くなっていますので、800pxはもうあまりないですね。
かといって広すぎても、収まりきらなくなるので広けりゃいいってもんでもないです。960pxや980pxが多く、最近リニューアルしたブログなんかでは1000pxを超えているものもあります。
2. 真ん中に寄せている
左に寄せてあるブログもありますが、大きなディスプレイで左に寄ったサイトはなんか見づらいです。
今では2000px近くあるディスプレイも珍しくありませんが、そんなディスプレイで左に寄せた800pxのサイトを見ると右側の空白の方が大きくなります。
ちなみに真ん中に寄せるにはこんな感じですね。
"#container{
width: 960px;
margin: 0 auto;
}
3. 2カラムが多い
このブログは3カラムですが、2カラムの方が多いです。見た目がすっきりしますし、メインコンテンツに使える幅も広くなります。
4. メインコンテンツは左側
2カラム、3カラムにかかわらず、メインコンテンツは左でサイドバーは右が多いです。
何となくメインが左にあるほうが読みやすいです。
横の文章は左から右に読みますので、文章の左側をすっきりさせた方が読みやすいのかもしれません。
5. フッターのデザインが凝っている
メールフォーム、自己紹介、タグクラウドなど設置しているものは様々ですが、フッターのデザインは非常に凝っています。
おしゃれは足元からですね。
6. タイトルは画像
タイトルには画像を使っており、フォントで表しているブログはあまりないですね。
CSS3の登場で画像を使わなくても色々表現できるようになりましたが、特に日本語だとフォントで画像のようにきれいに仕上げるのは難しいです。
インパクトの強いロゴは記憶に残りやすいので画像の方がいいと思います。
記事部分について
記事部分における共通点について。
7. 続きを読む
トップページやカテゴリページなどの1ページで複数の記事が表示されるページでは、記事内容をすべて表示せずに「続きを読む」などとして個別ページへリンクさせるようにしています。
すべて載せるとページ全体が長くなってしまい読み込みも遅くなりますし、スクロールするのも面倒です。
8. 記事の頭に画像を入れている
タイトル直後やちょっとした説明の後に記事の内容を伝える画像を入れています。
絵を入れることで見た目にも印象が残りますし、内容も伝わりやすいです。
フォントや色使いについて
9. フォントサイズ13pxか14pxが多い
あまり小さいと見えにくい人もいますので、そこそこ大き目の13pxや14pxが多いです。
私みたいな素人の場合、フォントが大きいと何となく締まりのないデザインになりがちですが、みなさんさすがです。
10. フォントカラーは黒ではない
「#000000」はほとんどないです。
かといって、赤とか青とかいうのではなく、黒に近い「#333333」など若干薄めにしています。真っ黒はちょっときつすぎからでしょうか。
11. メインコンテンツの背景は白
ブログ自体の背景は、色をつけたり画像を使ったりしていますが、メインコンテンツの背景は白が多いです。見易さ重視ということでしょうか。
プレビュー数を増やすために
ここからは、来たユーザーに他の記事も読んでもらうための工夫について紹介します。
12. 記事の下に関連記事の一覧がある
関連した記事を知ってもらうことで他のページも見てもらえる可能性が高くなります。
さらに「知りたい情報がたくさんあるブログだな」と思ってもらえるはずです。
WordPressの場合は色々プラグインもありますが、このブログはFC2でちょうどいいのがないので、タグ一覧を設置しています。
13. サイドバーに人気記事やおすすめ記事がある
読んでほしい記事を知ってもらうために効果的だと思います。自慢の記事を見てもらってブログのファンになってもらえればいいですね。
最新記事一覧よりも見えやすい位置においてあるブログも結構あります。
14. ブログ内検索がある
カテゴリやタグや関連記事などを表示しても、なかなか見たい記事が見つからないということも多々あると思います。
そんなときにブログ内検索があれば簡単に知りたい記事を発見してもらえます。
アクセスアップのために
ブログにきてもらうための工夫を紹介します。
15. 記事ごとにはてな、Twitter、Facebookのボタンがある
いまやブログにとってのソーシャルメディアは検索エンジンを凌ぐほどの影響力があります。
それらのボタンを設置することで、ユーザーへの利用を促進し、その結果アクセスアップにつながります。
16. Twitter、Facebookへ誘導している
TwitterでフォローしてもらったりやFacebookページにいいねしてもらうことで新しい記事をいち早く知ってもらうことができます。
早く知ってもらって、はてブ数を増やせば、アクセスアップへのいい循環が生まれます。
置いているもの、いないもの
2カラムが多いということで、サイドのスペースも限られます。そのなかで設置しているもの設置していないものの共通点を探ってみます。
17. 自己紹介がある
写真付で自己紹介しているブログもあります。
ブログを書いている人がどのような人か分かると、なんか親しみがわくというか。
18. ブログパーツは控えめ
ブログパーツは設置していないか、かなり少なめにしています。
表示するまでに時間がかかる重いブログパーツもあります。重くなることでユーザーに不快感を与えてしまったらもったいないのでブログパーツは厳選した方がいいです。
19. 月別アーカイブはないかあっても控えめ
月別のアーカイブは設置していないか、していてもプルダウンなんかで省スペースのものが多いです。
日記的なブログ以外でしたら、特に必要ないと思います。
設置している場合は、内部リンクを意識したものだと思います。
20. カレンダーはない
月別アーカイブと一緒で日記的な記事以外では特に必要ないので設置していないことが多いです。
スペースは限られていますので優先順位は低いといえます。
まとめ
ということで、人気ブログのデザインの共通点を20個挙げてみました。
基本的なことも多いですが参考になればと思います。
人気のあるブログはすっきりしたレイアウトで、ほしい情報がほしいところにあるように作られているように思います。
ユーザー目線で作られたおり、決して自己満足なものではありません。
このブログも参考にしないと。
@webpark2さんのツイート
ドロップシッピングで月間１千万以上稼がれている
柿内さんという方の作るサイトは
すごくセンスを感じます。
そら売れるという感じです。
http://www.moshimo.com/success/interview?page=21
こちらのサイトもセンスがよいと思っていましたが、
紹介されてるサイトもかっこいいですね。
シンプルですが、迫力あります。
そして何よりその人の個性とかこだわりが見えますね。