【無料】ブログのロゴ作成術｜元Webデザイナーが初心者に力説！

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

有名ブログはみんなブログ名を「おしゃれなロゴ」にしていますよね。

そこで、記事の前半で「ロゴの種類と５つの注意点」を。

後半では「ロゴ制作（無料・有料編）とWordPressの設定方法」について。

本記事を最後まで読むことで、「お気に入りのロゴ」をブログに冠することができますよ！

ブログをロゴ画像にする３つのメリット

ここで言う「ロゴ」とは、ブログ名を画像にしたものです。

テキストで済ませているサイトをたまに見かけますが、ロゴのほうが絶対いい！

ホントはもっとあるのですが、メリットは次の３つ👇

ロゴを使うメリット

まず、ブログ名がロゴになっていると、読者から「ちゃんとしてる」と思われます。

わざわざロゴまで作ってるのに、記事が１本しかない！わけないからです。笑

また、「お気に入りのロゴ」をヘッダーに冠することで愛着が生まれます。

ロゴは全ページのトップに表示されますからね。

ロゴの使いみち

ロゴ画像はヘッダー以外にも使えるので、「一石何鳥」にもなりますよ。

そもそも「ブログ名」が決まってない人は別記事をどうぞ👇

関連記事【405例】ブログ名が思いつかない！おしゃれなタイトル一覧

関連記事【Canvaで５分】ブログ用アイキャッチ画像の作り方と最適サイズ

【実例で解説】ブログのロゴ３つの種類

ブログの「ロゴ画像の種類（正式名称）」は、次のとおり。

この章のもくじ

サクッといきます！

種類①ロゴタイプ

「フォントとカラー」だけ決めればいい最もかんたんな作り方です。

ブログのロゴはPCでもスマホでも「横長」のほうが見栄えよし◎

当ブログでは

これだけでも充分〝っぽく〟なりますよね？

種類②シンボルマーク

ブログのイメージを「ワンポイントのシンボルマーク」に落としたタイプですね。

とはいえ、個人ブログでは「ファビコン」ぐらいにしか使いみちがないんです。

ファビコンとは

ブラウザの「タブ」や、スマホでは「ショートカットアイコン」に表示される画像のことですね。

なので、次のようにテキストと組み合わせる「ハイブリッド」がオススメ👇

種類③ロゴマーク（ロゴ＋マーク）

手間はかかりますが、これがいちばんオススメです。

テキストでブログ名を、マークでサイトのイメージを伝えましょう。

バラせば「ファビコン」にも使えますからね。

ブログのロゴデザインでやってはいけない５つの注意点

ブログのロゴデザインでやってはいけない「注意点」は次のとおり。

この章のもくじ

注意点というか「コツ・ポイント」ですね。

大前提として

前提ルールは長くなるので割愛しますが、押さえておいてくださいね。

くわしくは、「ブログのヘッダー画像をおしゃれに作成するコツ」に書いておきました。

それではサクサクいきます！

注意点①視認性が最重要

テキストであれシンボルであれ、ロゴにとって最も重要なのが「視認性」です。

つまり、「めちゃくちゃ見やすくしよう！」ということ。

とはいえ、ブログにはイメージがありますよね？

フォントの場合

視認性なら「ゴシック体・セリフ（Serif）」ですよね。

「手書き風」や、デザインに凝るあまり「クセがスゴいフォント」は控えたほうがいいです。

有名ブランドのロゴもみんな「シンプルなフォント」になりました。

とはいえ

あなたのブログのイメージに合わせて選びましょう。

イメージカラー

たとえば、転職サイトなら「誠実さを表すブルー系」が多いですよね。

ロゴは「視認性 × イメージ」が大切です。

注意点②横長で作る

結論、ブログのロゴは「横長」で作りましょう。

なぜなら、横長じゃないとファーストビュー（スクロールなしで目に入る部分のこと）に高さが出るから。

PCでもスマホでも「横長」のほうがスッキリ収まっていいですよね。

注意点③ロゴマーク（テキスト＋シンボル）で作る

ブログ用ロゴ画像は、テキスト＋シンボルの「ロゴマーク型」で作りましょう。

キャッチフレーズがあると尚良し◎

なぜなら

とはいえ、シンボルマークまで作る余裕がなければ、ファビコンは「プロフィール画像」でOK。

個人ブロガーの多くはプロフィール画像をファビコンに採用してますよね。

関連記事【実例あり】ブログのプロフィール画像・アイコンの作り方９選

注意点④なるべく大きいサイズで作る

ロゴ画像はブログ以外でも活躍するので、なるべく大きいサイズで作っておきましょう。

小さいと環境によっては拡大され、ボヤけてしまいますからね。

縦は横に合わせるだけ

あとは、それぞれの推奨サイズに縮小すればOK。

注意点⑤背景は透過・拡張子はPNG

ロゴ画像の背景はかならず「透過」してください。

ヘッダーの背景色に合わせれば、違和感はありませんが・・・

なぜなら

たとえば、ヘッダーの背景色は「黒」だけど、フッターは「白」にしたい時などですね。

また、背景を透過するなら「拡張子はPNG形式」で決まり！

PNG → WEBPに変換

軽量化のやり方は「ロゴ画像を縮小・圧縮する」で解説しています。

PNG形式は少し重いので、プラグインでWEBP形式に変換しましょう。

関連記事【2024】WordPressのおすすめプラグイン３選＋７

ボクは『Webp Express』を使っています。

ロゴ画像の作り方５選

では、有料・無料問わず「ブログ用ロゴ画像の作り方」を解説します(｀・ω・´)ゞ

【無料】自分で作成！おしゃれなブログのロゴジェネレーター（サイト・アプリ）７選

ロゴジェネレーターを使えば、ブラウザ上で「おしゃれなロゴ」が作成できます。

ロゴジェネレーター７選

作り方は大体こんな感じ👇

ロゴの作り方

ブログ名を入力したり、ジャンルをクリックしていくだけで、おしゃれなロゴを複数提案してくれます。

とはいえ、個人的にはあまりオススメできません。

メリットとデメリット

とりあえず触ってみて、イマイチなら『Canva』で自作してみましょう👇

関連記事【405例】ブログ名が思いつかない！おしゃれなタイトル一覧

【無料】おしゃれなブログのロゴを『Canva』で自分で作成

『Canva』ならブラウザ上で、もっと自由度の高いロゴを作成できますよ。

この章のもくじ

ブロガーにかんたんな「画像編集スキル」は必須なので、この機会に無料登録しておきましょう。

ステップ①テンプレートを選ぶ

検索ウインドウに「ロゴ」と入力してクリック。

もしくは、「キーワード」を入力してもOK。当ブログなら「十字架」とかですね。

良さそうなのをテンプレートの中から選んでください。

おしゃれなのばかりで選べないですよね！

ステップ②ロゴ画像を作る

注意点でお話しした「視認性」ガン無視でこちらを選びました（だって、かわいいんだもん）。

ロゴ画像なら、次の作業で完成するはず。

Canvaの使い方

パーツを「グループ化」して、ブログ用に横長に配置すると・・・

一瞬で完成しました！笑

パーツをすべて選択した状態で「… › 選択した素材をダウンロード › ダウンロード」をクリック。

これで背景ではなく、パーツに合わせたサイズでダウンロードできますよ。

とはいえ、ロゴ画像にマストの「背景の透過」は無料版ではできないんです。

ステップ③ロゴ画像の背景を透過する

『removebg』にロゴをアップロード＆ダウンロードすることで、かんたんに「背景透過」画像を作ることができます。

もちろん「無料」です。

透過したら、画像を軽量化するのも忘れないでくださいね。

おしゃれなブログのロゴを『ココナラ』で作成

有料でもよければ、ロゴ画像はプロに頼むのがいちばん！

『ココナラ』で発注するのが一般的です。

ロゴ画像の作り方

相手がフリーランスなら、予算は「5,000円」から依頼できそうですね。

ココナラの取引の流れ

その前に「見積り・カスタマイズの相談をする」こともできますよ。

『メルカリ』を利用したことがあれば、イメージしやすいですよね。

トークルームで最初に送るメッセージは、以下をコピペ・アレンジして使ってください👇

右上のCopyをクリック

はじめまして、ヘボと申します。

◯◯さんのデザインがめちゃくちゃ好みで購入させていただきました！

ブログの「ロゴ画像」をお願いしたいです。

・ブログのURL：hebochans.xsrv.jp
・サイト名：ブログの神様｜THE GOD OF BLOG
・キャッチフレーズ：文章だけで生きていく。
・サイズ：1,200px × 250px

「参考イメージ」を添付しますので、合わせてご確認ください。

・形式：png（背景透過）
・解像度：300dpi以上
・納品希望日：◯月◯日
・その他の要望：X（旧Twitter）のヘッダー画像にも使用予定

お取引終了まで、よろしくお願いいたしします。

※「見積もりやカスタマイズの相談をする」には専用のフォーマットが用意されています。

参考サイト３選

ロゴの「イメージ」は参考サイトで探してみてくださいね。

\ 300円割引クーポンがもらえる /

無料で会員登録

WordPressでブログのロゴを設定する方法

ブログのロゴ画像を「WordPressで設定する方法」は、次のとおり。

この章のもくじ

とはいえ、ロゴ画像の設定方法は「WordPressテーマ」に依存します。

などでググってみてくださいね。

本記事では、WordPressテーマ『AFFINGER』を例に解説します👇

ステップ①ロゴ画像を縮小・圧縮する

ロゴが完成したら『Sqooush』に放り込んで、画像を圧縮しましょう。

デフォルトの「Quality：75」なら劣化しない程度に画像を軽量化できるのでオススメです。

WordPressテーマに推奨サイズがあれば、大きめに作ってそのサイズに縮小すればOK。

ステップ②ロゴ画像をアップロードする

から「画像を選択」をクリックして、ロゴをアップロード。

「代替テキスト（alt）」には〝ブログ名〟を入れましょう。

フッターとモバイル用

当ブログでは、フッターには同じロゴ画像を。

スマホでは背景色を反転してるので、白いロゴ画像を使用しています。

ステップ③調整する

当ブログはロゴ画像を「センター寄せ」にしていますが、「左寄せ」のサイトも多いですよね。

また、画像のサイズによっては、思った以上に〝高さ〟が出て「デカい！」と感じるかも。

とりあえず「logo-test-01.png」などのファイル名でアップロードしてみて、サイズを調整していくのがオススメですよ。

【Q&A】ブログのロゴ画像のよくある質問

ブログのロゴ画像の「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：ブログのロゴ画像の推奨サイズは？

A推奨サイズが決められているWordPressテーマのほうが珍しいです。

ブログのロゴ画像は、ボヤけないようになるべく大きく作るのが正解です。

Q2：ロゴ制作にかかる費用・相場はいくらですか？

A『ココナラ』では「5,000円〜」ありますね。

有料なら

ロゴ制作なら『ココナラ』がいちばん話が早いですよ。

\ 300円割引クーポンがもらえる /

無料で会員登録

Q3：ブログで使う画像には何がある？

A「ロゴ画像」を含めて、次の４つですね。

画像編

ロゴを使ってヘッダー画像を作ったり、プロフィール画像を使って吹き出しを作ったり。

アイキャッチ画像の型を作って時短するのもいいですね。

関連記事【コピペOK】ブログの吹き出しの作り方３選をWebデザイナーが解説

【まとめ】ロゴを作成してブログをブランド化しよう

「ブログのロゴ画像」について解説しました。

まとめ

本記事で紹介した「注意点やサイト」を参考に、おしゃれなロゴ画像を作ってみてくださいね！

『ココナラ』でサクッと外注して、記事の執筆に集中するのもいいですよ👇

\ 300円割引クーポンがもらえる /

無料で会員登録

ブログを始めたい方へ