WordPressを使ったブログデザインの作りかた

Source

最近は、既存のブログサービスに飽き足らず、WordPressなどを使って独自にブログを作る人が多くなってきました。
さらに、それらに用意されているデフォルトのテンプレートでは味気ないと考えて、デザイナーにブログデザインを依頼する事も多くなっています。そんな依頼を受けた時、どうすれば希望通りのブログデザインになるかを、ビジュアルの部分に絞ってご紹介しましょう。

コンテンツのイメージに合わせるのが肝心

ブログの主役はコンテンツ(投稿記事)なので、デザインはそれを引き立たせるものでなくてはなりません。女性向けのかわいいファッションの内容に、背景が黒でシャープなデザインは合わないでしょう。
このように掛け離れたデザインは論外ですが、画像を多用する内容なのに、デザインが頑張り過ぎて、全体がゴチャゴチャしてまとまっていないというのは、よく見られる悪い例です。

そういう場合は、極力シンプルに仕上げることが望まれます。また、画像を多用する内容でなくても、デザインに使う色数は3〜5色に留めておくのが無難でしょう。

ウェブならではのレイアウトとは?

ブログはだいたい上の図のようなレイアウトになっています。

これをコンテンツに合わせて工夫していきますが、どのブログにも共通の要素があるので、それに慣れたユーザーのことを考えて配置させましょう。

「ヘッダー」は、一番に見せたいという画像があれば大きめに、そうでなければロゴとブログ名だけの簡素なデザインでも良いでしょう。

「グローバルメニュー」は、ロゴだけのヘッダーだったら、その横にある場合も多いです。だいたいは、「Home」「About」「Contact」といったブログ全体に共通するリンクが並びます。TwitterやfacebookなどのSNSのリンクボタンも、ここに置かれているのが主流です。この下に「お勧めの記事」へのリンクを設けてあるデザインもよく見られます。

「サイドメニュー」には、検索窓、カテゴリー、投稿日などが置かれ、「サイドバー」には新着記事や人気記事などが入ります。

投稿日順によるリンクは、カレンダーで表示するのもポピュラーでしょう。また、図は2カラムという「サイドメニュー」「サイドバー」と「記事枠」が横に2列並んだ構成ですが、この3つが横に3列並んだ3カラムという構成もよくあります。

さらに、「サイドメニュー」「サイドバー」がなく「記事枠」だけというのも、画像を中心としたブログに多用されます。

「記事枠」は、トップページでは記事の一覧を更新順に並べる事が多いでしょう。画像中心のブログでは、記事の画像も併せて載せる方法が良く採用されています。「フッター」は文字中心で各リンクを作りましょう。「ヘッダー」で「Home」「About」「Contact」を表示しなかった場合、ここに表示します。ただ、「ヘッダー」で表示していても、それが画像のリンクボタンだったら、「フッター」にも文字でリンクを作ったほうが良いでしょう。ブラウザが画像を上手く読み込めなかった時、ここにリンクがあればユーザーが使い易いからです。

このように、二重三重のリンク先を作るのもウェブならではと言えます。

自分なりのチェックポイントを作る

完璧にレイアウトを決めても、それぞれのパーツを作って組み合わせるとゴチャゴチャした感じになってしまう事が多々あります。

大抵は「統一感」が無いのが原因でしょう。

具体的には「ボタンやバナーなどの枠と内容の間の上下左右マージンが均一ではない」「画像、文章、リンクが一つのグループになっている時の余白に統一感がない」「ドロップシャドウなどのエフェクトがパーツによってバラバラ」といったものが挙げられます。やりがちなミスを把握して、作成時に確認してください。

デザイナーが仕上げて終わるポスターやパンフレットなどとは違い、ブログはデザインが終わってからが本番です。

クライアントの意図を充分に汲み取って、どんな事があっても対応できるような、将来を見越したデザインを目指しましょう。


▼99designsのデザイナーブログをもっと読みたい方はこちらからデザイナー登録!
http://99designs.jp/designers