ブログのロゴの作り方。無料サービスやオリジナル作成する方法

ブログのロゴマークはサイトの顔ともいえるもの。

設置しておきたいですよね。

でも、画像加工のやり方がわからなかったり、絵心がないから作れない、という方も多いはず。

本記事では、無料でロゴマークを作成することができるサービスや、完全オリジナルでロゴを作ってもらえるサービスを紹介します。

このページの内容(目次)

ブログのロゴ画像は設定したほうがいいのか

ブログのロゴマークは、ブロガーによって設定(作成)する人とテキストにしておく人に分かれます。

ロゴマークを作ると、次のような効果が生まれます。

  • サイト名が覚えやすくなる
  • デザインの一部であるため、全体的なデザインに映える
  • Faviconと合わせて統一感を出せる

ロゴマークは画像になるのでテキストよりも容量は増加してしまいますが、メリットも多いため設置するブロガーの方が多い印象を受けます。

最近のWordPressテーマはテキストで書いても十分見栄えが良いように作られているので、必ずしもロゴマークを作る必要はないかもしれません。

ただ、最終的に目指したいのが指名検索だという場合は是非設定しておきましょう。

個人的には全てのブログの最終形は指名検索での流入がトップになった状態だと思います(競争に巻き込まれなくなった状態)

無料でロゴマークが作れるサービス4選

無料でロゴマークを作れるサービスを4つ紹介します。

どのサービスも使い勝手がよく、海外のサービスでも日本語化されています。

サービスとしての良し悪しというより、それぞれのサービスで実際作ってみて気に入ったものができたところのものを採用すればよいです。

サービスによって、テンプレートの種類や数が異なるので、どれか一つ、ではなく一通り試してみることをお勧めします。

Canva

Canvaでロゴを作成

Canvaはオンライン上で画像作成をすることができるサービスです。バナーやアイキャッチ画像をはじめ、様々な画像を作成することができます。もちろん、ロゴを作成することも可能です。

Canvaの基本的な使い方として、テンプレートがかなり豊富なので、そこから一つ選び、文字を打ち換えて使う、という感じになります。

Canvaでロゴを作成する様子
Canvaでロゴマークを作成している様子

LOGASTER

LOGASTER

会員登録不要で使えるロゴ作成サービスです。

印刷に耐えうる高解像度のロゴをダウンロードするには有料会員になる必要がありますが、ブログで使うのは低解像度の画像なので特に問題は無いでしょう。

DesignEvo

DesignEvo

こちらも高解像度版は有料になりますが、低解像度版なら無料で利用できます。

日本語のフォント数はやや少なめですが、操作性も悪くなく、それっぽい感じのロゴがすぐに作れます。

DesignEvoでロゴを作成している様子

LOGO MAKER

LOGO MAKER

ネットショップの構築サービス「stores.jp」が運営しているロゴ作成ツールです。

本来 stores.jp 利用者のロゴマーク作成支援用ツールということもあり、完全に無料で作成できます。

LOGO MAKERで作成している様子

書体の数は多いわけではありませんが、アイコンがかなり豊富です。アイコン・テキストの色は自由に選べます。

LOGO MAKER

完全オリジナルのロゴマークを外注できるサービス3選

ココナラ

ココナラロゴ

スキルマーケットのココナラは、個人のスキルを売り買いできるサービスです。

ロゴデザインを請け負ってくれるクリエイターさんも多く、500円~で作成してくれます。平均すると5000円前後ですが、通常ロゴマークの作成はブランディング用のものもあるため、5万円以上という場合も少なくありません。

印刷媒体を含まない、局所的な利用範囲にとどめたロゴ作成の場合は5000円以下で作成していただくことが可能なので、作成内容などを確認しながら発注すると良いでしょう。

ランサーズ

Lancers

ランサーズはフリーランスで活躍しているデザイナーが多く登録しているサービスです。

個人相手というよりは法人を相手にする場合が多いので、費用は2万円~といったところです。は

予算に余裕があり、ブログ用のロゴに限らず、SNSのロゴや名刺用など、幅広い用途に使うロゴを作るのであればプロにお願いすると良いのではないでしょうか。

クラウドワークス

CrowdWorks

ランサーズ同様、こちらもクリエイターのマッチングサービスとなっており、ロゴの作成も同様に2万円~となっています。

クラウドワークスとランサーズはコンペ形式が多く、仕事の依頼を登録すると多くのクリエイターから提案をいただくことができます。気に入ったものがあれば報酬を支払うという形式になります。

作成時の注意点:背景色は透明にしておこう

ロゴの作成で注意しておくべき点が1点だけあり、背景を透明にしておくことです。

これをしておかないと、背景に色が入っているヘッダに白抜きでロゴが表示されてしまったりするため、作成時は背景が透過されているPNG形式になるようにしましょう。

尚、画像サイズは使用するテーマにもよりますが、高さ50px以内・幅300px以内くらいで作成しておけば大体のテーマでの使用上問題はありません。

ほとんどのテーマでは高さの指定があり、幅は成り行きになっていることが多いようです。デザイン上、自由度を持たせてあるが、一定の高さを超えるとスマホ表示時などで崩れが発生する可能性があるからだと思われます。

詳しくはご使用中のテーマのマニュアルをご確認ください。

テーマサイズ(主に高さ)の指定
SWELL高さPC32~120px、追従ヘッダ24~48px、スマホ40~80px
DIVER250×60pxを推奨
THE THOR高さ30pxがデフォルトで最大70pxまで設定可(10px刻み)
Affingerスマホは高さ48pxがデフォルト
Cocoon特に指定はないが管理画面で設定可
参考:有名テーマのロゴ画像の指定について(設定画面内での推奨値)

また、作成したロゴは必ず画像の圧縮をしておきましょう。TinyPNGを使うと簡単です。

ロゴを作るときのポイント

ロゴマークとロゴタイプについて知る

ロゴは、大きく分けると以下に分かれます。

  • 絵のみ(例:アップル)
  • 文字のみ(例:Facebook)
  • 絵と文字の組み合わせ(例:マクドナルド)

ロゴに使われる絵の部分を「ロゴマーク」、文字の部分のことを「ロゴタイプ」といいます。

ブログで作る場合は、マークのみ、タイプのみにせず、マーク+タイプのロゴを作るのがおすすめです。

マークのみだとデザイン性があり印象に残りますが、名前を覚えてもらいにくくなります。一方タイプのみだと名前を覚えてもらいやすくなりますが、印象に残りづらくなります。

両方を使うことで、印象に残しつつ、名前も覚えてもらうことができます。尚、ロゴタイプは本来元のフォントから少し変形して作ることが多いですが、変形しなくても、サイトの他の箇所で使っていないフォントを選択するだけで十分です。

Faviconにもロゴマークを適用

せっかくロゴを作るので、ロゴマークとロゴタイプの両方を組み合わせたものを作りつつ、マークのみ・タイプのみの画像も入手しておくとあちこちで使いやすいです。

特にFaviconには、ロゴマークで使ったものを縮小したものにしておくと、スマホ版の検索結果画面には表示されるので再訪ユーザーには認識しやすくなるのでお勧めです。

意味を持たせる

特にマークのほうですが、一般的に何らかの意味を持たせて作成します。

単に見た目の美しさだけを追求するのではなく、何かを表現していたり、含みを持たせていることが多いです。

例えば現在のマイクロソフトのロゴは、4つの四角とシンプルな文字の組み合わせになっていますが、以前はロゴタイプのみで、斜体がかかり、Oのところに切れ込みが入っていました。2012年に更新された現在のロゴでは、パッと見て誰でもWindowsのマークでは、と感じるはずです。

他にも、社名を意味するマークはマクドナルドやアップルでも使われています。

個人ブログにそこまでする必要はないのかもしれませんが、「なんとなくかっこいいと思ったから」で作るよりは何か意味のあるマークにする方がきちんと考えられて作られた印象になります。

まとめ

このページのまとめです。

  • ロゴマークは最終的に指名検索での集客を目指すのであれば設定しておくべき。
  • 無料で作成するツールが複数あるので色々試し、気に入ったものを選ぶと良い
  • サイトが成長してきたら完全オリジナルなロゴをプロに発注するのも良い、費用はかなりかかるものの、独自性が高まる
  • 作成時には透過PNGで作ると背景色を選ばない
  • サイズは縦を50pxで幅を成り行きにして作っておくと大体のテーマで問題なく使える
  • ロゴにはマークとタイプがあり、ブログ用には両方を使ったものを作ると良い
  • ロゴマークを使ってFaviconを設定しておくと、再訪者の目印になってよい
  • マークを作るときは何かを表しているものになっているのがベスト
このページの内容(目次)
閉じる