読者です 読者をやめる 読者になる 読者になる

OMGmag

デザイン、アート etc...センスでご飯を食べてるblog

ロゴデザインの作り方と重要性をデザイナーが徹底解説します。

ブログのロゴマークを作ろう

自分だけのオリジナルロゴデザインが欲しい。

そんな事を考えたことはありませんか?ブログやWEBサイトデザインにおいて重要なパーツのひとつがロゴデザインです。

小さなマークですが、デザインの善し悪しでサイトの印象がガラッと変わってしまう重要な要素のひとつです。

今回はロゴデザインの重要性や作るときの考え方、そして実際にロゴデザインをひとつ作成しながらその面白さ、奥深さを紹介してみたいと思います。

デザインする際の参考になれば幸いです。

なお、専門的な話は小難しくなるので省略します。

専門知識が無い方にも広く楽しんでもらえるようなブログを目指していますのでゴリゴリのデザイナー諸氏はご理解の程を。

スポンサーリンク

 

ロゴマークの重要性

ロゴマークは会社やお店で言うところの看板になります。

ナイキやスターバックスのロゴデザインは?

と聞かれたら多くの方はすぐにそのデザインを思い浮かべることができると思います。

いわばイメージのすり込みですね。

まずロゴを印象付けることができれば次に商品やサービス内容を自然とイメージしてもらえます。

以上のことからロゴマークは認知度を上げるための重要なツールであるのは間違いありません

あなたのブログやサイトにロゴが無いということは、看板の無いお店をオープンしているのと同じです。

当ブログのロゴマーク

f:id:omg-ox:20170209005845j:plain

これです。おなじみのこれ。目玉のマークですね。今までこのマークの由来なんかは特に説明したことは無いのですが、良い機会なので。まぁ特に崇高な理由とかはないんですけども。

デザインソースは古代エジプトの「ホルスの目」というモチーフをアレンジしたものです。ピラミッドの壁画とかに描いてあるアレですね。

なぜ目玉なのか。それには以下のような理由があります。

人間は「顔」を認知しやすい生き物である

この話はデザインをやってる人なら割とおなじみの話なんですけど、

人間と言うのは「人の顔」につい目をやってしまう習性があるのだそうです。

webサイトのバナーなどに人物の写真が良く使われるのはこのため。

文字だけよりも視線を集めるのに効果的だといわれています。

参考URL:人の顔で認識させるクリエイティブの基本

しかしロゴマークに自分の顔のイラストや写真を使うわけにもいかない(それはもはやロゴマークではない)ので、よりシンボリックにデザインしました。

twitterのアイコンはもちろん、これまでに何度も記事のアイキャッチに入れ込んでいます。

f:id:omg-ox:20170129214140j:plain

f:id:omg-ox:20170121202713j:plain

f:id:omg-ox:20161217053828j:plain

f:id:omg-ox:20161014131607j:plain

f:id:omg-ox:20160922015426j:plain

f:id:omg-ox:20160817011822j:plain

何度も見ているうちに記憶に残りませんか?

シンプルなデザインなので上に他の写真を重ねたりしてロゴの一部が欠けて見えなくても認識できます。

とても使い勝手が良いデザインなんですね。

当ブログのロゴは「目」です。それ以外に特に意味を持たせていませんが、特化型のブログの場合は記事内容に付随するモチーフを入れるのがセオリーです。

読書ブログであれば本のモチーフ、食べ物ブログであればお箸やスプーンといった具合。

また、リーチしたい読者によってもデザインは変化します。

性別や年代など「どんな人に読ませたいか」も考慮すると良いでしょう。

すなわちロゴデザインする際は、「どんなブログで、どんな人がターゲットか」を明確にしておくとイメージしやすいかと思います。

テーマがバラバラのいわゆる雑記ブログの場合は、ブログタイトルや書いている人をイメージできるものをモチーフに選ぶと良いです。

良いデザインの条件
  1. 無意識に人の目を集めやすいモチーフであること
  2. 意図的に繰り返し使用することを想定したデザインであること
  3. シンボリックでどんなシチュエーションでも使用できること
  4. カラー、モノクロに左右されないシンプルなデザインであること

ぼくの場合は以上の点を意識してデザインしてます。

繰り返し何度も使ううちに、読者の皆さんや初めてブログを見てくれる方に印象付ける役割を果たしているのがこのロゴマークになります。

もちろん記事のアイキャッチに忍ばせるように使うことも最初から想定済みです。

カラフルなイラストではこういう使い方は難しいでしょう。

この目のデザインになったのは、さきほど書いたように「印象に残りやすい強いモチーフ」というのが一番大きな理由です。

デザインはやはりシンプルなものが良いと思います。

どんな場面でも使うことができます。

特に4番の「カラー、モノクロに左右されないデザイン」というのも結構重要。

たまにあるのがグラデーションの配色になってるやつ。カラーの場合はキレイなんですが、モノクロにした時になんのこっちゃわかんねぇ。

みたいなことになりかねません。

悪いことは言わない。ロゴは単色で作りましょう。融通が利いて良いぞ!

スポンサーリンク

 

実際に一からデザインしてみる

では、実際に一からロゴデザインをする過程を簡単に紹介してみます。

みなさんも実際に紙とペンを用意して描いてみてください。

イメージを膨らませる作業は楽しい時間ですので、あまり難しく考えずにチャレンジしてみてください。

step1:モチーフを決める

まずはデザインのモチーフを決めます。

  • 書いている人は男性か女性か
  • メインカラーは何色か
  • 読んでもらいたいターゲットはどんな人か
  • ブログテーマや著者から導き出されるイメージはどんなものか
  • ブログデザインはどういったテイストで、どんなロゴがふさわしいか
  • シンプルなのか派手なのか
  • かわいい系か、かっこいい系か
  • 丸いのか四角いのか

というようにあなたのブログを印象付けるにはどのようなデザインがふさわしいのかをイメージしながらモチーフを決定していきましょう。

今回は「ウサギ」のモチーフにしようと思います。描くの簡単ですし。

step2:ラフスケッチ

では実際に紙とペンで書いていきます。メモ用紙でも広告の裏でも何でも良いです。

とにかく数をたくさん書いてください。

あくまで手書きですので、あまりうまく描こうとする必要はありません。

f:id:omg-ox:20170209005558j:plain

最終的にこんな感じになりました。

step:3ソフトに取り込んでトレースする

ここからPCでの作業になります。

わが家にはスキャナが無いので、iphoneで写真を撮りPCに取り込みます(便利)

ここからトレースして整形するのでざっくり形が認識できれば良いです。

イラストレーターというソフトで展開しました。(上の画像です)

均整の取れたデザインに仕上げる

トレースといっても色々やり方はあります。

ロゴデザインは長年使用するものですから、均整の取れたデザイン(=飽きの来ない/耐久性があるもの)が望ましいです。

実際に作業に入る前にこちらをご覧ください。

f:id:omg-ox:20170209020207j:plain

出典:http://www.radflaggallery-design.com/blog/brand-logo-apple

ご存知Appleのリンゴ。長い間そのデザインをほぼ変えていません。なぜでしょう?

それはデザインに耐久性があるからです。

細部まで徹底して作りこまれていることがよく分かります。

twitterのロゴマークもすべて正円の組み合わせからできています。

www.susi-paku.com

 

今回はこのウサギも同じように均整の取れたデザインを目指して作業していきます。

展開した先ほどの画像の上から正円を重ねながら形を作っていきます。

f:id:omg-ox:20170209005601j:plain

すべての線を引き終わった状態はこんな感じ。

なんだかよく分かりませんがすべて正円の組み合わせです。

f:id:omg-ox:20170209005603j:plain

ちなみに線だけだとこういう感じ。

よく見てくださいどう見てもウサギです!

 

その次にすべての線を選択して分割します。

f:id:omg-ox:20170209005605j:plain

すると線が重なった箇所でバラバラになりますので不要な線を削除。

f:id:omg-ox:20170209005607j:plain

要らない部分を消していきます。

f:id:omg-ox:20170209005548j:plain

こんな感じになりますので、今度はそれらを合体して線同士をつなぎ合わせます。

f:id:omg-ox:20170209005550j:plain

 顔のパーツはその後位置を調整しながら配置しました。

f:id:omg-ox:20170209005552j:plain

できた。

ラフと比べて均整が取れました。

f:id:omg-ox:20170209005554j:plain

完成形と最初の線を重ね合わせるとこういう感じ。

このマークを構成する要素にはラフな線がありませんので形が整って見えます。

線の太さも均一になっていますので、拡大・縮小してもデザインが破綻しません。

f:id:omg-ox:20170209005556j:plain

完成度が高いと言うことは同時に飽きが来ない、耐久性が高いということが言えますね。

そしてブログのタイトルを入ます。

f:id:omg-ox:20170209005615j:plain

 

あれ?

ウサギ+NOJOB(無職)

はい。

blog.gyakushu.net

今回はこの方のロゴマークを勝手に作ってみました。

彼も勝手にコンサルとかしてるので大丈夫かなと思って。

ちなみにガチで無断です。(ほぼ絡んだこともありません)

勝手に作ってしまったお詫びと言ってはなんですが、

無職のうさぎたんに無償で差し上げますので、煮るなり焼くなりグッズを作るなりお好きにお使いください。

スポンサーリンク

 

ロゴなんて自分で作れないから

ですよね。わかります。作れたら苦労しない。

そんな時は素直にプロに頼みましょう。価格もそこまで高くは無いです。

しかし大事なのは、ちゃんとイメージを相手に伝えられるかです。

デザイナーの立場からすると、「とりあえず良い感じに」とか漠然としたことを依頼されても「やりようがないです」となるわけで。

最低限どんなモチーフにするかとか、カッコイイ系、かわいい系とか何かしらのイメージを伝えるっていうのが必須になってきます。

そこで先ほど作ったラフスケッチが役に立ちますね!(伏線回収)

このラフをクリエイターにイメージとして伝えればそれなりのものができあがるはずです。

ブログのロゴデザインでよく使われているクラウドソーシングはココナラ が有名です。価格も500円〜と低価格(クリエイターによって異なります)

ランサーズやクラウドワークスではコンペ形式の案件が多いため、どうしても時間もかかりがちです。

しかしココナラであれば自分が気に入ったクリエイターに直接発注できるので、時間も短縮できます。また、価格も低めに設定されていることが多いようです。

あと、先日サキさんのブログを見てたらこんなのもあるみたい。

www.nubatamanon.com

ロゴジェネレーター。なんでも低解像度の小さいやつなら無料で作れるんだとか。

こんなんされたら、ワシら商売上がったりやがな!

と言う声も聞こえてきそうです。すごい時代。

低画質なので大きいサイズで使うのは厳しいですが、

イメージを膨らませるには重宝しそうなので是非使ってみてはいかがでしょう。

さいごに

たかがロゴデザインと言っても非常に奥が深いことがお分かりいただけたかと思います。小さいデザインですがわれわれデザイナーは多くのことを考え作っています。

また自分のブログにお気に入りのロゴができた時はさらに愛着を持って記事更新ができるのではないでしょうか。

個性を打ち出すのに非常に有効で、そして最も重要なロゴデザインのお話でした。

※うさぎたん、無断でデザインしちゃってスイマセンでしたw