ブログ・SEOの話

ブログのロゴ画像の作り方。設定方法やサイズ、デザインのコツまで解説

どうも、たくろーです。

今回は「ブログのロゴ画像の作り方」を解説していきます。

テキストロゴのままでも悪いわけではないのですが、オリジナルのロゴ画像を用意しておいた方が「おっ、ちゃんとしたブログだ」と思ってもらえて信頼性が上がるように思います。

たくろー
たくろー
僕は新しいブログを立ち上げるときは、ファビコンと共に「ロゴ画像」も必ず最初に用意してますよ。

そんなブログロゴ画像の作り方やデザインのコツまで解説していきます。

ブログのロゴ画像とは?

ブログのロゴ画像とは「ブログ名」のテキストの代わりにヘッダーに表示する画像です。

ヘッダーは基本的にずっと表示されていますので、まさに「そのブログの顔」とも言える画像ですね。

一般的に「png」形式の背景透過ファイルで用意することが多いのが特徴です。

ブログのロゴ画像を用意するメリットとは

ロゴ画像があるのとないのとでは、結構見た目が変わります。

下記に比較画像を用意しました。

ロゴなしの方のテキストが小さくなって極端な感じになりましたが、どちらにせよ印象はかなり変わります。

やっぱりロゴ画像があった方が「それっぽく」なりますので、そういう意味では「読者からの信頼感」をアップさせる一つの手段とも言えますね。

逆に「オリジナルロゴを用意するデメリット」は一切ありませんので、こだわりがなければ用意しておいて下さい。

ブログのロゴ画像の作り方。適正サイズは?

ブログのロゴ画像の作り方。適正サイズは?

では、ロゴ画像の作り方をお伝えしておきます。

ロゴ画像についての前提知識として「ジャストサイズで作ると、Retina(高解像度)ディスプレイだと滲んで見える」という注意点があります。

そして今どきのスマホとかPCモニターは大体Retinaディスプレイですので、基本的に対応しておくべきですね。

基本的には「実際に表示させる2倍の大きさで作って50%で縮小表示する」というのがRetina対応のセオリーです。

例えば横125px:縦30pxで表示させたいとして、そのサイズで作ったものをそのまま表示させると、ディスプレイによってはインクが滲んだような見栄えになってしまうということです。

そこで横250px:縦60pxで作ったロゴを50%表示させれば綺麗に見えるので、ちょっと大きめに作っておきましょうということですね。

たくろー
たくろー
とはいえ50%表示じゃないといけないってこともないので、僕は適当に大きく作って適当に小さく表示させてます。

その注意点も含めつつ、ここではロゴ画像の作り方を「Photoshop」を例に挙げて解説していきます。

(他の画像編集ソフトでも、流れやポイントはだいたい一緒です)

1. ロゴのサイズは「横600px:縦180px」に設定

1. ロゴのサイズは「横600px:縦180px」に設定

まずはカンパスサイズを設定しますが、僕はいつも「横600px:縦180px」で作ってます。

たくろー
たくろー
特に決まりがあるわけでもないんですが、大体このくらいの大きめサイズで作っておけば最終的に良い感じに収まります。

一部のWordPressテーマでは、ロゴ画像を設定する項目に「推奨サイズ」が書かれていることがありますが、その通りに用意したら大体ロゴ画像が荒くなります。

実際に表示するロゴは「横125px:縦30px」くらいのサイズ感になることも多いのですが、純粋に2倍〜3倍くらいのサイズで作っておいた方が最終的に綺麗に表示されますので、基本「大きめ」がおすすめです。

2. 背景は透過させつつ、好きなデザインで作る

あとは好きなデザインのロゴを作るだけですが、基本的には背景を透過させたデザインを用意しておくと安心です。

背景が非透過のロゴと透過のロゴと比べると、下記の画像のようになります。

背景透過のロゴと非透過のロゴを比べた画像

デザインによっては特に問題ない場合もあるのですが、基本的には透過させておいた方が応用が効くんですよね。

もちろん背景色をつけたいなら良いのですが、そうでなければ「あえて透過させない」という選択肢もよくわからないので、透過デザインにしておきましょうということです。

3. pngで書き出す

あとはPNG形式を選び、透明部分もそのまま保存するようにチェックを入れて書き出すだけです。

ちなみに同じPNGでも「PNG-8」とか「PNG-24」とか種類がありますが、これは扱えるデータ量を表しています。(8なら8bit分、24なら24bit分のデータが含まれます)

ちょっとでも軽くしたいならPNG-8を選ぶと良いですが、そこまで変わらないと思うので基本的にはPNG-24を選んで綺麗なロゴ画像を用意しましょう

イケてるロゴ画像のデザイン例

イケてるロゴ画像のデザイン例

ここからは、イケてるロゴ画像のデザイン例をご紹介していきます。

個人ブログだと勝手に取ってくるのがちょっとなーと思いましたので、今回は有名どころのブランドロゴから探してきました。

デザインの方向性としては大まかに3種類に分けられると思いましたので、例としてご紹介しておきます。

サイト名の文字列を活かしたロゴデザイン

ブログ名の文字列を活かしたロゴデザイン

サイト名の文字列にちょっと手を加えたようなロゴは、有名企業でも個人ブログでも多いロゴの作り方です。

和風のサイトなら縦書きのロゴもあったり、サイトのイメージに合わせてカラフルにしたり、何かしら意味を持たせたりと、各サイトこだわりが見えますね。

シンプルですので、一番参考にしやすい種類のロゴデザインです。

サイト名+アイコンのロゴデザイン

サイト名とアイコンを並べて表現したロゴ画像も一般的です。

読者的にもブランドをイメージしやすいですし、わかりやすくておすすめの作り方ですね。

例えばフリーのアイコンサイトなどから画像を拾ってきてサイト名の横に並べるだけでも、それっぽくなりますよ。

がっちりこだわったロゴデザイン

がっちりこだわったロゴデザイン

ガチガチにこだわったロゴデザインにしている企業も多いものです。

個人ブログだとなかなか難しいかもですが、ココナラとかで発注すると良いデザインが上がってくるかもしれません。

ロゴデザインにこだわってみたい方は、この辺りも参考にしてみて下さい。

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

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

最後に、作ったロゴ画像をブログに設定する方法をお伝えしておきます。

各WordPressテーマごとに微妙に方法が違いますので、いくつか例に挙げて解説していきます。

JINでロゴ画像を設定する方法

JINでロゴ画像を設定するには「外観→カスタマイズ→ヘッダー設定」と進みます。

こんな風に、サイトロゴのところに用意した画像を設定しましょう。altタグは、基本的に「(ブログ名)のロゴ画像」としています。

その下にロゴのサイズや上下余白を設定する項目もあるので、プレビューを見つつ設定しましょう。

ちなみに当ブログの場合は、600px – 180pxで作ったロゴを20%で表示させています。この辺りは好みに合わせて設定して下さい。

SWELLでロゴ画像を設定する方法

SWELLでロゴ画像を設定するには「外観→カスタマイズ→ヘッダー」と進みます。

SWELLは「ヘッダー背景を透過させる設定」ができるので、その場合は2種類のロゴ画像を設定することになります。

僕が運営する「北海道フォト」のロゴ画像設定を例に挙げて解説します。

まず通常の「ロゴ画像」は、追従ヘッダーに表示されるものになります。一つ一つの記事でも表示されるので、こちらがメインですね。ヘッダーの色に合わせたロゴ画像を用意しましょう。

画像サイズも、適時サイズを調整しましょう。僕の場合は下記の通りに設定してます。

「PC 80px:追従ヘッダー 48px : SP(モバイル)80px」ですね。とはいえ好みですので、色々調整してみて下さい。

ちなみに「透過時のロゴ画像」は、最初に表示されるロゴ画像です。ヘッダー画像のカラーリングに合わせた色で作りましょう。

SWWLLだと、ヘッダーを追従させるならこんな風に2種類用意する必要があります。

コクーンでロゴ画像を設定する方法

無料テーマのコクーンでロゴ画像を設定するには「Ccoon設定→ヘッダー」と進みます。

ヘッダーロゴの部分で設定すればOKですね。

ロゴサイズは縦横選べます。好きに設定して下さい。

ブログのロゴ画像は、作っておいて損はない

ロゴ画像は、ブログの顔になります。

もちろんブログの雰囲気によってはテキスト表示でもマッチすると思いますが、基本的には何か画像を用意しておいた方が「ちゃんと運営している感」が出ます。

ロゴ画像を作っておいて損はありませんので、ぜひ設定してみて下さい。

そのときは、ついでに「ファビコン」も合わせて用意しておきましょう。

ブログ用のファビコンの作り方と設定方法。サイズや拡張子、デザイン例も解説どうも、たくろーです。 今回はブログに設定する「ファビコン」の作り方と設定方法を解説します。 僕は新しくWordPressブ...
ABOUT ME
たくろー(WEBライター)
ブログ飯を達成しましたが、好きでサラリーマンをしています。 家ではブロガーをしつつ、企業オウンドメディアの編集長やwebライティング講師として活動。以前はブラックなアパレル企業で「人事」や「エリアマネージャー」を経験。「一つの会社とか収入源に依存しない働き方がいいよね」というスタンスです。下記URLより詳しいプロフィールもご覧ください。
30秒でOK!退職代行診断チャート

30秒診断

あなたにピッタリな退職代行は?

簡単な質問に答えるだけで、あなたの状況に合った退職代行がわかります。

Q3:有給は使いたいですか?

Q3:パワハラやセクハラを受けていますか?

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。24時間365日対応で、有給も全て使って即日退職できます。
25,000円ポッキリ相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。会社と交渉する法的な権利があるので、安心して即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。有給も全て使って即日退職できます。
実はパワハラやセクハラなどの具体的な被害が無い場合は、弁護士に頼んでも賠償請求は難しいかもしれません。
そんな会社に時間を割くくらいなら、弁護士よりリーズナブルな「労働組合」のサービスでスッキリ辞めましょう。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給が全部使えるように交渉してもらえて、とにかく安心して辞められます。
料金は50,000円ポッキリと労働組合のサービスより高くはなりますが、その分「弁護士」というネームでトラブルのリスクなく辞められるでしょう。

お金よりも「安心」を取りたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給だって全て消化できるのはもちろん、損害賠償請求までお願いできます。
退職代行自体の料金は50,000円ポッキリ。それに加えて賠償請求は「成果の20%」の成果報酬でお願いできるシステム。

損害賠償請求までお願いしたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

診断結果

あなたにおすすめの退職代行は

「退職代行J-NEXT」です。

J-NEXTは普通の会社が運営する退職代行なので、有休消化などはお願いできません。
とにかく20,000円ポッキリという料金が魅力で、退職代行業界の中でもトップクラスの格安サービスです。

安心よりも「料金」を取りたいあなたは、退職代行J-NEXTに相談してみて下さい。

\CHECK NOW/

J-NEXTならとにかく安く辞められる
さっそく無料相談する

退職代行J-NEXTの口コミ・評判。20,000円ポッキリで即日退職!退職代行J-NEXTは、退職代行業界最安水準の20,000円ポッキリの価格がウリ。さらに、同価格帯のサービスと比べると圧倒的にサポートが...

もう一度診断する