【自己流】サイトロゴデザインのやり方|思考プロセスを解説

サイトロゴを作ったので、どうやってそのデザインにしたのかを備忘録がてら記事に残します。

「サイトロゴを作りたいけど、どこから始めればいいんだ……」という人のお役に立てれば幸いです。

この記事では、実際に私が作成したロゴを基に解説しています。

あくまで自己流ということで、こんなやり方をする人もいるんだなあくらいに捉えていただければ幸いです。（予防線）

ちなみに、以下がサイトロゴを設定した後のトップページです！なんか、「自分のサイト」って感じが増してテンションが上がりますね……！

一人ブレインストーミングで方向性を決める

まずはデザインの方向性を決めていきます。

上図のように、まずサイト名の「むくログ」を出発点にして、自分がそのサイト名に持っているイメージと、音の響きからくるイメージとをどんどん追加していきます。

たとえば「むくログ」に対して「やわらかい」という連想をしたなら、「やわらかい」にはどんなイメージがあるのかを考えていきます。つまりは、連想ゲームをしていきます。

コツは、思いついたことはとりあえず全部書き出すことです。

ある程度書き出したら、それらの要素からデザインの方向性を決めていきます。

私の場合は、「まるっこくて優しげで、親しみやすい感じがいいなあ」という方向で考えをまとめています。

画像ではすごく迷っている形跡ありますが、まあガチガチに方針固めなくてもふわっと決まっていればいいかな、と……。

「どのフォントを使うとかどの色を使うとかは明確に決まってないけど、だいたいこういう方向性で作っていくよ」というのが決まれば問題ありません。……ということにしています。

多様なフォントを試していないのは怠慢……という気もしますが、文字の配置や装飾をスケッチしてく間に、「あれ、これ、手書きをそのままサイトロゴにするの……よくない？」となったので、色々フォントは試さずによりよい手書き感を出す方にシフトしていってます。

赤丸を付けているものが決定したデザインですが、ブレインストーミングで決めた「丸さ、優しさ、親しみやすさ」をかなり的確に表現できているのではないかと自画自賛しています。

今回のデザインは割とサクサクっとストレートに決めてしまいましたが、もちろんもっとたくさん案出して配色試して……という感じに存分にこねくり回すのがいいと思います。

納得いくまで練り練りしましょう。

最後に決定したデザイン案を清書します。私の場合はAdobeのIllustratorでベジェ曲線をぐりぐりして、「良い感じに手書きに見える&綺麗に見える」ように整えていきました。

このようにベクターデータ（数値で制御する画像データ）で作成しておけば、拡大縮小しても劣化しない上、後から線の太さや丸みを簡単に変更できるのでおすすめです。

とはいえ、無理にAdobe製品を使う必要はありません。無料ツールのFigmaでもベクターデータは作成できますし、むしろFigmaが使えるといろんな場面で重宝するので、これを機に学んでみるのもいいかもしれません。

そのほかクリップスタジオでもベクター書き出しは可能ですが、こちらは線情報しか反映されない場合があり、色付きのデザイン制作には少し工夫が必要です。コストを抑えたい方は、まずFigmaを検討してみるのが良いでしょう。

ただし、苦労してベクターで作ったSVG形式の画像も、標準のWordPressではセキュリティ上、そのままアップロードすることができません。

もしPNGやJPEGで書き出した際にロゴがぼやけてしまう場合は、SVGを許可するプラグインを導入して対応しましょう。

私の環境では、今のところPNGでも十分綺麗に表示されているので、しばらくはこのまま様子を見てみることにします。

以上、サイトロゴデザインのやり方でした。

やっているのはこの3ステップです。プロのデザイナーというわけではないので、「これが正しいデザインのやり方！」とは口が裂けても言えませんが。

ただ、正しいかどうかはともかく、「デザインをするにしたって、まず何から始めればいいんだ？」と思っている人もいるのではと思っていました（私がそうでした）ので、私のやり方をまとめてみました。

この記事が、そんな風にデザインに悩んでいる方の一助になれば幸いです。