こんにちは、ikuzo(いくぞう)です。
私がブログを始めて一番最初にやりたかったこと。それは、
カッコいいロゴを作りたい！でした。
なのに最初は、こんなロゴだったんですよね…(^_^;)
今回は私がやったロゴの作成方法や
様々なツールを使った、ブログのロゴの作り方を紹介します。
私がやったブログのロゴの作り方
はじめは私がやったロゴの作り方です。
さっきのロゴよりも後から作ったのが、こちらのロゴです。
このロゴは、フリーフォントで簡単ロゴ作成というツールを使って作りました。
作り方は、まず「表示するテキスト」の欄にブログ名（サイトのタイトル）を入れます。
フォントを選ぶと、どんなロゴになるのかプレビューで確認できます。
フォントはかなりの数があります。
ロゴをサンプルから探すという方法もあります。
※フォントによっては漢字がなかったり、「カナ・かな」や「英数」専用のものもあります。
気に入ったフォントが見つかったら、サイズ（フォントの大きさ）を変更します。
ロゴは大きめに作りましょう。
解像度2倍のRetinaディスプレイでも綺麗に見えるように、
表示したい倍の大きさで作成することをおススメします（目安として幅が600～1000くらい）。
赤枠で囲った部分が、設定する箇所です。
フォントのサイズを決めてから、「X・Y座標」と「幅・高さ」を調整します。
「X座標」の値を大きくすれば文字が右方向へ、「Y座標」を大きくすれば下方向へ移動します。
値を変えたら「変更」を押してプレビューでバランスを確認します。
「テキスト色」のコードはカラーコード表やHTMLカラーコードなどで調べられます。
背景無色のロゴを作るために「透過PNG」にチェックを入れます。
そして今回は、あとで右側にイラストを入れるつもりなので、ロゴの上下と右側に余白を設けました。
ご参考までにプレビューの下の方には、ロゴに枠線をつける機能もあります。
裏ワザ？として、ロゴと同色の「枠」をつければ、ロゴが少し太くなります。
最後に「ダウンロード」を押して、ロゴの完成です。
ロゴに追加するイラストを編集
次に、ロゴの右側に設けた余白にイラストを追加するやり方です。
「イラストAC」というサイトには、無料で使えるイラストが多数あります。
今回は、Tossanさんという方が作った、こちらのイラストを編集して使わせていただきました。
使用するのは「PhotoScape X」という、無料の画像編集アプリです。
ここでは「PhotoScape X」を使って、
イラストをロゴと同じ「白」にして、線以外は透過させる方法を説明します。
PhotoScape Xの基本的な使い方
イラストの白と黒を逆転させる
PhotoScape Xを起動させたら「写真編集」を選択して、さきほどのイラストを画面にドロップします。
編集画面で「ネガ」のボタンを押して白と黒を逆転させます。
白と黒が逆転しました。続いてイラストを左右反転させます。
これをいったん保存します。
イラストの黒い部分を透過させる
今度は、イラストの白い線以外を透過させます。
「カットアウト」を選択して、白黒逆転させたイラストを再び画面へドロップします。
「マジック消しゴム」を選び、顔の黒い部分に十字カーソルを当ててクリックします。
（わかりやすいように背景色を変えました）
するとクリックした部分の色が変わって、背景と同じく「透過」したことが分かります。
同じように色のついた部分をすべて透過させたら完成です。
ロゴとイラストを合体させる
できあがったロゴとイラストを合体させましょう。
「写真編集」を押して、ロゴをドロップします。
これではロゴの範囲か分からないので「枠線」を表示させます。
そして、右上にある「挿入」を押してから、イラストをドロップします。
イラストの4隅の「〇」で大きさを変更、イラストをドラッグして位置を調整します。
今回は必要ありませんが、余白が多すぎたら不要な部分を「切り抜く」こともできます。
失敗しても「取り消し」のボタンを押すと元に戻るので、どんどんやってみましょう。
これでイラスト入りのロゴの完成です。
Canvaを使ったロゴの作り方
私がロゴを作ったやり方は以上の通りですが、
今度は「Canva」というデザインツールを使ってロゴを作ってみましょう。
Canvaにアクセスして、Googleアカウントなどでログインします。
「デザインを作成」を押して「ロゴ」を選択します（スクロールすると出てきます）。
テンプレートの中から好きなものを選びます。
文字をクリックしてブログ名などに変更します。
フォントや文字の大きさを変えることもできます。
小さい文字を消して、マークの位置を調整しました。
右上の「共有」→「ダウンロード」を押します。
このままダウンロードするとサイズは500px×500pxと、ロゴがやや小さめです。
サイズを大きくするには、Canva Pro（30日間の無料トライアル）に登録しましょう。
30日以内に解約すれば料金はかかりません。
Canva Proなら無料版ではできない背景透過のロゴもダウンロードが可能です。
「Proには登録したくない」という方は、とりあえずそのままダウンロードして下さい。
そして、さきほどのPhotoScape Xを使いましょう。
「カットアウト」→「マジック消しゴム」を選択して、背景に十字カーソルを合わせてクリックします。
これで背景透過のロゴが完成しました（ただし、サイズは小さめです）。
LOGOMAKERでロゴを作る
一度に大量のロゴが出てくる、LOGOMAKERという海外のサイトがあります。
「その他」を選んでブログ名を入力します。
好きなロゴのスタイルを選びます。
すると、たくさんのロゴが出てきます。
あとは好みのロゴを選んで編集するだけです。
唯一無二のロゴを作る（ココナラ）
出典：ココナラ
ここまで紹介したロゴの作り方は既成フォントを使うため、
どうしても人と似たようなロゴになる可能性があります。
人とは違う唯一無二のロゴを作りたい方は、
ココナラ
というサイトでデザイナーさんにお願いするという手があります。
ロゴは4,000円程度から作ってもらえます。
「自分で作るのは面倒」「人と違うおしゃれなロゴを作りたい」という方はココナラを覗いてみて下さい。
最後に
いかがだったでしょうか。
今回はいくつかのブログのロゴを作る方法を紹介しました。
文中でもお話ししましたが、ロゴを自分で作る時は、少し大きめに作っておくのがポイントです。
あまり小さく作りすぎるとロゴがぼやけて見えることがあるからです。
表示させる倍くらいの大きさで作っておけば問題ありませんが、
表示させる大きさをまだ決めていないという方は、横幅1000px（ピクセル）くらいで作っておくといいでしょう。
大きく作りすぎたら、あとで「PhotoScape X」でロゴを小さくしたり（サイズ変更）、
あとは「TinyPNG」でファイルサイズを圧縮するという方法があります。
画像の圧縮については、こちらの記事も参考になると思います。
本日は最後まで読んでいただき、ありがとうございました(^_^)
コメント
ロゴの作成方法から設定までわかりやすくて、自分でも簡単にロゴを作れました！ありがとうございます。
どんとさん、うれしいコメントありがとうございます！
簡単にロゴが作れないか悩んでいたところ、ikuzoblogさんを発見しました！
わかりやすい解説で、ロゴを作ることができました！
有用な記事をありがとうございます╰(*°▽°*)╯
ヒロセさん、コメントありがとうございます！
サイトのロゴ拝見しました。
いい感じに仕上がりましたね。
お役に立てて何よりです( ´∀｀)b
今までブログの見た目はまったくカスタマイズできずにいたので、大変参考になりました！
ロゴづくりとボックスメニューの記事を実践しました。ありがとうございます！！
よこじかさん、コメントありがとうございます！
よこじかさんのサイト拝見しました。
少しでもお役に立てて嬉しいです！