目からウロコ!ブログデザインの作り方

shunichi shiga
ブログデザインの作り方

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

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

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

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

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

ウェブのレイアウト

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

これをコンテンツに合わせて工夫していきますが、どのブログにも同じようにしている部分があるので、それに慣れた読者を考えて配置させましょう。

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

「グローバルメニュー」は、ロゴだけのヘッダーだったら、その横にある場合も多いです。だいたいは、「ホーム」「自己紹介」「連絡先」といったブログ全体に共通するリンクが並びます。TwitterやfacebookなどのSNSのリンクボタンも、ここに置いてあるのが主流です。

この下に「お勧めの記事」へのリンクを設けてあるデザインも散見します。

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

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

さらに、「サイドメニュー」「サイドバー」がなく「記事枠」だけというのも、画像を中心としたブログに多用されます。
「記事枠」は、トップページでは記事の一覧を更新順に並べる事が多いでしょう。画像中心のブログでは、記事の画像も併せて載せる方法が良く採られています。「フッター」は文字中心で各リンクを作りましょう。「ヘッダー」で「ホーム」「自己紹介」「連絡先」を表示しなかった場合、ここに表示します。ただ、「ヘッダー」で表示していても、それが画像のリンクボタンだったら、「フッター」にも文字でリンクを作ったほうが良いでしょう。というのも、ブラウザが画像を上手く読み込めなかった時、ここにリンクがあれば助かるからです。

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

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

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

大抵は「演出」がばらついているのが原因でしょう。

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

チェックポイント

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

依頼主の意図を充分に汲み取って、どんな事があっても対応できるような、将来を見越したデザインにしたいものです。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%