WordPressのタイトルロゴをフリー素材とPhotoshopで作ってみる。

皆さん、サイトのロゴは自作していますか?

ブログ名だけでもいいのですが、せっかく自分のサイトを持っているならアレンジしたいな~と思いますよね。

わかな
アイディアはあるんだけど、イラストが描けません‥という方にはフリー素材をオススメします。
ねこ先生
フォントやアイコンを無料で使わせてもらえるサイトがあるよ。

実際に自分のアイディアとフリー素材同士を組み合わせて、サイトのロゴを作ってみました。

私は画像編集にPhotoshopというソフトを使っていますが、Photoshopがない方は「GIMP」という無料の画像編集ソフトがオススメです。

初心者でもできる画像編集+加工

GIMP(ギンプ)初心者の方に向けて、GIMPの基本的な使い方から画像の編集や加工を、わかりやすくご紹介しています。…

わかな
GIMPはイラストサイト「pixiv」でも使っている絵描きさんが沢山いますよ。
スポンサーリンク

フリー素材

フリー素材とは、個人や営利目的の会社が自由に使える素材です。
素材の種類はイラスト・フォント・写真・文章・BGMなど様々です。
(私は詳しくないですが、プログラミング関係だとコードなどもフリー素材に入るのかな?)
※ただしフリー素材の中には「商用利用禁止で個人使用のみOK・アダルト禁止・許可が必要」など、利用規約・使用条件がそれぞれありますので、よく読んでから使いましょう。

当サイトでもよく使わせてもらっているフリーイラストや写真サイト↓

・いらすとや

いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。…

・ぱくたそ

無料の写真素材はフリー素材のぱくたそ

ぱくたそは人物(男性・女性)や風景の写真、背景に使いやすいテクスチャ素材など、すべて無料でダウンロードができるフリー素材…

・写真AC

無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンク…

スポンサーリンク

フリーフォント

こちらのサイト様を使わせてもらいました↓

フォントフリー - 無料の日本語フリーフォント投稿サイト

日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、…

・角ゴシック体
・丸ゴシック体
・明朝体
・手書き風
・毛筆体
・ポップ体
・ユニーク
・かわいい

など迷ってしまうくらい沢山あるので、自分のサイトイメージに合うフォントが見つかります。
Windowsやmacでのインストール方法もサイト内に書かれているので、とても親切です。

スポンサーリンク

フリーアイコン

こちらのサイト様を使わせてもらいました↓

商用利用可能なフリー素材です。使用条件に違反しない限り、クレジット表記・許可なしで自由に使えます。

ゲームのアイテム系・サイトのボタン・プロフィール画像・チラシの説明など何にでも使えそうですね。

スポンサーリンク

作ってみた

WordPressへの移行作業や新規記事作成でサイトロゴを考えている暇がありませんでしたので、テーマのフォントそのままでした。

アイディア出し

デザインセンスないし、ロゴのアイディアなんか出ない‥。

わかな
考えてもアイディアが出ない時は、いったん違う事をするといいよ。
ねこ先生
アイディアを考えつつ別の事をする。寝たり、お風呂入ったり、買い物行ったりするとアイディアがポッと降ってくる時があるよ。
わかな
ちなみに、私は寝る前にアイディアが降ってきたので、急いでメモしておきました。
私の場合、サイトタイトルが「札幌simple life!」+「雑記サイト」。
(特化サイトでは、扱うテーマをイメージしてロゴを決めるといいですね)
札幌といえば「北海道」

北海道といえば「冬」

冬といえば「雪」

雪といえば「雪だるま」
連想ゲームのようにしてロゴが決まりました。

素材集め

イラストを描ける人は自分で描いて「オリジナル感」を出すのもいいと思います。

今回素晴らしいフリーアイコンサイトがあったので、利用させてもらいました。

わかな
雪だるまアイコンだけで、沢山あって迷いますね。
迷いに迷って、雪だるま「4」を使わせてもらいました。

フォントは「こはるいろサンレイ」「ロンドB」を使わせてもらいました。

こはるいろサンレイ - 無料で使える日本語フォント投稿サイト|フォントフリー

こはるいろサンレイは、きんいろモザイクのロゴの「ハロー!!」という部分のデザインを参考に制作されたフォントです。きんいろ…

ロンド - 無料で使える日本語フォント投稿サイト|フォントフリー

廻想体をもとにした、角がまるくなったユニークでかわいいフォント。印象に残りやすいデザインフォントで、ロゴタイトルにも向い…

組み合わせ

イラストもそうですが、大き目に作って最後に縮小します。
私が作った時の画像サイズは4821px×1527pxでした(でかい!)。

タイトルとキャッチコピー(サイトの説明)を文字にしました。

なんとなく青色で作りたいようなイメージがあったので、イメージカラーとして青色の下地を入れています(最後に消すのを忘れないように)。
この色で見やすい文字カラーだと白(?)と思ったので、文字カラーは白で決定。

雪だるまロゴは、札幌とsimple life!の間に入れるといいかも?と思ったので札幌とsimpleの間は隙間を開けています。

元々の黒い雪だるまアイコンを白にし、白ばかりだとちょっと寂しいので雪だるまの帽子の色を薄いピンクにしてみました。

マフラーと雪を追加してみました。

文字の色を少しアレンジし、指定サイズ(使っているテーマによる)に縮小して完成です。

わかな
元々のヘッダーカラーがあるので、下地(青い部分)は最後に消してPNG保存します。その後ロゴをサイトにアップロード。
PC↓
スマホ↓

おまけ:アイコンも作る

雪だるまの部分だけ使ってアイコンも作っておきます。

PCアイコン↓

スマホのアイコン(ホームボタン)↓

ロゴで使った雪だるまを使いまわします。
サイズは正方形。私は512px×512pxで作っています。
(私が使っているテーマでは、512px×512px以上のサイズで作るように書かれています)

お好みですが、青い下地を削って角を丸くしています。

まとめ

イラストを描けない人でも、上手くアイディアと無料素材を組み合わせれば、ちょっと凝ったサイトロゴを作る事ができます。

わかな
実際、メインサイトでも無料のアイコンやフォントを使わせてもらっています。
ねこ先生
自分のサイトを「かわいく・カッコよく・おしゃれ」にするために使ってみてはいかがでしょうか?
以上
サイトロゴについてでした。
スポンサーリンク
最新情報をチェックしよう!