グラフィックデザイナーに聞いた、おしゃれなブログデザインのコツまとめ

※当ページのリンクには広告が含まれています

こんにちは、Ichi先輩（@Abstract1Life）です！

ブログデザインっていうものは中々自分でやっていても限界があるもので、グラフィックデザイナーにブログデザインのコツを聞きながら、色々と改良してもらいました。

お世話になったのがグラフィックデザインを専門にされていて「ぱつかるちゃー」を運営されている、ぱつこ(@ptk_08 )さんです。

本記事では、今回の色々教えていただいたブログデザインのコツを、依頼の内容に沿いながら読んでくれている方と共有できればと思います。

注意

本記事は「はてなブログ」でブログ運営をしていた時のブログデザインです。現在はワードプレスに移行しており、デザインが異なりますのでその点はご了承ください。

ブログデザインの依頼

今回は、ブログデザインに関して３点気になることをお願いしてみました。

ブログのヘッダー画像の作成
デザインに関するアドバイス
デザイン用の便利なソフトを教えて

今回は特別に無料で行なっていただいたのですが、恐らく普通にプロのグラフィックデザイナーにお願いしたら〇万単位の依頼になるものだと思います。

今はデザインの制作に関して様々な項目で依頼を受け付けている様ですので、気になった方はコチラからご依頼が可能です。

参考
【個人向け】ブログやWEBサイトのロゴ制作やデザインの相談ぱつかるちゃー

では、それぞれの項目について細かく見ていきましょう。

１．ブログのヘッダー画像作成

Before

当ブログはヘッダー画像を使用せずに、ヘッダー部分の文字の大きさやフォントをCSSで変化させることで、ある程度オシャレにしていたつもりでしたが、やはりヘッダー画像があった方が印象的だと思って製作をお願いしました。

フォント自体はGoogleフォントを導入して「Poiret One」というものを使用していましたが、どうしてもフォントだけの力ではサイトとしてのインパクトに欠ける印象がありました。

After

こちらが最終的にしあがったヘッダー画像ありバージョンのサイトですが、圧倒的に見た目のインパクトが「Before」より増しているのがお分かりいただける様に思います。

今回は完全にお任せというよりは、自分の中でのイメージを伝えて、それをアレンジしてまとめ上げていただいた様な形で作っていただきました。

自分の中でのイメージをつくり上げるのも中々思い浮かばない事も多いのですが、ぱつこさんに教えてもらった「Pinterest」というSNSがかなり参考になりました。

参考
Pinterest公式サイト

フォントバリエーション

今回はフォントも様々に提示していただいて、本当に親切に制作していただきました。

ヘッダー画像の制作について

最近ではココナラやBASEといったサイトを使ってヘッダー画像を依頼することも可能ですが「思ったイメージと全然違う」「クオリティーが低い」など、好みではないヘッダーになってしまう様な事もあるので、信頼できる方にお願いできると安心感があります。

自分のイメージを伝えるために何個か自分の希望に近いヘッダー画像を探して提示することが自分にとってもデザイナーにとっても良いことなので、先ほどのSNSなどを使って多くのデザインに触れてみるのがおすすめです。

２．デザイン性を上げるためのアドバイス

今回は「ブログのデザインで気になったことがあったら指摘してください。」という何とも具体性に欠けるお願いの仕方だったのですが、流石というか、色々と丁寧にご指摘を受けました。

ブログのバランス

まず指摘されたのがブログのバランスについてです。

ぱつこ

サイトの構成的にヘッダーは真ん中にした方がバランスはとれると思います。一つ提案なのですが、サブタイトルを入れるかサイドバーのアドセンスバナーを一つ下げてプロフィールを上に持ってきた方が良いと思います。どんなブログなのかがページを開いて一目でわかると読む側も読みやすいです。

以前のヘッダーは左寄せになっていたのですが、ブログのバランス的に中央寄せになっていた方がバランス感が段違いで良くなりました。

プロフィールも以前は１番上に置いていたんですが、広告に貼り替えていたんですよね。ってことでプロフィールを１番上に配置し直しました。

Before

After

ブログの色味

続いてブログの色味に関してのご指摘です。

ぱつこ

サイトデザインのベースになっている青味の紫なのですが、結構重たい色なんですよね。トップにこの色を使用する場合、サイドバーの色の部分はとっぱらい、タイトル上にある日付の色は別にするのが良いと思われます。

なるほど。確かに以前は全部同じ色で統一してしまってましたが、ぞれぞれの項目ごとに設定した方が良いみたいです。ブログの中身にはあまり重い色を入れないようにしたので、スラスラと読みやすくなりました。ユーザビリティが上がりそうです。

ぱつこ

現在のベースカラーに合う色をなんとなく作ってみました。合う色を数色だけ抜粋して日付のバックカラーにしてみたりするとサイトが重たくならなくて済むと思います。大幅に変えたくない場合、現在の色から薄くするだけでも違います。重い色っていうのは、あまりサイト上でたくさん使わない方が可読性が上がります。

タイトル画像作成のコツ

アイキャッチのような画像に、タイトルの文字を入れていたりしたのですが、「細い文字入れたらオシャレかな？」程度にやっていたところ、ご指摘をもらいました。

ぱつこ

まず、大きく見せたいところとサブの文章を分けます。そして、別のくくりのものはもう枠をつけてしまったり丸でかこってしまうと文章の一部ではないことがよくわかります。要は、①一番見せたい部分②説明する文章で文字の大きさを変えてしまい、日付や年数などは別のくくりにしてしまう。これが一番手っ取り早く見やすい画像にする方法です。

Before

After

こういうタイトル画像の場合、重要なのはメリハリのようです。あとはブログの構成でもあったように、しっかりと情報の差別化をすることで、可読性を上げるのが良いようですね。

フォントの導入

タイトル画像やヘッダーの件でも良く分かるように、文字のフォントはブログのデザインでも重要なポイントです。アドバイスをいただきました。

ぱつこ

商用使用可能と記載のあるものが確実に問題なくブログ上の画像やロゴなどで使用できます。「Photoshopvip」というサイトでフォントでキーワード検索すると結構出てきます。欧文和文関係なしに、自分の好きなものをまず収集してみてください。すると、今までしっくりこなかったものやイマイチだったものも結構変わってきます。

ご紹介いただいたのはこちらの「Photoshopvip」です。

参考
Photoshopvip公式サイト

商用利用の可否や、デザインの感じなどのカテゴリーごとに記事でまとめられているので、非常に分かりやすいです。面白いフォントが満載なのでブックマークしておくと役立ちますよ。

フォントをPCに登録する方法は簡単で、基本的にダウンロードしたフォントファイルをPCのフォントのフォルダにコピーするだけです。OSによっては右クリックやダブルクリックで簡単にインストールできるので、調べてみてください。