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

こんにちは、Ichi先輩@Abstract1Life)です!

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

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

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

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

ブログデザインの依頼

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

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

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

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

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

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

1.ブログのヘッダー画像作成

Before

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

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

After

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

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

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

参考 Pinterest公式サイト

フォントバリエーション

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

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

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

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

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

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

ブログのバランス

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

ぱつこ

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

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

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

Before

f:id:ibookwormer:20160810231720p:plain

After

f:id:ibookwormer:20160810232001p:plain

 

ブログの色味

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

ぱつこ

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

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

ぱつこ

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

 

タイトル画像作成のコツ

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

ぱつこ

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

Before

After

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

 

フォントの導入

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

ぱつこ

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

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

参考 Photoshopvip公式サイト

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

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

3.ブログデザインに使える便利なソフト

出来ない部分は頼ればいいというものの、一応自分で出来るところは自分で何とかしたい!ということで、今後ブログを運営していくにあたって、デザイン関係で便利なソフトを教えていただきました。

色々お聞きしたんですが、一部抜粋でお教えします。

圧倒的に超おすすめ

・Photoshop

やっぱり1番おすすめなのはPhotoshopのようです。お値段が結構するのでお仕事に関係なく、手を出せる方は多くないと思いますが、画像の加工など広範囲で汎用性があって、「かゆいところに手が届く」のがPhotoshopのようです。

有料だけどおすすめ

・Photoshop elements

やっぱりPhotoshopだけれど、このElementsいわば家庭用的な感覚で、Photoshopよりはだいぶ安いけれど、一部機能は使えないようなモデルです。でも、ブログや個人での活動であればElementsでも十分のようです。

無料のおすすめ

・Fotor

参考 画像加工・写真編集Fotor

Fotorはアイコンで分かりやすく画像の加工やロゴの作成などができるソフトで、ブラウザ(IEとかChromeとか)上でも動かせるので便利です。直感的に操作できるので非常に使いやすくて、最近のアイキャッチ画像などはこのソフトで加工しています。

・GIMP

参考 画像加工・写真編集GIMP

GIMPは写真加工やデザインなど幅広く使えるソフトで、有名なソフトなので、使い方等も豊富に日本語で解説があります。ぱつこさん曰く、まずFotorで加工してみて、足りない部分をGIMPやElementsで補う様な使い方が良いとのことです。

【PR】デザインの相談・写真撮影受け付け中

f:id:ibookwormer:20160810234932j:plain

今回色々教えてくれたのはグラフィックデザイナーの「ぱつこ(@ptk_08 」さんです。「ぱつかるちゃー」というブログを運営されています。

ブログでは、ものづくり・写真・バイク・北海道のこと・アウトドアなどを書かれていて、もちろんデザインのことも書かれているので、必見です。

あと、最近はフォトグラファーとしても活動されていて、今回の記事に使っている写真は全てぱつこさんが撮られたものです。他にもグッズ販売やプレスなども開始ということで、興味がある方はポートフォリオなど覗いてみてはいかがでしょうか。

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

デザインのコツまとめ

f:id:ibookwormer:20160811190216j:plain

デザインのコツという事でしたけれど、意識しているつもりでも指摘されないと気付かない部分が多いので、人に見てもらうというのはとても大切です。

もし誰かにお願いできない場合には今回の記事のポイントを見直してみて、1個1個みていくと、デザインが格段に良くなるかもしれません。ぜひ試してみてくださいね。

コチラの記事では「はてなブログ」に関連したカスタマイズをまとめていますので、気になった方はチェックしてみてください。

はてなブログのコピペで完成する簡単でおしゃれなデザインカスタマイズまとめ

はてなブログに関する記事のまとめはコチラから!

【2018年版】はてなブログ関連のカスタマイズ・収益・運営報告まとめ

1 Comment

現在コメントは受け付けておりません。