ブログデザインっていうものは中々自分でやっていても限界があるもので、グラフィックデザイナーにブログデザインのコツを聞きながら、色々と改良してもらいました。
お世話になったのがグラフィックデザインを専門にされていて、「ぱつかるちゃー」を運営されている、ぱつこ(id:ptkabe)さんです。
本記事では、今回の色々教えていただいたブログデザインのコツを、依頼の内容に沿いながら読んでくれている方と共有できればと思います。
目次
ブログデザインの依頼
今回は、ブログデザインに関して３点お願いしてみました。
１．ブログのヘッダー画像の作成
２．デザインに関するアドバイス
３．デザイン用の便利なソフトを教えて
恐らく普通にプロのグラフィックデザイナーにお願いしたら万単位の依頼になるものだと思いますが、快く引き受けていただけました。しかも超ていねいに教えてくれるし、こちらの要望にも細かく応えていただけて大変嬉しかったです。
では、それぞれの項目について細かく見ていきましょう。
１．ブログのヘッダー画像作成
当ブログですが、以前はヘッダー画像を使用せずに、ヘッダー部分の文字の大きさやフォントをCSSで変化させることで、ある程度オシャレにしていたつもりです。ですが、やはりヘッダー画像があった方が印象的だと思い、お願いしました。
Googleフォント
フォントはGoogleフォントの「Poiret One」を使用していました。はてなブログでGoogleフォントを使う時にはこちらの記事を参照いただけると分かりやすいです。
Googleフォントを導入してブログにちょっとした変化を出す方法【はてなブログを例にとって】 - Yukihy Life
ココナラやBASEといったサイトを使ってヘッダー画像を依頼するのもいいんですが、なかなか数回のやり取りではイメージが伝わらず、好みではないヘッダーになってしまう様な事もあるので、信頼できる方にお願いできると安心感がありますね。
ヘッダーを作成していただくにあたって、自分のイメージを伝えるために何個か自分の希望に近いヘッダー画像を探す必要があります。でも、なかなかオシャレなヘッダー画像って見つけにくいんです。
おしゃれなデザイン探し
そこで、ぱつこさんに教えてもらって、おしゃれなヘッダーを探すのに便利だったのが、こちらの「Pinterest」というサイトです。
自分の興味がある分野を選ぶだけで、それに関するオシャレなデザインが自分のフィードにバーッと並ぶので、インスピレーションを湧かせるのに超おすすめです。
最終的に出来上がったのがこちらのヘッダーです。
フォントも何パターンも用意していただいて、色々と迷ったんですが、本当にフォントひとつでブログの表情が全く変わってきます。これは用意していただいた中の一部です。
どうですか？全然印象が違うと思います。やはりフォントにこだわるっていうのは大切ですね。
デザインのコツ！
◆ 画像を使わない時には大きさとフォントを変更してみる
◆ Printerestでイメージに合う画像を見つけて依頼する
２．デザイン性を上げるためのアドバイス
今回は「ブログのデザインで気になったことがあったら指摘してください。」という何とも具体性に欠けるお願いの仕方だったのですが、流石というか、色々と丁寧にご指摘を受けました。
ブログのバランス
まず指摘されたのがブログのバランスについてです。
サイトの構成的にヘッダーは真ん中にした方がバランスはとれると思います。一つ提案なのですが、サブタイトルを入れるかサイドバーのアドセンスバナーを一つ下げてプロフィールを上に持ってきた方が良いと思います。どんなブログなのかがページを開いて一目でわかると読む側も読みやすいです。
以前のヘッダーは左寄せになっていたのですが、ブログのバランス的に中央寄せになっていた方がバランス感が段違いで良くなりました。プロフィールも以前は１番上に置いていたんですが、広告に貼り替えていたんですよね。ってことでプロフィールを１番上に配置し直しました。
Before
After
デザインのコツ！
◆ バランスを見てヘッダーは中央寄せにする
◆ プロフィールはなるべくサイドバー上に配置する
ブログの色味
続いてブログの色味に関してのご指摘です。
サイトデザインのベースになっている青味の紫なのですが、結構重たい色なんですよね。 トップにこの色を使用する場合、サイドバーの色の部分はとっぱらい、タイトル上にある日付の色は別にするのが良いと思われます。
なるほど。確かに以前は全部同じ色で統一してしまってましたが、ぞれぞれの項目ごとに設定した方が良いみたいです。ブログの中身にはあまり重い色を入れないようにしたので、スラスラと読みやすくなりました。ユーザビリティが上がりそうです。
現在のベースカラーに合う色をなんとなく作ってみました。 合う色を数色だけ抜粋して日付のバックカラーにしてみたりするとサイトが重たくならなくて済むと思います。 大幅に変えたくない場合、現在の色から薄くするだけでも違います。 重い色っていうのは、あまりサイト上でたくさん使わない方が可読性が上がります。
デザインのコツ！
◆ 重い色と軽い色を使い分ける
◆ カテゴリーごとに色味を統一する
タイトル画像作成のコツ
アイキャッチのような画像に、タイトルの文字を入れていたりしたのですが、「細い文字入れたらオシャレかな？」程度にやっていたところ、ご指摘をもらいました。
まず、大きく見せたいところとサブの文章を分けます。 そして、別のくくりのものはもう枠をつけてしまったり丸でかこってしまうと文章の一部ではないことがよくわかります。
要は、①一番見せたい部分②説明する文章で文字の大きさを変えてしまい、日付や年数などは別のくくりにしてしまう。これが一番手っ取り早く見やすい画像にする方法です。
Before
After
こういうタイトル画像の場合、重要なのはメリハリのようです。あとはブログの構成でもあったように、しっかりと情報の差別化をすることで、可読性を上げるのが良いようですね。
デザインのコツ！
◆ メリハリをつける
◆ 情報の差別化をする
フォントの導入
タイトル画像やヘッダーの件でも良く分かるように、文字のフォントはブログのデザインでも重要なポイントです。アドバイスをいただきました。
商用使用可能と記載のあるものが確実に問題なくブログ上の画像やロゴなどで使用できます。 http://photoshopvip.net/ このサイトでフォントでキーワード検索すると結構出てきます。欧文和文関係なしに、自分の好きなものをまず収集してみてください。 すると、今までしっくりこなかったものやイマイチだったものも結構変わってきます。
ご紹介いただいたのはこちらの「Photoshopvip」です。
商用利用の可否や、デザインの感じなどのカテゴリーごとに記事でまとめられているので、非常に分かりやすいです。面白いフォントが満載なのでブックマークしておくと役立ちますよ。
フォントをPCに登録する方法は簡単で、基本的にダウンロードしたフォントファイルをPCのフォントのフォルダにコピーするだけです。OSによっては右クリックやダブルクリックで簡単にインストールできるので、調べてみてください。
３．ブログデザインに使える便利なソフト
出来ない部分は頼ればいいというものの、一応自分で出来るところは自分で何とかしたい！ということで、今後ブログを運営していくにあたって、デザイン関係で便利なソフトを教えていただきました。
色々お聞きしたんですが、一部抜粋でお教えします。もっと気になるという方はぱつこさんに直接お聞きしてみてください。
圧倒的に超おすすめ
・Photoshop
やっぱり１番おすすめなのはPhotoshopのようです。お値段が結構するのでお仕事に関係なく、手を出せる方は多くないと思いますが、画像の加工など広範囲で汎用性があって、「かゆいところに手が届く」のがPhotoshopのようです。
有料だけどおすすめ
・Photoshop elements
やっぱりPhotoshopだけれど、このElementsはいわば家庭用的な感覚で、Photoshopよりはだいぶ安いけれど、一部機能は使えないようなモデルです。でも、ブログや個人での活動であればElementsでも十分のようです。
無料のおすすめ
・Fotor
Fotorはアイコンで分かりやすく画像の加工やロゴの作成などができるソフトで、ブラウザ（IEとかChromeとか）上でも動かせるので便利です。直感的に操作できるので非常に使いやすくて、最近のアイキャッチ画像などはこのソフトで加工しています。
・GIMP
GIMP - GNU Image Manipulation Program
GIMPは写真加工やデザインなど幅広く使えるソフトで、有名なソフトなので、使い方等も豊富に日本語で解説があります。ぱつこさん曰く、まずFotorで加工してみて、足りない部分をGIMPやElementsで補う様な使い方が良いとのことです。
デザインの相談・写真撮影受け付け中
最初にご紹介したように、今回色々教えてくれたのはグラフィックデザイナーの「ぱつこ」さんです。「ぱつかるちゃー」というブログを運営されています。
ブログでは、ものづくり・写真・バイク・北海道のこと・アウトドアなどを書かれていて、もちろんデザインのことも書かれているので、必見です。
あと、最近はフォトグラファーとしても活動されていて、今回の記事に使っている写真は全てぱつこさんが撮られたものです。他にもグッズ販売やプレスの購読なども開始予定ということで、興味がある方はポートフォリオなど覗いてみてはいかがでしょうか。
今回やっていただいたブログデザインの監修ですが、今後は一部有料でやっていくということですので、こちらもぱつこさんに直接ご相談ください。
まとめ
デザインのコツという事でしたけれど、意識しているつもりでも指摘されないと気付かない部分が多いので、人に見てもらうというのはとても大切です。
もし誰かにお願いできない場合には今回の記事のポイントを見直してみて、１個１個みていくと、デザインが格段に良くなるかもしれません。ぜひ試してみてくださいね。では、また。