最近イギリスで行われた調査によると、友人や家族に次いで3番目に信頼できる情報源は「ブロガー」だという回答が得られたそうです。つまり人々は、セレブ、ジャーナリスト、ブランド企業、政治家などよりも、ブロガーの発言を信用しているということです。
しかし問題は、自分のブログを読者に見てもらい、気に入ってもらうためにはどうすればいいのか、ということです（もちろん、とびきりのコンテンツを用意することが大前提ですが）。
ウェブサイトのホームページは、いわば企業にとっての表玄関と言えます。これと同様に、ブログのデザインは、玄関前に敷かれたウェルカムマットのようなものであり、御社のビジネスブログへと読者を誘う入り口の役割を果たします。
見た目で読者が興味を失うようであれば、実際に記事を読んでもらったり、購読してもらったりという、次の段階へと読者を誘導することは困難でしょう。 クオリティの高いコンテンツを作成するだけでは、まだ道半ば。その先には困難な課題が待ち受けています。つまり、ブログの主旨が読者に明快に伝わるよう、コンテンツの見せ方を工夫しなくてはならないのです。
画像、テキスト、リンクは適切に配置する必要があります。これを怠って、訴求力に乏しい、分かりづらいレイアウトにしてしまうと、そのコンテンツは見向きもされなくなるおそれがあります。
そこで、ブログホームページの例をいくつかまとめてみました。これらを参考にすれば間違いなく、読者をとりこにするブログデザインが実現するでしょう。是非、チェックしてみてください。
美しいブログホームページの作り方とは？参考にしたい16の事例
1）Help Scout
デザイン性に優れたブログを見ていると、しばしばそのデザインが非常にシンプルであることに気づかされます。カスタマー サービス ソフトウェアのベンダー、Help Scoutの場合、特にすばらしいのは、独特でありながらミニマリスト志向のブログデザインを採用している点にあります。つまり、広告や画像の数を抑えて、余白を上手く活かしているのです。
このブログで特に好感を持てるのは、どの記事にも、その内容に適した画像がフィーチャリングされているという点です。また同社では、画面上部のバナーを活用し、最近の記事や人気の高い記事を紹介しています。各アイコンは、明るい背景色とのコントラストが美しく、読者の目を引くため、記事の趣旨もよく伝わってきます。こうしたデザインが功を奏し、このブログは全体的に「すっきり」として「読みやすい」ものに仕上がっています。
2）Microsoft Stories
実は、Microsoftの「Stories」マイクロサイトについては、過去にも大きく取り上げたことがあります。しかし、今回もやはり取り上げないわけにはいきません。というのも、保守的なブランド企業に新たな魅力を加える手段として、見た目が美しく、読者の心を刺激する独自の対話型コンテンツを備えたブログほど最適なものはないからです。さらに付け加えると、このサイトでは、Microsoftのロゴを彷彿とさせる四角いレイアウトを使うことにより、ブランドイメージの一貫性を保っています。
Microsoft Storiesの例はまた、ブランドイメージを全面変更する上で、ビジネスブログがどれほど重要な役割を果たすのか、という点を如実に示しています。ここ数年Microsoftは、自社のブランドに人間味を持たせようと努めてきました。そのきっかけとなったのは、おそらくAppleへの対抗意識でしょう。
Storiesマイクロサイトのタグラインはシンプルです。「ちょっとのぞいてみてください。私たちの会社では、どんな人が、どんな場所で、どんなことを考えながら働いているのかご紹介します」といった具合です。つまり、Microsoftのハードウェア（製品）ではなく、ソフトウェア的な部分（企業文化など）をアピールしているわけです。
たとえば御社が、自社ブランドをアピールしたいと考えている場合、ブログを使えば、中身はもちろん見た目にも魅力のあるメッセージを伝えることができます。
3）Pando
デザイン性に優れたブログに見られる重要な特徴として、カラースキームとスタイルに一貫性があるという点が挙げられます。なにしろ、色はブランドの認知度を高める要因であると消費者の80％が認めているのですから、これを活用しない手はありません。
色使いに一貫性をもたせるだけで、多様なデザイン要素もすっきりとまとめることができます。新興企業関連の記事を配信するブログ「Pando」では、背景やハイライト バー、一部のテキストなど、サイト内のいくつかのセクションに青の色調を採用しています。しかし同時に、異なるフォントが複数使用されており、こうしたフォントのすべてが、一貫性のあるカラースキームによって違和感なくまとめられています。
4）Design Milk
オンラインのモダン デザイン アウトレット ストア、Design Milkは、非常にシンプルなレイアウトを使って、記事の印象を引き立てています。記事をクリックして閲覧したときにも、右側のサイドバーは表示されたままです。このサイドバーは、新しい記事のサムネイル画像を表示する方法として理想的です。これは内部リンク戦略の1つであり、読者をサイト内に長く留めておきたい場合に有効です。
また、画面上部のソーシャルアイコンが、サイト全体の見た目に好印象を与えています。見つけやすい場所にあり、Design Milkのコンテンツを簡単にシェアできるようになっています。
5）Fubiz
アートとデザインのブログ「Fubiz」は、きわめてスマートでありながら、同時にクールなパーソナライゼーション機能を兼ね備えたデザインの一例です。
ブログホームページ最上部の少し下には、左右にスクロールできるハイライト記事の一覧が表示されています。その下には「Creativity Finder」という機能が用意されており、自分のペルソナ（「Art Lover」や「Freelance」など）、居場所、探しているコンテンツの種類を選べます。読者は、このCreativity Finderによって、自分に合ったコンテンツを閲覧できます。
ヘッダーの画像にも、なんともいえない魅力があります。この画像は「ブルーマインド」と呼ばれる心理効果を狙ったもので、海や湖などの広大な水面を見ると思わず惹きつけられてしまう、という人間の特性を利用しています。Fubizでは、「ブルーマインド」心理をデザインスキームに活用してサイト訪問者の視覚に訴え、記事を閲覧してもらえるように上手く誘導しています。
6）Webdesigner Depot
「Webdesigner Depot」という名前からも分かるように、このデザイン ニュース サイトは、視覚的な魅力に溢れています。
特に好感を持てるのは、個々の記事にソーシャル シェアリング アイコンを組み込んでいる点です。もちろん、読者が自らウェブサイトを訪れて記事を読んでくれれば、それに越したことはありません。ですが、こうしたリンクがあれば、読者は面白そうな見出しをすぐに誰かと共有できます。それから、画面の右側にあるナビゲーション用の矢印に注目してください。これほど簡単にページの一番上や一番下まで移動できる方法はこれまでありませんでした。
さらに、このブログでは、カラースキームや背景、フォントのすべてが統一されています。そのため、見栄えがプロフェッショナルであると同時に、従来の典型的なブログとは異なる個性が発揮されています。
7）Mashable
このサイトの特徴は、なんと言ってもヘッダーの画像です。大胆な色使い、回路基板の図、強く訴えかける瞳、そして、画像の上にくっきりと浮かび上がる文字が、確実に読者の「目」を引きます（注：画像にちなんだジョークではありません）。
Mashableのホームページでは、コンテンツを3つのセクションに分けて目立つようにしています。新しい記事は、画面左側にある非常に小さなサムネイルに表示されています。 一方、「What's Rising」の記事は中央の大きなサムネイルに、「What's Hot」の記事は画面右側にある大きなサムネイルに表示されています。このコンテンツを3分割するアプローチは、読者が読みたい種類の記事を選びやすくするための工夫です（注目のトップ記事や、話題になっている記事など）。
さらに、各記事の下に、記事の共有回数が表示されている点も良い工夫と言えるでしょう。こうすることで、記事が社会的にどの程度の支持を得ているのか測ることができます。
8）Brit + Co
Brit + Coのホームページは、どこを見ても「すっきり」として「温かく」、「居心地の良さ」が感じられます。雑多な物が一切ないので、コンテンツは閲覧しやすくなっており、レイアウトは極限まで整理されています。
また、このサイトでは、季節の移ろいを感じ取ることができます。例えば、ハロウィンのかぼちゃランプ風に仕立てたアボカドを見ると、10月の訪れを感じませんか？可愛らしく、カラフルで楽しい雰囲気に溢れた写真によって、記事の内容も明快に伝ってきます。
「TRENDING」という小見出しは、あえて目立ち過ぎない場所に表示されていますが、これは、人気の高いコンテンツをさりげなく読者に勧めるには、とても有効な方法です。さらに、こうした画像に加えて、Pinterestのリンクを張っている点にも注目しましょう。魅力的な画像をブログに載せている場合は、Pinterestのアイコンを組み込んだほうが効果的です。
9）Tesco Living
イギリスの雑貨チェーン、Tescoのブログサイト「Tesco Living」は、カラフルで一貫性のあるデザインが特徴です。
ブランドイメージの一貫性を保つことの重要性については、これまでにも繰り返し述べてきましたが、Tescoも、自社のロゴマークを彷彿とさせる菱形のデザインを、トップバナーに使用しています。
Tesco Livingは、シンプルさと大胆さを絶妙なバランスで表現しています。これは特筆すべき点です。余計なものを極力削ぎ落としたレイアウトですが、その見栄えは決して単調ではありません。温かみのある色合いが各コンテンツのカテゴリーを強調しており、さまざまな写真がサイト全体に色彩のアクセントを添えています。適切な画像を用いれば、「数が少ないほど大きな効果」を期待できます。特に、ブランドコンセプト全般にマッチした画像を使用すれば、その効果は顕著に表れます。Tescoのブログはまさに、その好例と言えます。
10）Crew
設計者や開発者向けのプラットフォーム、Crewのブログ「Crew Backstage」は、驚くほどミニマリスト志向のブログ デザインを採用しています。しかし、同時にきわめてユニークでもあります。
読者はブログ記事、大見出し、小見出しをはじめ、記事の全文表示を促すCall-To-Action（CTA）までをすべて、画面スクロールなしで確認できます。
画面の左上にも、非常にコンパクトなCTAがあり、Crewへのコンタクトや、詳細情報の確認が簡単にできるようになっています。さらに、このブログでもやはり一貫性が維持されています。画面全体がすべて同じ青の色調で統一されており、この手法はブランドに対する信頼を生み出す効果があることが証明されています。
11）Innocent Drinks
Innocent Drinksの場合、コピーライターが優秀であるのは言うまでもありません。ですが、同社のブログを見ていると、それほど手の込んだことをしなくても、デザイン性の高いブログは十分に作れるということが分かります。
画面左上に表示されているロゴはシンプルで漫画風であり、喜びに満ちたあどけなさを感じるほどです。このロゴは、Innocent Drinksという会社独自の、子供の無邪気さを思わせるようなイメージを効果的に表現しています。また同社では、こうした雰囲気をブログのデザインにも一貫して取り入れています。
たとえば、カラフルなフォントは会社のロゴとマッチしており、Innocent Drinks独自のカジュアルで遊び心に満ちた言葉遣いとうまく調和しています。画面左側にあるアーカイブリンクでは、リンク先へと容易に移動できるようになっており、また、画面の右側には、幾何学状に並んだソーシャルメディアの共有ボタンがあります。これらも注目すべき点と言えるでしょう。
12）500px
写真専門のブログ「500px」は、前述のCrewと同様に、1つの特集記事に焦点を当てて高精細な大判写真を添えることにより、読者の目を引き付けています。そのため、「写真関連のコンテンツが充実していて、高品質な写真が楽しめるブログである」ということが、一目瞭然で分かります。
また、画面をスクロールしなくても、ソーシャルメディアのリンクをクリックできるようになっています。この点も申し分ありません。500pxは、読者の注意をコンテンツから逸らさないようにしながら、簡単に写真を共有できるようにしています。画像のあるコンテンツは、そうでないコンテンツと比べて最大で3倍、ソーシャルメディアで共有される確率が高くなると言われています。
13）BarkPost
HubSpot（ハブスポット）の社員は、どちらかといえば犬好きです。そんな私たちの注意を引いたのが、犬の飼い主を対象とした某ブログです。
犬用商品の定期販売サイト、BarkBoxのブログ「BarkPost」は、多くの理由でブログデザインのお手本のような存在です。その理由として、まず、購入の手続きが簡単な点が挙げられます。CTAが適切な場所（具体的には特集記事の上）に配置されています。ソーシャル共有アイコンも見つけやすい場所にあり、信頼感を感じさせる青色が、ページの随所に使われています。
また、Bark & Coブランド傘下にある姉妹企業のことをさりげなく宣伝しているところも、BarkPostの優れた一面と言えるでしょう。しかし同時にこのブログは、決して自社の製品を売り込もうとはしていません。このブログは、あくまでも、犬の飼い主や犬好きの人たちにとっての情報源なのです。
14）Goodwill Industries International
非営利団体はブログが苦手というイメージがありますが、決してそんなことはありません。Goodwillのブログのクリーンでカラフルなレイアウト（ここでもまた、信頼感を生み出す青色が使われています）は、このブログ内の重要なトピックへと読者を引きつけます。
記事も巧みに配置されており、読者は簡単にクリックすることができます。画面右上のドロップダウンメニューからトピックを選択すると、読者は自分にとって最も重要度の高い種類の情報を選ぶことができます。
さらにGoodwillのブログでは、会社の紹介文の中にCTAを配置し、ブログのコンテンツを提供してほしいと読者に呼び掛けています。これは非常に有効な手段です。その結果、Goodwillのユーザーは今、現在3,700万人に達しています。つまり、同社はブログを通じて読者に話題を提供するだけでなく、読者からも成功事例などを募り、自社の魅力をうまくアピールしているのです。
15）charity: water
非営利団体のブログの話を続けましょう。次はcharity: waterです。このブログは高品質の写真を実に上手く利用しています。
最近、この組織は設立10周年を記念して長文のブログを掲載し、ブログを一新しました。過去10年の成果を伝えるため、charity: waterはあえてそのシンプルなデザインを保ったまま、簡潔な文章と、記念イベントで撮影された色鮮やかな写真を掲載したのです。
また、ページのトップには、支援金を寄付するためのCTAが分かりやすく表示されています。charity: waterの成果を物語る記事の上に、こうしたCTAを配置するのは非常に効果的であると言えます。なぜなら、読者はcharity: waterの活動に自ら貢献したいという気持ちが高まった瞬間に、その想いを実行に移せるからです。
16）Johnny Cupcakes
誤解のないよう断っておきますが、Johnny Cupcakesでは、カップケーキは作っていません。同社は衣料品の製造を手がけていますが、自社ブランドと焼き菓子などとの関連性を強調する手法によって、これまでに大きな成果をあげてきました。ちなみに、サブドメイン名には「kitchen」という名称を使っています。
さらに、複数のチャネルでマーケティングを展開しているJohnny Cupcakesは、ブランドイメージを統一させることの重要性をよく理解しています。ブログのカラースキームはシンプルで、フォントと色がマッチしているため、ユーザーは同じ仕様・同じ感覚でオンラインショップを利用したり一般的なコンテンツを閲覧したりできます。その一方、このブログでは、読者の注目を集めるカラフルな画像が大胆に使われています。
さらに、実際にJohnny Cupcakesのサイトで記事一覧をスクロールダウンしてみると分かりますが、どの記事を表示させても背景画像は常に同じ位置に固定表示されます。これは非常に洗練されたデザインと言えるでしょう。
このほかにも優れたデザインのブログホームページをご存じでしたら、コメント欄から情報をお寄せください。
編集者注：本記事は2013年2月に公開された内容を、最新の情報に基づいて加筆修正したものです。
